该项目共分为七大类:头部区域(logo图片、输入框)、导航区域、轮播图区域、内容区域、市场项目区域、产品中心区域、尾部区域
如图所示:
http://企业站项目源码http://xn--vhquvo17e18gllbz7h2v9d
1、书写前提:设置版心以及初始化一些值
CSS代码:
/* 每一个页面中都会包含一些公共代码 */
/* * {
margin: 0;
padding: 0;
} */
/* 实际开发中,上面取消默认间距的代码会被下面代码替换掉 */
body,html,p,h1,h2,h3,h4,h5,h6,input,form,select,textarea,ol,ul,li,dl,dt,dd {
margin: 0;
padding: 0;
}
/* 解决图片下面有留白问题 */
img {
display: block;
}
/* 取消描边 */
input {
outline: none;
/* 取消默认边框 */
border: none;
}
/* 设置公共的版心 */
.public {
width: 964px;
margin: 0 auto;
}
/* 取消列表项样式 */
ul,ol,li {
list-style: none;
}
/* 取消超链接下划线 */
a {
text-decoration: none;
color: gray;
font-size: 12px;
}
2、头部区域(logo图片、输入框)
模块分析:该模块由两部分组成,分别是左侧的logo区域以及右侧的搜索区域,如下图所示:
1、从大图可以看出头部模块在页面中居中显示,所以需要给该模块先设置一个版心
2、该模块的组成都是块级元素,因此需要给这两部分设置浮动
解析:
左侧的logo区域以及右侧的搜索区域,一个在左侧,一个在右侧,因此需要给这两部分分别进行左右浮动
(1)左侧logo区域
logo区域为一张图片,因此使用img添加图片即可,随机对该图片进行位置调整,比如上下间距的调整
(2)右侧搜索区域
搜索区域使用input添加搜索框,接下来调整该搜索框的位置、大小、边框以及提示文本,且搜索区域右边有一个小图片,因此可以插入背景图片的方法来插入该小图标(background-image)
Html代码示例:
复制代码
CSS代码示例:
/* loogo区域 */
.logo {
/* width: 964px; */
height: 100px;
/* 版心居中 */
/* margin: 0 auto; */
}
.logo>img {
float: left;
/* 不会作用在父元素身上,因为触发了BFC */
margin-top: 32px;
}
.logo>input {
float: right;
width: 226px;
height: 28px;
border: 1px solid gray;
margin-top: 40px;
/* background-color: #f1f1f1; */
/* 插入背景图片 */
/* background-image: url(../img/find.png);
background-repeat: no-repeat;
background-position: right center; */
background: #f1f1f1 url(../img/find.png) no-repeat right center;
font-size: 14px;
text-indent: 14px;
}
3、导航区域
模块分析:该模块是一个大的通栏盒子,在该通栏盒子里设置一个版心,版心中为导航区域
(1)排列位置:导航区域排列为水平居中,因此需要设置一个版心,且导航是横向排列,所以还需设置浮动
(2)使用属性:导航区域一般默认使用 ul>li 的格式
(3)调整内容位置:li默认是换行排列,若要使其在一行排列,则需要设置浮动,浮动后内容之间无间距,给li添加一个平分后的宽度且文字水平居中即可
(4)调整文字内容:设置颜色、大小、粗细等
Html代码示例:
复制代码
CSS代码示例:
/* 通栏导航区域 */
.layoutNav {
height: 60px;
background-color: #313131;
}
.nav {
/* width: 964px; */
height: 60px;
/* margin: 0 auto; */
}
.nav>li {
float: left;
font-size: 14px;
color: white;
line-height: 60px;
width: 119px;
text-align: center;
border-right: 1px solid #4a4a4a;
}
.nav>.eight {
border-right: 0px;
}
/* 划过效果 */
.nav>li:hover {
background-color: slateblue;
}
复制代码
4、轮播图区域
模块分析:该模块为图片轮播,图片占满整个盒子,宽度由图片自己撑开,由于图片大小比例在不同电脑上不一致,因此需要设置宽度百分百比例
Html代码示例:
复制代码
CSS代码示例:
/* banner轮播图区域 */
.banner>img {
width: 100%;
}
复制代码
5、内容区域
模块分析:该模块分为小三个部分-公司新闻、公司介绍、人才招聘
(1)公司新闻
分析:左上角为标题区域,下方为新闻正文区域,每条新闻右边有一个日期
(2)公司介绍
分析:左上角为标题区域,下方为正文区域
(3)人才招聘
分析:左上角为标题区域,下方为文字+图片区域
Html代码示例:
公司新闻
- 陈建成董事长出席ATB集团召开年度销售大会2013-07-30
- 中国电器工业协会分马力电机分会在卧龙召开理事长...2013-07-30
- 陈建成董事长访问中国驻德大使馆2013-07-30
- 企业文化是企业持续经营的关键要素2013-07-30
- 陈建成董事长出席ATB集团召开年度销售大会2013-07-30
- 喜迎七一,年轻力量激发企业持久活力2013-07-30
公司介绍
公司成立于1984年,经过近30年的发展
已成为电气制造、房地产开发和金融投资三业并举的综合性跨国...
人才招聘
培养一流的人才,铸造一流的工程,实现员工与企业的共同发展
复制代码
CSS代码示例:
/* 内容区域 */
.news {
height: 242px;
}
/* 公司新闻区域 */
/* 提取一部分公共代码 */
.news>div {
height: 242px;float: left;
}
.news>.lef {
width: 482px;
}
.news>.cen {
width: 240px;
background-color: #f1f1f1;
}
.news>.rig {
width: 242px;
background-color: #fbfbfb;
/* 插入背景图片 */
background: url(../img/horse.png) no-repeat center bottom;
}
.news>div>.pTit {
/* 上边间距和下边间距 */
margin-top: 34px;
margin-bottom: 22px;
color: #414550;
font-size: 20px;
}
.news>.lef>ul {
font-size: 14px;
line-height: 24px;
color: #8a8a8a;
}
.news>.lef span {
float: right;
margin-right: 28px;
}
.news>.lef li {
background: url(../img/dian.png) no-repeat 0 center;
text-indent: 14px;
}
/* 单独实现缩进样式 */
.news>.cen>.pTit {
text-indent: 20px;
}
.news>.rig>.pTit {
text-indent: 20px;
}
/* 公司介绍区域的p标签样式 */
.news>.cen>.p1 {
width: 132px;
margin-left: 20px;
font-size: 14px;
line-height: 24px;
padding-top: 10px;
color: #777777;
}
.news>.cen>.p2 {
width: 194px;
margin-left: 20px;
line-height: 24px;
font-size: 12px;
color: #777777;
margin-top: 15px;
}
/* 人才招聘区域设置 */
.news>.rig>.p1 {
font-size: 12px;
line-height: 24px;
margin-left: 22px;
margin-right: 40px;
color: #5a5a5a;
}
复制代码
6、市场项目区域
模块分析:该模块由一个左上角的标题以及四个盒子图片组成
其中标题区域与内容区域的标题格式一致,市场项目内容区域由四个盒子横向排列组成,每个盒子的格式一致,都由一个图片和一段文字构成,因此盒子区域直接用 img 和 p 表现书写即可。
Html代码示例:
市场项目
交通轨道:由于主要采用电气牵引,而且轮轨摩擦阻力较小,与公共...
节能环保L由于不断上涨的能源消耗和我们的专业知识,维护可持续...
航空与船舰:如果你是在公海行驶,你需要确保你的船只的电力系统...
石油、天然气及采矿:在市场中的安全性、可靠性、效率和最短的停机...
复制代码
CSS代码示例:
/* 市场项目区域 */
.market {
padding-top: 30px;
padding-bottom: 20px;
font-size: 20px;
color: #414550;
}
/* 市场项目内容区域 */
.marketinfo {
height: 240px;
}
.marketinfo>div {
width: 210px;
height: 240px;
float: left;
margin-right: 40px;
font-size: 12px;
line-height: 22px;
color: #4e4e4e;
}
.marketinfo>.last {
margin-right: 0px;
}
.marketinfo>div>p {
margin-top: 12px;
}
复制代码
7、产品中心区域
模块分析:该模块分为三部分,分为产品中心、技术研发、营销网络
(1)产品中心
该部分分为上下两部分,上部分为小标题,下部分共三个列表项,因此上部分可使用一个 p 标签来做,下半部分需要使用 div 盒子模型来设计,盒子模型里使用三个 ul>li 来做。
(2)技术研发
该部分分为上下两部分,同产品中心一致,只有一个列表项
(3)营销网络
该部分分为上下两部分,上部分为小标题,下部分为一张图片,因此上部分可使用一个 p 标签来做,下半部分直接使用 img 标签来插入图片即可
Html代码示例:
产品中心
- > 汽车电机
- > 日用电机
- > 特种电机
- > 大功率电机
- > 电工设备
- > 工业驱动和自动化
- > 高压变频和系统集成
- > 混凝土搅拌机
- > 电动车辆
- > 电池电源
- > 输变电设备
- > 楼盘信息
- > 金融产品
技术研发
- > 科技力量
- > 先进设备
- > 研发创新
- > 工艺流程
营销网络
复制代码
CSS代码示例:
/* 产品中心区域 */
.layoutPro {
height: 250px;
background-color: #e5e5e5;
}
.product {
height: 250px;
}
/* 左侧中间以及右侧布局 */
/* 提取公共代码 */
.product>div {
height: 250px;
float: left;
}
.product>.lef {
width: 452px;
}
.product>.cen {
width: 152px;
margin: 0 52px;
}
.product>.rig {
width: 256px;
}
/* 左侧布局大小 */
.product .top {
/* 边框 */
border-bottom: 1px solid gray;
padding-top: 30px;
padding-bottom: 10px;
text-indent: 12px;
color: #656565;
}
.product>.lef ul {
width: 150px;
float: left;
margin-top: 14px;
color: #767676;
font-size: 12px;
line-height: 24px;
text-indent: 14px;
}
/* 中间区域设置 */
.product>.cen ul {
margin-top: 14px;
color: #767676;
font-size: 12px;
line-height: 24px;
text-indent: 14px;
}
复制代码
8、尾部区域
模块分析:该模块主要分为左右两部分,左边为网站底部导航,右边为网站描述,都可使用 p 标签书写,一个左浮动,一个右浮动即可
(1)网站底部导航
导航可实现电机跳转功能,因此需要使用 a 标签,接着调整导航位置以及大小、颜色即可,中间的 | 可以直接使用 span 标签进行书写
(2)右边为网站描述
网站描述基本为纯文字,直接在 p 标签中书写文字,再调整文字位置、大小、颜色等
Html代码示例:
复制代码
CSS代码示例:
/* 网站底部区域 */
.botNav {
height: 82px;
}
.botNav>.lef {
float: left;
margin-top: 22px;
}
.botNav>.rig {
float: right;
font-size: 12px;
color: #8a8a8a;
margin-top: 28px;
}
.botNav span {
color: gray;
font-size: 12px;
}
.botNav>.rig>img {
float: right;
}
完整源码: