尚美首页练习

HTML：

博文尚美

HOME

ABOUT

PROTFOLIO

SERVICE

NEWS

CONTACT

服务范围

our services

1.web design

企业品牌网站设计/手机网站制作
动画网站创意设计

2.graphic design

标志logo设计/产品宣传册设计
企业广告/海报设计

3.e-business plan

淘宝/天猫装修设计及运营推广
企业微博、微信营销

4.mailboxagents

腾讯/网易企业邮箱品牌代理
个性化邮箱定制开发

{ 客户案例 }

With the best professional technology, to design the best innov

CSS:

html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dt,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}

body{

font-size:16px;

font-family: '微软雅黑';

}

ul,ol,li{

list-style:none;

}

h1,h2,h3,h4,h5,h6{

font-size:16px;

font-weight: normal;

}

b,strong{

font-weight: normal;

}

i,em{

font-style: normal;

}

a,u,ins{

text-decoration: none;

}

img{

border:0;

display:block;

}

input,fieldset{

outline: none;

border:0;

}

.clear_fix:after{

content:'.';

clear:both;

height:0;

overflow:hidden;

display:block;

visibility: hidden;

}

.clear_fix{

zoom:1; /* 用来兼容IE6、7 的高度自适应的问题的； */

}

/*top*/

.top{

width:1082px;

height:81px;

margin: 0 auto;

}

.logo{

float:left;

}

.nav{

float:right;

}

.nav li{

float: left;

height:81px;

line-height: 81px;

margin-left: 55px;

}

.nav li a{

font-size:14px;

font-family: arial;

font-weight: 500;

color:#646464;

}

/*banner*/

.bannerwrap{

width:100%;

height:470px;

background: url(../img/banner.jpg) no-repeat center top;

}

.banner{

height:470px;

background: #;

position: relative;

}

.banner p{

width:92px;

position: absolute;

bottom:19px;

left:50%;

margin-left:-46px;

}

.banner p span{

float: left;

width:8px;

height:8px;

border:2px solid #fff;

border-radius: 50%;

margin: 0 6px 0 5px;

font-size: 0;

}

.banner p span:hover{

background: #fff;

}

/*main*/

.main{

width: 100%;

}

.main1{

width: 1082px;

height: 411px;

margin: 0 auto;

}

.tit1{

height: 83px;

text-align: center;

padding-top:53px;

}

.tit1 h3{

font-size: 20px;

color: #363636;

height: 36px;

line-height: 36px;

background: url(../img/形状1.png) no-repeat center center;

}

.tit1 p{

font-size: 14px;

font-family: arial;

color: #9f9f9f;

height: 20px;

line-height: 20px;

}

.design{

height: 275px;

padding:0 10px;

}

.design li{

float: left;

width: 264px;

height: 275px;

text-align: center;

}

.design img{

display: inline-block;

text-align: center;

}

.design h3{

margin-top:23px;

margin-bottom:7px;

font-size: 18px;

font-weight:bold;

height:36px;

line-height: 36px;

color: #434343;

}

.design p{

color: #6d6d6d;

font-size: 14px;

line-height: 22px;

}

.main2wrap{

width:100%;

height:456px;

background: #f8f8f8;

}

.main2{

width:1082px;

height:456px;

margin: 0 auto;

}

.tit2{

height: 83px;

text-align: center;

padding-top:53px;

}

.tit2 h3{

font-size: 20px;

height: 36px;

line-height: 36px;

color: #66c5b4;

background: url(../img/形状1.png) no-repeat center center;

}

.tit2 p{

font-size: 14px;

height: 20px;

line-height: 20px;

color: #9f9f9f;

}

.pic{

overflow: hidden;

}

.pic img{

float: left;

margin: 0 10px;

}

.more{

}

.more a{

display: block;

width: 176px;

height:37px;

margin: 36px auto 67px;

border-radius: 18px;

background: #66c5b4;

color:#ffffff;

font-size:14px;

height:36px;

line-height: 36px;

text-align: center;

}

.main3{

width: 1082px;

height: 362px;

margin: 0 auto;

margin-bottom: 90px;

}

.tit3{

height: 107px;

padding-top: 59px;

text-align: center;

}

.tit3 h3{

font-size: 20px;

height: 36px;

line-height: 36px;

background: url(../img/形状1.png) no-repeat center center;

}

.tit3 p{

font-size: 14px;

height: 20px;

line-height: 20px;

color: #9f9f9f;

}

.bottom{

overflow: hidden;

}

.left{

float: left;

}

.right{

float: none;

}

.right dl{

width: 420px;

height: 71px;

float: right;

margin-bottom: 44px;

}

.right dt{

font-size: 14px;

color: #3f3f3f;

border-right:1px solid #dcdcdc;

width: 72px;

height:71px;

margin-right: 17px;

float: left;

}

.right dt p{

font-size:39px;

line-height: 36px;

text-align: center;

color: #66c5b4;

}

.right dt span{

font-size:20px;

line-height: 36px;

display: block;

text-align: center;

color: #999999;

}

.right dl h4{

font-size:14px;

line-height: 22px;

color:#3F3F3F;

margin-bottom: 12px;

}

.right dd{

font-size: 12px;

line-height: 21px;

color: #a4a4a4;

width:327px;

height:71px;

float: left;

}

/*copy*/

.copywrap{

width: 100%;

background: #66c5b4;

}

.copy{

width: 1082px;

height: 54px;

margin: 0 auto;

}

.copy p{

float: left;

color: #fff;

font-size:12px;

line-height: 54px;

}

.copy span{

float: right;

color: #fff;

font-size:12px;

line-height: 54px;

}

.copy a{

color: #fff;

padding: 0 15px;

}

尚美首页练习

HTML：

服务范围

1.web design

2.graphic design

3.e-business plan

4.mailboxagents

{ 客户案例 }

最新资讯

网站排名进入前三的技巧说明

网站排名进入前三的技巧说明

网站排名进入前三的技巧说明

网站排名进入前三的技巧说明

CSS:

效果图：

你可能感兴趣的:(尚美首页练习)