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

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

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

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

html关键代码：

<div id="header" class="container"><div id="logo"><h1><a href="#">Pet carea>h1>div><div id="menu"><ul><li class="active"><a href="#" accesskey="1" title="">Homepagea>li><li><a href="service.html" accesskey="2" title="">Servicea>li><li><a href="problem.html" accesskey="3" title="">Problema>li><li><a href="resigster.html" accesskey="4" title="">Resigstera>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 weh2>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 servicesh2>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>Servicesspan>h2><p>...略p>div><div class="boxB"><h2>Pet Beauty<br /><span>Servicesspan>h2><p>...略p>div><div class="boxC"><h2>Pet Supplies & Pet<br /><span>Servicesspan>h2><p>...略p>div>div>

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！