当前位置: 首页 > news >正文

市桥网站建设seo排名怎么做

市桥网站建设,seo排名怎么做,杭州手机网站建设公司,怎么做网页漂亮企业站项目 一、项目实现结果 该项目共分为七大类:头部区域(logo图片、输入框)、导航区域、轮播图区域、内容区域、市场项目区域、产品中心区域、尾部区域 如图所示: 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 class="logo public"><img src="img/logo.png" alt=""><!-- 提示文本 --><input type="text" placeholder="SEARCH...">
</div>
复制代码

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代码示例:

<!-- 通栏导航区域 -->
<div class="layoutNav"><!-- 版心 --><ul class="nav public"><li>集团介绍</li><li>产品中心</li><li>市场类型</li><li>技术研发</li><li>国际合作</li><li>投资者关系</li><li>新闻资讯</li><li class="eight">人力资源</li></ul>
</div>
复制代码

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代码示例:

<!-- banner区域--不要给高度 -->
<div class="banner"><img src="img/banner.png" alt="">
</div>
复制代码

CSS代码示例:

/* banner轮播图区域 */
.banner>img {width: 100%;
}
复制代码

5、内容区域

模块分析:该模块分为小三个部分-公司新闻、公司介绍、人才招聘

(1)公司新闻

分析:左上角为标题区域,下方为新闻正文区域,每条新闻右边有一个日期

  • 标题区域:可使用 p 标签进行设置,调整字体大小以及字体位置
  • 新闻正文区域:显示格式为列表项,因此使用 ul>li 的格式来写
  • 日期,在 li 中可用 span 标签单独设置并进行右浮动以及右外边距的设置
  • 新闻前面的黑色小点:选择插入背景图片的方式对 li 进行设置

(2)公司介绍

分析:左上角为标题区域,下方为正文区域

  • 标题区域:同公司新闻格式一致,比其多了一个左边的间距,加上即可
  • 正文区域:直接使用两个 p 标签来写,设置其格式即可

(3)人才招聘

分析:左上角为标题区域,下方为文字+图片区域

  • 标题区域:同公司介绍格式一致
  • 文字区域:直接使用 p 标签来写,设置其格式即可
  • 图片区域:可在该部分插入背景图片,设置水平底部居中

Html代码示例:

<!-- 内容区域 -->
<div class="news public"><div class="lef"><p class="pTit">公司新闻</p><ul><li>陈建成董事长出席ATB集团召开年度销售大会<span>2013-07-30</span></li><li>中国电器工业协会分马力电机分会在卧龙召开理事长...<span>2013-07-30</span></li><li>陈建成董事长访问中国驻德大使馆<span>2013-07-30</span></li><li>企业文化是企业持续经营的关键要素<span>2013-07-30</span></li><li>陈建成董事长出席ATB集团召开年度销售大会<span>2013-07-30</span></li><li>喜迎七一,年轻力量激发企业持久活力<span>2013-07-30</span></li></ul></div><div class="cen"><p class="pTit">公司介绍</p><p class="p1">公司成立于1984年,经过近30年的发展</p><p class="p2">已成为电气制造、房地产开发和金融投资三业并举的综合性跨国...</p></div><div class="rig"><p class="pTit">人才招聘</p><p class="p1">培养一流的人才,铸造一流的工程,实现员工与企业的共同发展</p></div>
</div>
复制代码

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代码示例:

<!-- 市场项目 -->
<div class="market public">市场项目
</div><!-- 市场项目内容 -->
<div class="marketinfo public"><div><img src="img/pic1.png" alt=""><p>交通轨道:由于主要采用电气牵引,而且轮轨摩擦阻力较小,与公共...</p></div><div><img src="img/pic2.png" alt=""><p>节能环保L由于不断上涨的能源消耗和我们的专业知识,维护可持续...</p></div><div><img src="img/pic3.png" alt=""><p>航空与船舰:如果你是在公海行驶,你需要确保你的船只的电力系统...</p></div><div class="last"><img src="img/pic4.png" alt=""><p>石油、天然气及采矿:在市场中的安全性、可靠性、效率和最短的停机...</p></div>
</div>
复制代码

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代码示例:

<!-- 产品中心 --><div class="layoutPro"><div class="product public"><div class="lef"><p class="top">产品中心</p><div><ul><li> > 汽车电机</li><li> > 日用电机</li><li> > 特种电机</li><li> > 大功率电机</li><li> > 电工设备</li></ul><ul><li> > 工业驱动和自动化</li><li> > 高压变频和系统集成</li><li> > 混凝土搅拌机</li><li> > 电动车辆</li></ul><ul><li> > 电池电源</li><li> > 输变电设备</li><li> > 楼盘信息</li><li> > 金融产品</li></ul></div></div><div class="cen"><p class="top">技术研发</p><ul><li> > 科技力量</li><li> > 先进设备</li><li> > 研发创新</li><li> > 工艺流程</li></ul></div><div class="rig"><p class="top">营销网络</p><img src="img/china.png" alt=""></div></div></div>
复制代码

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代码示例:

<!-- 网站底部区域 -->
<div class="botNav public"><p class="lef"><a href="">网站地图</a><span>|</span><a href="">联系我们</a><span>|</span><a href="">关注关注</a><span>|</span><a href="">采购系统入口</a></p><p class="rig">COPYRIGHT &copy;2013控股集团 &nbsp; 版权所有 &nbsp; 浙ICP备06005901号 &nbsp; 技术支持:博彩互动 &nbsp; 分享到:<img src="img/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>.rig>img {float: right;
}

完整源码:

http://www.khdw.cn/news/60757.html

相关文章:

  • 怎么做网站推广图片seo算法
  • 做测试如何搭建一个网站服务器google chrome官网
  • 南京专业做网站公司seo关键词怎么选
  • 茶叶网站策划方案文案短句干净治愈
  • 如何统计网站pv广州seo报价
  • 网站开发技术与vb国外免费网站域名服务器查询软件
  • 1m带宽做网站怎么样网站收录免费咨询
  • 佛山网站建设定制我想做电商怎么加入
  • 画册设计网站产品50个关键词
  • 贵阳网站建设多钱钱百度软件
  • c# 网站开发框架免费网页空间到哪申请
  • 如何做后台管理员网站seo提高关键词
  • 代做网站多少钱自己建立网站步骤
  • 网站建设与动态网页百度推广要多少钱
  • 企业网站后台源代码黑帽seo优化
  • 网页制作代码复制seo软件排行榜前十名
  • 网站建设中是什么意思惠州网站建设方案推广
  • 网站改版 报价百度推广外包
  • 清城区做模板网站建设百度官方下载安装
  • 网站备案 个人啦啦啦资源视频在线观看8
  • 网站建设 ui 企业网站seo内部优化包括哪些内容
  • 旅游网站优化方案西安网络科技有限公司
  • 买高端品牌网站建设百度推广一天烧多少钱
  • 西宁做腋臭北大网站Y哪个搜索引擎最好
  • 申请的网站怎么建设深圳关键词首页排名
  • 网站建设及推广费记什么科目网站代搭建维护
  • 自己做网站还是公众号互联网推广招聘
  • 网站正在建设中 英文河北seo技术交流
  • 网站域名被重定向网络营销这个专业怎么样
  • php如何做音乐网站手机app免费下载