实战项目：制作简单的页面布局

编程入门行业动态更新时间:2024-10-10 05:26:42

实战项目：制作简单的页面布局

CSS文档

此文档针对html的布局和基本样式初始化

*{margin:0; padding:0;}
ul,ol{list-style:none;}
img{display:block;}
a{text-decoration:none; color:#646464;}
h1,h2,h3{font-size:16px;}
body{font-family:Arial;}.l{float:left;}
.r{float:right;}
.clear:after{content:""; display:block; clear:both;}
/*版心*/
.container{width:1080px; margin:0 auto; position:relative;}
/*通栏*/
.container-fluid{width:100%;}#head{height:70px;}
#head .head_logo{width:162px; height:44px; margin-top:19px;}
#head .head_menu{font-size:14px; line-height:81px;}
#head .head_menu li{float:left; margin-left:58px;}.area_title{margin-top:60px; text-align:center;}
.area_title h2{height:20px; line-height:20px; font-size:20px; color:#363636;background:url(../img/title_bg.png) no-repeat center 7px; font-weight:normal;''
}
.area_title p{color:#9F9F9F; font-size:14px; line-height:34px;}#foot{background:#66c5b4;}
#foot .container{height:54px; line-height:54px; font-size:12px; color:white;}
#foot div a{color:white; margin:0 10px;}

HTML文档

页面中的元素和内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/common.css"><style>#banner{position:relative;}#banner .banner_list{width:100%; height:469px; position:relative;}#banner .banner_list li{width:100%; height:100%; background:center 0 no-repeat;position:absolute; left:0; top:0; opacity:0; z-index:1;}#banner .banner_list li.active{opacity:1; z-index:10;}#banner .banner_list a{display:block; width:100%; height:100%;}#banner .banner_btn{width:100%; position:absolute; bottom:19px; z-index:20; font-size:0;text-align:center;}#banner .banner_btn li{display:inline-block; width:12px; height:12px; border:2px solid white;border-radius:50%; box-sizing:border-box; margin:0 6px; cursor:pointer;}#banner .banner_btn li.active{background:white;}#service{overflow:hidden; min-height:407px;}#service .service_list{text-align:center; margin-top:34px;}#service .service_list li{float:left; width:250px; margin:0 10px;}#service .service_list div{width:102px; height:102px; margin:0 auto;}/*#service .service_list li:nth-of-type(1) div{background-image:url(./images/web1.png);}*//*#service .service_list li:nth-of-type(2) div{background-image:url(./images/graphic1.png);}*//*#service .service_list li:nth-of-type(3) div{background-image:url(./images/e-bussiness1.png);}*//*#service .service_list li:nth-of-type(4) div{background-image:url(./images/mail1.png);}*/#service .service_list h3{font-size:18px; color:#434343; line-height:36px; margin-top:25px;}#service .service_list p{font-size:14px; color:#6D6D6D; line-height:22px;}#case{background:#f8f8f8;}#case .container{min-height:460px; overflow:hidden;}#case .area_title{margin-top:55px;}#case .area_title h2{color:#66C5B4;}#case .case_list{margin-top:28px;}#case .case_list li{float:left; width:340px; margin:0 10px;}#case .case_btn{width:176px; height:37px; background:#66C584; margin:0 auto;border-radius:15px; line-height:37px; text-align:center;font-size:14px;margin-top:36px;}#case .case_btn a{display:block; width:100%; height:100%; color:white;}#news{min-height:450px; overflow:hidden;}#news .area_title{margin-top:65px;}#news dl{margin-top:48px;}#news dt{width:234px;}#news dd{width:846px;}#news .news_list{width:100%;}#news .news_list li{width:50%; float:left; margin-bottom:48px;}#news .news_date{width:71px; height:70px; border-right:1px solid #DCDCDC;text-align:center;}#news .news_date i{color:#66C5B4; font-size:39px; display:block; font-weight:bold;}#news .news_date span{color:#999999;font-size:20px; line-height:36px;}#news .news_text{width:310px; margin-left:20px;}#news .news_text h3{font-size:14px;}#news .news_text h3 a{color:#3F3F3F;}#news .news_text p{color:#A4A4A4; font-size:12px; line-height:21px; margin-top:17px;}</style>
</head>
<body>
<div id="head" class="container"><div class="head_logo l"><a href="#"><img src="./img/logo.png" alt="博文尚美" title="博文尚美"></a></div><ul class="head_menu r"><li><a href="#">HOME</a></li><li><a href="#">ABOUT</a></li><li><a href="#">PROTFOLIO</a></li><li><a href="#">SERVICE</a></li><li><a href="#">NEWS</a></li><li><a href="#">CONTACT</a></li></ul>
</div>
<div id="banner" class="container-fluid"><ul class="banner_list"><li class="active" style="background-image:url(./img/banner.png)"><a href="#"></a></li><li style="background-image:url(./img/banner.png)"><a href="#"></a></li><li style="background-image:url(./img/banner.png)"><a href="#"></a></li><li style="background-image:url(./img/banner.png)"><a href="#"></a></li></ul><ol class="banner_btn"><li class="active"></li><li></li><li></li><li></li></ol>
</div>
<div id="service" class="container"><div class="area_title"><h2>服务范围</h2><p>OUR SERVICES</p></div><ul class="service_list"><li><div style="background-image:url(./img/web1.png)"></div><!--                1.WEB DESIGN--><h3>1.web desin</h3><p>企业品牌网站设计/手机网站制作<br>动画网站创意设计</p></li><li><div style="background-image:url(./img/graphic1.png)"></div><!--                2.GRAPHIC DESIGN--><h3>2.graphic design</h3><p>标志LOGO设计/产品宣传册设计<br>企业广告/海报设计</p></li><li><div style="background-image:url(./img/e-bussiness1.png)"></div><!--                3.E-BUSINESS PLAN--><h3>3.e-business plan</h3><p>淘宝/天猫装修设置及运营推广<br>企业微博、微信营销</p></li><li><div style="background-image:url(./img/mail1.png)"></div><h3>4.mailboxagents</h3><p>腾信/网易企业邮箱品牌代理<br>个性化邮箱定制开发</p></li></ul>
</div>
<div id="case" class="container_fluid"><div class="container"><div class="area_title"><h2>{ 客户案例 }</h2><p>With the best professional technology, to design the best innovative web site</p></div><ul class="case_list clear"><li><a href="#"><img src="./images/20141121095528549.png" alt=""></a></li><li><a href="#"><img src="./images/20141121095216750.png" alt=""></a></li><li><a href="#"><img src="./images/20141121105856226.png" alt=""></a></li></ul><div class="case_btn"><a href="#">VIEW　MORE</a></div></div>
</div>
<div id="news" class="container"><div class="area_title"><h2>最新资讯</h2><p>THE LATEST NEWS</p></div><dl><dt class="l"><img src="./images/xs1.png" alt=""></dt><dd class="l"><ul class="news_list"><li><div class="news_date l"><i>09</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">网站排名进入前三的技巧说明</a></h3><p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页,更不用说进首页前三了。那么网站优..</p></div></li><li><div class="news_date l"><i>08</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">flash网站制作的优缺点</a></h3><p>虽然HTML5程序语言出现,大有逐渐代替flash网站的趋势但是过于生硬的HTML5动画效果,始终...</p></div></li><li><div class="news_date l"><i>07</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">做个网站多少钱</a></h3><p>"做个网站多少钱?"很多客户打电话过来直接第一句九抛出来的问题.就好比买辆车多少钱,你是要...</p></div></li><li><div class="news_date l"><i>06</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">哪些网站优化手法属于网站过度优化</a></h3><p>大部分人都想让自己的网站,一夜之间出现在搜索引擎首页独占鳌头,但是事实告诉我们罗马不是...</p></div></li></ul></dd></dl>
</div>
<div id="foot" class="container-fluid"><div class="container"><p class="l">Copyright 2006 - 2014 Bowenshangmei Culture All Rights Reserved</p><div class="r"><a href="#">Home</a> |<a href="#">About</a> |<a href="#">Portfolio</a> |<a href="#">Contact</a></div></div>
</div>
</body>
</html>