池州介绍网站说明

说明

这是鄙人选的《网站设计》的期末作业。因为最后是把所有资源打包到文件夹的，所以全部使用的是相对路径。上传到服务器的时候，为了保证原汁原味就没有把相对路径改成腾讯云的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标签设置不同的字体颜色，能够凸显制作者的名字。