css17-----实战----官方网站的静态页面代码

最新推荐文章于 2023-01-19 10:25:49 发布

alexliu6711

最新推荐文章于 2023-01-19 10:25:49 发布

阅读量476

点赞数

原文链接：http://www.cnblogs.com/kaililikai/p/5796105.html

版权

<!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>汉企官网</title>
<link href="hanqizhuye.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="head">
<div id="middle">
<div id="logo"><img src="logo.png"/></div>
<div id="headright">
<div id="tel"><img src="tel.png"/><p>淄博人才热线：0533-110110</p></div>
<div id="nav" class="clear">
<ul>
<li><a href="#">基地介绍</a>
<ul>
<li><a href="/about/?111.html">汉企介绍</a></li>
<li><a href="/about/?110.html">汉企历程</a></li>
<li><a href="/about/?109.html">我们服务于谁</a></li>
<li><a href="/list/?142_1.html">基地架构</a></li>
<li><a href="/list/?141_1.html">汉企视角</a></li>
<li><a href="/list/?130_1.html">加入我们</a></li>
</ul>
</li>
<li><a href="#">IT人资中心</a>
<ul>
<li><a href="/list/?140_1.html">人才选拔</a></li>
<li><a href="/list/?139_1.html">人才推荐平台</a></li>
<li><a href="/list/?138_1.html">人才考评</a></li>
<li><a href="/list/?137_1.html">人才实训</a></li>
<li><a href="/list/?136_1.html">优秀员工评比</a></li>
<li><a href="/list/?135_1.html">实训公司动态</a></li>
</ul>
</li>
<li><a href="#">企业合作中心</a>
<ul id="sub_02" class="mainlevel1">
<li><a href="/list/?123_1.html">基地项目合作信息</a></li>
<li><a href="/list/?124_1.html">人才外包合作</a></li>
<li><a href="/list/?116_1.html">企业合作快讯</a></li>
<li><a href="/list/?125_1.html">会员企业招聘</a></li>
<li><a href="/list/?126_1.html">宣传片制作</a></li>
<li><a href="/list/?145_1.html">企业代理及办事处</a></li>
<li><a href="/list/?144_1.html">企业内训服务</a></li>
<li><a href="/list/?143_1.html">人才定制</a></li>
</ul>
</li>
<li><a href="#">软件服务中心</a>
<ul id="sub_02" class="mainlevel1">
<li><a href="/list/?133_1.html">业务方向</a></li>
<li><a href="/about/?128.html">预约服务</a></li>
</ul>
</li>
<li><a href="#">院校合作</a>
<ul id="sub_02" class="mainlevel1">
<li><a href="/list/?148_1.html">共建人资平台</a></li>
<li><a href="/list/?147_1.html">共建实习平台</a></li>
</li>
<li class="clear"></li>
</ul>
</div>
</div>
</div>
</div>
<div id="hidden"></div>
<div id="banner"></div>

<div id="content1">
<div id="part11"></div>
<div id="part12">
<ul>
<li id="part12img"></li>
<li class="bgcolor1"><span class="part12span1">汉企视角</span><span class="part12span2">更多<<</span></li>
<li class="clear">新火炬计划！一个超强的计划！</li>
<li>年轻人该学习...那些已经流逝的时光...</li>
<li>毕业已三年！这三年都做了些什么</li>
<li>如何就业...一个很深很深的话题</li>
<li>李克强这么说！IT新形势！！！</li>
</ul>
</div>
<div id="part13">
<ul>
<li class="bgcolor1"><span class="part12span1">优秀人才推荐</span><span class="part12span2">更多<<</span></li>
<li><img src="content15.png"/ alt="no picture!"><span>【训练感悟】访谈：张晋鹏，淄博青年月薪7000之路</span></li>
<li><img src="content16.png"/ alt="no picture!"><span>【训练感悟】职业素养教育，不是训练学生彬彬有礼</span></li>
<li><img src="conten14.png"/ alt="no picture!"><span>【职场之路】没有实力的尊严一文不值！！！！！！</span></li>
</ul>
</div>
<div id="part14"></div>
<div id="part15">
<ul>
<li class="bgcolor1"><span class="part12span1">汉企快讯</span><span class="part12span2">更多<<</span></li>
<li>汉企玛雅网络有限公司二期实训员工进驻</li>
<li>不忘初心，携手共进——“新火炬--汉企人才实践基地”成立致辞</li>
<li>四强联合，揭开淄博高端IT人才输送的新篇章</li>
<li>淄博汉企优秀博客评比大赛圆满结束</li>
<li>前端开发技术讲座圆满结束</li>
<li>ZINI151027开训啦汉企双喜临门</li>
<li>淄博汉企：2015年就业形势，90后青睐IT行业</li>
</ul>
</div>
<div id="part16">
<ul>
<li class="bgcolor1"><span class="part12span1">软件服务中心项目</span><span class="part12span2">更多<<</span></li>
<li>【汉企纵横科技】企业办公自动化系统开发</li>
<li>【汉企天启网络】教育行业系统开发与维护</li>
<li>【汉企玛雅网络】税务行业软件开发及维护</li>
<li>【汉企奇点网络】酒店类管理系统开发</li>
<li>【汉企玛雅网络】金融行业软件开发及维护</li>
<li>【汉企玛雅网络】企业进销存软件开发及维护</li>
<li>【汉企奇点网络】客户关系管理系统开发</li>
</ul>
</div>
</div>
<div id="content2"><img src="content21.png"/></div>

