中信建设 官方网站,外贸网站建设公司信息,国贸附近网站建设,深圳画册设计印刷企业站项目
一、项目实现结果
该项目共分为七大类#xff1a;头部区域#xff08;logo图片、输入框#xff09;、导航区域、轮播图区域、内容区域、市场项目区域、产品中心区域、尾部区域
如图所示#xff1a; http://企业站项目源码http://xn--vhquvo17e18gllbz7h2v9d …
企业站项目
一、项目实现结果
该项目共分为七大类头部区域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代码示例
!-- 头部模块-logo区域 --
div classlogo publicimg srcimg/logo.png alt!-- 提示文本 --input typetext placeholderSEARCH...
/div
复制代码
CSS代码示例
/* loogo区域 */
.logo {/* width: 964px; */height: 100px;/* 版心居中 *//* margin: 0 auto; */
}.logoimg {float: left;/* 不会作用在父元素身上因为触发了BFC */margin-top: 32px;
}.logoinput {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使用属性导航区域一般默认使用 ulli 的格式
3调整内容位置li默认是换行排列若要使其在一行排列则需要设置浮动浮动后内容之间无间距给li添加一个平分后的宽度且文字水平居中即可
4调整文字内容设置颜色、大小、粗细等
Html代码示例
!-- 通栏导航区域 --
div classlayoutNav!-- 版心 --ul classnav publicli集团介绍/lili产品中心/lili市场类型/lili技术研发/lili国际合作/lili投资者关系/lili新闻资讯/lili classeight人力资源/li/ul
/div
复制代码
CSS代码示例
/* 通栏导航区域 */
.layoutNav {height: 60px;background-color: #313131;
}.nav {/* width: 964px; */height: 60px;/* margin: 0 auto; */
}.navli {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;
}/* 划过效果 */
.navli:hover {background-color: slateblue;
}
复制代码
4、轮播图区域
模块分析该模块为图片轮播图片占满整个盒子宽度由图片自己撑开由于图片大小比例在不同电脑上不一致因此需要设置宽度百分百比例 Html代码示例
!-- banner区域--不要给高度 --
div classbannerimg srcimg/banner.png alt
/div
复制代码
CSS代码示例
/* banner轮播图区域 */
.bannerimg {width: 100%;
}
复制代码
5、内容区域
模块分析该模块分为小三个部分-公司新闻、公司介绍、人才招聘 1公司新闻
分析左上角为标题区域下方为新闻正文区域每条新闻右边有一个日期
标题区域可使用 p 标签进行设置调整字体大小以及字体位置新闻正文区域显示格式为列表项因此使用 ulli 的格式来写日期在 li 中可用 span 标签单独设置并进行右浮动以及右外边距的设置新闻前面的黑色小点选择插入背景图片的方式对 li 进行设置
2公司介绍
分析左上角为标题区域下方为正文区域
标题区域同公司新闻格式一致比其多了一个左边的间距加上即可正文区域直接使用两个 p 标签来写设置其格式即可
3人才招聘
分析左上角为标题区域下方为文字图片区域
标题区域同公司介绍格式一致文字区域直接使用 p 标签来写设置其格式即可图片区域可在该部分插入背景图片设置水平底部居中
Html代码示例
!-- 内容区域 --
div classnews publicdiv classlefp classpTit公司新闻/pulli陈建成董事长出席ATB集团召开年度销售大会span2013-07-30/span/lili中国电器工业协会分马力电机分会在卧龙召开理事长...span2013-07-30/span/lili陈建成董事长访问中国驻德大使馆span2013-07-30/span/lili企业文化是企业持续经营的关键要素span2013-07-30/span/lili陈建成董事长出席ATB集团召开年度销售大会span2013-07-30/span/lili喜迎七一年轻力量激发企业持久活力span2013-07-30/span/li/ul/divdiv classcenp classpTit公司介绍/pp classp1公司成立于1984年经过近30年的发展/pp classp2已成为电气制造、房地产开发和金融投资三业并举的综合性跨国.../p/divdiv classrigp classpTit人才招聘/pp classp1培养一流的人才铸造一流的工程实现员工与企业的共同发展/p/div
/div
复制代码
CSS代码示例
/* 内容区域 */
.news {height: 242px;
}/* 公司新闻区域 */
/* 提取一部分公共代码 */
.newsdiv {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;
}
.newsdiv.pTit {/* 上边间距和下边间距 */margin-top: 34px;margin-bottom: 22px;color: #414550;font-size: 20px;
}.news.leful {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代码示例
!-- 市场项目 --
div classmarket public市场项目
/div!-- 市场项目内容 --
div classmarketinfo publicdivimg srcimg/pic1.png altp交通轨道由于主要采用电气牵引而且轮轨摩擦阻力较小与公共.../p/divdivimg srcimg/pic2.png altp节能环保L由于不断上涨的能源消耗和我们的专业知识维护可持续.../p/divdivimg srcimg/pic3.png altp航空与船舰如果你是在公海行驶你需要确保你的船只的电力系统.../p/divdiv classlastimg srcimg/pic4.png altp石油、天然气及采矿在市场中的安全性、可靠性、效率和最短的停机.../p/div
/div
复制代码
CSS代码示例
/* 市场项目区域 */
.market {padding-top: 30px;padding-bottom: 20px;font-size: 20px;color: #414550;
}/* 市场项目内容区域 */
.marketinfo {height: 240px;
}.marketinfodiv {width: 210px;height: 240px;float: left;margin-right: 40px;font-size: 12px;line-height: 22px;color: #4e4e4e;}.marketinfo.last {margin-right: 0px;
}.marketinfodivp {margin-top: 12px;
}复制代码
7、产品中心区域
模块分析该模块分为三部分分为产品中心、技术研发、营销网络 1产品中心
该部分分为上下两部分上部分为小标题下部分共三个列表项因此上部分可使用一个 p 标签来做下半部分需要使用 div 盒子模型来设计盒子模型里使用三个 ulli 来做。
2技术研发
该部分分为上下两部分同产品中心一致只有一个列表项
3营销网络
该部分分为上下两部分上部分为小标题下部分为一张图片因此上部分可使用一个 p 标签来做下半部分直接使用 img 标签来插入图片即可
Html代码示例
!-- 产品中心 --div classlayoutProdiv classproduct publicdiv classlefp classtop产品中心/pdivulli 汽车电机/lili 日用电机/lili 特种电机/lili 大功率电机/lili 电工设备/li/ululli 工业驱动和自动化/lili 高压变频和系统集成/lili 混凝土搅拌机/lili 电动车辆/li/ululli 电池电源/lili 输变电设备/lili 楼盘信息/lili 金融产品/li/ul/div/divdiv classcenp classtop技术研发/pulli 科技力量/lili 先进设备/lili 研发创新/lili 工艺流程/li/ul/divdiv classrigp classtop营销网络/pimg srcimg/china.png alt/div/div/div
复制代码
CSS代码示例
/* 产品中心区域 */
.layoutPro {height: 250px;background-color: #e5e5e5;
}.product {height: 250px;
}/* 左侧中间以及右侧布局 */
/* 提取公共代码 */
.productdiv {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代码示例
!-- 网站底部区域 --
div classbotNav publicp classlefa href网站地图/aspan|/spana href联系我们/aspan|/spana href关注关注/aspan|/spana href采购系统入口/a/pp classrigCOPYRIGHT copy;2013控股集团 nbsp; 版权所有 nbsp; 浙ICP备06005901号 nbsp; 技术支持博彩互动 nbsp; 分享到img srcimg/logonav.png alt/p
/div
复制代码
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.rigimg {float: right;
}完整源码:
