zoukankan      html  css  js  c++  java
  • 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>
    <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>企业定制&nbsp;&nbsp;&nbsp;&nbsp;四步搞定</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{
    100%;
    height:100px;}
    /*头部*/
    #head{
    100%;
    height:100px;
    background-color:#F6F;
    position:fixed;
    top:0px;
    left:0px;
    z-index:99;
    text-align:center;
    border-top:solid;}
    /*固块水平对齐*/
    #middle{
    1130px;
    height:100px;
    margin:0 auto;}
    /*左面的logo*/
    #logo{
    float:left;
    margin-top:10px;
    }
    #logo img{
    height:80px;
    border:none;}
    /*右面的电话跟菜单*/
    #headright{
    600px;
    float:right;
    height:100px;}
    /*电话*/
    #tel{
    float:right;
    padding:5px;
    height:40px;
    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{
    100%;
    height:50px;}
    #nav ul{
    font-size:15px;
    text-align:center;
    line-height:50px;}
    #nav ul li{
    float:left;
    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;
    100%;
    height:455px;
    background-image:url(banner.jpg);
    background-size:100% 455px;}
    /*主体部分*/
    /*主体部分一*/
    #content1{
    1130px;
    height:580px;
    margin:20px auto;
    background-color:#FFC;}
    /*part11 is image*/
    #part11{
    height:270px;
    350px;
    background-image:url(content11.png);
    background-size:100% 100%;
    float:left;
    margin-top:10px;
    margin-left:20px;}
    #part12{
    height:270px;
    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;
    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;
    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;
    350px;
    background-image:url(content12.png);
    background-size:100% 100%;
    float:left;
    margin-top:10px;
    margin-left:20px;}
    /**/
    #part15{
    background-color:yellow;
    height:270px;
    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;
    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{
    1130px;
    height:120px;
    margin:20px auto;
    background-color:#FFC;
    padding-top:20px;}
    #content2 img{
    display:block;
    1090px;
    height:102px;
    margin:0px auto;}
    /*content3*/
    #content3{
    1130px;
    height:480px;
    margin:20px auto;
    background-color:#FFC;
    position:relative;}
    #content3left{
    position:absolute;
    top:20px;
    left:20px;}
    #content3right{
    background-color:yellow;
    position:absolute;
    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{
    1130px;
    height:490px;
    margin:20px auto;
    background-color:#FFC;}
    #content4 table{
    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{
    1130px;
    height:300px;
    background-color:#6F9;
    margin:20px auto;}
    #content5left{
    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;
    70px;
    text-align:right;}
    #formsingle1{
    font-size:24px;
    color:red;}
    #formsingle2{
    60px;}
    #text1{
    }
    #buttonmiddle{
    text-align:center;}
    #buttonmiddle input{
    80px;}
    #content5left form div{
    line-height:26px;}
    #content5middle{
    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{
    340px;
    height:260px;
    background-color:green;
    float:right;
    margin-top:20px;
    margin-right:20px;}
    #content5right img{
    100%;
    height:100%;}
    /*link*/
    #link{
    100%;
    height:70px;
    background-color:#6f6;}
    #linkmiddle{
    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{
    100%;
    height:120px;
    background-color:#6F6;}
    #footmiddle{
    1130px;
    height:120px;
    margin:20px auto;}
    #foot1{
    float:left;
    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{
    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;
    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;}

  • 相关阅读:
    一些必不可少的Sublime Text 2插件
    sublime text 使用小技巧
    Azure Queue 和 Service Bus Queue的比较
    怎么使用Windows Azure Queue Storage 服务
    配置 SharePoint 2010 使用本机默认 SQL Server 实例 Pan
    将两个字符串中相同的地方str2无重复的输出
    javascript笔记
    C#中怎样使控件随着窗体一起变化大小(拷来学习)
    在pictureBox中画方格矩阵地图,方法比较笨,有好方法望指导
    通过一个小推理写出的程序,结果出乎意料……有哪位知道为什么吗 已解决
  • 原文地址:https://www.cnblogs.com/kaililikai/p/5796105.html
Copyright © 2011-2022 走看看