<div id="content3">
<div id="content3left">
<table>
<tr><td><img src="content31.jpg"/></td><td><img src="content32.jpg"/></td><td><img src="content33.jpg"</td></tr>
<tr><td><img src="content34.jpg"/></td><td><img src="content35.jpg"/></td><td><img src="content36.jpg"</td></tr>
<tr><td><img src="content37.jpg"/></td><td><img src="content38.jpg"/></td><td><img src="content39.jpg"</td></tr>
</table>
</div>
<div id="content3right">
<ul>
<li class="bgcolor1"><span class="part12span1">会员企业招聘</span><span class="part12span2">更多<<</span></li>
<li>淄博鲁泰纺织等50多家知名企业联合招聘</li>
<li>淄博汗青企业管理咨询有限公司</li>
<li>淄博弘鼎信息技术有限公司</li>
<li>淄博长风软件有限公司</li>
<li>淄博青蓝信息技术有限公司</li>
<li>淄博恩诺信息技术有限公司</li>
<li>淄博多维网络集团</li>
<li>山东清源集团有限公司</li>
<li>山东天利和软件有限公司</li>
<li>淄博商祺信息技术有限公司</li>
<li>淄博宏景软件有限公司</li>
<li>淄博乐安科技有限公司</li>
<li>淄博安信电子</li>
<li>与非门动画（淄博）</li>
<li>淄博宽正数码网络</li>
</ul>
</div>
</div>

<div id="content4">
<table>
<caption>企业定制    四步搞定</caption>
<tr>
<td><img src="41jpg.jpg"/></td>
<td><img src="42.jpg"/></td>
<td><img src="43.jpg"/></td>
<td><img src="44.jpg"/></td>
</tr>
<tr>
<td><h2>会员企业提出用人需求</h2><p>1.提出基本要求</p><p>2.提出能力要去</p><p>3.确定福利待遇</p><p>4.签订用人协议</p></td>
<td><h2>汉企针对性招聘选拨</h2><p>1.面向社会招聘</p><p>2.初步测试选拨</p><p>3.综合能力甄别</p><p>4.确定合格人员</p></td>
<td><h2>联合开展入职实训</h2><p>1.岗前技能实训</p><p>2.企业管理宣讲</p><p>3.职业素质训练</p><p>4.企业项目实战</p></td>
<td id="single1"><h2 id="single2">输送企业会员工作</h2><p>1.协调优秀待遇</p><p>2.签订劳动合同</p><p></p><p></p></td>
</tr>
</table>
</div>

<div id="content5">
<div id="content5left">
<form>
<div><p id="formsingle1">预约选拨</p></div>
<div><span>姓名：</span><input type="text"/><br /></div>
<div><span>电话：</span><input type="tel"/><br /></div>
<div><span>性别：</span><select>
<option>男</option>
<option>女</option>
</select><br /></div>
<div><span>学历：</span><select>
<option>专科在读</option>
<option>专科毕业</option>
<option>本科在读</option>
<option>本科毕业</option>
<option>本科以上</option>
</select><br /></div>
<div><span>专业：</span><input type="text" /><br /></div>
<div><span>年龄：</span><input type="text" /><br /></div>
<div><span>QQ：</span><input type="text"/><br /></div>
<div><span>验证码：</span><input type="text"/ id="formsingle2"><span id="text1">*5623</span><br /></div>
<div id="buttonmiddle"><input type="submit" value="提交"/></div>
</form>
</div>
<div id="content5middle">
<ul>
<li class="bgcolor1"><span class="part12span1">职业解决方案</span><span class="part12span2">更多<<</span></li>
<li>从1.5K销售员，到年薪18万工程师</li>
<li>从2015应届大学生，到月薪5000技术人员</li>
<li>汉企Z1N1140813连签订就业协议</li>
<li>雷果国：从1.5K到18K的5年成长之路</li>
<li>【企业委托项目】辉腾物流管理系统（中小企业版）</li>
<li>喜报：王晔入职联想控股集团</li>
<li class="clear"></li>
</ul>
</div>
<div id="content5right"><img src="51.png"/> </div>
<div class="clear"></div>
</div>

