Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
rwd + css
<!DOCTYPE html>
<html>
<head>
<title>Allroung Trading co., Ltd.</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.coverflow{
width: 100%;
height:100%;
position: relative;
}
.coverflow>a{
display: block;
position: absolute;
top:0;
left:0;
opacity: 0;
filter: alpha(opacity=0);
/*當圖片數量增加,影片長度需更改,變為5s*圖片數量*/
-webkit-animation: silder 25s linear infinite;
animation: silder 25s linear infinite;
}
.coverflow>a>img{
max-width: 100%;
}
/*動畫關鍵影格*/
@-webkit-keyframes silder {
3% {
opacity: 1;
filter: alpha(opacity=100);
}
27% {
opacity: 1;
filter: alpha(opacity=100);
}
30% {
opacity: 0;
filter: alpha(opacity=0);
}
}
@keyframes silder {
3% {
opacity: 1;
filter: alpha(opacity=100);
}
27% {
opacity: 1;
filter: alpha(opacity=100);
}
30% {
opacity: 0;
filter: alpha(opacity=0);
}
}
/*每個圖片各延遲5秒*/
.coverflow>a:nth-child(5) {
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
.coverflow>a:nth-child(4) {
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
.coverflow>a:nth-child(3) {
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.coverflow>a:nth-child(2) {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.coverflow>a:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
/*滑入時停止播放*/
.coverflow:hover>a{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 60px;
text-align: center;
background:#686868;
color: white;
}
/* Style the top navigation bar */
.navbar {
display: flex;
background-color: #333;
text-align: center;
margin: 0px auto;
font-size: 14px;
font-weight: bold
}
/* Style the navigation bar links */
.navbar a {
color: white;
padding: 10px 20px;
text-decoration: none;
text-align: center;
margin: 0px auto;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
text-align: center;
margin: 0px auto;
}
.navbar > a{
width: 100%;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 18%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
flex: 70%;
background-image: url(image/background/white.png);
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
}
/* Footer */
.footer {
padding: 1px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 800px) {
.row, .navbar {
flex-direction: column;
}
}
img
{
height: auto;
max-width: 100%;
display: block;
}
#spic
{
line-height:10px;
padding:5px;
float:left;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onLoad="MM_preloadImages('image/line2-2.png')" background="image/background/white.png">
<!-- Note -->
<div style="background:white;padding:1px">
<h2 style="text-align:center"></h2>
</div>
<!-- Header -->
<!-- <div class="header">
<h1>Allroung Trading co., Ltd.</h1>
<p>With a <b>flexible</b> layout.</p>
</div> -->
<div>
<div class="coverflow">
<a href="#"><img src="image/banner/banner1.jpg"></a>
<a href="#"><img src="image/banner/banner2.jpg"></a>
<a href="#"><img src="image/banner/banner3.jpg"></a>
<a href="#"><img src="image/banner/banner4.jpg"></a>
<a href="#"><img src="image/banner/banner5.jpg"></a>
</div>
</div>
<div class="navbar" >
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
</div>
<!-- Navigation Bar -->
<!-- The flexible grid (content) -->
<div class="row">
<div class="side">
<h2>About us</h2>
<!--<h5>立刻联络我們:</h5>-->
<!--<div class="fakeimg" style="height:200px;">Image</div>-->
<div style="width: 100%"><img src="image/button/map1.png" alt="about"></div>
<br><br>
<h3>More Infotmation</h3>
<!--<h5>众才公司产品:</h5>-->
<div style="width: 100%">
<a href="web/about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('product01','','image/button/button_11.png',1)"><img id="product01" src="image/button/button_1.png" alt="test"></a> </div><br>
<div class="width:100%">
<a href="web/about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('product02','','image/button/button_21.png',1)"><img id="product02" src="image/button/button_2.png" alt="test"></a>
</div><br>
<div style="width: 100%" alt="Consumable parts">
<a href="web/about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('product03','','image/button/button_31.png',1)"><img id="product03" src="image/button/button_3.png" alt="test"></a>
</div><br>
<div style="width: 100%" alt="Accessort equipment">
<a href="web/about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('product04','','image/button/button_41.png',1)"><img id="product04" src="image/button/button_4.png" alt="test"></a>
</div><br>
<div style="width: 100%" alt="Electronic parts">
<a href="web/about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('product05','','image/button/button_51.png',1)"><img id="product05" src="image/button/button_5.png" alt="test"></a>
</div><br>
<!--<div class="fakeimg" style="height:60px;">image</div>-->
</div>
<div class="main">
<h2>NEWS</h2>
<h5>
<span style="color: #F9020A">※ test</span><br>
※ test<br>
※ test<br>
※ test<br>
</h5>
<!--<div class="fakeimg" style="height:200px;">Image</div>-->
<div style="width: 100%">
<img src="image/OKK.png" alt="OKK">
</div>
<div>
<br>
<span style="font-weight: bold"> test</span>
<h5>
※ test<br>
※ test<br>
※ test<br>
※ test<br>
※ test<br>
※ test<br>
※ test<br>
</h5>
</div>
<br>
<div class="spic">
<img src="image/t1.png" style="float: left; padding-right: 20px;">
<img src="image/t2.png" style="padding-right: 20px;">
</div>
<p>
<!--<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>-->
<br>
<h2>test</h2>
<h5>  test
</h5>
<div style="width: auto">
<img src="image/chapman.png">
</div>
<!--<div class="fakeimg" style="height:200px;"></div>-->
<h5>  test
<br><br>  test
<br><br>
  test
</h5>
</div>
</div>
<!-- Footer -->
<div class="footer">
<h6>
test<br>
test<br>
test
</h6>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment