博文尚美笔记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- header -->
<div class="header center">
<div class="logo fl">
<img src="./images/logo.png" alt="">
</div>
<ul class="nav fr">
<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>
<!-- banner -->
<div class="banner">
<ul>
<li>
<img src="./images/banner.png" alt="">
</li>
</ul>
<ol class="banner-list">
<li></li>
<li class="active"></li>
<li></li>
<li></li>
</ol>
</div>
<!-- 服务范围 -->
<div class="section1">
<div class="section-header">
<div class="section-header-box">
<div class="section-header-left"></div>
<div>服务范围</div>
<div class="section-header-right"></div>
</div>
<p class="section-header-title">our services</p>
</div>
<div class="section1-content clearfix center">
<div class="list">
<img src="./images/section1-img1.png" alt="">
<p class="text1">1.WEB DESIGN</p>
<P class="text2">企业品牌网站设计/手机网站制作
动画网站创意设计</P>
</div>
<div class="list">
<img src="./images/section1-img2.png" alt="">
<p class="text1">1.WEB DESIGN</p>
<P class="text2">标志logo设计/产品宣传册设计
企业广告/海报设计</P>
</div>
<div class="list">
<img src="./images/section1-img3.png" alt="">
<p class="text1">1.WEB DESIGN</p>
<P class="text2">淘宝/天猫装修设计及运营推广
企业微博、微信营销</P>
</div>
<div class="list">
<img src="./images/section1-img4.png" alt="">
<p class="text1">1.WEB DESIGN</p>
<P class="text2">腾讯/网易企业邮箱品牌代理
个性化邮箱定制开发</P>
</div>
</div>
</div>
<!-- 客户案例 -->
<div class="section2">
<div class="section-header">
<div class="section-header-box">
<div class="section-header-left"></div>
<div> { 客户案例 } </div>
<div class="section-header-right"></div>
</div>
<p class="section-header-title">With the best professional technology, to design the best innovative web site</p>
</div>
<div class="section2-content center clearfix">
<div class="list">
<img src="./images/section2.png" alt="">
</div>
<div class="list">
<img src="./images/section2.png" alt="">
</div>
<div class="list">
<img src="./images/section2.png" alt="">
</div>
</div>
<a href="" class="more">VIEW MORE</a>
</div>
<!-- 最新资讯 -->
<div class="section3">
<div class="section-header">
<div class="section-header-box">
<div class="section-header-left"></div>
<div>最新资讯</div>
<div class="section-header-right"></div>
</div>
<p class="section-header-title">TEH LATEST NEWS</p>
</div>
<div class="section3-content clearfix center">
<div class="section3-left fl">
<img src="./images/section3.png" alt="">
</div>
<div class="section3-right fr">
<div class="section3-right-box1 clearfix">
<div class="section3-right-item fl">
<div class="section3-right-left fl">
<div class="number">09</div>
Jan
</div>
<div class="section3-right-right fl">
<p class="p1">网站排名进入前三的技巧说明</p>
<p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</div>
<div class="section3-right-item fl">
<div class="section3-right-left fl">
<div class="number">09</div>
Jan
</div>
<div class="section3-right-right fl">
<p class="p1">网站排名进入前三的技巧说明</p>
<p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</div>
</div>
<div class="section3-right-box2 clearfix">
<div class="section3-right-item fl">
<div class="section3-right-left fl">
<div class="number">09</div>
Jan
</div>
<div class="section3-right-right fl">
<p class="p1">网站排名进入前三的技巧说明</p>
<p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</div>
<div class="section3-right-item fl">
<div class="section3-right-left fl">
<div class="number">09</div>
Jan
</div>
<div class="section3-right-right fl">
<p class="p1">网站排名进入前三的技巧说明</p>
<p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="center clearfix">
<div class="footer-nav-box fr">
<a href="">Home</a>
<a href="">About</a>
<a href="">Portfolio</a>
<a href="" class="noborder">Contact</a>
</div>
</div>
</div>
</body>
</html>
css样式
* {
padding: 0;
margin: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
img{
display: block;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix::after{
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.center{
width: 1090px;
margin: 0 auto;
}
.header{
height: 60px;
padding-top: 20px;
}
.header .logo{
width: 167px;
height: 44px;
}
.header .nav{
width:690px;
color: #646464;
font-size: 14px;
}
.header .nav > li{
float: left;
margin-left: 50px;
line-height: 44px;
}
.banner{
position: relative;
}
.banner > ul img{
width: 100%;
}
.banner .banner-list{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.banner .banner-list li{
height: 8px;
width: 8px;
border-radius: 50%;
border:2px solid #fff;
float: left;
margin:0 6px;
}
.banner .banner-list .active{
background-color: #fff;
}
/* section部分公共杨头部 */
.section-header{
text-align: center;
}
.section-header-box{
width: 350px;
margin: 0 auto;
position: relative;
font-size: 20px;
color: #363636;
}
.section-header-box .section-header-left,.section-header-right{
width: 100px;
height: 1px;
position: absolute;
top: 15px;
background:#c3c3c3;
}
.section-header-box .section-header-right{
right: 0;
}
.section-header-left::after,.section-header-right::after{
content: "";
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
background:#c3c3c3;
top:-4px;
}
.section-header-left::after{
right: 0;
}
.section-header-right::after{
left: 0;
}
.section-header .section-header-title{
color: #c3c3c3;
font-size: 14px;
margin-top: 10px;
}
/* section1 的内容 */
.section1 .section-header{
padding: 60px 0 50px 0;
}
.section1-content > .list{
width: 25%;
float: left;
height: 280px;
text-align: center;
}
.section1-content > .list img{
margin: 0 auto;
}
.section1-content > .list .text1{
font-size: 18px;
color:#434343 ;
padding: 30px 0 20px 0;
font-weight: 700;
}
.section1-content > .list .text2{
font-size: 14px;
color:#6d6d6d ;
width: 205px;
margin: 0 auto;
}
/* section2 */
.section2{
background: #f8f8f8;
padding-bottom: 65px;
}
.section2-content{
padding-left: 5px;
width: 1085px;
}
.section2 .section-header-box{
color: #66c5b4;
}
.section2-content .list{
float: left;
margin: 0 10px;
}
.section2 .more{
display: block;
margin: 0 auto;
text-align: center;
width: 178px;
line-height: 38px;
background:#66c5b4;
color: #fff;
font-size: 14px;
border-radius: 100px;
margin-top: 37px;
}
.section2 .section-header{
padding: 55px 0 40px 0;
}
/* section3 */
.section3{
padding-bottom: 88px;
}
.section3 .section-header{
padding: 65px 0 55px 0;
}
.section3-right{
width: 856px;
}
.section3-content .section3-left img{
width: 234px;
}
.section3-right-left{
color: #999999;
font-size: 20px;
width: 73px;
border-right: 1px solid #dcdcdc;
text-align: center;
}
.section3-right-left .number{
font-size: 39px;
color:#66c5b4;
font-weight: 700;
}
.section3-right-right{
width: 328px;
padding-left: 18px;
}
.section3-right-right .p1{
font-size: 14px;
color: #3f3f3f;
}
.section3-right-right .p2{
font-size: 12px;
color: #a4a4a4;
padding-top: 19px;
}
.section3-right-box1{
padding-bottom: 40px;
}
/*
footer */
.footer{
font-size: 12px;
color: #fff;
background: #66c5b4;
padding: 20px 0;
}
.footer-nav-box a{
border-right: 1px solid #fff;
float: left;
padding: 0 18px;
}
.footer .center .noborder{
border: none;
}
浙公网安备 33010602011771号