<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { padding: 0; margin: 0; } /*頭部樣式*/ .header { background-color: lightblue; } /*頭部內(nèi)容區(qū)*/ .header .content { width: 90%; background-color: lightblue; margin: 0 auto; height: 60px; } /*頭部中的導(dǎo)航*/ .header .content .nav { /*清空ul默認(rèn)樣式*/ margin: 0; padding: 0; } /*去掉頭部中的導(dǎo)航子項(xiàng)樣式*/ .header .content .nav .item { list-style: none; } /*設(shè)置頭部中的導(dǎo)航自相中包含的超鏈接*/ .header .content .nav .item a { float: left;/*設(shè)置為向左浮動(dòng)*/ min-width: 80px; min-height: 60px; /*水平居中*/ text-align: center; /*垂直居中*/ line-height: 60px; /*導(dǎo)航前景色*/ color: white; padding: 0 15px;/*上下為0，左右為15*/ /*去掉a標(biāo)簽的默認(rèn)下劃線*/ text-decoration: none; } .header .content .nav .item a:hover { background-color: red; font-size: 1.1rem; } /*設(shè)置輪播圖*/ .slider { width: 90%; margin: 0 auto; } /*輪播css設(shè)置*/ #flash { width:100%; height: 535px; margin: 0 auto; text-align: center; } #flash #play { /*width:100%;*/ height: 535px; list-style: none; position:relative; /*top:0;*/ /*left:0;*/ margin: 0 auto; padding: 0 auto; } #flash #play li { display: none; position:absolute; /*top:0;*/ /*left:0;*/ margin: 0 auto; padding: 0 auto; } #flash #play li img { float: left; } #button { position: relative; bottom:20px; left:40%; list-style: none; padding: 0 0; } #button li { margin-left: 10px; float: left; } #button li div { width:12px; height: 12px; background:#DDDDDD; border-radius: 6px; cursor: pointer; } #prev { width:40px; height:63px; background:url(images/beijing.png) 0 0; position: absolute; top:50%; left:10px; z-index: 1000; } #next { width:40px; height:63px; background:url(images/beijing.png) -40px 0; position: absolute; top:50%; right:10px; z-index: 1000; } #prev:hover { background:url(images/beijing.png) 0 -62px; } #next:hover { background:url(images/beijing.png) -40px -62px; } /*設(shè)置商品列表樣式*/ .left { box-sizing: border-box; padding: 10px; border: 1px solid #555555; } .left h1 { color: #555; font-size: 1.3rem; border-bottom: 1px solid #555555; } .left ul { margin-top: 20px; padding: 0; } .left ul li { list-style: none; padding: 10px 20px; } .left ul li a { text-decoration: none; color: #555555; } .left ul li a:hover { color: coral; text-decoration: underline; cursor: pointer; } /*主體使用圣杯來實(shí)現(xiàn)*/ /*第一步: 設(shè)置主體的寬度*/ .container { width: 90%; background-color: lightgray; margin: 5px auto; /*border: 5px dashed black;*/ } /*第二步: 將中間內(nèi)容區(qū), 左側(cè)和右側(cè)的寬高進(jìn)行設(shè)置*/ .left { width: 200px; min-height: 500px; background-color: lightgreen; } .right { width: 200px; min-height: 500px; background-color: lightcoral; } .main { width: 100%; background-color: lightblue; min-height: 500px; } /*第三步: 將主體,左, 右全部浮動(dòng)*/ .main, .left, .right { float: left; } .container { overflow: hidden; } /*第四步: 將左右區(qū)塊移動(dòng)到正確的位置上*/ .main { /*設(shè)置一個(gè)盒模型的大小的計(jì)算方式, 默認(rèn)大小由內(nèi)容決定*/ box-sizing: border-box; padding-left: 200px; padding-right: 200px; } .left { margin-left: -100%; } .right { margin-left: -200px; } /*頁面的底部樣式開始*/ .footer { background-color: #777777; } .footer .content { width: 90%; background-color: #777777; height: 60px; margin: 0 auto; } .footer .content p { /*水平居中*/ text-align: center; /*垂直居中*/ line-height: 60px; } .footer .content p a { color: #999999; text-decoration: none; } .footer .content p a:hover { color: white; } </style> <link rel="stylesheet" href="myStyle0905.css"> <script type="text/javascript"> window.onload=function() { var oPlay=document.getElementById('play'); var aLi=oPlay.getElementsByTagName('li'); var oButton=document.getElementById('button'); var aDiv=oButton.getElementsByTagName('div'); var oPrev=document.getElementById('prev'); var oNext=document.getElementById('next'); var oFlash=document.getElementById('flash'); var now=0; var timer2=null; for(var i=0; i<aDiv.length; i++) { aDiv[i].index=i; aDiv[i].onmouseover=function(){ if(now==this.index) return; now=this.index; tab(); } } oPrev.onclick=function(){ now--; if(now==-1){ now=aDiv.length-1; } tab(); } oNext.onclick=function(){ now++; if(now==aDiv.length){ now=0; } tab(); } oFlash.onmouseover=function() { clearInterval(timer2); } oFlash.onmouseout=function() { timer2=setInterval(oNext.onclick,4000); } timer2=setInterval(oNext.onclick,5000); function tab(){ for(var i=0; i<aLi.length; i++){ aLi[i].style.display='none'; } for(var i=0; i<aDiv.length; i++) { aDiv[i].style.background="#DDDDDD"; } aDiv[now].style.background='#A10000'; aLi[now].style.display='block'; aLi[now].style.opacity=0; aLi[now].style.filter="alpha(opacity=0)"; jianbian(aLi[now]); } function jianbian(obj){ var alpha=0; clearInterval(timer); var timer=setInterval(function(){ alpha++; obj.style.opacity=alpha/100; obj.style.filter="alpha(opacity="+alpha+")"; if(alpha==100) { clearInterval(timer); } },10); } } </script> <title>網(wǎng)站首頁布局</title> </head> <body> <!--頭部--> <div class="header"> <!-- 頭部--> <div class="content"> <ul class="nav"> <li class="item"><a href="">首頁</a></li> <li class="item"><a href="">產(chǎn)品動(dòng)態(tài)</a></li> <li class="item"><a href="">發(fā)布產(chǎn)品</a></li> <li class="item"><a href="">售后服務(wù)</a></li> <li class="item"><a href="">成功案例</a></li> <li class="item"><a href="">聯(lián)系我們</a></li> </ul> </div> </div> <div class="slider"> <div id="flash"> <div id="prev"></div> <div id="next"></div> <ul id="play"> <li style="display: block;"><img src="images/1.jpg" alt="" /></li> <li><img src="images/2.jpg" alt="" /></li> <li><img src="images/3.jpg" alt="" /></li> <li><img src="images/4.jpg" alt="" /></li> <li><img src="images/5.jpg" alt="" /></li> <li><img src="images/6.jpg" alt="" /></li> <li><img src="images/7.jpg" alt="" /></li> <li><img src="images/8.jpg" alt="" /></li> </ul> <ul id="button"> <li><div style="background: #A10000;"></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> </ul> </div> </div> <!--主體--> <div class="container"> <!-- 圣杯DOM結(jié)構(gòu)--> <!-- 主體--> <div class="main"><h1>主體內(nèi)容區(qū)</h1></div> <!-- 左側(cè)邊欄--> <div class="left"> <!-- <h1>商品列表</h1>--> <ul> <li><a href="">我的商品1</a></li> <li><a href="">我的商品2</a></li> <li><a href="">我的商品3</a></li> <li><a href="">我的商品4</a></li> <li><a href="">我的商品5</a></li> <li><a href="">我的商品6</a></li> <li><a href="">我的商品7</a></li> <li><a href="">我的商品8</a></li> <li><a href="">我的商品9</a></li> <li><a href="">我的商品10</a></li> </ul> </div> <!-- 右側(cè)邊欄--> <div class="right"><h1>右側(cè)</h1></div> </div> <!--底部--> <div class="footer"> <!-- 底部內(nèi)容區(qū)--> <div class="content"> <p> <a href="">? php中文網(wǎng)版本所有</a> | <a href="">0551-666***999</a> | <a href="">皖I(lǐng)CP備19***666</a> </p> </div> </div> </body> </html>
3
0
0
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<link rel="stylesheet" href="myCss2.css">
? ?<script type="text/javascript" src="banner.js"></script>
? ?<title>網(wǎng)站首頁布局</title>
</head>
<body>
<!--頭部-->
<div class="header">
?;
? ? ? ?<ul id="play">
? ? ? ? ? ?<li style="display: block;"><img src="images/1.jpg" alt="" /></li>
? ? ? ? ? ?<li><img src="images/2.jpg" alt="" /></li>
? ? ? ? ? ?<li><img src="images/3.jpg" alt="" /></li>
? ? ? ? ? ?<li%2;
<!-- Left sidebar-->
<div class="left">
" <h1>Product List</h1>
" < ;ul>
???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, Product 2</a></li;
<!-- Right sidebar-->
<div class="right">
<ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Selling product 2</a></l
body?{
????padding:?0;
????margin:?0;
}
/*頭部樣式*/
.header?{
????background-color:?lightblue;
}
/*頭部內(nèi)容區(qū)*/
.header?.content?{
????width:?90%;
????background-color:?lightblue;
????margin:?0?auto;
????height:?60px;
}
/*頭部中的導(dǎo)航*/
.header?.content?.nav?{
????/*清空ul默認(rèn)樣式*/
????margin:?0;
????padding:?0;
}
/*去掉頭部中的導(dǎo)航子項(xiàng)樣式*/
.header?.content?.nav?.item?{
????list-style:?none;
}
/*設(shè)置頭部中的導(dǎo)航自相中包含的超鏈接*/
.header?.content?.nav?.item?a?{
????float:?left;/*設(shè)置為向左浮動(dòng)*/
????min-width:?80px;
????min-height:?60px;
????/*水平居中*/
????text-align:?center;
????/*垂直居中*/
????line-height:?60px;
????/*導(dǎo)航前景色*/
????color:?white;
????padding:?0?15px;/*上下為0，左右為15*/
????/*去掉a標(biāo)簽的默認(rèn)下劃線*/
????text-decoration:?none;
}
.header?.content?.nav?.item?a:hover?{
????background-color:?red;
????font-size:?1.1rem;
}
/*設(shè)置輪播圖*/
.slider?{
????width:?90%;
????margin:?0?auto;
}
/*輪播css設(shè)置*/
#flash?{
????width:900%;
????height:?535px;
????margin:?0?auto;
}
#flash?#play?{
????width:100%;
????height:?535px;
????list-style:?none;
????position:relative;
????top:0;
????left:0;
}
#flash?#play?li?{
????display:?none;
????position:absolute;
????top:0;
????left:0;
}
#flash?#play?li?img?{
????float:?left;
}
#button?{
????position:?relative;
????bottom:20px;
????left:40%;
????list-style:?none;
????padding:?0?0;
}
#button?li?{
????margin-left:?10px;
????float:?left;
}
#button?li?div?{
????width:12px;
????height:?12px;
????background:#DDDDDD;
????border-radius:?6px;
????cursor:?pointer;
}
#prev?{
????width:40px;
????height:63px;
????background:url(images/beijing.png)?0?0;
????position:?absolute;
????top:50%;
????left:10px;
????z-index:?1000;
}
#next?{
????width:40px;
????height:63px;
????background:url(images/beijing.png)?-40px?0;
????position:?absolute;
????top:50%;
????right:10px;
????z-index:?1000;
}
#prev:hover?{
????background:url(images/beijing.png)?0?-62px;
}
#next:hover?{
????background:url(images/beijing.png)?-40px?-62px;
}
/*設(shè)置商品列表樣式*/
.left?{
????box-sizing:?border-box;
????padding:?10px;
????border:?1px?solid?#555555;
}
.left?h1?{
????color:?#555;
????font-size:?1.3rem;
????border-bottom:?1px?solid?#555555;
}
.left?ul?{
????margin-top:?20px;
????padding:?0;
}
.left?ul?li?{
????list-style:?none;
????padding:?10px?20px;
}
.left?ul?li?a?{
????text-decoration:?none;
????color:?#555555;
}
.left?ul?li?a:hover?{
????color:??coral;
????text-decoration:?underline;
????cursor:?pointer;
}
/*主體使用圣杯來實(shí)現(xiàn)*/
/*第一步:?設(shè)置主體的寬度*/
.container?{
????width:?90%;
????background-color:?lightgray;
????margin:?5px?auto;
????/*border:?5px?dashed?black;*/
}
/*第二步:?將中間內(nèi)容區(qū),?左側(cè)和右側(cè)的寬高進(jìn)行設(shè)置*/
.left?{
????width:?200px;
????min-height:?500px;
????/*background-color:?lightgreen;*/
}
.right?{
????width:?200px;
????min-height:?500px;
????/*background-color:?lightcoral;*/
}
.main?{
????width:?100%;
????/*background-color:?lightblue;*/
????min-height:?500px;
}
/*第三步:?將主體,左,?右全部浮動(dòng)*/
.main,?.left,?.right?{
????float:?left;
}
.container?{
????overflow:?hidden;
}
/*第四步:?將左右區(qū)塊移動(dòng)到正確的位置上*/
.main?{
????/*設(shè)置一個(gè)盒模型的大小的計(jì)算方式,?默認(rèn)大小由內(nèi)容決定*/
????box-sizing:?border-box;
????padding-left:?200px;
????padding-right:?200px;
}
.left?{
????margin-left:?-100%;
}
.right?{
????box-sizing:?border-box;
????padding:?10px;
????border:?1px?solid?#555555;
????margin-left:?-200px;
}
.right?h1?{
????color:?#555;
????font-size:?1.3rem;
????border-bottom:?1px?solid?#555555;
}
.right?ul?{
????margin-top:?20px;
????padding:?0;
}
.right?ul?li?{
????list-style:?none;
????padding:?10px?20px;
}
.right?ul?li?a?{
????text-decoration:?none;
????color:?#555555;
}
.right?ul?li?a:hover?{
????color:??coral;
????text-decoration:?underline;
????cursor:?pointer;
}
/*頁面的底部樣式開始*/
.footer?{
????background-color:?#777777;
}
.footer?.content?{
????width:?90%;
????background-color:?#777777;
????height:?60px;
????margin:?0?auto;
}
.footer?.content?p?{
????/*水平居中*/
????text-align:?center;
????/*垂直居中*/
????line-height:?60px;
}
.footer?.content?p?a?{
????color:?#999999;
????text-decoration:?none;
}
.footer?.content?p?a:hover?{
????color:?white;
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
