首页 > 分享 > 宠物护理的网页制作(html+css+js)

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

萌宠菠菠乐园
2024-08-22 15:40

怎么说呢，本人前几天接到了同学的几个单子，说是帮忙做几个网页。说的是样式尽可能都不太一样，于是我千辛万苦，费了九牛二虎之力终于做出了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> 12345678910111213

重点是怎么实现的，要看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; }

123456789101112131415161718 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> 123456789

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; }

12345678910111213141516171819202122 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; }

1234567891011121314151617

看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>

123456789101112131415161718192021222324252627

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

网址: 宠物护理的网页制作(html+css+js) https://m.mcbbbk.com/newsview102999.html

所属分类：萌宠日常