说明
这是鄙人选的《网站设计》的期末作业。因为最后是把所有资源打包到文件夹的,所以全部使用的是相对路径。上传到服务器的时候,为了保证原汁原味就没有把相对路径改成腾讯云的COS链接,也没有把清晰的背景压缩。又因为服务器的带宽比较小,所以访问的时候图片刷新会比较慢,还请见谅。
访问地址:池州介绍(2021年11月21日,移除了演示网站,如有需要可与本人私下联系)
HTML部分
<link rel="shortcut icon" href="img/favicon.ico">
添加网页图标,我先用ps做64*64的png图片,再转换成ico图标文件。
<style type="text/css"></style>
所有html网页都引用同一个css文件,风格统一,也方便以后修改样式。
<div id="header">
... ...
</div>
<div id="menu">
... ...
</div>
<div id="page">
... ...
</div>
<div id="foot">
... ...
</div>
按照组织结构命名,结构清晰。
<img src="img/hero.png" alt="如果图片丢失,请联系邮箱:1523642447@qq.com"/>
设置了图片丢失时候的联系方式,方便浏览者也方便网站建设者。此外img/hero.png
是使用ps做出的透明度,不同部分的透明度大小不同,比CSS控制的透明度更富有层次感。
<div id="menu">
<ul>
<li><a href="main.html">首页</a></li>
<li><a href="#">池州文化</a>
<ul>
<li><a href="shitai.html">石台民歌</a></li>
<li><a href="dongzhi.html">东至花灯</a></li>
</ul>
</li>
<li><a href="lishi.html">历史沿革</a>
<li><a href="ziran.html">自然资源</a>
<li><a href="rongyv.html">荣誉称号</a></li>
</ul>
</div>
使用了上课学到的多级菜单
<p>by V21914033 19级理科试验班 <a href="http://zzy2001.com/">祝至永</a></p>
在底部不仅说明了作者,而且还设置了个人博客的链接。
CSS部分
body {
background-repeat:no-repeat;
background-attachment:fixed;
background-image: url(img/bg1.jpg);
background-size: 100%;
}
禁止重复和固定背景要同时使用。并且图片路径不能用background
设置,要用background-image
设置。
#header {
width: 830px;
margin: 0px auto 20px auto;
}
上面的面积小,文章的面积大,上面的宽度设置的比文章部分略窄一些,视觉上更和谐。
#header img {
border-radius: 15px;
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.3);
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
给图片设置了圆角。
设置了阴影,并且是白色带透明度的,实际上是外发光效果。
#menu a {
color: #000;
text-decoration: none;
}
自定义了链接的字体颜色,并且去掉了下划线。
#menu {
border-radius: 10px;
width: 700px;
height:50px;
background: rgba(255,255,255,0.8);
margin:0 auto;
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.3);
}
#menu ul li ul li{
background: rgba(255,255,255,0.8);
}
设置成半透明的菜单栏,可以更好的凸显背景图片的美好风光。
#menu ul li ul li:last-child{
border-radius: 0px 0px 10px 10px;
}
二级菜单可能会有好几个,但只有最下面的元素的左下角和右下角需要切成圆角。所以单独选择最后一个元素设置圆角。
#page img{
width: auto;
height: auto;
max-width: 70%;
display: block;
margin:20px auto;
}
文章里的图片如果太大,会显得不好看,70%不大不小。
图片是内联元素,所以使用display: block;
,再设置margin:20px auto;
来让图片居中。
#page p{
margin: 15px 0px;
text-indent:2em;
line-height: 30px;
}
使用text-indent:2em;
设置了首行缩进两字符
#foot p{
text-align:center;
color: #ddd;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
}
#foot a{
color: #fdfdfd;
text-decoration: none;
}
给p标签和a标签设置不同的字体颜色,能够凸显制作者的名字。
测试一下评论