目录
一.项目概述
本次项目采用了我喜欢的CSS框架，构建了一个主题为“我的娱乐世界”的5个页面的网站。网站一共五个页面，音乐，电影，电视剧，综艺这四个板块各占一个页面，然后有一个综合介绍的页面。在这个网站上介绍了我所喜欢的几位明星和我最爱的音乐，电影，电视剧，综艺，包括他们的代表作，我非常喜欢的作品以及我喜欢他们的原因。网站上也附上了部分链接，方便参观网站的人可以直接从该网站就能搜索到他们和他们的作品。五个页面的跳转是在当前页面打开，而明星以及作品的跳转就是在新的页面打开。
二.开发过程
1. 模板选择
本次设计我采用了MDB模板，主页面基于MDB模板更改的，根据自己的主题收集了素材，然后设计排版规划，根据自己的喜好设置了背景和字体的颜色以及边距，对网站设置导航条使其能进行页面的跳转，补充了部分超链接，添加了音乐播放等功能。MDBootstrap有着丰富的CSS模板等，作为初学者来说比较容易上手。
2.页面导航条 navbar
页面导航条其实在学基础CSS我都还没有接触到，是这次做网站设计，才知道了如何实现页面导航条 。导航条代码使用了一个<nav>标签, 其内部实际包含了三个部分:
<a> 超链接, 为导航条里设置上超链接，从而实现主页面内容定位的功能；<button> 按钮来实现点击；<div> 区块, 用于放置各个导航超链接。页面导航条的超链接跳转我都是利用的页面内跳转，然后课程报告是在新页面跳转。并且跳转到某一板块的内容，对应导航条会有背景颜色。
CSS代码：
.top-nav {
padding-bottom:2%;
color: rgb(255, 0, 144);
font-size:30px;
}
.top-nav ul li {
display: inline-block;
}
.top-nav ul li a {
color:rgb(255, 47, 113);
font-size:30px;
font-family: 'Merriweather Sans', sans-serif;
padding: 17px 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
HTML代码：
<div class="top-nav">
<ul>
<li class="active"><a href="index.html">娱乐</a></li>
<li><a href="music.html" >音乐</a></li> |
<li><a href="movie.html">电影</a></li> |
<li><a href="teleplay.html">电视剧</a></li> |
<li><a href="show.html">综艺</a></li>
</ul>
</div>
3.明星图片以及超链接实现
这里超链接是在在新页面跳转，即target属性为_blank，而属性_self是在当前页面打开。下划线的颜色和距离是利用了 border-bottom和padding-bottom两个属性来设置。名字居中利用的text-align:center声明。
CSS代码：
.col_1_of_4{
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.span_1_of_4 p {
font-size:0.8125em;
padding:0.5em 0;
color: #333;
line-height: 1.5em;
}
.desc{
border-bottom: 5px solid #F0745F;
padding-bottom:10px;
}
.left-text h5 {
font-size: 20px;
text-transform: uppercase;
margin: 4px 0 0 0;
text-align: center
}
HTML代码：
<div class="section " >
<div class="col_1_of_4 span_1_of_4">
<img src="ima/105.png" style="height:260px;width: 100%;" alt="图片显示报错"/>
<div class="desc">
<div class="left-text">
<h5><a href="https://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6/129156" target="_blank">周杰伦</a></h5>
</div>
</div>
</div>
4.音乐播放
在源代码中编写以下几句代码将能实现在HTML网页内添加背景音乐；
<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
src="http://demo.mimvp.com/html5/take_you_fly.mp3">
</audio>
1、使用autoplay="autoplay"，则背景音乐将在音网页打开后就自动马上播放。
2、使用controls="controls"，则为了在页面内显示显示控件，如播放按钮。
3、使用"loop="loop"，则是为了是背景音乐重复播放。
4、使用preload="auto"，则音频在页面加载的同时进行加载，并预备播放。
5、使用src=""，即是在""内加入背景音乐的保存路径，如：src="web网页制作\03.mp3"。
若是想播放按钮隐藏，则可以直接在增加一个style="display: none;"声明即可。
<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto" src="music/1.mp3" style="display: none;"> </audio>5.插入视频
Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性， 以及一个内部使用的标签。
poster属性用于指定一张图片，当视频不自动播放时，也就是可以当封面图被大家所看见。
浏览器按source标签的顺序检测标签指定的视频是否能够播放（可能是视频格式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。
此标签包含src、type、media三个属性。src属性：用于指定媒体的地址，和video标签的一样；Type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式；Media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。
<video width=100% height="450" poster="ima/1.png" preload="none" controls="controls"><source src="music/1.mp4" /></video>
6.快速返回页面顶部锚点
锚点用于标记页面的某个元素或位置。通过锚点可以轻易的在长页面内实现跳转。
也可以用锚点做类似目录，快速跳转到想看的内容。
<a href="#" style="font-size: 30px;position: absolute;right:1%;"><img src="ima/850.png" style="width: 50px;height: 50px;" alt=""/>
<div id="6" style="font-size:35px;font-family:楷体;color: rgb(231, 111, 131);position: relative;bottom: 5px;"><a href="#6">剧情简介:</a> <a href="#1">人物台词</a> <a href="#5">剧照</a></div>
<div id="5"style="font-size:30px;color: rgb(255, 94, 0);">剧照:</div><br> </div>
点击就直接跳转到你想看的内容。
7.利用伪元素定义元素的颜色的状态
将鼠标移到元素上变换背景颜色，以提示观看者这个文字可以点击。
CSS：
div a:hover
{
color: pink;
}
div a{color: red;}
{}
<div id="2" style="text-align: center;font-size: 30px;color: red"><a href="https://baike.baidu.com/item/%E5%90%91%E5%BE%80%E7%9A%84%E7%94%9F%E6%B4%BB/19958148?fr=aladdin" target="_blank">向往的生活</a></div>
三.开发问题以及解决方案
1.学习做二级菜单
去学习如何做二级菜单，大致学出来了，但没有完全学会如何把字数不同的一二级菜单大小对应完整。在综合自己的主题需求不太需要二级菜单，最后就没有在网站上展示。
在一级菜单里嵌入二级菜单即<ul><li><a>一级菜单</a><ul><li><a>二级菜单</a></li></ul></li></ul>；
嵌入后接下来控制二级菜单的样式，通过绝对定位使二级菜单出现在一级菜单下然后隐藏即"{ position:absolute; display:none;}"；
当鼠标移动到一级菜单上时二级菜单这时时显示不出来的，还需要添加“ul li:hover ul{ display:block}”使二级菜单显示出来
ul li ul{
position: absolute;
display:none;
}
ul li ul li a{
font-size:1px;
width: 300px;
}
ul li:hover ul{ display:block;
}
2.图片对不整齐
一开始没有设置同一高度，导致图片对不整齐不好看，最后统一了高度样式终于整齐了。
<img src="ima/1.png" style="height:300px;" alt=""/>
3.排版太过冗长
在内容排版时，有朋友提出意见，文字太长太多，并且有可能每一部分长短不一导致看着不舒服，所以利用了溢出auto裁减溢出部分，看情况提供滚动条，就会显得整个页面不密集。
.yihang{
width:280px;
height: 100px;
overflow-y:auto;
}
4.一个模块里想部分字体变色
在<div>或者其他模块的字体中，将想要单独变色的字体再用<span></span>标签包住，形成嵌套，这样就达到了部分字体变色的作用。
<div class="item_text" style="font-family:楷体;"><span style="color: red;">东风破</span> <span style="color: red;">你听得到</span> 同一种调调 </div>
5.图片文字排版，相对位置问题
虽然把整个网站做完了，但是到最后也没太弄清楚究竟如何巧妙的设计文字图片的排版分布。每次排版总是利用margin，padding等进行具体数字的调试，然后结合页面看位置如何，再修改数值。这样感觉十分的麻烦。
多层嵌套时，不太能快速找到对应的标签。
四.总结
以上开发过程和相关的问题以及解决方案大概就是我这次大作业过程的缩影了。本次大作业根据自己的兴趣爱好，将自己喜欢的明星，影视音乐作品等以网页的形式展示出来，并进行设计排版，是十分有趣的一次体验，整个过程即便遇到了许多大大小小不同的问题，但也乐在其中。
一开始是采用了模板，但是不知道是自己没有掌握用模板的方法还是不太适合用模板，除了保留运用了模板中设计好的JavaScript语言外，其他排版工作都差不多是自己写的HTML和CSS。整个过程最让我感到比较疑惑的大概就是两个模块的间距问题，老是找不到正确的方法，让他们很自然的保持一个合适的队形；包括我对于position定位他们相关的使用好像还是理解不到位。不过我从整个制作中还是学习并熟练了很多的操作，比如如何使用列表夹带超链接，从而实现页面的跳转。伪元素的使用更加熟练，其中特别常使用的就是将鼠标放某元素上背景变色，这可以让阅览者知道哪些文字或者按钮时可以点击的，有特殊的作用。对于标签的嵌套使用和组合选择器也有了一个更清晰的了解，使用起来也比较熟练了。然后新学习到了如何在html网页中插入视频和音频的方法。
由于自己的能力问题和没有找一个比较高级的模板，所以整个网页的功能比较简洁单一，但基本上都是自己写出来的。整个过程不管是上网查询实现某些功能或者解决某些问题，还是自己不断的试错，都是一个让自己能力提升的过程。并且我深刻的意识到做页面设计真的需要艺术水平，不然排版和颜色搭配真的很令人头疼。页面设计看似简单，但其中的深层次的东西也不容易做到，而低层次比如字体样式，大小等也需要反复打磨，总之整个过程都需要耐心和细致。
通过本学期课程的学习和本次大作业的经历，让我对web学习有了比较浓厚的兴趣，将自己喜欢的东西做成网页很有自我满足感，在今后的学习中再慢慢深入学习JavaScript和TypeScript。
五.效果浏览
娱乐世界 (kkklg.github.io)
https://kkklg.github.io/LG.github.io/index.html
扫一扫
521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
