3.20 页面布局
<body> <div style="width:0px; height:0px; border-bottom:100px solid #900; border-top:100px solid #0c3;border-right:100px solid #33c;border-left:100px solid #00F;"></div> </body>
效果图
汉企网页布局:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>汉企IT人才及产业基地</title>
<style type="text/css">
*{
margin:0px auto;
padding:0px;}
#top{
width:1200px;
height:122px;}
#left{
width:480px;
height:65px;
float:left;
margin-top:17px;
}
.right_2{
width:150px;
height:60px;
}
#right_1,.right_2{
float:left;
text-align:center;
vertical-align:middle;
line-height:60px;
}
#right_1:hover{
background-color:rgb(0, 43, 88);
cursor:pointer;
color:white;}
.right_2:hover{
background-color:rgb(0, 43, 88);
cursor:pointer;
color:white;}
#top_1{
width:1200px;
height:550px;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 4px 0 #B5B5B5;}
#top_left_1{
width:1200px;
height:430px;
box-shadow:0 2px 4px 0 #B5B5B5;}
#top_left_2{
width:1200px;
height:120px;
overflow:hidden}
.left_2{
width:300px;
text-align:center;
color:#002b58;}
#left_2_1 p{
margin-top:8px;}
.top_left_2_2{
width:270px;
height:100px;
float:left;
margin-top:20px;
margin-left:15px;
margin-right:15px;}
</style>
</head>
<body style="background-image:url(file:///E|/%E5%AD%A6%E4%B9%A0/0315/3.20%20am%20%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80/img/bk4.jpg); background-repeat:no-repeat; background-color:#fff; background-size:100% 500px;">
<div style="width:1349px; height:8px; margin:0px; background-color:#002b58;"></div>
<!--菜单-->
<div id="top">
<div id="left">
<a href="http://www.itnba.com/">
<img src="file:///E|/学习/0315/3.20 am 页面布局/img/201608142309259938.png" width="405.88" height="65" />
</a>
</div>
<div id="right">
<div id="right_1" style="width:120px; height:60px;">基地介绍</div>
<div class="right_2">汉企实训中心</div>
<div class="right_2">汉企人资中心</div>
<div class="right_2">软件服务中心</div>
<div class="right_2">院校合作中心</div>
</div>
</div>
<!--大图轮播-->
<div id="top_1">
<div id="top_left_1">
<img src="file:///E|/学习/0315/3.20 am 页面布局/img/201712041707363702.jpg" width="900" height="430" />
<div style="width:300px; height:430px; float:right; background:url(file:///E|/%E5%AD%A6%E4%B9%A0/0315/3.20%20am%20%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80/img/bk.jpg)">
<div class="left_2" style="height:140px; font-weight:bold; vertical-align:middle; display:table-cell;">
<p>软件服务热线：400 0533 575</p>
<p style="margin-top:9px;">山东人才热线：0533-3113118</p>
</div>
<div id="left_2_1" class="left_2" style="height:190px">
<p>免费就业指导</p>
<p>免费就业咨询</p>
<p>免费网页制作课程</p>
<p>免费编程学习课程</p>
<p>免费数据库开发课程</p>
</div>
<div class="left_2" style="height:75px">
<input type="button" value="免费预约" style=" width:200px; height:40px; background-color:#002b58; color:#fff; border:0px; font-size:16px; border-radius:8px;" />
<p style="font-size:14px; color:#000; margin-top:7px;">我们将尽快与您联系</p>
</div>
</div>
</div>
<div id="top_left_2">
<div class="top_left_2_2">
<img src="file:///E|/学习/0315/3.20 am 页面布局/img/item_12.png" width="60" height="60" style="margin-top:5px; margin-left:10px; float:left;" />
<div style="width:160px; float:left; height:50px; text-align:center; vertical-align:middle; line-height:22px; color:#002b58;margin-top:12px; margin-left:10px;">
<span style="display:block; width:100px;"><b>.NET工程师</b></span>
<span style="font-size:14px;">人才缺口最大的技术方向</span>
</div>
</div>
<div class="top_left_2_2">
<img src="file:///E|/学习/0315/3.20 am 页面布局/img/item_12.png" width="60" height="60" style="margin-top:4px; margin-left:4px;" />
<div style="width:206px; float:right; height:100px; text-align:center; vertical-align:middle; line-height:22px; color:#002b58;margin-top:7px;">
<p><b>.NET工程师</b></p>
<p style="font-size:14px;">人才缺口最大的技术方向</p>
</div>
</div>
<div class="top_left_2_2">
<img src="file:///E|/学习/0315/3.20 am 页面布局/img/item_12.png" width="60" height="60" style="margin-top:4px; margin-left:4px;" />
<div style="width:206px; float:right; height:100px; text-align:center; vertical-align:middle; line-height:22px; color:#002b58;margin-top:7px;">
<p><b>.NET工程师</b></p>
<p style="font-size:14px;">人才缺口最大的技术方向</p>
</div>
</div>
<div class="top_left_2_2">
<img src="file:///E|/学习/0315/3.20 am 页面布局/img/item_12.png" width="60" height="60" style="margin-top:4px; margin-left:4px;" />
<div style="width:206px; float:right; height:100px; text-align:center; vertical-align:middle; line-height:22px; color:#002b58;margin-top:7px;">
<p><b>.NET工程师</b></p>
<p style="font-size:14px;">人才缺口最大的技术方向</p>
</div>
</div>
</div>
</div>
<br />
<br />
<div style="width:100px; height:100px; "></div>
</body>
</html>
posted on 2018-03-23 10:49 sunyexiang 阅读(104) 评论(0) 编辑 收藏 举报
