博文尚学代码书写
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./123.css">
</head>
<body>
<div id="head" class="container">
<div class="head_logo l">
<a href="#">
<img src="./1.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>
<div id="banner" class="contaner-fluid">
<ul class="banner_list">
<li class="active" style="background-image:url(./2.png)">
<a href="#"></a>
</li>
<li style="background-image:url(./2.png)">
<a href="#"></a>
</li>
<li style="background-image:url(./2.png)">
<a href="#"></a>
</li>
<li style="background-image:url(./2.png)">
<a href="#"></a>
</li>
</ul>
<ol class="banner_btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<div id="service" class="container">
<div class="area_title">
<h2>服务范围</h2>
<p>OUR SERVICES</p>
</div>
<ul class="service_list">
<li>
<div></div>
<h3>1.web design</h3>
<p>
企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
</p>
</li>
<li>
<div></div>
<h3>2.graphic design</h3>
<p>
标志logo设计/产品宣传设计
<br>
企业广告/海报设计
</p>
</li>
<li>
<div></div>
<h3>3.e-bussiness design</h3>
<p>
淘宝/天猫装修设计及运营推广
<br>
企业微博/微信营销
</p>
</li>
<li>
<div></div>
<h3>4.mail1 design</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 base professional technology, to design the base innovative web site</p>
</div>
<ul class="case_list clear">
<li>
<a href="#"><img src="./3.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./4.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./5.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>
<ul>
<dt class="l">
<img src="./6.png" alt="">
</dt>
<dd class="l">
<ul class="news_list">
<li>
<div class="news_date">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text">
<h3><a href="#">网站排名进入前三技巧说明</a></h3>
<p>很多客户表示他们为什么自己的网站总是优化不到搜索引擎首页，根本不知道怎么回事，还是...</p>
</div>
</li>
<li>
<div class="news_date">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text">
<h3><a href="#">网站排名进入前三技巧说明</a></h3>
<p>很多客户表示他们为什么自己的网站总是优化不到搜索引擎首页，根本不知道怎么回事，还是...</p>
</div>
</li>
<li>
<div class="news_date">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text">
<h3><a href="#">网站排名进入前三技巧说明</a></h3>
<p>很多客户表示他们为什么自己的网站总是优化不到搜索引擎首页，根本不知道怎么回事，还是...</p>
</div>
</li>
<li>
<div class="news_date">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text">
<h3><a href="#">网站排名进入前三技巧说明</a></h3>
<p>很多客户表示他们为什么自己的网站总是优化不到搜索引擎首页，根本不知道怎么回事，还是...</p>
</div>
</li>
</ul>
</dd>
</ul>
</div>
</body>
</html>
2.css
*{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: 81px;}
#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(../images/title_bg.png) no-repeat center 7px;
font-weight: normal
}
.area_title p{color: #9f9f9f;
font-size: 14px;
line-height: 34px;}
#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(./web1.png);}
#service .service_list li:nth-of-type(2) div{background-image:url(./web2.png);}
#service .service_list li:nth-of-type(3) div{background-image:url(./web3.png);}
#service .service_list li:nth-of-type(4) div{background-image:url(./web4.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: #66C5B4;
margin: 0 auto;
border-radius: 25px;
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;
}
扫一扫
54万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
