Web前端-html页面-做过的一个公司的主页
总结：
1.使用美工的UI图，利用ps切片来获取精确尺寸与位置。
2.利用
来链接外部基础、特殊样式，减少大量代码。
3.尽量考虑某些元素共有样式，利用class样式来公用。
话不多说，来图镇楼
1.html代码
<html>
<head>
<meta charset="utf-8" />
<title>员源企业title>
<meta name="keywords" content="人力资源，技能培训，企业服务，劳动派遣" />
<meta name="description" content="上海员源主要业务有：培训、人事代理、项目申报、劳务派遣、企业咨询、验厂辅导等服务；涉及电子、机械、食品、饮料、化妆、化纤、工艺、卫浴、运动、保健、服装、鞋帽、
轻纺、印刷、印花、商贸、物流等多种行业的大、中、小企业服务。" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/js.js">script>
head>
<body>
<div id="top">
<div class="company_infor right">
<span class="company_infor_public home_bg left">设置主页span>
<span class="company_infor_public collect_bg left">收藏本站span>
<span class="tel right">服务电话: <font>0592-7XXXXXXfont>span>
div>
<div class="nav right">
<ul>
<li><a href="#">网页首页a>li>
<li><a href="#">关于员源a>li>
<li><a href="#">人才通道a>li>
<li><a href="#">技能培训a>li>
<li><a href="#">劳务派遣a>li>
<li><a href="#">企业服务a>li>
<li><a href="#">成功案例a>li>
<li><a href="#">新闻资讯a>li>
<li id="contact"><a href="#">联系我们a>li>
ul>
div>
div>
<div id="banner">
<div class="banner_content">
<img src="img/banner.jpg" width="1000" height="436" />
div>
div>
<div id="service">
<div id="company_title">
<div class="title1">
<img src="img/title1.jpg" />
div>
div>
<div id="service_picture">
<div class="picture1 left">
<h4>企业培训h4>
<div class="service_public">
<p class="training_intro">为企业经营诊断整合、体系建立、流程梳理、p>
<p class="training_intro">各种类型的员工培训、代理企业新技术项目p>
div>
div>
<div class="picture2 left i2width">
<h4>劳务派遣h4>
<div class="service_public">
<p class="training_intro">为企业提供劳务用工派遣（临时工、小时工、p>
<p class="training_intro">普工、固定工、承包生产线、短期项目承包、p>
<p class="training_intro">...p>
div>
div>
<div class="picture3 right">
<h4>企业服务h4>
<div class="service_public">
<p class="training_intro">为企业提供基、中、高端技工，基、中、高p>
<p class="training_intro">端管理人才和人才测评p>
div>
div>
div>
div>
<div id="case">
<div id="company_title">
<div class="title2">
<img src="img/title2.png" />
div>
div>
<div id="ClassCase">
<div class="picture4 left">
<div class="custom_case_content">
<h3>案例名称：新员工培训h3>
<img src="img/i4.png" width="271px" height="125px"/>
<p>“《劳动合同法》明确了劳务派遣的用工形式，是把双刃剑，一方面它的执行提高了劳动者的维权意识，一方面也规范了企业的用工...p>
div>
<a href="#"><img class="more" src="img/more.jpg" width="74" height="24"/>a>
div>
<div class="picture4 left i3width">
<div class="custom_case_content">
<h3>案例名称：新员工培训h3>
<img src="img/i4.png" width="271px" height="125px"/>
<p>“《劳动合同法》明确了劳务派遣的用工形式，是把双刃剑，一方面它的执行提高了劳动者的维权意识，一方面也规范了企业的用工...p>
div>
<a href="#"><img class="more" src="img/more.jpg" width="74" height="24"/>a>
div>
<div class="picture4 right">
<div class="custom_case_content">
<h3>案例名称：新员工培训h3>
<img src="img/i4.png" width="271px" height="125px"/>
<p>“《劳动合同法》明确了劳务派遣的用工形式，是把双刃剑，一方面它的执行提高了劳动者的维权意识，一方面也规范了企业的用工...p>
div>
<a href="#"><img class="more" src="img/more.jpg" width="74" height="24"/>a>
div>
div>
div>
<br />
<div id="info-max">
<div id="info_title">
<div class="info_ltitle">
<div class="div_info_h3">
<h3>员源新闻 <span>HOT NEWspan>h3> div>
<div class="info_ltitle_right">更多<img src="img/logo2.png"/>div>
div>
<div class="info_rtitle">
<div class="div_info_h3">
<h3>员源最新招聘 <span>New Jobspan>h3> div>
<div class="info_ltitle_right">更多<img src="img/logo2.png"/>div>
div>
div>
<div id="info_content">
<div id="info_left">
<div id="info_left1">
<div class="div_info_img"><img src="img/info1.png"/>div>
<div class="info_img_right">
<h2>如今慢慢趋于转向“劳务外包”h2>
<p>“目前这几年下来暂不招工人，许多都在天然减员，能省下公司一笔成本，下一步还将经过扩展外包的方法进一步削减出产一线的用工”，马良广接受采访...p>
div>
div>
<div id="info_left2">
<ul>
<li><a href="#"><span>如今慢慢趋于转向“劳务外包”span>a>li>
<li><a href="#"><span>劳务派遣行业门槛将提高span>a>li>
<li><a href="#"><span>农民工司令张全收：珠三角已不是人力大本营span>a>li>
<li><a href="#"><span>2012新法下劳务派遣形式分析与派遣员工管理高级研讨会span>a>li>
<li><a href="#"><span>掘金中国制造：工段外包的秘密span>a>li>
<li><a href="#"><span>全国工会组织劳务派遣工入会工作现场经验交流会议在沈阳召开span>a>li>
ul>
div>
div>
<div id="info_right">
<div id="div_table">
<table cellpadding="9" border="0" cellspacing="0">
<tr class="odd"><td class="td">职位名称td><td>工作地点td><td>招聘数量td><td>薪资td><td>结束时间td>
tr>
<tr class="even"><td>营销总监td><td>福州td>
<td>1td><td>面议td><td>2014-06-30td>
tr>
<tr class="odd"><td>金融副总理td><td>晋江td>
<td>1td><td>面议td><td>2014-06-30td>
tr>
<tr class="even"><td>市场经理td><td>成都td>
<td>1td><td>面议td><td>2014-06-30td>
tr>
<tr class="odd"><td>营销总监td><td>福州td>
<td>1td><td>面议td><td>2014-06-30td>
tr>
<tr class="even"><td>金融副总理td><td>晋江td>
<td>1td><td>面议td><td>2014-06-30td>
tr>
<tr class="odd"><td>金融副总理td><td>晋江td>
<td>1td><td>面议td><td>2014-06-30td>
tr>
<tr class="even"><td>市场经理td><td>成都td>
<td>1td><td>面议td><td>2014-06-30td>
tr>
<tr class="odd"><td>营销总监td><td>福州td>
<td>1td><td>面议td><td>2014-06-30td>
tr>
<tr class="even"><td>金融副总理td><td>晋江td>
<td>1td><td>面议td><td>2014-06-30td>
tr>
table>div>
div>
div>
div>
<div id="test-max">
<div id="text-title">
<div class="div_info_h3 partner">
<h3>员源合作企业 <span>Customer testimonialsspan>h3> div>
div>
<div id="text-content">
<div class="text-content1">
<div class="text-lcontent left"><img src="img/Coke.png"/><span>厦门太古可口可乐饮料有限公司span>div>
<div class="text-lcontent left"><img src="img/meike.png"/><span>厦门太古可口可乐饮料有限公司span>div>
<div class="text-lcontent left"><img src="img/quechao.png"/><span>厦门太古可口可乐饮料有限公司span>div>
<div class="text-lcontent left"><img src="img/al.png"/><span>厦门太古可口可乐饮料有限公司span>div>
<div class="text-lcontent1 right "><img src="img/kaiqi.png"/><span>厦门太古可口可乐饮料有限公司span>div>
div>
<div class="text-content2">
<div class="text-lcontent left"><img src="img/Coke.png"/><span>厦门太古可口可乐饮料有限公司span>div>
<div class="text-lcontent left"><img src="img/meike.png"/><span>厦门太古可口可乐饮料有限公司span>div>
<div class="text-lcontent left"><img src="img/quechao.png"/><span>厦门太古可口可乐饮料有限公司span>div>
<div class="text-lcontent left"><img src="img/al.png"/><span>厦门太古可口可乐饮料有限公司span>div>
<div class="text-lcontent1 right "><img src="img/kaiqi.png"/><span>厦门太古可口可乐饮料有限公司span>div>
div>
div>
div>
<div id="friendlink">
<div id="links">
<ul >
<li><a href="#">21世纪人才网a>li>
<li><a href="#">上海总工会a>li>
<li id="big"><a href="#">上海人力资源和社会保障局a>li>
<li><a href="#">中国人力资源网a>li>
ul>
div>
div>
<div id="footer_nav" >
<div id="bootme_nav">
<ul>
<li><a href="#">网页首页a>li>
<li><a href="#">关于员源a>li>
<li><a href="#">人才通道a>li>
<li><a href="#">技能培训a>li>
<li><a href="#">劳务派遣a>li>
<li><a href="#">企业服务a>li>
<li><a href="#">成功案例a>li>
<li><a href="#">新闻资讯a>li>
<li id="contact"><a href="#">联系我们a>li>
ul>div>
div>
<div id="footer_bootme" >
<div id="bootme1">
<p class="bootme_intro">上海员源主要业务有：培训、人事代理、项目申报、劳务派遣、企业咨询、验厂辅导等服务；涉及电子、机械、食品、饮料、化妆、化纤、工艺、卫浴、运动、保健、服装、鞋帽、p>
<p class="bootme_intro">轻纺、印刷、印花、商贸、物流等多种行业的大、中、小企业服务，赢得了上百家知名企业的欢迎和信赖，已拥有较多的集团、大、中、小企业成为我们长期合作的伙伴。p>
div>
<div id="bootme2">
<div id="saosao">
<img src="img/saosao.png" />
<span>扫一扫span>
div>
<div id="lianxi">
<img src="img/lianxi.png" />
div>
<div id="beian">
Copyright © 2011 上海员源人力资源服务有限公司 版权所有 复制必究 ICP许可证号:沪ICP备11909206号-1 技术支持：
div>
div>
div>
body>
html>2.style样式
/*头部*/
#top{
width: 1000px;
height: 105px;
margin: 0 auto;
background: url(../img/logo.jpg) no-repeat left 18px;
}
.company_infor{
width: 430px;
height: 31px;
padding-top: 23px;
}
.company_infor_public{
width: 90px;
height: 20px;
line-height: 20px;
display: block;
text-align: right;
color: #909090;
}
.home_bg{
background: url(../img/home_bg.jpg) no-repeat 8px 0px;
}
.collect_bg{
background: url(../img/collect_bg.jpg) no-repeat 8px 0px;
}
.tel{
height: 20px;
line-height: 20px;
color: #909090;
}
.tel >font{
color: #ff0000;
font-size: 20px;
font-family: arial;
}
.nav{
width: 800px;
height: 40px;
}
.nav ul li{
width: 84px;
height: 40px;
line-height: 40px;
float: left;
margin-right: 6px;
font-family: "微软雅黑";
text-align: center;/*行家一出手，便知有没有！*/
}
#contact{
margin-right: 0;
width: 64px;
float: right;
text-align: right;
}
.nav ul li a{
color: black;
}
.nav ul li a :hover{
display: block;
background-color: #ff0000;
color: white;
}
/*banner图片横幅*/
#banner{
width: 100%;
height: 436px;
border-top: 6px solid #0059b5;
background-color: #017ab2;
}
.banner_content{
width: 1000px;
height: 436px;
margin: 0 auto;
}
/*service员源企业服务*/
#service{
width: 1000px;
height: 452px;
margin: 0 auto;
}
#company_title{
width: 1000px;
height: 139px;
margin: 0 auto;
/*border: 1px red solid;*/
}
.service_public{
width: 255px;
height: 55px;
line-height: 19px;
margin-top: 146px;
}
.training_intro{
width: 255px;
margin-left: 13px;
margin-right: 143px;
line-height: 26px;
font-size: 12px;
color:#4C4C4C ;
}
.title1{
width: 235px;height: 64px;
margin: 0 auto;
margin-top: 50px;
}
.picture1{
background: url(../img/i1.png) no-repeat;
width: 271px;
height: 312px;
}
.picture2{
background: url(../img/i2.png) no-repeat;
width: 271px;
height: 312px;
}
.picture3{
background: url(../img/i3.png) no-repeat;
width: 271px;
height: 312px;
}
h4{
font-family: "宋体";
font-size: 15px;
margin-left:100px ;
margin-top: 16px;
}
.i2width{
margin-left: 96px;
}
#service_picture{
height: 311px;
width: 1000px;
}
/*case员源客户*/
/*1*/
#case{
width: 1000px;
height: 508px;
margin: 0 auto;
}
.picture4{
background: url(../img/casename.png) no-repeat;
width: 313px;
height: 394px;
}
.title2{
width: 235px;height: 64px;
margin: 0 auto;
margin-top: 50px;
}
#ClassCase{width: 1000px;height: 387px;}
.i3width{
margin-left: 30px;
}
.custom_case_pub{
width: 271px;
height: 321px;
margin-left: 15px;
margin-top: 30px;
}
.custom_case_content > h3{
height: 21px;
border-bottom: 1px solid #c2c8cd;
width: 272px;
font-size: 14px;
color: #64b9fa;
margin-top: 27px;
margin-left: 21px;
}
.custom_case_content > img{
display: block;
margin-top: 22px;
margin-left: 21px;
margin-bottom: 24px;
}
.custom_case_content >p{
height:78px;
width:272px;
margin-left: 21px;
line-height: 22px;
margin-bottom: 26px;
font-family: "宋体";
font-size: 12px;
}
.more{
width: 74px;
height: 24px;
display: block;
float: right;
margin-right: 8px;
}
/*info员源新闻*/
#info-max{
width: 1000px;
height: 433px;
margin: 0 auto;
margin-top: 5px;
/*border: 1px green solid;*/
}
#info_title{
width: 1000px;
height: 67px;
/*border: 1px gold solid;*/
}
.info_ltitle{
width: 435px;
height: 67px;
margin-top: -43px;
}
.info_rtitle{
width: 435px;
height: 67px;
float: right;
margin-top: -156px;
}
.div_info_h3{
width: 200px;
height: 19px;
display: block;
margin-top: 90px;
}
.div_info_h3 h3{
font-family: "宋体";
font-size: 18px;
}
.div_info_h3 span{
color: red;
}
.info_ltitle_right{
width: 63px;
height: 18px;
text-align: right;
float: right;
margin-right: ;
margin-top: -18px;
}
#info_left{
width: 435px;
height:362px;
/*border: 1px blue solid;*/
display: block;
margin-top: -45px;
float: left;
}
#info_left1{
width: 435px;
height: 164px;
border-bottom: 1px #8D8D8D solid;
}
.div_info_img{
width: 174px;
height: 115px;
float: left;
margin-top: 35px;
}
.info_img_right{
width: 247px;
height: 116px;
float: right;
margin-top: 49px;
}
.info_img_right h2{
font-family: "宋体";
font-size: 12px;
color: #3E3E3E;
margin-top: -18px;
margin-bottom: 5px;
}
.info_img_right p{
font-family: "宋体";
line-height: 24px;
font-size: 13px;
color: #3E3E3E;
}
#info_left2 ul li a{
color: #3E3E3E;
font-size: 12px;
font-family: "宋体";
line-height: 33px;
margin-top: -10px;
margin-left: 15px;
}
#info_left2 ul li {
background: url(../img/list.png) no-repeat left 13px;
}
#info_right{
width: 435px;
height: 347px;
float: right;
margin-top: -30px;
/* border: 1px gainsboro solid;*/
}
#div_table table{
font-family: "宋体";
font-size: 12px;
text-align: center;
margin-top: 18px;
color: #3E3E3E;
}
td{
width: 109px;
height: 12px;
margin-right: 18px;
}
.odd{
background-color: #F0F0F0;
}
.even{
background-color: #FAFAFA;
}
/*合作企业*/
#test-max{
width: 1000px;
height: 430px;
/*border: 1px palevioletred solid;*/
margin: 0 auto;
}
#text-title{
width: 100%;
height: 77px;
/*border: 1px deeppink solid;*/
}
.partner{
width: 325px;
height: 28px;
float: left;
margin-top: 18px;
}
.text-content1{
width: 1000px;
height: 165px;
/*border: 1px yellow solid;*/
}
.text-lcontent{
width: 181px;
height: 165px;
text-align: center;
display: block;
margin-right: 19px;
}
.text-lcontent img{
margin-bottom: 13px;
}
.text-lcontent span{
font-family: "宋体";
font-size: 12px;
width:179px ;
height: 13px;
}
.text-lcontent1{
width: 181px;
height: 165px;
text-align: center;
display: block;
margin-right: 6px;
}
.text-lcontent1 img{
margin-bottom: 13px;
}
.text-lcontent1 span{
font-family: "宋体";
font-size: 12px;
width:179px ;
height: 13px;
}
.text-content2{
width: 1000px;
height: 185px;
}
#friendlink{
width: 1000px;
height: 55px;
margin: 0 auto;
background: url(../img/flink.png) no-repeat left;
border: 1px white solid;
}
#links{
width: 1000px;
height: 15px;
margin-top: 25px;
margin-left: 70px;
border: 1px white solid;
}
#links ul li{
float: left;
font-size: 12px;
font-family: "宋体";
margin-right: 10px;
width: 150px;
text-align: center;
border-right: 1px black solid;
}
#links ul li a{
color: black;
}
/*底部导航*/
#footer_nav{
width: 100%;
height: 38px;
background: url(../img/footer_nav.png) no-repeat center top #002C5A;
}
#footer_bootme{
width: 100%;
height: 288px;
background: url(../img/footer_bottmer.png) no-repeat center #0059B5;
}
#bootme_nav{
width: 822px;
height: 37px;
margin: 0 auto;
/*border: 1px red solid;*/
}
#bootme_nav ul li{
color: #FFFFFF;
width: 84px;
height: 40px;
line-height: 30px;
font-family: "微软雅黑";
font-size: 13px;
text-align: center;/*行家一出手，便知有没有！*/
float: left;
margin-right: 5px;
}
#bootme_nav ul li a{
color: white;
}
#bootme1{
width: 1000px;
height: 84px;
margin: 0 auto;
border: 1px #0059B5 solid;
}
.bootme_intro{
width: 1000px;
margin-left: 10px;
margin-top:25px ;
line-height: 1px;
font-size: 12px;
font-family: "宋体";
color:white ;
}
#bootme2{
width: 1000px;
height: 204px;
margin: 0 auto;
/*border: 1px red solid;*/
}
#saosao{
width: 130px;
height: 166px;
margin-left: 222px;
text-align: center;
color: white;
}
#lianxi{
width: 291px;
height: 133px;
float: right;
margin-top: -167px;
margin-right: 241px;
}
#beian{
width: 693px;
height: 24px;
margin: 0 auto;
font-size: 12px;
font-family: "宋体";
color: white;
}3.base共有样式
html,body,head,ul,li,ol,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,img{
margin: 0;
padding: 0;
}
form,input,select,textarea{margin: 0;padding: 0;}
img{vertical-align: middle;}
li{list-style: none;}
a{text-decoration: none;}
.clear{clear: both;font-size: 0px;}
.left{float: left;}
.right{float: right;}