<div id="link">
<div id="linkmiddle">
<ul>
<li>友情链接</li>
<li>新浪</li>
<li>苹果</li>
<li>小米</li>
<li>友情连接</li>
<li>华为技术有限公司</li>
<li>百度</li>
<li>谷歌</li>
<li>雅虎</li>
<li>浪潮集团</li>
<li>搜狗</li>
<li>技术之家</li>
<li class="clear"></li>
</ul>
</div>
</div>

<div id="foot">
<div id="footmiddle">
<div id="foot1"><p id="footsingle1">汉企人才定制中心</p><p class="footsingle2">————淄博唯一高端IT人才专业定制输送基地</p></div>
<div id="foot2">
<div id="foot21">
<p>地址：山东省淄博市张店区共青团西路</p><p>23号（原淄博市房管局大楼）A楼4层</p><p>电话：0533-110110</p>
</div>
<div id="foot22"><img src="61.png"/></div>
</div>
<div id="foot3">
<p id="foot3single1"><span>网站首页</span><span>基地介绍</span><span>人才中心</span></p>
<p id="foot3single2"><span>企业合作中心</span><span>软件服务中心</span><span>院校合作</span></p>
</div>
<div class="clear"></div>
</div>
</div>

</body>
</html>

/*通用样式*/
*{
margin:0px;
padding:0px;}
.clear{
clear:both;}
.bgcolor1{
height:40px;
background-color:#FC3;}
li{
list-style:none;}
a{
text-decoration:none:
display:block;}
a:link,a:visited{
text-decoration:none;}
a:hover{
color:#F33;}
/*头部占位*/
#hidden{
width:100%;
height:100px;}
/*头部*/
#head{
width:100%;
height:100px;
background-color:#F6F;
position:fixed;
top:0px;
left:0px;
z-index:99;
text-align:center;
border-top:solid;}
/*固块水平对齐*/
#middle{
width:1130px;
height:100px;
margin:0 auto;}
/*左面的logo*/
#logo{
float:left;
margin-top:10px;
}
#logo img{
height:80px;
border:none;}
/*右面的电话跟菜单*/
#headright{
width:600px;
float:right;
height:100px;}
/*电话*/
#tel{
float:right;
padding:5px;
height:40px;
width:300px;}
#tel img{
float:left;
height:40px;
margin-right:10px;
border-style:none;
padding:0px;}
#tel p{
float:right;
font-size:19px;
color:#FFFFFF;
line-height:40px;}
/*菜单*/
#nav{
width:100%;
height:50px;}
#nav ul{
font-size:15px;
text-align:center;
line-height:50px;}
#nav ul li{
float:left;
width:120px;}
#nav ul li:hover{
background-color:#FF6;}
#nav ul li:hover ul{
display:block;}
#nav ul li ul{
display:none;}
#nav ul li ul li{
float:none;}
/*banner*/
#banner{
margin-top:2px;
width:100%;
height:455px;
background-image:url(banner.jpg);
background-size:100% 455px;}
/*主体部分*/
/*主体部分一*/
#content1{
width:1130px;
height:580px;
margin:20px auto;
background-color:#FFC;}
/*part11 is image*/
#part11{
height:270px;
width:350px;
background-image:url(content11.png);
background-size:100% 100%;
float:left;
margin-top:10px;
margin-left:20px;}
#part12{
height:270px;
width:350px;
background-color:yellow;
float:left;
margin-top:10px;
margin-left:20px;}
#part12 ul li{
font-size:10px;
text-align:center;
line-height:33px;}
#part12img{
height:67px;
width:350px;
background-image:url(content13.png);
background-size:350px 67px;
background-repeat:no-repeat;}
.part12span1{
float:left;
font-size:20px;
font-weight:bold;
margin-left:10px;
margin-top:2px;}
.part12span2{
float:right;
margin-right:5px;}
/*part13*/
#part13{
height:270px;
width:350px;
float:left;
background-color:yellow;
margin-top:10px;
margin-left:20px;}
#part13 ul{
text-align:center;}
#part13 ul li{
line-height:33px;
font-size:10px;
margin-top:5px;}
#part13 ul li.bgcolor1{
margin-top:0px;}
#part13 ul li img{
border-style:none;}
/*part14*/
#part14{
height:270px;
width:350px;
background-image:url(content12.png);
background-size:100% 100%;
float:left;
margin-top:10px;
margin-left:20px;}
/**/
#part15{
background-color:yellow;
height:270px;
width:350px;
float:left;
margin-top:10px;
margin-left:20px;}
#part15 ul{
text-align:center;}
#part15 ul li{
line-height:27px;
font-size:10px;
margin-top:5px;}
#part15 ul li.bgcolor1{
margin-top:0px;}
/**/
#part16{
height:270px;
width:350px;
background-color:yellow;
float:left;
margin-top:10px;
margin-left:20px;}
#part16 ul{
text-align:center;}
#part16 ul li{
line-height:27px;
font-size:10px;
margin-top:5px;}
#part16 ul li.bgcolor1{
margin-top:0px;}
/*content2*/
#content2{
width:1130px;
height:120px;
margin:20px auto;
background-color:#FFC;
padding-top:20px;}
#content2 img{
display:block;
width:1090px;
height:102px;
margin:0px auto;}
/*content3*/
#content3{
width:1130px;
height:480px;
margin:20px auto;
background-color:#FFC;
position:relative;}
#content3left{
position:absolute;
top:20px;
left:20px;}
#content3right{
background-color:yellow;
position:absolute;
width:330px;
right:20px;
top:20px;}
#content3right ul{
text-align:center;}
#content3right ul li{
text-align:left;
line-height:21px;
font-size:10px;
margin-top:5px;
padding-left:5px;}
#content3right ul li.bgcolor1{
margin-top:0px;}
/*content4*/
#content4{
width:1130px;
height:490px;
margin:20px auto;
background-color:#FFC;}
#content4 table{
width:1090px;
margin:20px auto;
background-color:#FF6;}
#content4 table caption{
font-family:"Comic Sans MS", cursive;
font-size:36px;
font-weight:bold;
padding:40px;
background-color:#6F9;
margin-top:20px;}
#content4 table tr{
height:150px;}
#content4 table tr td{
text-align:center;
vertical-align:middle;
background-color:#6F9;}
#content4 table tr td p{
line-height:35px;
background-color:#6F9;}
#single1{
background-color:#6F6;}
#single2{
margin-top:-70px;}
/*content5*/
#content5{
width:1130px;
height:300px;
background-color:#6F9;
margin:20px auto;}
#content5left{
width:240px;
height:260px;
float:left;
margin-top:20px;
margin-left:20px;
}
#content5left form{
margin:opx;
padding:0px;
font-size:10px;
border:1px solid #FFF;}
#content5left span{
display:inline-block;
width:70px;
text-align:right;}
#formsingle1{
font-size:24px;
color:red;}
#formsingle2{
width:60px;}
#text1{
}
#buttonmiddle{
text-align:center;}
#buttonmiddle input{
width:80px;}
#content5left form div{
line-height:26px;}
#content5middle{
width:470px;
height:260px;
background-color:yellow;
float:left;
margin-left:20px;
margin-top:20px;}
#content5middle ul{
margin:0px;
padding:0px;}
#content5middle ul li{
line-height:36px;
padding-left:10px;}
#content5right{
width:340px;
height:260px;
background-color:green;
float:right;
margin-top:20px;
margin-right:20px;}
#content5right img{
width:100%;
height:100%;}
/*link*/
#link{
width:100%;
height:70px;
background-color:#6f6;}
#linkmiddle{
width:1130px;
height:70px;
margin:20px auto;}
#linkmiddle ul{
margin:0px;
padding:0px;
height:70px;}
#linkmiddle ul li{
float:left;
margin-left:20px;
line-height:70px;}
/*foot*/
#foot{
width:100%;
height:120px;
background-color:#6F6;}
#footmiddle{
width:1130px;
height:120px;
margin:20px auto;}
#foot1{
float:left;
width:33%;
height:100%;
text-align:center;}
#footsingle1{
line-height:60px;
font-size:36px;
font-weight:bold;
padding-top:15px;}
#footsingle2{
vertical-align:text-top;}
#foot2{
width:33%;
height:120px;
float:left;}
#foot21{
float:left;}
#foot21 p{
line-height:30px;
text-align:center;
margin-top:8px;}
#foot22{
float:left;
margin-left:40px;}
#foot22 img{
height:120px;}
#foot3{
float:left;
width:34%;
height:100%;}
#foot3single1{
line-height:60px;
text-align:center;}
#foot3single1 span{
margin-left:20px;}
#foot3single2{
line-height:60px;
text-align:center;}
#foot3single2 span{
margin-left:20px;}

转载于:https://www.cnblogs.com/kaililikai/p/5796105.html

alexliu6711

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css17-----实战----官方网站的静态页面代码

<!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><met...
复制链接

扫一扫