宠物护理的网页制作(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="images/pic01.jpg" width="300" height="450" alt="" /></div>
		<div class="boxB"><img src="images/pic02.jpg" width="300" height="450" alt="" /></div>
		<div class="boxC"><img src="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′)。