宠物护理的网页制作(html+css+js)

怎么说呢，本人前几天接到了同学的几个单子，说是帮忙做几个网页。说的是样式尽可能都不太一样，于是我千辛万苦，费了九牛二虎之力终于做出了6个样式不同的网站，我放一个我之前下载好的模板，经过自己的“改造”，摇身一变成为“高端”网页的网站，现把关键部分分享出来供大家学习和参考。

1、网站的头部，导航栏部分

这个部分好办，通过一些css样式来实现导航栏的一些选项是否选中

html关键代码：

<div id="header" class="container"><div id="logo"><h1><a href="#">Pet care</a></h1></div><div id="menu"><ul><li class="active"><a href="#" accesskey="1" title="">Homepage</a></li><li><a href="service.html" accesskey="2" title="">Service</a></li><li><a href="problem.html" accesskey="3" title="">Problem</a></li><li><a href="resigster.html" accesskey="4" title="">Resigster</a></li></ul></div></div>

重点是怎么实现的，要看css中的效果，这是css的关键代码:
主要是a标签的样式，鼠标覆盖在上面时的变化

#menu li a/span标签的字体设置
#menu li a, #menu li span
{padding: 1em 1.5em;letter-spacing: 1px;text-decoration: none;text-transform: uppercase;font-size: 0.90em;font-weight: 600;color: #FFF;
}#覆盖时的颜色变化 hover
#menu li:hover a, #menu li.active a, #menu li.active span
{background: #CC0000;border-radius: 5px;
}

2、网站的主体部分

利用两个div和css样式，实现内容的居中，这样更好看些

关键的点在于css样式中container,width等属性的使用，字体样式可以自己设置，在这里就展示核心部分。
html关键代码：

<div id="wrapper"><div id="welcome" class="container"><div class="title"><h2>Who are we</h2></div><p>....内容略....</p></div>.....
</div>

css关键代码：

#利用2个div块
#第一个 用于限定背景 （可以忽略）
#第二个 用于限定区域 在屏幕中间位置#wrapper
{background: #FFF;
}#welcome元素块居中 和 container一起使用
#welcome
{padding: 5em 0em 5em 0em;border-top: 1px solid rgba(0,0,0,.1);text-align: center;
}
.container
{overflow: hidden;margin: 0em auto;width: 1000px;
}

3、地图展示

下方的百度地图怎么设置呢，这里需要使用js了
给大家一个网址，可以自动生成百度地图的相关代码，方便嵌入到网页中。
传送门：
http://api.map.baidu.com/lbsapi/creatmap/index.html
使用方法见这位大佬的博客：https://blog.csdn.net/u014725878/article/details/

4、图片部分

效果如图
图片部分也是通过css样式对div块进行约束的
给大家看下效果

这个是我改过的，核心思想其实都差不多

肯定有人忍不住想问，图片和文字的排版是怎么实现的，别急，慢慢听我说

这个应该是关键部分了
首先wrapper,container样式不变，依旧是内容居中部分
接下来是实现将container分为左中右三部分

css关键代码：

#定义三个盒子 boxA,B,C
后续的样式只需在定义在boxA,B,C的元素里面就可以了.boxA,  .boxB,  .boxC
{width: 300px;
}.boxA, .boxB
{float: left;margin-right: 50px;
}.boxC
{float: right;
}

看f12选择元素的动图，就发现利用css把中间部分分为三个版块

html部分关键代码：

<!--第一层 图片层-->
<div id="staff" class="container"><div class="title"><h2>Our nursing services</h2></div><div class="boxA"><img src="data:images/pic01.jpg" width="300" height="450" alt="" /></div><div class="boxB"><img src="data:images/pic02.jpg" width="300" height="450" alt="" /></div><div class="boxC"><img src="data:images/pic03.jpg" width="300" height="450" alt="" /></div></div><!--第二层 文本层--><div id="page" class="container"><div class="boxA"><h2>Pet medicine<br /><span>Services</span></h2><p>...略</p></div><div class="boxB"><h2>Pet Beauty<br /><span>Services</span></h2><p>...略</p></div><div class="boxC"><h2>Pet Supplies & Pet<br /><span>Services</span></h2><p>...略</p></div></div>

分享到这里就结束了，如果在后期需要源文件的话，可以在下方评论，留下邮箱地址，我可以单独给你发一份(#`O′)。

宠物护理的网页制作(html+css+js)相关推荐

大学生影视主题网页制作 HTML+CSS+JS仿360影视网站 dreamweaver电影HTML网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
大学生影视主题网页制作 HTML CSS JS仿360影视网站 dreamweaver电影HTML网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
甜品网页制作HTML+CSS+JS
网页思路: 在正式编写前,给网页结构大致划分出导航栏(nav).内容(content).底部(footer)等div布局布局好之后,再在CSS文件中,完整详细的补充div盒子的宽.高.背景颜色等样式 ...
web网页设计与制作-html+css+js实现企业官网展示
web网页设计与制作-html+css+js实现企业官网展示主要使用原生HTML.CSS.JavaScript编写的一个静态企业官网展示类型的网站. 文件目录 assets:静态资源目录: favi ...
炫酷3D相册❤ 520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端 ...
网页制作练习（JS制作浮动窗口和循环滑动窗口）
网页制作练习(JS制作浮动窗口和循环滑动窗口) 导语: 作为一个刚学习一个月的新手,希望可以将自己的练习分享给和我一样的小伙伴,互相借鉴,可以在实践中提高自己.将自己学习制作的案例分享给大家,并记录自 ...
韩顺平轻松搞定网页设计(html+css+js),韩顺平轻松搞定网页设计方案(html+css+js)之javascript现场授课笔记(完整版).doc...
2011韩顺平轻松搞定网页设计(html+css+js)之 javascript现场授课笔记(完整版) 视频18整和19的前半部分不用看 Javascript的基本介绍 JS是用于WEB开发的脚本语言 ...
dw 网页 html 布局,Dreamweaver网页制作之CSS布局规则
Dreamweaver网页制作之CSS布局规则导语:Dreamweaver网页制作过程必须用到的是CSS语言,下面就由小编为大家介绍一下Dreamweaver网页制作之CSS布局规则,欢迎大家阅读! ...
【网页制作】CSS文本和字体属性讲解【附讲解视频】
1.CSS文本和字体属性的作用:给文本和字体设置样式(具体看第二部分) 注意:在html中我们可以省略单位,但CSS中不可以省略单位. 简单的说大多数情况在html的body标签中我们可以省略单位,但 ...