目录'
注意
废话不多说，所有成品页面请看下面截图
由于代码篇幅太长，各部分详细代码的讲解请找到我的文章：前端：练习页面，（致美页面练习）
首页（home-page.html）完整html源代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="..\css\home-page.css">
</head>
<body>
<div class="top">
<div class="tel">
<img src="..\\images\\homepage_03.png">
</div>
</div>
<div class="top1">
<div class="big-logo">
<img src="..\\images\\homepage_07.png">
</div>
<div class="choice">
<ul>
<li><a href="..\html\home-page.html">首页</a></li>
<li><a href="..\html\about-zimei.html">关于致美</a></li>
<li><a href="..\html\success-eg.html">成功案例</a></li>
<li><a href="..\html\news.html">新闻动态</a></li>
<li><a href="#">在线咨询</a></li>
<li><a href="..\html\touch-us.html">联系我们</a></li>
</ul>
</div>
<div class="big-img">
<div class="right-man">
<span>在</span></br>
<span>线</span></br>
<span>客</span></br>
<span>服</span></br>
<a href="#"><img src="..\\images\\homepage_0311_03.png"></a>
</div>
<ul>
<li><img src="..\\images\\achievement_18.png"></li>
<li><img src="..\\images\\achievement_19.png"></li>
<li><img src="..\\images\\achievement_20.png"></li>
<li><img src="..\\images\\achievement_21.png"></li>
<li><img src="..\\images\\achievement_22.png"></li>
<li><img src="..\\images\\achievement_28.png"></li>
<li><img src="..\\images\\achievement_29.png"></li>
<li><img src="..\\images\\achievement_30.png"></li>
<li><img src="..\\images\\achievement_31.png"></li>
<li><img src="..\\images\\achievement_32.png"></li>
<li><img src="..\\images\\achievement_38.png"></li>
<li><img src="..\\images\\achievement_39.png"></li>
<li><img src="..\\images\\achievement_40.png"></li>
<li><img src="..\\images\\achievement_41.png"></li>
<li><img src="..\\images\\achievement_42.png"></li>
<li><img src="..\\images\\achievement_48.png"></li>
<li><img src="..\\images\\achievement_49.png"></li>
<li><img src="..\\images\\achievement_50.png"></li>
<li><img src="..\\images\\achievement_51.png"></li>
<li><img src="..\\images\\achievement_52.png"></li>
<li><img src="..\\images\\achievement_58.png"></li>
<li><img src="..\\images\\achievement_59.png"></li>
<li><img src="..\\images\\achievement_60.png"></li>
<li><img src="..\\images\\achievement_61.png"></li>
<li><img src="..\\images\\achievement_62.png"></li>
<li><img src="..\\images\\achievement_68.png"></li>
<li><img src="..\\images\\achievement_69.png"></li>
<li><img src="..\\images\\achievement_70.png"></li>
<li><img src="..\\images\\achievement_71.png"></li>
<li><img src="..\\images\\achievement_72.png"></li>
<li><img src="..\\images\\achievement_78.png"></li>
<li><img src="..\\images\\achievement_79.png"></li>
<li><img src="..\\images\\achievement_80.png"></li>
<li><img src="..\\images\\achievement_81.png"></li>
<li><img src="..\\images\\achievement_82.png"></li>
<li><img src="..\\images\\achievement_88.png"></li>
</ul>
<div class="img-center">
<div class="font-center">
<span>致美</span></br>
<span>创意</span>
</div>
<div class="biaozi">
<span>标 志 设 计</span>
</div>
<div class="anli">
<span>更多案例</span></br>
<a href="#">点击查看</a>
</div>
</div>
</div>
<div class="five-logo">
<ul>
<li><img src="..\\images\\homepage_13.png"></li>
<li><img src="..\\images\\homepage_15.png"></li>
<li><img src="..\\images\\homepage_17.png"></li>
<li><img src="..\\images\\homepage_19.png"></li>
<li><img src="..\\images\\homepage_21.png"></li>
</ul>
</div>
<div class="exhibition-top">
<div class="exhibition-background">
<span>EXHIBITION</span>
</div>
<span>案例展示</span>
</div>
<div class="exhibition-img">
<ul>
<li>
<img src="..\\images\\achievement_03.png">
<span>品牌设计</span></br>
<span>BRAND DESIGN</span>
</li>
<li>
<img src="..\\images\\achievement_05.png">
<span>平面设计</span></br>
<span>GRAPHIC DESIGN</span>
</li>
<li>
<img src="..\\images\\achievement_07.png">
<span>网页设计</span></br>
<span>WEB DESIGN</span>
</li>
<li>
<img src="..\\images\\achievement_09.png">
<span>电子商城</span></br>
<span>ELECTRONIC MALL</span>
</li>
<li>
<img src="..\\images\\achievement_11.png">
<span >空间/建筑</span></br>
<span>SPACE/</span></br>
<span>ARCHITECCTURE</span>
</li>
</ul>
</div>
<div class="about-us">
<div class="about-background">
<span>ABOUT<span>US</span></span>
</div>
<span>关于我们</span>
</div>
<div class="about-content">
<span>致美创意，因为专注，所以专业。</span></br>
<span>英特尔：将于今年秋天发布Raptor Lake，明年推出基于Meteor Lake</span>
</div>
<div class="service-process">
<div class="service-background">
<span>SERVICE<span>PROCESS</span></span>
</div>
<span>服务流程</span>
</div>
<div class="service-content">
<div class="content-one">
<img src="..\\images\\homepage_29.png">
<span> 项目浅谈，根据需求报价 </span>
<img src="..\\images\\homepage_40.png">
<img src="..\\images\\homepage_31.png">
<span> 预付定金，开始设计 </span>
<img src="..\\images\\homepage_40.png">
<img src="..\\images\\homepage_34.png">
<span> 修改定稿，完成设计 </span>
<img src="..\\images\\homepage_37.png">
<span> 签收付尾款</span>
</div>
</div>
<div class="big-class">
<div class="last">
<span>首页| 关于致美| 成功案例| 在线咨询</span>
<span>Copyright©2014-12015 致美创意工作室</span>
<span>技术支持： 凡客建站|管理登录</span>
</div>
</div>
</div>
</body>
</html>
首页完整css代码
*{
margin: 0;
padding: 0;
}
.top{
width: 100%;
height: 35px;
/*border: 1px solid black;*/
/*渐变*/
background-image:linear-gradient(to top, rgba(220,220,220,1) , rgba(245,245,245,0));
/*background: red;*/
}
.tel{
width: 270px;
height: 35px;
/*border: 1px solid black;*/
position: absolute;
right: 25px;
/*z-index: 2;*/
}
.tel>img{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.top1{
width: 100%;
height: 155px;
/*position: */
/*border: 1px solid black;*/
}
.big-logo{
width: 304px;
height: 58px;
position: relative;
left: 226px;
top: 64px;
/*border: 1px solid black;*/
}
.big-logo>img{
width: 100%;
height: 100%;
}
.choice{
/*border: 1px solid black;*/
position: relative;
left: 545px;
width: 1300px;
height: 75px;
}
.choice>ul>li{
text-align: center;
width: 100px;
height: 50px;
/*border: 1px solid black;*/
float: left;
list-style: none;
position: relative;
top: -0px;
left: 100px;
margin: 20px 15px 30px 50px;
font-size: 20px;
font-family: "微软雅黑";
/*font-weight: bold;*/
}
.choice>ul>li>a{
color: black;
position: relative;
text-align: center;
text-decoration: none;
}
.choice>ul>li:hover{
font-weight: bold;
/*底部边框效果*/
border-bottom-style:solid;
}
.big-img{
position: relative;
top:10px;
width: 1460px;
height: 615px;
/*border: 1px solid black;*/
margin: 0px auto;
background: black;
}
.right-man{
position: relative;
top: 200px;
left: 1650px;
width: 40px;
height: 150px;
background: red;
/*border: 1px solid blue;*/
border-radius: 5px 0 0 5px;
}
.right-man>span{
position: relative;
top: -13px;
left: 10px;
font-size: 18px;
line-height: 25px;
color: white;
}
.right-man>a{
position: relative;
left: 10px;
}
.right-man>a>img{
position: relative;
top: -5px;
width: 22px;
height: 25px;
}
.big-img>ul{
/*float: left;*/
list-style: none;
}
.big-img>ul{
width: 100%;
height: 100%;
/*border: 1px solid black;*/
position: absolute;
top: 0;
/*clear: left;*/
/*margin: 10px;*/
}
.big-img>ul>li{
width: 160px;
height: 155px;
/*border: 1px solid black;*/
float:left;
position: relative;
top: 0px;
left: 0px;
margin: -2px auto;
}
.big-img>ul>li>img{
width: 100%;
height: 100%;
}
.big-img>ul{
/*opacity: 0.5;*/
/*透明度*/
opacity: 0.3;
/*模糊度*/
filter:blur(1px);
}
.img-center{
position: absolute;
top: 243px;
left: 443px;
/*z-index: 100;*/
width: 572px;
height: 112px;
border: 2px solid red;
}
.img-center>.font-center{
position: absolute;
/*z-index: 101;*/
left: 14px;
top: 14px;
width: 85px;
height: 85px;
/*border: 1px solid blue;*/
background: red;
}
.img-center>.font-center>span{
text-align: center;
left: 10px;
top: 5px;
/*display: block;*/
width: 100%;
height: 100%;
position:relative;
/*margin: 30px auto;*/
/*z-index: 100;*/
color: white;
font-size: 30px;
font-family: "宋体";
font-weight: bold;
}
.biaozi{
position: absolute;
left: 120px;
top: 14px;
width: 300px;
height: 85px;
/*border: 1px solid blue;*/
}
.biaozi>span{
position: relative;
color: white;
font-size: 60px;
font-weight: bold;
text-align: center;
}
.anli{
position: relative;
top: 14px;
left: 445px;
width: 120px;
height: 85px;
/*border: 1px solid blue;*/
}
.anli>span{
color: white;
font-size: 30px;
line-height: -5px;
}
.anli>a{
color: white;
font-size: 30px;
text-decoration: none;
}
.five-logo{
position: relative;
margin: 50px auto;
width: 1700px;
height: 200px;
/*border: 1px solid black;*/
}
.five-logo>ul{
list-style: none;
}
.five-logo>ul>li{
position: relative;
left: 26px;
width:160px;
height: 160px;
float: left;
/*border: 1px solid black;*/
margin-left: 140px;
}
/*.five-logo>ul>li:nth-child(1){
position: relative;
left: -80px;
}*/
.five-logo>ul>li>img{
width: 100%;
height: 100%;
}
.exhibition-top{
margin: 10px auto;
width: 1460px;
height: 80px;
border-bottom: 2px solid black;
}
.exhibition-background{
height: 60px;
width: 100%;
background: black;
}
.exhibition-top>.exhibition-background>span{
position: relative;
/*设置成块级元素，使span标签可以设置宽度大小位置变化等*/
display: block;
width: 100px;
height: 30px;
/*top: -5px;*/
left: -78px;
margin: 0 auto;
color: red;
font-size: 45px;
/*text-align: center;*/
}
.exhibition-top>span{
position: relative;
font-size: 25px;
width: 100px;
height: 30px;
margin: 0 auto;
background: white;
/*设置成块级元素，使span标签可以设置宽度大小位置变化等*/
display: block;
z-index: 1;
}
.exhibition-img{
width: 1490px;
height: 400px;
/*border: 1px solid black;*/
margin: 30px auto;
}
.exhibition-img>ul{
list-style: none;
/*float: left;*/
opacity: 0.8;
}
.exhibition-img>ul>li{
position: relative;
z-index: -1;
left: 18px;
float: left;
width: 265px;
height: 400px;
margin-right: 30px;
/*border: 1px solid black;*/
background: black;
}
.exhibition-img>ul>li>img{
position: relative;
width: 100%;
height: 300px;
}
.exhibition-img>ul>li>span:nth-child(2){
color: red;
position: relative;
}
.exhibition-img>ul>li>span{
position: relative;
/*z-index: 10*/
left: 50px;
top: 15px;
font-size: 20px;
}
.exhibition-img>ul>li>span:nth-child(4){
color: white;
}
.exhibition-img>ul>li>span:nth-child(4):hover{
color: red;
cursor: pointer;
}
.about-us{
margin: 10px auto;
width: 1460px;
height: 80px;
border-bottom: 2px solid black;
}
.about-background{
height: 60px;
width: 100%;
background: black;
}
.about-us>.about-background>span:nth-child(1){
position: relative;
/*设置成块级元素，使span标签可以设置宽度大小位置变化等*/
display: block;
width: 100px;
height: 30px;
/*top: -5px;*/
left: -78px;
margin: 0 auto;
color: red;
font-size: 45px;
}
.about-us>span{
display: block;
position: relative;
/*top: 3px;*/
font-size: 25px;
width: 100px;
height: 30px;
background: white;
left: 680px;
color: black;
}
.about-us>.about-background>span>span{
color: white;
}
.about-content{
position: relative;
left: 222px;
width: 1460px;
margin: 0,auto;
height: 270px;
/*border: 1px solid black;*/
}
.about-content>span:nth-child(1){
display: block;
font-size: 30px;
top: 30px;
font-weight: bold;
color: rgb(96,96,96);
position: relative;
text-align: center;
}
.about-content>span:nth-child(3){
display: block;
font-size: 20px;
top: 20px;
color: rgb(128,128,128);
position: relative;
text-align: center;
}
.service-process{
margin: 10px auto;
width: 1460px;
height: 80px;
border-bottom: 2px solid black;
}
.service-background{
height: 60px;
width: 100%;
background: black;
}
.service-process>.service-background>span:nth-child(1){
position: relative;
/*设置成块级元素，使span标签可以设置宽度大小位置变化等*/
display: block;
width: 100px;
height: 30px;
/*top: -5px;*/
left: -140px;
margin: 0 auto;
color: red;
font-size: 45px;
}
.service-process>.service-background>span>span{
color: white;
}
.service-process>span{
display: block;
position: relative;
/*top: 3px;*/
font-size: 25px;
width: 100px;
height: 30px;
background: white;
left: 680px;
color: black;
}
.service-content{
position: relative;
width: 1460px;
height: 270px;
/*border: 1px solid black;*/
left: 242px;
}
.content-one{
position: relative;
margin: 50px auto;
width: 1050px;
height: 50px;
/*border: 1px solid black;*/
}
.content-one>img{
position: relative;
top:10px;
width: 30px;
height: 30px;
font-size: 20px;
}
.content-one>span{
/*display: block;*/
top: -5px;
font-size: 20px;
}
.big-class{
/*border: 1px solid black;*/
width: 100%;
height: 200px;
background: rgb(192,192,192);
border-top: 2px solid black;
opacity: 0.6;
}
.last{
/*border: 1px solid black;*/
position: relative;
top: 80px;
width: 100%;
height: 120px;
background: rgb(192,192,192);
}
.last>span{
display: block;
text-align: center;
font-size: 30px;
}
关于致美（about-zimei.html）html页面源代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="..\css\about-zimei.css">
</head>
<body>
<div class="top">
<div class="tel">
<img src="..\\images\\homepage_03.png">
</div>
</div>
<div class="top1">
<div class="big-logo">
<img src="..\\images\\homepage_07.png">
</div>
<div class="choice">
<ul>
<li><a href="..\html\home-page.html">首页</a></li>
<li><a href="..\html\about-zimei.html">关于致美</a></li>
<li><a href="..\html\success-eg.html">成功案例</a></li>
<li><a href="..\html\news.html">新闻动态</a></li>
<li><a href="#">在线咨询</a></li>
<li><a href="..\html\touch-us.html">联系我们</a></li>
</ul>
</div>
<div class="big-img">
<div class="right-man">
<span>在</span></br>
<span>线</span></br>
<span>客</span></br>
<span>服</span></br>
</div>
<ul>
<li><img src="..\\images\\achievement_18.png"></li>
<li><img src="..\\images\\achievement_19.png"></li>
<li><img src="..\\images\\achievement_20.png"></li>
<li><img src="..\\images\\achievement_21.png"></li>
<li><img src="..\\images\\achievement_22.png"></li>
<li><img src="..\\images\\achievement_28.png"></li>
<li><img src="..\\images\\achievement_29.png"></li>
<li><img src="..\\images\\achievement_30.png"></li>
<li><img src="..\\images\\achievement_31.png"></li>
<li><img src="..\\images\\achievement_32.png"></li>
<li><img src="..\\images\\achievement_38.png"></li>
<li><img src="..\\images\\achievement_39.png"></li>
<li><img src="..\\images\\achievement_40.png"></li>
<li><img src="..\\images\\achievement_41.png"></li>
<li><img src="..\\images\\achievement_42.png"></li>
<li><img src="..\\images\\achievement_48.png"></li>
<li><img src="..\\images\\achievement_49.png"></li>
<li><img src="..\\images\\achievement_50.png"></li>
<li><img src="..\\images\\achievement_51.png"></li>
<li><img src="..\\images\\achievement_52.png"></li>
<li><img src="..\\images\\achievement_58.png"></li>
<li><img src="..\\images\\achievement_59.png"></li>
<li><img src="..\\images\\achievement_60.png"></li>
<li><img src="..\\images\\achievement_61.png"></li>
<li><img src="..\\images\\achievement_62.png"></li>
<li><img src="..\\images\\achievement_68.png"></li>
<li><img src="..\\images\\achievement_69.png"></li>
<li><img src="..\\images\\achievement_70.png"></li>
<li><img src="..\\images\\achievement_71.png"></li>
<li><img src="..\\images\\achievement_72.png"></li>
<li><img src="..\\images\\achievement_78.png"></li>
<li><img src="..\\images\\achievement_79.png"></li>
<li><img src="..\\images\\achievement_80.png"></li>
<li><img src="..\\images\\achievement_81.png"></li>
<li><img src="..\\images\\achievement_82.png"></li>
<li><img src="..\\images\\achievement_88.png"></li>
</ul>
<div class="img-center">
<div class="font-center">
<span>致美</span></br>
<span>创意</span>
</div>
<div class="biaozi">
<span>标 志 设 计</span>
</div>
<div class="anli">
<span>更多案例</span></br>
<a href="#">点击查看</a>
</div>
</div>
</div>
<div class="about-us">
<div class="about-background">
<span>ABOUT<span>US</span></span>
</div>
<span>关于我们</span>
</div>
<div class="about-content">
<span>致美创意，因为专注，所以专业。</span></br>
<span>英特尔：将于今年秋天发布Raptor Lake，明年推出基于Meteor Lake</span>
</div>
<div class="big-class">
<div class="last">
<span>首页| 关于致美| 成功案例| 在线咨询</span>
<span>Copyright©2014-12015 致美创意工作室</span>
<span>技术支持： 凡客建站|管理登录</span>
</div>
</div>
</div>
</body>
</html>
关于致美css代码
*{
margin: 0;
padding: 0;
}
.top{
width: 100%;
height: 35px;
/*border: 1px solid black;*/
/*渐变*/
background-image:linear-gradient(to top, rgba(220,220,220,1) , rgba(245,245,245,0));
/*background: red;*/
}
.tel{
width: 270px;
height: 35px;
/*border: 1px solid black;*/
position: absolute;
right: 25px;
/*z-index: 2;*/
}
.tel>img{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.top1{
width: 100%;
height: 155px;
/*position: */
/*border: 1px solid black;*/
}
.big-logo{
width: 304px;
height: 58px;
position: relative;
left: 226px;
top: 64px;
/*border: 1px solid black;*/
}
.big-logo>img{
width: 100%;
height: 100%;
}
.choice{
/*border: 1px solid black;*/
position: relative;
left: 545px;
width: 1300px;
height: 75px;
}
.choice>ul>li{
text-align: center;
width: 100px;
height: 50px;
/*border: 1px solid black;*/
float: left;
list-style: none;
position: relative;
top: -0px;
left: 100px;
margin: 20px 15px 30px 50px;
font-size: 20px;
font-family: "微软雅黑";
/*font-weight: bold;*/
}
.choice>ul>li>a{
color: black;
position: relative;
text-align: center;
text-decoration: none;
}
.choice>ul>li:hover{
font-weight: bold;
/*底部边框效果*/
border-bottom-style:solid;
}
.big-img{
position: relative;
top:10px;
width: 1460px;
height: 615px;
/*border: 1px solid black;*/
margin: 0px auto;
background: black;
}
.big-img>ul{
/*float: left;*/
list-style: none;
}
.big-img>ul{
width: 100%;
height: 100%;
/*border: 1px solid black;*/
position: absolute;
top: 0;
/*clear: left;*/
/*margin: 10px;*/
}
.big-img>ul>li{
width: 160px;
height: 155px;
/*border: 1px solid black;*/
float:left;
position: relative;
top: 0px;
left: 0px;
margin: -2px auto;
}
.big-img>ul>li>img{
width: 100%;
height: 100%;
}
.big-img>ul{
/*opacity: 0.5;*/
/*透明度*/
opacity: 0.3;
/*模糊度*/
filter:blur(1px);
}
.img-center{
position: absolute;
top: 243px;
left: 443px;
/*z-index: 100;*/
width: 572px;
height: 112px;
border: 2px solid red;
}
.img-center>.font-center{
position: absolute;
/*z-index: 101;*/
left: 14px;
top: 14px;
width: 85px;
height: 85px;
/*border: 1px solid blue;*/
background: red;
}
.img-center>.font-center>span{
text-align: center;
left: 10px;
top: 5px;
/*display: block;*/
width: 100%;
height: 100%;
position:relative;
/*margin: 30px auto;*/
/*z-index: 100;*/
color: white;
font-size: 30px;
font-family: "宋体";
font-weight: bold;
}
.biaozi{
position: absolute;
left: 120px;
top: 14px;
width: 300px;
height: 85px;
/*border: 1px solid blue;*/
}
.biaozi>span{
position: relative;
color: white;
font-size: 60px;
font-weight: bold;
text-align: center;
}
.anli{
position: relative;
top: 14px;
left: 445px;
width: 120px;
height: 85px;
/*border: 1px solid blue;*/
}
.anli>span{
color: white;
font-size: 30px;
line-height: -5px;
}
.anli>a{
color: white;
font-size: 30px;
text-decoration: none;
}
.about-us{
margin: 100px auto;
width: 1460px;
height: 80px;
border-bottom: 2px solid black;
}
.about-background{
height: 60px;
width: 100%;
background: black;
}
.about-us>.about-background>span:nth-child(1){
position: relative;
/*设置成块级元素，使span标签可以设置宽度大小位置变化等*/
display: block;
width: 100px;
height: 30px;
/*top: -5px;*/
left: -78px;
margin: 0 auto;
color: red;
font-size: 45px;
}
.about-us>span{
display: block;
position: relative;
/*top: 3px;*/
font-size: 25px;
width: 100px;
height: 30px;
background: white;
left: 680px;
color: black;
}
.about-us>.about-background>span>span{
color: white;
}
.about-content{
position: relative;
left: 222px;
width: 1460px;
margin: 0,auto;
height: 270px;
/*border: 1px solid black;*/
}
.about-content>span:nth-child(1){
display: block;
font-size: 30px;
top: 30px;
font-weight: bold;
color: rgb(96,96,96);
position: relative;
text-align: center;
}
.about-content>span:nth-child(3){
display: block;
font-size: 20px;
top: 20px;
color: rgb(128,128,128);
position: relative;
text-align: center;
}
.big-class{
/*border: 1px solid black;*/
width: 100%;
height: 200px;
background: rgb(192,192,192);
border-top: 2px solid black;
opacity: 0.6;
}
.last{
/*border: 1px solid black;*/
position: relative;
top: 80px;
width: 100%;
height: 120px;
background: rgb(192,192,192);
}
.last>span{
display: block;
text-align: center;
font-size: 30px;
}
新闻(news.html)页面html代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="..\css\news.css">
</head>
<body>
<div class="top">
<div class="tel">
<img src="..\\images\\homepage_03.png">
</div>
</div>
<div class="top1">
<div class="big-logo">
<img src="..\\images\\homepage_07.png">
</div>
<div class="choice">
<ul>
<li><a href="..\html\home-page.html">首页</a></li>
<li><a href="..\html\about-zimei.html">关于致美</a></li>
<li><a href="..\html\success-eg.html">成功案例</a></li>
<li><a href="..\html\news.html">新闻动态</a></li>
<li><a href="#">在线咨询</a></li>
<li><a href="..\html\touch-us.html">联系我们</a></li>
</ul>
</div>
<div class="big-img">
<ul>
<li><img src="..\\images\\achievement_18.png"></li>
<li><img src="..\\images\\achievement_19.png"></li>
<li><img src="..\\images\\achievement_20.png"></li>
<li><img src="..\\images\\achievement_21.png"></li>
<li><img src="..\\images\\achievement_22.png"></li>
<li><img src="..\\images\\achievement_28.png"></li>
<li><img src="..\\images\\achievement_29.png"></li>
<li><img src="..\\images\\achievement_30.png"></li>
<li><img src="..\\images\\achievement_31.png"></li>
<li><img src="..\\images\\achievement_32.png"></li>
<li><img src="..\\images\\achievement_38.png"></li>
<li><img src="..\\images\\achievement_39.png"></li>
<li><img src="..\\images\\achievement_40.png"></li>
<li><img src="..\\images\\achievement_41.png"></li>
<li><img src="..\\images\\achievement_42.png"></li>
<li><img src="..\\images\\achievement_48.png"></li>
<li><img src="..\\images\\achievement_49.png"></li>
<li><img src="..\\images\\achievement_50.png"></li>
<li><img src="..\\images\\achievement_51.png"></li>
<li><img src="..\\images\\achievement_52.png"></li>
<li><img src="..\\images\\achievement_58.png"></li>
<li><img src="..\\images\\achievement_59.png"></li>
<li><img src="..\\images\\achievement_60.png"></li>
<li><img src="..\\images\\achievement_61.png"></li>
<li><img src="..\\images\\achievement_62.png"></li>
<li><img src="..\\images\\achievement_68.png"></li>
<li><img src="..\\images\\achievement_69.png"></li>
<li><img src="..\\images\\achievement_70.png"></li>
<li><img src="..\\images\\achievement_71.png"></li>
<li><img src="..\\images\\achievement_72.png"></li>
<li><img src="..\\images\\achievement_78.png"></li>
<li><img src="..\\images\\achievement_79.png"></li>
<li><img src="..\\images\\achievement_80.png"></li>
<li><img src="..\\images\\achievement_81.png"></li>
<li><img src="..\\images\\achievement_82.png"></li>
<li><img src="..\\images\\achievement_88.png"></li>
</ul>
<div class="img-center">
<div class="font-center">
<span>致美</span></br>
<span>创意</span>
</div>
<div class="biaozi">
<span>标 志 设 计</span>
</div>
<div class="anli">
<span>更多案例</span></br>
<a href="#">点击查看</a>
</div>
</div>
</div>
<div class="news-top">
<span>成功案例</span>
</div>
<div class="news-content">
<ul>
<li><a href="#"><span>[精]</span>为什么要注册商标</a></li>
<li><a href="#"><span>[精]</span>为什么要设计logo？</a></li>
<li><a href="#">会展策划方案的四大关键点</a></li>
<li><a href="#">大话江湖之互联网公关招式破解</a></li>
<li><a href="#">互联网公司为什么要捧电视广告?</a></li>
<li><a href="#">商界10大经典营销</a></li>
<li><a href="#">我是大佬，我要进大厂！！</a></li>
</ul>
</div>
<div class="page">
<span>上一页 1</span>
<span> 下一页 1</span>
</div>
<div class="big-class">
<div class="last">
<span>首页| 关于致美| 成功案例| 在线咨询</span>
<span>Copyright©2014-12015 致美创意工作室</span>
<span>技术支持： 凡客建站|管理登录</span>
</div>
</div>
</div>
</body>
</html>
新闻页面css代码
*{
margin: 0;
padding: 0;
}
.top{
width: 100%;
height: 35px;
/*border: 1px solid black;*/
/*渐变*/
background-image:linear-gradient(to top, rgba(220,220,220,1) , rgba(245,245,245,0));
/*background: red;*/
}
.tel{
width: 270px;
height: 35px;
/*border: 1px solid black;*/
position: absolute;
right: 25px;
/*z-index: 2;*/
}
.tel>img{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.top1{
width: 100%;
height: 155px;
/*position: */
/*border: 1px solid black;*/
}
.big-logo{
width: 304px;
height: 58px;
position: relative;
left: 226px;
top: 64px;
/*border: 1px solid black;*/
}
.big-logo>img{
width: 100%;
height: 100%;
}
.choice{
/*border: 1px solid black;*/
position: relative;
left: 545px;
width: 1300px;
height: 75px;
}
.choice>ul>li{
text-align: center;
width: 100px;
height: 50px;
/*border: 1px solid black;*/
float: left;
list-style: none;
position: relative;
top: -0px;
left: 100px;
margin: 20px 15px 30px 50px;
font-size: 20px;
font-family: "微软雅黑";
/*font-weight: bold;*/
}
.choice>ul>li>a{
color: black;
position: relative;
text-align: center;
text-decoration: none;
}
.choice>ul>li:hover{
font-weight: bold;
/*底部边框效果*/
border-bottom-style:solid;
}
.big-img{
position: relative;
top:10px;
width: 1460px;
height: 615px;
/*border: 1px solid black;*/
margin: 0px auto;
background: black;
}
.big-img>ul{
/*float: left;*/
list-style: none;
}
.big-img>ul{
width: 100%;
height: 100%;
/*border: 1px solid black;*/
position: absolute;
top: 0;
/*clear: left;*/
/*margin: 10px;*/
}
.big-img>ul>li{
width: 160px;
height: 155px;
/*border: 1px solid black;*/
float:left;
position: relative;
top: 0px;
left: 0px;
margin: -2px auto;
}
.big-img>ul>li>img{
width: 100%;
height: 100%;
}
.big-img>ul{
/*opacity: 0.5;*/
/*透明度*/
opacity: 0.3;
/*模糊度*/
filter:blur(1px);
}
.img-center{
position: absolute;
top: 243px;
left: 443px;
/*z-index: 100;*/
width: 572px;
height: 112px;
border: 2px solid red;
}
.img-center>.font-center{
position: absolute;
/*z-index: 101;*/
left: 14px;
top: 14px;
width: 85px;
height: 85px;
/*border: 1px solid blue;*/
background: red;
}
.img-center>.font-center>span{
text-align: center;
left: 10px;
top: 5px;
/*display: block;*/
width: 100%;
height: 100%;
position:relative;
/*margin: 30px auto;*/
/*z-index: 100;*/
color: white;
font-size: 30px;
font-family: "宋体";
font-weight: bold;
}
.biaozi{
position: absolute;
left: 120px;
top: 14px;
width: 300px;
height: 85px;
/*border: 1px solid blue;*/
}
.biaozi>span{
position: relative;
color: white;
font-size: 60px;
font-weight: bold;
text-align: center;
}
.anli{
position: relative;
top: 14px;
left: 445px;
width: 120px;
height: 85px;
/*border: 1px solid blue;*/
}
.anli>span{
color: white;
font-size: 30px;
line-height: -5px;
}
.anli>a{
color: white;
font-size: 30px;
text-decoration: none;
}
.big-class{
position: relative;
border: 1px solid black;
top: 75px;
width: 100%;
height: 200px;
background: rgb(192,192,192);
border-top: 2px solid black;
opacity: 0.6;
}
.last{
/*border: 1px solid black;*/
position: relative;
top: 80px;
width: 100%;
height: 120px;
background: rgb(192,192,192);
}
.last>span{
display: block;
text-align: center;
font-size: 30px;
}
.news-top{
position: relative;
margin:10px auto;
width: 1460px;
height: 50px;
border-bottom:2px solid black;
}
.news-top>span{
position: relative;
display: block;
top:25px;
font-size: 20px;
}
.news-content{
position: relative;
width: 1460px;
height: 400px;
margin: 10px auto;
/*border:1px solid black;*/
}
.news-content>ul{
list-style: none;
}
.news-content>ul>li>a{
text-decoration: none;
}
.news-content>ul>li{
width: 1460px;
height: 50px;
border-bottom:1px dashed;
}
.news-content>ul>li>a{
position: relative;
top: 10px;
color: black;
font-weight: bold;
font-size: 20px;
opacity: 0.6;
}
.news-content>ul>li>a:hover{
color: red;
}
.news-content>ul>li>a>span{
color: red;
}
.page{
position: relative;
width: 200px;
height: 50px;
/*border:1px solid black;*/
margin: 0 auto;
}
.page>span{
font-size: 20px;
}
.page>span:hover{
color: red;
cursor: pointer;
}
成功案例（success-eg.html）html页面代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="..\css\success-eg.css">
</head>
<body>
<div class="top">
<div class="tel">
<img src="..\\images\\homepage_03.png">
</div>
</div>
<div class="top1">
<div class="big-logo">
<img src="..\\images\\homepage_07.png">
</div>
<div class="choice">
<ul>
<li><a href="..\html\home-page.html">首页</a></li>
<li><a href="..\html\about-zimei.html">关于致美</a></li>
<li><a href="..\html\success-eg.html">成功案例</a></li>
<li><a href="..\html\news.html">新闻动态</a></li>
<li><a href="#">在线咨询</a></li>
<li><a href="..\html\touch-us.html">联系我们</a></li>
</ul>
</div>
<div class="big-img">
<ul>
<li><img src="..\\images\\achievement_18.png"></li>
<li><img src="..\\images\\achievement_19.png"></li>
<li><img src="..\\images\\achievement_20.png"></li>
<li><img src="..\\images\\achievement_21.png"></li>
<li><img src="..\\images\\achievement_22.png"></li>
<li><img src="..\\images\\achievement_28.png"></li>
<li><img src="..\\images\\achievement_29.png"></li>
<li><img src="..\\images\\achievement_30.png"></li>
<li><img src="..\\images\\achievement_31.png"></li>
<li><img src="..\\images\\achievement_32.png"></li>
<li><img src="..\\images\\achievement_38.png"></li>
<li><img src="..\\images\\achievement_39.png"></li>
<li><img src="..\\images\\achievement_40.png"></li>
<li><img src="..\\images\\achievement_41.png"></li>
<li><img src="..\\images\\achievement_42.png"></li>
<li><img src="..\\images\\achievement_48.png"></li>
<li><img src="..\\images\\achievement_49.png"></li>
<li><img src="..\\images\\achievement_50.png"></li>
<li><img src="..\\images\\achievement_51.png"></li>
<li><img src="..\\images\\achievement_52.png"></li>
<li><img src="..\\images\\achievement_58.png"></li>
<li><img src="..\\images\\achievement_59.png"></li>
<li><img src="..\\images\\achievement_60.png"></li>
<li><img src="..\\images\\achievement_61.png"></li>
<li><img src="..\\images\\achievement_62.png"></li>
<li><img src="..\\images\\achievement_68.png"></li>
<li><img src="..\\images\\achievement_69.png"></li>
<li><img src="..\\images\\achievement_70.png"></li>
<li><img src="..\\images\\achievement_71.png"></li>
<li><img src="..\\images\\achievement_72.png"></li>
<li><img src="..\\images\\achievement_78.png"></li>
<li><img src="..\\images\\achievement_79.png"></li>
<li><img src="..\\images\\achievement_80.png"></li>
<li><img src="..\\images\\achievement_81.png"></li>
<li><img src="..\\images\\achievement_82.png"></li>
<li><img src="..\\images\\achievement_88.png"></li>
</ul>
<div class="img-center">
<div class="font-center">
<span>致美</span></br>
<span>创意</span>
</div>
<div class="biaozi">
<span>标 志 设 计</span>
</div>
<div class="anli">
<span>更多案例</span></br>
<a href="#">点击查看</a>
</div>
</div>
</div>
<div class="sucssece-top">
<span>成功案例</span>
</div>
<div class="sucssece-img">
<ul>
<li><img src="..\\images\\achievement_18.png"></li>
<li><img src="..\\images\\achievement_19.png"></li>
<li><img src="..\\images\\achievement_20.png"></li>
<li><img src="..\\images\\achievement_21.png"></li>
<li><img src="..\\images\\achievement_22.png"></li>
<li><img src="..\\images\\achievement_28.png"></li>
<li><img src="..\\images\\achievement_29.png"></li>
<li><img src="..\\images\\achievement_30.png"></li>
<li><img src="..\\images\\achievement_31.png"></li>
<li><img src="..\\images\\achievement_32.png"></li>
<li><img src="..\\images\\achievement_38.png"></li>
<li><img src="..\\images\\achievement_39.png"></li>
<li><img src="..\\images\\achievement_40.png"></li>
<li><img src="..\\images\\achievement_41.png"></li>
<li><img src="..\\images\\achievement_42.png"></li>
<li><img src="..\\images\\achievement_48.png"></li>
<li><img src="..\\images\\achievement_49.png"></li>
<li><img src="..\\images\\achievement_50.png"></li>
<li><img src="..\\images\\achievement_51.png"></li>
<li><img src="..\\images\\achievement_52.png"></li>
<li><img src="..\\images\\achievement_58.png"></li>
<li><img src="..\\images\\achievement_59.png"></li>
<li><img src="..\\images\\achievement_60.png"></li>
<li><img src="..\\images\\achievement_61.png"></li>
<li><img src="..\\images\\achievement_62.png"></li>
<li><img src="..\\images\\achievement_68.png"></li>
<li><img src="..\\images\\achievement_69.png"></li>
<li><img src="..\\images\\achievement_70.png"></li>
<li><img src="..\\images\\achievement_71.png"></li>
<li><img src="..\\images\\achievement_72.png"></li>
<li><img src="..\\images\\achievement_78.png"></li>
<li><img src="..\\images\\achievement_79.png"></li>
<li><img src="..\\images\\achievement_80.png"></li>
<li><img src="..\\images\\achievement_81.png"></li>
<li><img src="..\\images\\achievement_82.png"></li>
<li><img src="..\\images\\achievement_88.png"></li>
<li><img src="..\\images\\achievement_40.png"></li>
<li><img src="..\\images\\achievement_41.png"></li>
<li><img src="..\\images\\achievement_58.png"></li>
<li><img src="..\\images\\achievement_59.png"></li>
</ul>
</div>
<div class="page">
<span><a href="#">上一页 1 </a></span>
<span><a href="#">2 下一页</a></span>
</div>
<div class="big-class">
<div class="last">
<span>首页| 关于致美| 成功案例| 在线咨询</span>
<span>Copyright©2014-12015 致美创意工作室</span>
<span>技术支持： 凡客建站|管理登录</span>
</div>
</div>
</div>
</body>
</html>
成功案例页面css代码
*{
margin: 0;
padding: 0;
}
.top{
width: 100%;
height: 35px;
/*border: 1px solid black;*/
/*渐变*/
background-image:linear-gradient(to top, rgba(220,220,220,1) , rgba(245,245,245,0));
/*background: red;*/
}
.tel{
width: 270px;
height: 35px;
/*border: 1px solid black;*/
position: absolute;
right: 25px;
/*z-index: 2;*/
}
.tel>img{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.top1{
width: 100%;
height: 155px;
/*position: */
/*border: 1px solid black;*/
}
.big-logo{
width: 304px;
height: 58px;
position: relative;
left: 226px;
top: 64px;
/*border: 1px solid black;*/
}
.big-logo>img{
width: 100%;
height: 100%;
}
.choice{
/*border: 1px solid black;*/
position: relative;
left: 545px;
width: 1300px;
height: 75px;
}
.choice>ul>li{
text-align: center;
width: 100px;
height: 50px;
/*border: 1px solid black;*/
float: left;
list-style: none;
position: relative;
top: -0px;
left: 100px;
margin: 20px 15px 30px 50px;
font-size: 20px;
font-family: "微软雅黑";
/*font-weight: bold;*/
}
.choice>ul>li>a{
color: black;
position: relative;
text-align: center;
text-decoration: none;
}
.choice>ul>li:hover{
font-weight: bold;
/*底部边框效果*/
border-bottom-style:solid;
}
.big-img{
position: relative;
top:10px;
width: 1460px;
height: 615px;
/*border: 1px solid black;*/
margin: 0px auto;
background: black;
}
.big-img>ul{
/*float: left;*/
list-style: none;
}
.big-img>ul{
width: 100%;
height: 100%;
/*border: 1px solid black;*/
position: absolute;
top: 0;
/*clear: left;*/
/*margin: 10px;*/
}
.big-img>ul>li{
width: 160px;
height: 155px;
/*border: 1px solid black;*/
float:left;
position: relative;
top: 0px;
left: 0px;
margin: -2px auto;
}
.big-img>ul>li>img{
width: 100%;
height: 100%;
}
.big-img>ul{
/*opacity: 0.5;*/
/*透明度*/
opacity: 0.3;
/*模糊度*/
filter:blur(1px);
}
.img-center{
position: absolute;
top: 243px;
left: 443px;
/*z-index: 100;*/
width: 572px;
height: 112px;
border: 2px solid red;
}
.img-center>.font-center{
position: absolute;
/*z-index: 101;*/
left: 14px;
top: 14px;
width: 85px;
height: 85px;
/*border: 1px solid blue;*/
background: red;
}
.img-center>.font-center>span{
text-align: center;
left: 10px;
top: 5px;
/*display: block;*/
width: 100%;
height: 100%;
position:relative;
/*margin: 30px auto;*/
/*z-index: 100;*/
color: white;
font-size: 30px;
font-family: "宋体";
font-weight: bold;
}
.biaozi{
position: absolute;
left: 120px;
top: 14px;
width: 300px;
height: 85px;
/*border: 1px solid blue;*/
}
.biaozi>span{
position: relative;
color: white;
font-size: 60px;
font-weight: bold;
text-align: center;
}
.anli{
position: relative;
top: 14px;
left: 445px;
width: 120px;
height: 85px;
/*border: 1px solid blue;*/
}
.anli>span{
color: white;
font-size: 30px;
line-height: -5px;
}
.anli>a{
color: white;
font-size: 30px;
text-decoration: none;
}
.big-class{
position: relative;
border: 1px solid black;
top: 75px;
width: 100%;
height: 200px;
background: rgb(192,192,192);
border-top: 2px solid black;
opacity: 0.6;
}
.last{
/*border: 1px solid black;*/
position: relative;
top: 80px;
width: 100%;
height: 120px;
background: rgb(192,192,192);
}
.last>span{
display: block;
text-align: center;
font-size: 30px;
}
.sucssece-top{
position: relative;
margin:10px auto;
width: 1460px;
height: 50px;
border-bottom:2px solid black;
}
.sucssece-top>span{
position: relative;
display: block;
top:25px;
font-size: 20px;
}
.sucssece-img{
position: relative;
/*border:1px solid black;*/
top: 5px;
margin:0 auto;
width: 1460px;
height: 1650px;
}
.sucssece-img>ul{
list-style: none;
}
.sucssece-img>ul>li{
margin-bottom: 20px;
margin-right: 20px;
width: 270px;
height: 180px;
/*border:1px solid black;*/
float: left;
}
.sucssece-img>ul>li>img{
width: 100%;
height: 100%;
}
.page>span{
font-size: 20px;
color: black;
text-align: center;
}
.page>span>a:hover{
color: red;
}
.page>span>a{
color: black;
text-decoration: none;
}
.page{
margin: 0 auto;
/*border:1px solid black;*/
width: 200px;
height: 30px;
position: relative;
top: 10px;
}
联系我们（touth-us）html页面
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="..\css\touch-us.css">
</head>
<body>
<div class="top">
<div class="tel">
<img src="..\\images\\homepage_03.png">
</div>
</div>
<div class="top1">
<div class="big-logo">
<img src="..\\images\\homepage_07.png">
</div>
<div class="choice">
<ul>
<li><a href="..\html\home-page.html">首页</a></li>
<li><a href="..\html\about-zimei.html">关于致美</a></li>
<li><a href="..\html\success-eg.html">成功案例</a></li>
<li><a href="..\html\news.html">新闻动态</a></li>
<li><a href="#">在线咨询</a></li>
<li><a href="..\html\touch-us.html">联系我们</a></li>
</ul>
</div>
<div class="big-img">
<ul>
<li><img src="..\\images\\achievement_18.png"></li>
<li><img src="..\\images\\achievement_19.png"></li>
<li><img src="..\\images\\achievement_20.png"></li>
<li><img src="..\\images\\achievement_21.png"></li>
<li><img src="..\\images\\achievement_22.png"></li>
<li><img src="..\\images\\achievement_28.png"></li>
<li><img src="..\\images\\achievement_29.png"></li>
<li><img src="..\\images\\achievement_30.png"></li>
<li><img src="..\\images\\achievement_31.png"></li>
<li><img src="..\\images\\achievement_32.png"></li>
<li><img src="..\\images\\achievement_38.png"></li>
<li><img src="..\\images\\achievement_39.png"></li>
<li><img src="..\\images\\achievement_40.png"></li>
<li><img src="..\\images\\achievement_41.png"></li>
<li><img src="..\\images\\achievement_42.png"></li>
<li><img src="..\\images\\achievement_48.png"></li>
<li><img src="..\\images\\achievement_49.png"></li>
<li><img src="..\\images\\achievement_50.png"></li>
<li><img src="..\\images\\achievement_51.png"></li>
<li><img src="..\\images\\achievement_52.png"></li>
<li><img src="..\\images\\achievement_58.png"></li>
<li><img src="..\\images\\achievement_59.png"></li>
<li><img src="..\\images\\achievement_60.png"></li>
<li><img src="..\\images\\achievement_61.png"></li>
<li><img src="..\\images\\achievement_62.png"></li>
<li><img src="..\\images\\achievement_68.png"></li>
<li><img src="..\\images\\achievement_69.png"></li>
<li><img src="..\\images\\achievement_70.png"></li>
<li><img src="..\\images\\achievement_71.png"></li>
<li><img src="..\\images\\achievement_72.png"></li>
<li><img src="..\\images\\achievement_78.png"></li>
<li><img src="..\\images\\achievement_79.png"></li>
<li><img src="..\\images\\achievement_80.png"></li>
<li><img src="..\\images\\achievement_81.png"></li>
<li><img src="..\\images\\achievement_82.png"></li>
<li><img src="..\\images\\achievement_88.png"></li>
</ul>
<div class="img-center">
<div class="font-center">
<span>致美</span></br>
<span>创意</span>
</div>
<div class="biaozi">
<span>标 志 设 计</span>
</div>
<div class="anli">
<span>更多案例</span></br>
<a href="#">点击查看</a>
</div>
</div>
</div>
<span class="span_">在线客服</span>
<div class="kefu-top">
<div class="kefu-one">
<img src="..\\images\\contant_03.png">
<a href="#">客服一</a></br>
<img src="..\\images\\contant_03.png">
<a href="#">客服二</a>
</div>
<div class="kefu-two">
<span><img src="..\\images\\contant_33.png">工作时间</span></br>
<p>周一至周五：8:30-17:30</p></br>
<p>周六至周日：9:30-17:30</p>
</div>
<div class="kefu-three">
<span><img src="..\\images\\contant_39.png">联系方式</span></br>
<p>周一至周五：8:30-17:30</p>
<p>周六至周日：9:30-17:30</p>
</div>
</div>
<div class="share-top">
<span>分享途径</span></br>
<a href="#"><img src="..\\images\\contant_07.png"><span>复制地址</span></a>
<a href="#"><img src="..\\images\\contant_09.png"><span>腾讯微博</span></a>
<a href="#"><img src="..\\images\\contant_11.png"><span>新浪微博</span></a>
<a href="#"><img src="..\\images\\contant_13.png"><span>QQ空间</span></a>
<a href="#"><img src="..\\images\\contant_15.png"><span>开心网</span></a>
<a href="#"><img src="..\\images\\contant_17.png"><span>人人网</span></a>
<a href="#"><img src="..\\images\\contant_19.png"><span>豆瓣网</span></a>
<a href="#"><img src="..\\images\\contant_28.png"><span>搜狐微博</span></a>
<a href="#"><img src="..\\images\\contant_29.png"><span>网易地址</span></a>
<a href="#"><img src="..\\images\\contant_30.png"><span>百度地址</span></a>
<a href="#"><img src="..\\images\\contant_31.png"><span>贴吧地址</span></a>
</div>
<div class="content">
<div class="content-one">
<span>在接受Vanity Fair采访时，《复联4》导演罗素兄弟透漏他们曾接到了乔恩·费儒的电话，恳求他们重新考虑这个结局。
“部分压力（不要杀死托尼·史塔克）来自于乔恩·费儒，他在读了剧本后给我们打电话，问我们真的要杀死钢铁侠吗。”
《钢铁侠1》2008年上映，乔恩费儒执导，基本上正式开启了漫威电影宇宙。乔恩费儒还扮演了钢铁侠安全主管以及最佳好友Happy Hogan，客串了多部MCU电影，所以很高兴看到他仍然站在托尼这一边。
</span>
</div>
<div class="content-two">
<span>
此前有报道称，英特尔基于能源、原材料和劳动力成本增加等因素，加上已存在供过于求的问题，计划提高其产品的定价，大部分CPU及各类芯片都会受此影响。传闻英特尔会在现有定价基础上增加额外的管理费用，以弥补成本的上升，并希望在正式涨价之前能推动PC供应商购买更多的CPU和Wi-Fi芯片，缓解目前供过于求的状况。
</span>
</div>
<div class="content-three">
<span>
在全球四大卫星导航系统中，中国的北斗卫星除了导航定位之外还有个独门绝技，那就是短报文，不需要运营商的网络就能收发短信，现在这个功能已经进入了大众应用阶段了。据报道，7月30日，北斗三号短报文通信服务成果发布会在京举行。
</span>
</div>
</div>
<div class="big-class">
<div class="last">
<span>首页| 关于致美| 成功案例| 在线咨询</span>
<span>Copyright©2014-12015 致美创意工作室</span>
<span>技术支持： 凡客建站|管理登录</span>
</div>
</div>
</div>
</body>
</html>
联系我们css页面
*{
margin: 0;
padding: 0;
}
.top{
width: 100%;
height: 35px;
/*border: 1px solid black;*/
/*渐变*/
background-image:linear-gradient(to top, rgba(220,220,220,1) , rgba(245,245,245,0));
/*background: red;*/
}
.tel{
width: 270px;
height: 35px;
/*border: 1px solid black;*/
position: absolute;
right: 25px;
/*z-index: 2;*/
}
.tel>img{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.top1{
width: 100%;
height: 155px;
/*position: */
/*border: 1px solid black;*/
}
.big-logo{
width: 304px;
height: 58px;
position: relative;
left: 226px;
top: 64px;
/*border: 1px solid black;*/
}
.big-logo>img{
width: 100%;
height: 100%;
}
.choice{
/*border: 1px solid black;*/
position: relative;
left: 545px;
width: 1300px;
height: 75px;
}
.choice>ul>li{
text-align: center;
width: 100px;
height: 50px;
/*border: 1px solid black;*/
float: left;
list-style: none;
position: relative;
top: -0px;
left: 100px;
margin: 20px 15px 30px 50px;
font-size: 20px;
font-family: "微软雅黑";
/*font-weight: bold;*/
}
.choice>ul>li>a{
color: black;
position: relative;
text-align: center;
text-decoration: none;
}
.choice>ul>li:hover{
font-weight: bold;
/*底部边框效果*/
border-bottom-style:solid;
}
.big-img{
position: relative;
top:10px;
width: 1460px;
height: 615px;
/*border: 1px solid black;*/
margin: 0px auto;
background: black;
}
.big-img>ul{
/*float: left;*/
list-style: none;
}
.big-img>ul{
width: 100%;
height: 100%;
/*border: 1px solid black;*/
position: absolute;
top: 0;
/*clear: left;*/
/*margin: 10px;*/
}
.big-img>ul>li{
width: 160px;
height: 155px;
/*border: 1px solid black;*/
float:left;
position: relative;
top: 0px;
left: 0px;
margin: -2px auto;
}
.big-img>ul>li>img{
width: 100%;
height: 100%;
}
.big-img>ul{
/*opacity: 0.5;*/
/*透明度*/
opacity: 0.3;
/*模糊度*/
filter:blur(1px);
}
.img-center{
position: absolute;
top: 243px;
left: 443px;
/*z-index: 100;*/
width: 572px;
height: 112px;
border: 2px solid red;
}
.img-center>.font-center{
position: absolute;
/*z-index: 101;*/
left: 14px;
top: 14px;
width: 85px;
height: 85px;
/*border: 1px solid blue;*/
background: red;
}
.img-center>.font-center>span{
text-align: center;
left: 10px;
top: 5px;
/*display: block;*/
width: 100%;
height: 100%;
position:relative;
/*margin: 30px auto;*/
/*z-index: 100;*/
color: white;
font-size: 30px;
font-family: "宋体";
font-weight: bold;
}
.biaozi{
position: absolute;
left: 120px;
top: 14px;
width: 300px;
height: 85px;
/*border: 1px solid blue;*/
}
.biaozi>span{
position: relative;
color: white;
font-size: 60px;
font-weight: bold;
text-align: center;
}
.anli{
position: relative;
top: 14px;
left: 445px;
width: 120px;
height: 85px;
/*border: 1px solid blue;*/
}
.anli>span{
color: white;
font-size: 30px;
line-height: -5px;
}
.anli>a{
color: white;
font-size: 30px;
text-decoration: none;
}
.big-class{
position: relative;
border: 1px solid black;
top: -350px;
width: 100%;
height: 200px;
background: rgb(192,192,192);
border-top: 2px solid black;
opacity: 0.6;
}
.last{
/*border: 1px solid black;*/
position: relative;
top: 80px;
width: 100%;
height: 120px;
background: rgb(192,192,192);
}
.last>span{
display: block;
text-align: center;
font-size: 30px;
}
.kefu-top{
position: relative;
z-index: -1;
left: 222px;
top: 20px;
width: 300px;
height: 500px;
border-top:1px solid black;
}
.kefu-top>span{
position: relative;
display: block;
top:25px;
font-size: 20px;
}
.kefu-one{
width: 100%;
height: 120px;
border-bottom:1px dashed black;
}
.kefu-one>img{
position: relative;
top: 5px;
zoom: 2;
}
.kefu-one>a{
text-decoration: none;
font-size: 18px;
color: black;
}
.kefu-one>a:hover{
color: red;
}
.span_{
text-align: center;
position: relative;
z-index: 10;
border-bottom:3px solid orange;
left: 222px;
top: 22px;
display: block;
width: 100px;
height: 30px;
font-size: 20px;
font-weight: bold;
}
.kefu-two{
width: 100%;
height: 170px;
border-bottom:1px dashed black;
}
.kefu-two>span>img{
position: relative;
top: 5px;
zoom:2;
}
.kefu-two>p{
position:relative;
top: 20px;
font-size: 20px;
}
.kefu-three>span>img{
position: relative;
top: 5px;
zoom:2;
}
.kefu-three>p{
position:relative;
top: 30px;
font-size: 20px;
}
.share-top{
position: relative;
top:-460px;
left: 530px;
width: 1150px;
height: 150px;
border-bottom:1px dashed black;
}
.share-top>span{
position: relative;
left: 500px;
font-size: 30px;
font-weight: bold;
}
.share-top>a{
position: relative;
top: 30px;
margin-top: 10px;
margin-right: 35px;
text-decoration: none;
font-size: 20px;
}
.share-top>a:hover{
color: red;
}
.share-top>a>img{
zoom: 1.5;
}
.content{
position: relative;
top:-460px;
left: 530px;
width: 1150px;
height: 500px;
/*border:1px dashed black;*/
}
.content-one{
position: relative;
height: 150px;
width: 100%;
/*border:1px dashed black;*/
}
.content-one>span{
position: relative;
top: 30px;
font-size: 18px;
opacity: 0.7;
}
.content-two{
position: relative;
height: 150px;
width: 100%;
/*border:1px dashed black;*/
}
.content-two>span{
position: relative;
top: 30px;
font-size: 18px;
opacity: 0.7;
}
.content-three{
position: relative;
height: 150px;
width: 100%;
/*border:1px dashed black;*/
}
.content-three>span{
position: relative;
top: 30px;
font-size: 18px;
opacity: 0.7;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
