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