http://www.itnba.com/
首先标题、ico添加
<link href="title.ico" rel="shortcut icon" />
然后添加页面背景、颜色等
body{
background-image: url(bk4.jpg);
background-repeat: no-repeat;
background-color: #f3f5f7;
}
然后观察页面布局，初步分层11块。
一、第一块顶部蓝杠
id命名top，置顶宽100%高8px；
#top{
100%;
height: 8px;
background-color: #002b58;
}
二、第二块
可以分为两块
左边图片，右边导航栏
<style> #title{ width: 1200px; height: 82px; } #title img{ width: 405.88px; height: 65px; float: left; margin-top: 17px; } #title_menu{ width: 720px; height: 60px; float: right; } #title_menu div{ width: 150px; height: 60px; float: left; font-size: 15px; color: #000; line-height: 60px; vertical-align: middle; text-align: center; } #title_menu div:hover{ background-color: #002b58; color: white; } </style> <body> <div id="title"> <img src="201608142309259938.png" /> <div id="title_menu"> <div style=" 120px;">基地介绍</div> <div>汉企实训中心</div> <div>汉企人资中心</div> <div>软件服务中心</div> <div>院校合作中心</div> </div> </div> </body
三、第三块
可以分为上下两层，第一层分为左右两块，左边图片，右边上下三块。
<style> #header{ width: 1200px; height: 550px; box-shadow: 2px 3px 5px rgba(0,0,0,0.4); overflow: hidden; border-radius: 6px; } #header_toper_left{ float: left; box-shadow: 0 3px 5px rgba(0,0,0,0.4); } #header_toper_right{ width: 300px; height: 430px; float: left; background-image: url(bk-righ.jpg); box-shadow: 2px 3px 5px rgba(0,0,0,0.4); } #text_a{ margin-top: 30px; height: 100px; } #text_a p{ color: #002b58; font-size: 16px; font-weight: bold; text-align: center; line-height: 30px; vertical-align: middle; } #text_b{ width: 300px; height: 190px; } #text_b p{ color: #002b58; font-size: 16px; text-align: center; line-height: 28px; vertical-align: middle; } #header_toper_right input{ width: 200px; height: 40px; background-color: #002b58; border-radius: 8px; color: white; text-align: center; line-height: 40px; vertical-align: middle; font-size: 22; margin-left: 50px; } #header_toper_right_p{ text-align: center; color: #3d2f1b; width: 300px; font-size: 14px; margin-top: 5px; } #header_footer{ width: 1200px; height: 120px; background-color: white; margin-bottom: 0px; } .header_footer-list{ width: 270px; height: 100px; float: left; margin: 20px 15px 0 15px; } .header_footer-list img{ width: 60px; height: 60px; } .header_footer-list div{ float: right; font-size: 14px; text-align: center; margin: 10px; color: #002b58; } .footer_text{ font-size: 16px; } </style> <body> <div id="header"> <div id="header_toper" > <img id="header_toper_left" src="201711201713355829.jpg" /> <div id="header_toper_right"> <div id="text_a"> <p>软件服务热线：400 0533 575</p> <p>山东人才热线：0533-3113118</p> </div> <div id="text_b"> <p>免费就业指导</p> <p>免费就业咨询</p> <p>免费网页制作课程</p> <p>免费编程学习课程</p> <p>免费数据库开发课程</p> </div> <input type="button" value="免费预约" /> <p id="header_toper_right_p">我们将尽快与您联系</p> </div> </div> <div id="header_footer"> <div class="header_footer-list"> <img src="item_1.png" /> <div> <p class="footer_text"><b>.NET工程师</b></p> <p>人才缺口最大的技术方向</p> </div> </div> <div class="header_footer-list"> <img src="item_1.png" /> <div> <p class="footer_text"><b>.NET工程师</b></p> <p>人才缺口最大的技术方向</p> </div> </div> <div class="header_footer-list"> <img src="item_1.png" /> <div> <p class="footer_text"><b>.NET工程师</b></p> <p>人才缺口最大的技术方向</p> </div> </div> <div class="header_footer-list"> <img src="item_1.png" /> <div> <p class="footer_text"><b>.NET工程师</b></p> <p>人才缺口最大的技术方向</p> </div> </div> </div> </div> </body>
