直接上干货
html基础
项目介绍
前端练手项目（2）
项目实现必须对HTML和CSS有相应的基础，相对基础的前端网页设计，欢迎与作者交谈。希望对大家有所帮助！加油，你可以的！
总共两个项目一个致美创意和飘城旅游
致美创意
总共五个页面
部分源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>致美创意</title>
<style type="text/css">
body{margin:0px;padding: 0px;font-size: 13px;font-family: }
a{text-decoration: none;color: black;}
#Heading{width:100%;height: 30px;margin: 0px auto;background-image: linear-gradient(to top,#dadada,#f7f7f7);border-bottom: 1px solid #eeeeee;}
#img_heading_tel{float: right;margin-right: 150px;margin-top: 8px;}
#d_nav{width: 80%;margin: 0px auto;height: 99px;border: 0px solid black;}
#a_logo{width:195px ;height:41px ;float: left;display: inline;margin-top: 40px;margin-left: 180px;}
.a_nav{width: 80px;margin:0px 10px;font-size: 13px;float: left;text-align: center;display: inline;height: 29px;}
.a_nav:hover{font-weight: bold;}
#a_nav1{border-bottom: 3px solid black;}
#nav_nav{float: right;border: 0px solid black;width: ;margin-right: 134px;margin-top: 54px;}
.s_floot{float: left;display: inline;}
#a_imgbg{background: url(../../image/img/homepage_10.png) no-repeat center top;display: block;width: 1222px;height: 401px;margin: 0px auto;}
#d_body{width: 1050px;height: auto;margin: 0px auto;border: 0px solid black;margin-top: 45px;position: relative;}
#d_function{width: 950px;height: 110px;margin: 0px auto;border: 0px solid black;}
#d_function1{width: 108px;height: 110px;display: inline;margin-left: 70px;}
#d_exhib{margin-top: 80px;}
.d_head{text-align: center;font-weight: normal;color: red;font-size: 24px;border: 1px solid #dadbdc;text-shadow:1px -1px 1px #a31618;background:#2d3237;}
.hr_head{border-top: 2px solid #efe8e9;margin-top: 6px;}
#s_head_chinese{text-align: center;font-size: 14px;width: 76px;height: 14px;position: absolute;top: 222px;left: 482px;background: white;}
#d_exhid{margin-top: 46px;width: 100%;}
.d_bord{width: 172px;height: 300px;float: left;display: inline;margin:0px 20px;}
#d_bord1{background: #2d3237;margin-left: 10px;}
.a_bord_img1{background-image: url(../../image/img/homepage_30_29.png);display: block;width: 172px;height: 230px;}
.a_bord_chinese_1{color: red;display: block;margin-top: 14px;margin-left: 27px;line-height: 19px;}
.a_bord_chinese_2{color: black;display: block;margin-top: 14px;margin-left: 27px;line-height: 19px;}
.a_bord_english{color: white;display: block;margin-left: 27px;line-height: 19px;font-variant: small-caps;}
#d_bord2{background: red;}
.a_bord_img2{background-image: url(../../image/img/homepage_30_31.png);display: block;width: 172px;height: 230px;}
#d_bord3{background: #2d3237;}
.a_bord_img3{background-image: url(../../image/img/homepage_30_33.png);display: block;width: 172px;height: 230px;}
#d_bord4{background: red;}
.a_bord_img4{background-image: url(../../image/img/homepage_30_35.png);display: block;width: 172px;height: 230px;}
#d_bord5{background: #2d3237;}
.a_bord_img5{background-image: url(../../image/img/homepage_30_37.png);display: block;width: 172px;height: 230px;}
#d_about_us{margin-top: 400px;clear: both;text-align: center;}
.s_white{color: white;}
#s_head_about{position: absolute;font-size: 14px;width: 76px;height: 14px;top: 665px;left: 482px;background: white;}
#d_about_us_text{margin-top: 22px;color: #666666;}
#d_about_text{line-height: 27px;}
#h3_about_head{font-size: 18px;line-height: 34px;}
.b_font{font-size: 18px;}
#d_service{margin-top: 80px;}
#s_head_service{position: absolute;font-size: 14px;width: 76px;height: 14px;top: 909px;left: 482px;display: block;background:white;}
#d_process_content{margin: 48px auto ;border: 0px
solid black;width: 750px;height: 22px;overflow: visible;}
.image_process{float: left;margin-left: 14px;display: inline;margin-top: -2px;}
.s_process{color: #666666;display: inline;float: left;font-weight: bold;margin-left: 14px;}
.image_right{margin-right:8px;margin-top: 7px;float: left; }
#d_bottom{width: 100%;height: 100px;margin-top: 0px;text-align: center;background:rgb(234,234,234) ;}
#d_bottom_text{margin-top: 40px;line-height: 2em;}
#chu:hover{font-weight: bold;}
</style>
</head>
<body>
<div id="Heading">
<img src="../../image/img/homepage_03.png" id="img_heading_tel">
</div>
<div id="d_nav">
<a href="#" id="a_logo"><img src="../../image/img/homepage_07.png"></a>
<nav id="nav_nav">
<span>
<a href="index.html" class="a_nav" id="a_nav1">首页</a><span class="s_floot">|</span>
<a href="about.html" class="a_nav" >关于致美</a><span class="s_floot">|</span>
<a href="achieveme.html" class="a_nav" >成功案例</a><span class="s_floot">|</span>
<a href="news.html" class="a_nav" >新闻动态</a><span class="s_floot">|</span>
<a href="#" class="a_nav" >在线咨询</a><span class="s_floot">|</span>
<a href="contant.html" class="a_nav" >联系我们</a><span class="s_floot"></span>
</span>
</nav>
</div>
<a href="#" id="a_imgbg"></a>
<div id="d_body">
<div id="d_function">
<a id="d_function1" href="#"><img src="../../image/img/homepage_13.png"></a>
<a id="d_function1" href="#"><img src="../../image/img/homepage_15.png"></a>
<a id="d_function1" href="#"><img src="../../image/img/homepage_17.png"></a>
<a id="d_function1" href="#"><img src="../../image/img/homepage_19.png"></a>
<a id="d_function1" href="#"><img src="../../image/img/homepage_21.png"></a>
</div>
<div id="d_exhib">
<div class="d_head">EXHIBITION</div>
<hr class="hr_head" color="#2d3237" />
<span id="s_head_chinese">案例演示</span>
</div>
<div id="d_exhid">
<div class="d_bord" id="d_bord1">
<a href="#" class="a_bord_img1">
</a>
<a href="#" class="a_bord_chinese_1">品牌设计</a>
<a href="#" class="a_bord_english">BRAND DISIGN</a>
</div>
<div class="d_bord" id="d_bord2">
<a href="#" class="a_bord_img2"></a>
<a href="#" class="a_bord_chinese_2">平面设计</a>
<a href="#" class="a_bord_english">GRAPHIC DISIGN</a>
</div>
<div class="d_bord" id="d_bord3">
<a href="#" class="a_bord_img3"></a>
<a href="#" class="a_bord_chinese_1">网页设计</a>
<a href="#" class="a_bord_english">WEB DISIGN</a>
</div>
<div class="d_bord" id="d_bord4">
<a href="#" class="a_bord_img4"></a>
<a href="#" class="a_bord_chinese_2">电子设计</a>
<a href="#" class="a_bord_english">ELECTRONIC DISIGN</a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_bord_img5"></a>
<a href="#" class="a_bord_chinese_1">空间/建筑</a>
<a href="#" class="a_bord_english">SPACE/<br/>ARCHITECTURE</a>
</div>
</div>
<div id="d_about_us">
<div>
<div class="d_head">ABOUT <span class="s_white">US</span> </div>
<hr class="hr_head" color="#2d3237" />
<span id="s_head_about">关于我们</span>
</div>
<div id="d_about_us_text">
<span id="h3_about_head">致美创意，因为<b class="b_font">专注</b>，所有<b class="b_font">专业</b></span>
<p id="d_about_text">无论您是创业路上的文艺青年、店面商铺的老板、需要强化品牌的企业家、网店店主....…<br/>我们都能为您提供高端、低价的设计，我们以最有效、最快速的方式为您提供最合适的设计方案</p>
</div>
</div>
<div id="d_service">
<div>
<div class="d_head">SERVICE <span class="s_white">PROCESS</span> </div>
<hr class="hr_head" color="#2d3237" />
<span id="s_head_service">服务流程</span>
</div>
<div id="d_process_content">
<img src="../../image/img/homepage_29.png" class="image_process"><span class="s_process">项目洽谈，根据需求报价</span>
<img src="../../image/img/homepage_40.png" class="image_right">
<img src="../../image/img/homepage_31.png" class="image_process">
<span class="s_process" class="s_process">预付订金，开始设计</span>
<img src="../../image/img/homepage_40.png" class="image_right">
<img src="../../image/img/homepage_34.png" class="image_process">
<span class="s_process">修改定稿，完成设计</span>
<img src="../../image/img/homepage_40.png" class="image_right">
<img src="../../image/img/homepage_37.png" class="image_process">
<span class="s_process">签收付尾款</span>
</div>
</div>
</div>
<div id="d_bottom">
<div id="d_bottom_text">
<span><br>
<a href="" id="chu">首页</a>|
<a href="" id="chu">关于致美</a>|
<a href="" id="chu">成功案例</a>|
<a href="" id="chu">在线咨询</a>
</span><br/>
<span>Copyright © 2014-2015 致美创意工作室</span><br/>
技术支持：
<a href="" id="chu">凡客建站</a> |
<a href="" id="chu">管理登录</a>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>联系我们</title>
<style type="text/css">
body{margin:0px;padding: 0px;font-size: 13px;font-family: }
a{text-decoration: none;color: black;}
#Heading{width:100%;height: 30px;margin: 0px auto;background-image: linear-gradient(to top,#dadada,#f7f7f7);border-bottom: 1px solid #eeeeee;}
#img_heading_tel{float: right;margin-right: 150px;margin-top: 8px;}
#d_nav{width: 80%;margin: 0px auto;height: 99px;border: 0px solid black;}
#a_logo{width:195px ;height:41px ;float: left;display: inline;margin-top: 40px;margin-left: 180px;}
.a_nav{width: 80px;margin:0px 10px;font-size: 13px;float: left;text-align: center;display: inline;height: 29px;}
.a_nav:hover{font-weight: bold;}
#a_nav1{border-bottom: 3px solid black;}
#nav_nav{float: right;border: 0px solid black;width: ;margin-right: 134px;margin-top: 54px;}
.s_floot{float: left;display: inline;}
#a_imgbg{background: url(../../image/img/homepage_10.png) no-repeat center top;display: block;width: 1222px;height: 401px;margin: 0px auto;}
#d_body{width: 1050px;height: auto;margin: 0px auto;border: 1px solid}
#d_left{width:20%;height: auto;border: 0px solid black;margin-top: 20px;float: left;}
#d_word{height: 28px;width: 100%;border-bottom: 2px solid rgb(166,166,166);position: relative;}
.d_word_contant{position: absolute;display: block;border-bottom: 2px solid rgb(255,86,0);width: 70px;top: 10px;font-size: 13px;}
#d_kefu{margin-top: 5px;width: 100%;height: 60px;border-bottom: 2px dotted rgb(166,166,166);}
#kefu{height:21px;width: 100%;margin-top: 8px; }
.d_kefu_s{display:inline;margin-top: -2px;float: left;ma}
.zzz{float: left;margin-left: 5px;}
#work_time{margin-top: 10px;border-bottom: 2px dotted rgb(166,166,166);height: 90px;}
#d_work_time{display: inline;margin-top: -2px;float: left;}
.d_work_tiem_word{float: left;font-size: 16px;margin-left: 3px;}
#kong{clear: both;margin-top: 15px;line-height: 2em;}
#d_content{margin-top: 15px;}
.d_b{clear: both;width: 100%;height: 16px;float: left;margin-top: 10px;}
#d_right{width: 76%;height:750px;border: 0px solid black;float: right;margin-left:10px;margin-top: 20px;}
#d_logo{width: 100%;height: auto;line-height: 2em;text-align: center;padding-top: 30px;color: rgb(93,93,93);}
.d_logo_why{font-size: 20px;}
#d_fenxiang{margin-top: 10px;width: 80%;height: 45px;border: 0px solid black;}
.d_img_fen{float: left;display: inline;margin-left: 10px;}
.d_left{float: left;}
#d_word_logo{clear: both;margin-top: 10px;border-top: 2px dotted rgb(166,166,166);padding-right: 90px;}
/*.d_word_stype{line-height: 2em;}*/
.d_word_z{text-indent: 21px;}
#d_button{width:100%;height: 40px;text-align: center;margin-top: 20px;}
.button_d{background-color:#fff;border: 1px solid rgb(219,234,239);margin-left: 10px;}
#d_bottom{width: 100%;height: 100px;margin-top: 0px;text-align: center;background:rgb(234,234,234) ;clear: both;}
#d_bottom_text{margin-top: 40px;line-height: 2em;}
#chu:hover{font-weight: bold;}
</style>
</head>
<body>
<div id="Heading">
<img src="../../image/img/homepage_03.png" id="img_heading_tel">
</div>
<div id="d_nav">
<a href="#" id="a_logo"><img src="../../image/img/homepage_07.png"></a>
<nav id="nav_nav">
<span>
<a href="index.html" class="a_nav" >首页</a><span class="s_floot">|</span>
<a href="about.html" class="a_nav" >关于致美</a><span class="s_floot">|</span>
<a href="achieveme.html" class="a_nav" >成功案例</a><span class="s_floot">|</span>
<a href="news.html" class="a_nav" >新闻动态</a><span class="s_floot">|</span>
<a href="#" class="a_nav" >在线咨询</a><span class="s_floot">|</span>
<a href="contant.html" class="a_nav" id="a_nav1">联系我们</a><span class="s_floot"></span>
</span>
</nav>
</div>
<a href="#" id="a_imgbg"></a>
<div id="d_body">
<div id="d_left">
<div id="d_word">
<span class="d_word_contant">在线客服</span>
</div>
<div id="d_kefu">
<div id="kefu">
<a href="#">
<img src="../../image/img/contant_03.png" class="d_kefu_s" /><span class="zzz">客服一</span></a>
</div>
<div id="kefu" >
<a href="#">
<img src="../../image/img/contant_03.png" class="d_kefu_s" /><span class="zzz"> 客服二
</a></span>
</div>
</div>
<div id="work_time">
<img src="../../image/img/contant_33.png" id="d_work_time"/>
<b class="d_work_tiem_word">工作时间</b><br/>
<div id="kong">
<span>周一至周五：8：30-17：30</span><br/>
<span>周六至周日：9：00-17：00</span>
</div>
</div>
<div id="d_content">
<img src="../../image/img/contant_39.png" id="d_work_time" />
<b class="d_work_tiem_word">联系方式</b><br/>
<span class="d_b">陈经理：1300000</span><br/>
</div>
</div>
<div id="d_right">
<div id="d_logo">
<span class="d_logo_why">为什么要设计logo？</span>
<br/>2015-06-11 11:16
</div>
<div id="d_fenxiang">
<span class="d_left">分享到：</span>
<img src="../../image/img/contant_07.png" class="d_img_fen"><a class="d_left" href="#">复制网址</a>
<img src="../../image/img/contant_11.png" class="d_img_fen"><a class="d_left" href="#">腾讯微博</a>
<img src="../../image/img/contant_13.png" class="d_img_fen"><a class="d_left" href="#">新浪微博</a>
<img src="../../image/img/contant_15.png" class="d_img_fen"><a class="d_left" href="#">QQ空间</a>
<img src="../../image/img/contant_17.png" class="d_img_fen"><a class="d_left" href="#">开心网</a>
<img src="../../image/img/contant_19.png" class="d_img_fen"><a class="d_left" href="#">人人网</a>
<img src="../../image/img/contant_28.png" class="d_img_fen"><a class="d_left">
豆瓣网</a>
<img src="../../image/img/contant_29.png" class="d_img_fen"><a class="d_left" href="#">搜狐微博</a>
<img src="../../image/img/contant_30.png" class="d_img_fen"><a class="d_left" href="#">网易微博</a>
<img src="../../image/img/contant_31.png" class="d_img_fen"><a class="d_left" href="#">百度空间</a>
<img src="../../image/img/contant_39.png" class="d_img_fen"><a class="d_left" href="#">百度贴吧</a>
</div>
<div id="d_word_logo">
<p class="d_word_stype">logo传递的是一种精神和理念，他应该传递出公司的文化和生命，所以公司或者说是任何组织都应该有着自己相符的标志。</p>
<br/>
<p class="d_word_stype">第一，展现品牌实力<br/>
<span class="d_word_z">logo是独一无二的，能够代表一个企业，所以让客户看了之后就会加深对企业的印象。如今的市场商品种类繁多，各种logo商标符号更是数不胜数，只有特点鲜明、容易辨认和记忆、含义深刻、造型优美的标志，才能在同业中突显出来。让它能够区别于其它企业、产品或服务，使受众对企业留下深刻印象，所以设计一个好的logo尤为重要。</span>
</p> <br/>
<p class="d_word_stype">
第二，展现品牌实力<br/>
<span class="d_word_z">
当客户开始了解一个企业或品牌时，他们所感觉到一不只是这家企业的产品和服务，他们肯定对企业的整体形象。有个自己的印象，比如说这家企业Logo是否经过专业设计﹖等等这些细节都将影响客户对这家企业或品牌实力的才考察。
</span>
</p><br/>
<p class="d_word_stype">
第三，提升企业形象<br/>
<span class="d_word_z">
logo代表着企业的经营理念，文化特色，价值取向，反映企业的产品特点，经营思路，是企业精神的具体象征。当客户看到我们的企业logo设计得非常专业，非常独特时，在心里就暗暗给这个企业加分，因为客户从logo识别中就可以看一个企业的气质，这些信息就能够告诉客户这是怎样的一个团队、这个团队具备什么样的影响力，因此一个好的logo对提升企业形象有很大的作用。
</span>
</p>
<br/>
<p class="d_word_stype">
第四，提高推广力度<br/>
<span class="d_word_z">
随着企业的经营和企业信息的不断传播，logo所代表的内涵越来越丰富。企业的经营活动，广告宣传，文化建设，公益活动都会被大众接受，并通过对logo符号的记忆刻画在脑海中，经过日积月累，当大众再次见到logo时，就会联系到曾经购买过的产品，曾经受到的服务，从而logo具备了能将企业与大众联系起来，成为连接企业与受众的桥梁。
</span>
</p>
</div>
<div id="d_button">
<button class="button_d">上一篇</button>
<button class="button_d">下一篇</button>
</div>
</div>
</div>
<div id="d_bottom">
<div id="d_bottom_text">
<span><br>
<a href="" id="chu">首页</a>|
<a href="" id="chu">关于致美</a>|
<a href="" id="chu">成功案例</a>|
<a href="" id="chu">在线咨询</a>
</span><br/>
<span>Copyright © 2014-2015 致美创意工作室</span><br/>
技术支持：
<a href="" id="chu">凡客建站</a> |
<a href="" id="chu">管理登录</a>
</div>
</div>
</body>
</html>