实例
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网站首页</title> <link rel="stylesheet" type="text/css" href="CSS/reset.css"> <link rel="stylesheet" type="text/css" href="CSS/common.css"> <link rel="stylesheet" type="text/css" href="CSS/index.css"> </head> <body> <!--头部图片去--> <div class="headerpic"> <!--头部部分--> <div class="header"> <div class="container"> <div class="logo"> <h1><a href="#">Imagination</a></h1> </div> </div> <!--导航部分--> <div class="nav"> <ul> <li class="active"><a href="">Homepage</a></li> <li class="active"><a href="">Left Sidebar</a></li> <li class="active"><a href="">Right Sidebar</a></li> <li class="active"><a href="">No Sidebar</a></li> </ul> </div> </div> <!--banner部分--> <div class="banner"> <div class="container"></div> </div> </div> <!--主体区--> <div class="main"> <div class="container"> <h2>Maecenas luctus lectus</h2> <span class="byline">Posuere eleifend odio quisque semper mattis</span> <div class="row"> <div class="right"> <a href="#" class="image full"><img src="images/pics05.jpg" alt=""></a> <p>This is <strong>Imagination</strong>, a responsive HTML5 site template freebie. Released for free</br>under the Creative Commons Attribution</a> license, so use it for whatever (personal or</br>commercial) – just give us credit! Check out more of our stuff at or follow us on.</p> </div> <div class="left"> <a href="#" class="image full"><img src="images/pics06.jpg" alt=""></a> <p>Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum.</br>Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique</br>senectus aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi purus ac</br>magna. Pellentesque habitant morbi</p> </div> </div> <div class="diver"></div> <a href="#" class="button">View Full Details</a> </div> </div> <!--特别区--> <div class="feature"> <div class="container"> <section> <header> <h2>Fusce ultrices fringilla metus</h2> <span class="byline">Posuere eleifend odio quisque semper mattis</span> </header> </section> <div class="row"> <section class="sec"> <a href="#" class="image full"><img src="images/pics01.jpg" alt=""></a> <p>Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus.</p> <p><a href="#" class="button">View Full Details</a></p> </section> <section class="sec"> <a href="#" class="image full"><img src="images/pics03.jpg" alt=""></a> <p>Pellentesque tristique ante ut risus. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus.</p> <p><a href="#" class="button">View Full Details</a></p> </section> <section class="sec"> <a href="#" class="image full"><img src="images/pics04.jpg" alt=""></a> <p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus.</p> <p><a href="#" class="button">View Full Details</a></p> </section> </div> </div> </div> <!--底部区--> <div class="footer"> <div class="container"> <div class="row"> <section class="sec"> <header> <h2>Nulla eleifend</h2> </header> <ul class="default"> <li><a href="#">Pellentesque quis elit non gravida blandit.</a></li> <li><a href="#">Lorem ipsum dolor sit consectetuer adipiscing elit.</a></li> <li><a href="#">Phasellus nec erat sit nibh pellentesque congue.</a></li> <li><a href="#">Cras vitae metus aliquam pellentesque pharetra.</a></li> <li><a href="#">Duis non ante in metus commodo euismod lobortis.</a></li> </ul> </section> <section class="sec"> <header> <h2>Etiam posuere</h2> </header> <ul class="default"> <li><a href="#">Pellentesque quis elit non gravida blandit.</a></li> <li><a href="#">Lorem ipsum dolor sit consectetuer adipiscing elit.</a></li> <li><a href="#">Phasellus nec erat sit nibh pellentesque congue.</a></li> <li><a href="#">Cras vitae metus aliquam pellentesque pharetra.</a></li> <li><a href="#">Duis non ante in metus commodo euismod lobortis.</a></li> </ul> </section> <section class="sec"> <header> <h2>Mauris vulputate</h2> </header> <ul class="default"> <li><a href="#">Pellentesque quis elit non gravida blandit.</a></li> <li><a href="#">Lorem ipsum dolor sit consectetuer adipiscing elit.</a></li> <li><a href="#">Phasellus nec erat sit nibh pellentesque congue.</a></li> <li><a href="#">Cras vitae metus aliquam pellentesque pharetra.</a></li> <li><a href="#">Duis non ante in metus commodo euismod lobortis.</a></li> </ul> </section> </div> </div> </div> <!--copyright--> <div class="copyright"> <div class="container"> Copyright © 2018.Company name All rights reserved.More Templates </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
common.css
.headerpic{
padding:0px;
width: 100%;
height:680px;
background: #333;
background-image: url(../images/banner.jpg);
background-size: cover;
}
.header{
background: #FFF;
}
.header .container
{
width: 70%;
height: 50%;
padding-top: 88px;
margin: 0px auto;
}
/* Logo */
.logo
{
position: absolute;
top: 21px;
}
.logo a
{
color: black;
display: block;
text-decoration: none;
text-transform: lowercase;
font-weight: 600;
}
.logo :hover{
color: red;
}
/* Nav*/
.nav
{
position: absolute;
right: 20%;
top:21px;
}
.nav ul li
{
float: left;
}
.nav > ul > li:last-child
{
padding-right: 0;
}
.nav ul li a,
.nav ul li span
{
display: block;
margin-left: 20px;
padding: 10px 15px;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
outline: 0;
color: #252525;
}
.nav li.active a:hover
{
background: #c61732;
border-radius: 5px;
color: #FFF;
}
.nav > ul > li > ul
{
display: none;
}
/* Banner*/
.banner
{
text-align: center;
color: #fff;
}
.banner .fa
{
}
#banner .fa:before
{
padding-bottom: 0.50em;
font-size: 8em;
}
.banner .button
{
}
.banner .button:hover
{
}运行实例 »
点击 "运行实例" 按钮查看在线实例
index.css
.extra
{
padding: 98px 0px;
}
.feature
{
padding: 200px 0px;
background: url(../images/featured-wrapper-bg.jpg) repeat;
text-align: center;
margin-top: 70px;
padding-top: 30px;
color: #FFF;
}
.footer
{
padding: 98px 0px;
}
.container {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 50px;
width: 100%;
}
.container h2{
font-size: 39px;
font-weight: bold;
}
.container span{
display: block;
margin: 7px 0 0 0;
padding: 7px 0 7px 0 ;
text-transform: uppercase;
font-size: 19px;
color: lightgray;
}
.main
{
background: #fff;
}
.main.container{
width: 1250px;
height: 654px;
}
.main .left
{
text-align: left;
}
.main .right
{
text-align: right;
}
.button{
display: inline-block;
margin-top: 7px;
padding: 14px 21px;
background: #c61732;
border-radius: 6px;
text-decoration: none;
text-transform: uppercase;
font-size: 25px;
color: white;
cursor: pointer;
}
.button:hover{
color: white;
background: #ad142c;
text-decoration:underline;
}
.main .button
{
display: inline-block;
margin-top: 56px;
}
.diver
{
vertical-align: baseline;
width: 1300px;
margin: 56px auto;
border-bottom: 1px solid rgba(0,0,0,.2);
}
.row {
margin: 0px auto;
width: 1300px;
height: 320px;
}
.right p{
font-size: 14px;
}
.left p{
font-size: 14px;
}
.right{
float: left;
width: 625px;
height: 296px;
margin-top: 20px;
margin-right: 50px;
}
.left
{
float: left;
width: 625px;
height: 296px;
margin-top: 20px;
}
.row > section{
/*margin-bottom: 0px;*/
padding-top: 40px;
padding-bottom:80px;
}
.row > .sec > p{
padding: 0px;
margin-top: 20px;
line-height:30px;
font-size: 14px;
/*width: 367px;*/
}
.sec{
width: 374px;
font-size: 15px;
float: left;
margin-right: 50px;
}
.footer
{
padding: 98px 0px;
background: url(../images/footer-content-wrapper-bg.jpg) repeat;
}
.footer header h2
{
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
color: #FFF;
text-align: left;
margin-bottom: 50px;
}
ul.default
{
text-align: left;
list-style: none;
margin: 0;
padding: 0;
}
ul.default li
{
padding: 0.80em 0em;
border-top: 1px solid;
border-color: rgba(255,255,255,.2);
font-size: 14px;
}
ul.default li:first-child
{
padding-top: 0em;
border-top: none;
}
ul.default a
{
text-decoration: none;
color: rgba(255,255,255,.6);
}
ul.default a:hover{
text-decoration: underline;
}
.footer .container{
margin:0px;
}
.footer .container .row .sec{
padding-bottom:40px;
}
.copyright
{
padding: 3em 0em;
text-align: center;
background-color: black;
color: rgba(255,255,255,.4);
}
.copyright .container{
padding: 0;
margin:0;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
reset.css
html {
overflow-y: auto;
overflow-x: hidden;
}
body, h1,h2,h3, ul,li,p {
margin: 0;
padding: 0;
/*font-family: 'microsoft yehei', Verdana, Arial;*/
}
ul, li {
list-style-type: none;
}
a:hover {
text-decoration: none;
/*color: #ff0000;*/
color: #f00;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
运行效果：
总结：
网页布局中要注意的是类样式要分开来。需要使用引入的方式进行引用。另外背景引用的路径要注意，CSS文件夹里面的样式引用背景图片的路径不能喝前端页面的路径一样。要分别开来。
