资源:链接：https://pan.baidu.com/s/1d3oB-KiRR8TFuFkBEQk9tQ 提取码：dbbd
效果图：
注意事项：拿到一个网页不要立马就开始做，应该先仔细的观察网页的结构并分析，把它分成一小块一小块的完成。
这里 我把这个网页分成了7个板块，第一个块包含了以下所有的块元素，也就是最外层的盒子
#main{
width: 1222px;
margin: 0px auto;
height: 1420px;
border: 1px #E3E3E3 solid;
}
首先是一个块元素很直观的可以看到我们需要设置它的背景颜色以及右边的一个电话
<div class="head">
<div class="phonenumber">
<img src="../image/img2/homepage_03.png" alt="">
</div>
</div>/*头部的电话号码*/
.head{
height: 30px;
background-color: #E3E3E3;
background-image: linear-gradient(#F1F1F1, #DEDEDE);
}
/*设置头部电话的位置*/
.phonenumber img{
margin-top: 5px;
margin-right: 150px;
float: right;
}第二个元素我们需要设置左边的logo以及右边导航的一个位置
<div class="nav">
<img class="logo" src="../image/img2/homepage_07.png" alt="">
<div class="nav_content">
<ul class="">
<li>
<a href="../致美创意/首页.html">首页 </a>
<li class="line"></li>
</li>
<li>
<a href="../致美创意/关于致美.html">关于致美</a>
<li class="line"></li>
</li>
<li>
<a href="../致美创意/成功案例.html">成功案例</a>
<li class="line"></li>
</li>
<li>
<a href="../致美创意/新闻动态.html">新闻动态</a>
<li class="line"></li>
</li>
<li>
<a href="../致美创意/在线咨询.html">在线咨询</a>
<li class="line"></li>
</li>
<li>
<a href="javascript:;">联系我们</a>
</li>
</ul>
</div>
</div>/*设置电话下面的导航条*/
.nav{
border-top: 2px #DADADA solid;
margin-top: 0.5px;
height: 100px;
}
/*设置logo*/
.nav .logo{
float: left;
margin-left: 150px;
margin-top: 35px;
}
/*导航跳的父元素盒子*/
.nav_content{
margin-top: 25px;
margin-bottom: 20px;
margin-left: 100px;
float: left;
width: 650px;
height: 50px;
}
/*设置导航条的内容*/
.nav_content li{
font-size: 15px;
float: left;
line-height: 50px;
font-weight: bold;
}
/*设置导航条下面的a标签样式*/
.nav_content a{
color: #6d6b6b;
}
.nav_content a:hover{
color: black;
padding-bottom: 10px;
border-bottom: 3px solid black;
}
/*设置导航条中间的线*/
.nav_content .line{
float: left;
width: 1px;
height: 14px;
margin: 17px 20px;
background-color: black;
}第三个div里面就是张图片
<div class="middle_img">
<img src="../image/img2/homepage_10.png" alt="">
</div>/*设置中间的图片*/
.middle_img{
height:401px ;
}第四个div中我把它分成了三个小的div第一个用来设置在线客服，第二个用来设置工作时间，第三个设置联系方式
<div id="d_online_cust">
<div id="d_son_customer">
<p id="p_kefu">在线客服</p>
<div id="d_line"></div>
<a href="#" id="a_kefu">客服一</a>
<a href="#" id="a_kefu">客服二</a>
<div id="d_dotted_line"></div>
</div>
<div id="d_time">
<a href="#" id="a_img">工作时间</a>
<p class="p_time">周一至周五 :8:30-17:30</p>
<p class="p_time">周六至周日 :9:00-17:00</p>
<div id="d_dotted_line"></div>
</div>
<div id="d_contact_way">
<a href="#" id="a_img">练习方式</a>
<p id="p_phone">程经理 :13000000000</p>
</div>
</div>#d_online_cust{
float: left;
height: 740px;
width: 350px;
/* background-color: red; */
}
#d_son_customer{
width: 230px;
height: 120px;
margin-top: 20px;
float: right;
/* background-color: black; */
}
#d_son_customer #p_kefu{
text-align: center;
line-height: 30px;
width: 80px;
height: 32px;
border-bottom: solid 3px #FF7019;
position: relative;
}
#d_son_customer #d_line{
margin-top: -2px;
width: 220px;
height: 2px;
background-color: #9C9C9C;
}
#a_kefu{
margin-top: 10px;
background: url(../image/img2/contant_03.png)no-repeat;
display: block;
width: 100px;
height:21px;
text-align: center;
/* background-color: blue; */
margin-left: 10px;
font-size: 14px;
line-height: 21px;
}
#d_dotted_line{
margin-top: 10px;
width: 220px;
height: 2px;
border-bottom: #9C9C9C 2px dashed;
}
#d_time{
width: 230px;
height: 110px;
float: right;
/* background-color: aqua; */
}
#a_img{
margin-top: 5px;
display: block;
background: url(../image/img2/contant_33.png)no-repeat;
height: 30px;
width: 120px;
line-height: 25px;
font-weight: bold;
text-align: center;
}
#d_time .p_time{
font-size: 14px;
margin-top: 10px;
}
#d_contact_way{
width: 230px;
height: 110px;
float: right;
/* background-color: aqua; */
}
#d_contact_way #a_img{
margin-top: 5px;
display: block;
background: url(../image/img2/contant_39.png)no-repeat;
height: 30px;
width: 120px;
line-height: 25px;
font-weight: bold;
text-align: center;
}
#d_contact_way #p_phone{
font-size: 14px;
margin-top: 5px;
}第5个div中我也把它分成了三个小的div第一个用来设置标题以及下面的时间，第二个用来设置分享到后面的图片，第三个设置最后的文字
<!-- 设置右边的内容 -->
<div id="d_right_content">
<div id="d_titile">
<h3 id="h_title">为什么要设计logo?</h3>
<p id="p_time">2015-06-11 11:16</p>
</div>
<div id="d_center">
<span id="d_first_text">分享到 :</span>
<a href="#" id="d_cent_picture" class="d_cent_img">复制网址</a>
<a href="#" id="d_cent_picture1" class="d_cent_img">腾讯微博</a>
<a href="#" id="d_cent_picture2" class="d_cent_img">新浪微博</a>
<a href="#" id="d_cent_picture3" class="d_cent_img">QQ空间</a>
<a href="#" id="d_cent_picture4" class="d_cent_img4">开心网</a>
<a href="#" id="d_cent_picture5" class="d_cent_img5">人人网</a>
<a href="#" id="d_cent_picture6" class="d_cent_img6">豆瓣网</a>
<a href="#" id="d_cent_picture7" class="d_cent_img7">搜狐微博</a>
<a href="#" id="d_cent_picture8" class="d_cent_img">网易微博</a>
<a href="#" id="d_cent_picture9" class="d_cent_img">百度空间</a>
<a href="#" id="d_cent_picture10" class="d_cent_img">百度贴吧</a>
</div>
<div id="d_text_line"></div>
<div id="d_text">
<h3 id="h_first_line">log传递的是一种精神和理念，他应该传递出公司的文化和生命，所以公司或者说是任何组织都应该有着自己相符的标志。</h3>
<div class="p_content">第一,加强客户识别<p class="p_content_text">logo是独一无二的，能够代表一个企业，所以让客服看了之后就会加深对企业的印象。如今的市场商品种类繁多,
各种logo商标符号更是数不胜数，只有特点鲜明、容易辨认和记忆、含义深刻、造型优美的标志，才能在同业中突显出来。
让能够区别于其他企业、产品或服务，使受众对企业留下深刻印象，所以设计一个好的logo尤为重要。
</p></div>
<div class="p_content">第二,展现品牌实力<p class="p_content_text">当客户了解一个企业或者品牌时，他们所感受到——不只是这家企业的产品和服务，他们肯定对企业的整体形象
有个自己的印象，比如说这家企业Logo是否经过专业设计？等等这些细节都将影响客户对这家企业或品牌实力的才考察。
</p></div>
<div class="p_content">第三,提升企业形象<p class="p_content_text">logo代表着企业的经营理念，文化特色，价值取向，反映企业的产品特点，经营思路，是企业精神的具体象征。
当客户看到我们的企业logo设计的非常专业，非常独特时，在心里就暗暗给这个企业加分，因为客户从logo识别中就
可以看一个企业的气质，这些信息就能够告诉客户这是怎样的一个团队、这个团队具备什么样的影响力，因此一个
好的logo对提升企业形象有很大的作用。
</p></div>
<div class="p_content">第四,提升推广力度<p class="p_content_text">随着企业的经营和企业信息的不断传播，logo所代表的的内涵越来越丰富。企业的经营活动，广告宣传，文化建设，
公益活动都会被大宗接受，并通过对logo符号的记忆刻画在脑海中，经过日积月累，当大众再次见到logo时，就会联系到
曾静购买过得产品，曾经受到的服务，从而logo具备了能将企业与大众联系起来，成为连接企业与受众的桥梁。
</p></div>
<div id="d_next_befor"><a href="#" id="befor">上一篇</a> <a href="#" id="next">下一篇</a> </div>
</div>
</div>#d_right_content{
width: 872px;
height: 740px;
/* background-color: pink; */
float: right;
}
#d_titile{
margin-top: 40px;
margin-left: 50px;
width: 600px;
height: 50px;
background-color: white;
}
#d_titile #h_title{
text-align: center;
font-size: 18px;
}
#d_titile #p_time{
text-align: center;
margin-top: 15px;
font-size: 12px;
}
#d_center{
margin-top: 10px;
margin-left: 50px;
width: 600px;
height: 60px;
/* background-color: green; */
}
#d_text_line{
margin-left: 50px;
width: 650px;
height: 1px;
border-top: 1px #9C9C9C dashed;
}
#d_center .d_cent_img{
margin-top: 5px;
line-height: 20px;
text-align: right;
margin-right: 10px;
font-size: 12px;
float: left;
width: 70px;
height: 20px;
background-color: white;
display: inline;
}
#d_center .d_cent_img4,#d_center .d_cent_img5{
margin-top: 5px;
line-height: 20px;
text-align: right;
margin-right: 20px;
font-size: 12px;
float: left;
width: 60px;
height: 20px;
background-color: white;
display: inline;
}
#d_center .d_cent_img6{
margin-top: 5px;
line-height: 20px;
text-align: right;
font-size: 12px;
float: left;
width: 60px;
height: 20px;
background-color: white;
display: inline;
}
#d_center .d_cent_img7{
margin-top: 5px;
margin-left: 47.5px;
line-height: 20px;
text-align: right;
margin-right: 10px;
font-size: 12px;
float: left;
width: 70px;
height: 20px;
background-color: white;
display: inline;
}
#d_cent_picture{
background: url(../image/img2/contant_07.png)no-repeat;
}
#d_cent_picture1{
background: url(../image/img2/contant_09.png)no-repeat;
}
#d_cent_picture2{
background: url(../image/img2/contant_11.png)no-repeat;
}
#d_cent_picture3{
background: url(../image/img2/contant_13.png)no-repeat;
}
#d_cent_picture4{
background: url(../image/img2/contant_15.png)no-repeat;
}
#d_cent_picture5{
background: url(../image/img2/contant_17.png)no-repeat;
}
#d_cent_picture6{
background: url(../image/img2/contant_19.png)no-repeat;
}
#d_cent_picture7{
background: url(../image/img2/contant_28.png)no-repeat;
}
#d_cent_picture8{
background: url(../image/img2/contant_29.png)no-repeat;
}
#d_cent_picture9{
background: url(../image/img2/contant_30.png)no-repeat;
}
#d_cent_picture10{
background: url(../image/img2/contant_31.png)no-repeat;
}
#d_center #d_first_text{
margin-top: 10px;
float: left;
font-size: 12px;
margin-right: 5px;
}
#d_text{
margin-top: 5px;
margin-left: 40px;
width: 645px;
height: 550px;
background-color: white;
}
#h_first_line{
font-size: 0.1em;
}
#d_text .p_content{
font-size: 13px;
margin-top: 50px;
}
.p_content .p_content_text{
letter-spacing:0.2px;
line-height: 20px;
text-indent: 14px;
font-size: 12px;
}
#d_next_befor{
line-height: 20px;
margin: 0 auto;
margin-top: 20px;
font-size: 12px;
width: 110px;
height: 20px;
/* background-color: red; */
}
#d_next_befor #befor{
border: 1px solid #DADADA;
}
#d_next_befor #next{
float: right;
border: 1px solid #DADADA;
}最后一个div用来设置页脚
<div class="footer">
<div class="first">
<ul>
<li><a>首页</a></li>
<li>|</li>
<li><a>关于致美</a></li>
<li>|</li>
<li><a>成功案例</a></li>
<li>|</li>
<li><a>在线咨询</a></li>
</ul>
</div>
<div class="second" >
<ul>
<li>Copyright</li>
<li>©</li>
<li>2014-2015</li>
<li>致美创意工作室</li>
</ul>
</div>
<div class="third">
<ul >
<li>技术支持：凡科建站</li>
<li>|</li>
<li>管理登录</li>
</ul>
</div>
</div>/*结尾的父元素*/
.footer{
clear: both;
border-top: 1px solid #7E7E7E;;
padding-top: 25px;
height:120px;
width: 1222px;
background-color: #BABABA;
}
.first,.third,.second{
margin: 0 auto;
height: 30px;
width: 1045px;
}
.footer .first ul,.third ul,.second ul{
line-height: 30px;
margin-left: 380px;
}
.footer .first ul li,.third ul li,.second ul li{
float: left;
margin-left: 5px;
font-size: 14px;
}
.second ul{
margin-left: 360px;
}
.second ul li{
margin-left: 10px;
}
.third ul{
margin-left:400px;
}
.third ul li{
margin-left: 5px;
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
