关于动漫《昨日青空》的网页

前言

这个网页算是我自己自学前端写的第一个网页，这也是我的第一个博客，虽然网页简单但是由于对布局和各种标签性质的不熟练，其实也弄啦挺久。
我自己认为的前端最基础的是先掌握各种布局，标签，毕竟当你要学习别人的代码时也要，当然利用html css写出来的是静态网页，进一步动态的就需要掌握js jq等知识，并且了解他们之间的相互联系。
html是框架即相当于一所房子里需要的物件，css就是这些物件的摆放位置，类似Java语言中的布局。js就是他们所需要的表现形式(性质)，比如电视机会播放视频等。

1.网页首页

这个网页有共同的部分即动漫名字影视语句和导航栏
首页是网页的封面主要是动漫的宣传照和影视歌曲词等。
首先HTML默认的是流式布局，当然网页离不开设计，所以要用到css去调整标签的位置
首页主要采用的是二列布局（布局分为一列布局，二列布局，三列布局，混合布局）简单来说就是将区域分为左和右，但是可能会有空余。
布局可以看一下链接：
【页面布局的几种方式（静态化布局，流式布局，自适应布局，响应式布局，弹性布局） - zlover - 博客园】https://www.cnblogs.com/zzym/p/9606575.html

1.导航栏的书写

导航栏的效果主要是通过链接标签(<a href="firstpage.html" class="now_page">href="…"里是链接的页面，class是给标签<a>取得类名，主要是通过该类名对标签进行后续CSS等的书写，相当于一个函数名)转换到另一个页面。比如我这里用到的信息列表标签

  <ul><li><a href="firstpage.html" class="now_page"> 首页</a></li><li><a href="story.html">动漫简介</a></li><li><a href="Intoduce.html"> 人物介绍</a></li><li><a href="video.html">影视原声</a></li><li><a href="pic.html">剧照</a></li></ul>

具体的可以百度鸭！！(包括文字的行间距，居中，还有鼠标点击或浮动在某一栏上的效果)
如果忘记写<li>标签，可能效果差不多，但是你接下来的部分就会紧贴你的导航栏的字开始，你设置的导航栏背景会遮住下面的部分。
具体原因可能是因为<a>是行内元素，没有宽高的原因，全凭内容撑着，但是，不是给他的父级设置大小，背景啦吗？为什么下面的div还会跑到背景下面呢？现在再去试却发现没有啦？与css有关？（遗留问题）

2.二列布局基本介绍

这一部分我是通过慕课网学的。
主要是通过子级适应父级`
1.设置一个父级<div class="content">
CSS结构为：

.content{width:1400px;height:500px;
}

宽高自己设置
2.两个子级left和right

.left{width:60%;height:500px;float:left;}
.right{width:40%;height:500px;float:right;}

其中60%，40%是指占据父级大小的百分比，注意要让两者分别浮动在父级的左右两侧，高度自己设置吧！
效果图：

2.动漫简介

这里我讲下文字如何环绕图片显示，其实特别简单，跟上一步中的二列布局类似
1.首先设置一个父类里面包括两个部分图片和文字
2.图片设置为<img src="my_inmages/2.jpg" style="width:50%;height:auto"/>
其中width：50%是指自适应窗口的大小
3.接着写文字，它会从图片的左端开始写满整个视口，然后从图片底下接着显示。
问*1.为什么文字不是从图片的底下开始显示呢？

1.块元素在显示时通常会以新行开始，那什么是块元素呢？

在html中<div>、 <p>、<h1>、<form>、<ul>和 <li>就是块级元素。设置 display:block就是将元素显示为块级元素，即内联元素可以转换成块级元素
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽

2.什么是内联元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素,即块元素可以转换成内联元素。
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
【HTML布局与框架 - ﹏猴子请来的救兵 - 博客园】https://www.cnblogs.com/yyhh/p/4210659.html

3.关于这个问题

原来html是默认一行一个div，由于给图片设置啦float：left，可以使一行中有多个div或者说是块级元素。但是，浮动并不应用于内联元素上，若引用到啦，这个元素将被指定为块级元素。所以照片右边会继续有文字，而不是从图片的底部开始显示。
效果图为：

3.人物简介

在不知道怎么安排网页的时候可以去看看浏览器网页的代码，这或许是学习前端的一个方便之处吧—资源较丰富，只是网页的源码可能比较杂乱，没有格式，这个人物介绍就是从百度百科的网页里面学到的，这里用到是表格标签

<table><tbody><tr><td width="215"><p><img src="my_inmages/7.jpg" style="width:220px;height:118px;"></b></p></td></tbody>  </table>

1.<table>....</table>:表格的开始与结束
2.<tbody>...</tbody>:如果不加<thead><tbody><tfother>(即标题正文脚注)table表格加载完后才能显示，加上这些表格结构后，<tbody>包含行的内容下载完后优先显示，不必等表格结束再显示，同时，如果表格很长，用tbody分段，可以一部分一部分显示
3.<tr>... </tr>:表格的一行，有几个tr就有几行·
4.<td>...</td>:表格的一个单元格一行中包括几个td说明一行中有几个表格
5.<th>...</th>:表格头部的一个单元格，表格表头。
好吧，在这个网页里，二列布局被我用烂啦，在右侧我又加啦经典语录，好的，已经知道网页关于设计方面的要求啦，哭泣。
效果图：

4.影视原声

这一部分原本打算写一个类似网页音乐播放器的，有自定义的音乐播放器形式并且能实现歌词同步，好吧！去看网页版网易云音乐的代码，涉及的知识有点多啊！有些用到jq,json,对于我这种刚接触前端的小渣渣，还是想先掌握一定js知识后实现，那下一次就做这个啦。
这个网页影视原声是列表播放MV,列表可收缩。

1.HTML5

比起之前版本多啦对音乐和视频方面的内容，功能也很强大，但是对于很多人来说，样式不够好看，所以选择自定义。

2.`<audio>`标签：

controls属性;不同浏览器显示不同控制面板，比如Chrome浏览器的音频控制面板：

3.列表的收缩

这里主要用到aside标签，附属信息部分。
设置两个按钮<与 >分别表示收起和展开，在js文件中写出点击这两个按钮的函数

(1).收起播放列表

ctrl.onclick = function(){aside.style.transition = "1s";aside.style.transform = "translateX(-10vw)";setTimeout(function(){aside.style.display = "none";ctrl_show.style.visibility= 'visible';},"1000");
}

这里transition是指允许CSS的属性值在一定时间内平滑地过渡
tansform指变形，ranslateX(-10vw)指向x轴移动10vw,vw(view weight)是一种视窗单位，表示视窗宽度的百分比，即1vm表示视窗宽度的1%。
视窗：浏览器实际显示的区域
VM与%的区别：
%是针对父级而言的，如果没有设置body大小就无法获取数据；而vw是可以直接获取的，根据视窗决定

(2).展开播放列表

  ctrl_show.onclick = function(){aside.style.display = "block";ctrl_show.style.visibility= 'hidden';setTimeout(function(){aside.style.transform = "translateX(0vw)";},"0");}

display属性 :block:(1)不设置宽度是，宽度为父元素宽度（2）独占一行
链接：【深入理解display属性 - 小火柴的蓝色理想 - 博客园】https://www.cnblogs.com/xiaohuochai/p/5202761.html
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
比如此函数中

      setTimeout(function(){aside.style.transform = "translateX(0vw)";},"0");}

表示0毫秒后执行setTimeout里调用的函数function()

4.播放视频

这里主要利用video的性质：主要思路是通过将mv放入列表标签然后在js里面读取，并且对video进行监听实现播放，暂停
setAttribute(“给这个变量取的名字,以后通过这个名字getAttribute,比如hello”,变量);
getAttribute(“hello”)就得到变量了
效果图：

5.剧照

这个部分实现啦剧照的轮播，和手动点击播放。主要思路是将第一张图片放在left:-800px的位置，由于img的性质(在第二个部分里面块元素）img是内联元素，内联元素通常不会以新行开始，一般都会在一行，所以n张图片会在一行显示。然后设置一个区域用来存放所有照片，再设置一个区域用来显示当前的图片，利用计时器按一定时间自动替换播放图片

1.照片html

         <div id="list" style="left:-800px;"><img src="my_inmages/15.jpg" alt="5.pg"/><img src="my_inmages/20.jpg" alt="5.pg"/><img src="my_inmages/11.jpg" alt="5.pg"/><img src="my_inmages/15.jpg" alt="5.pg"/><img src="my_inmages/20.jpg" alt="5.pg"/></div> <div id="buttons" ><span index="1" class="on"></span><span index="2"></span><span index="3"></span><a href="javascript:;" class="arrow" id="prev">&lt;</a> <!--注意&lt不是&it-->   <a href="javascript:;" class="arrow" id="next">&gt;</a>   </div>

第一部分主要是照片列表资源，第二部分按钮用来描述照片总数以及当前照片
&lt,&gt分别表示<, >

2.js部分

实现轮播的基本操作实际上设置一定时间就让图片列表的left值移动,注意总的保存图片的div的width是照片数目乘以一张照片的宽度，而且用于显示的div的大小也是一张照片的大小
效果：
具体的代码在这里：https://github.com/2018XYP/FirstWeb

6.总结

这是寒假做的一个简单网页，甚至还有很多步骤都省略啦。学习中发现其实要精通还是挺难的，要学的很多。或许也有一点改变啦我对前端的看法。回过头来想会发现自己在大学这两年好像真的没有学到什么，看似很忙做的却好像对自己没有一点帮助，一切都得靠自己，所以接下来的多学习一些知识，包括自己一直想学却没去做的，而博客或许从现在开始记录着我的点滴。纯属记录哦!
在写这个网页时想做一个类似网易云的网页版音乐播放器，但是我学的js还不多，前端涉及的地方真的挺多的，挺复杂的。所以我想先了解一些知识以后再去好好写，这学期提前学习前端相关的知识，还有GitHub上建立自己的一个博客。
同时，学习真的要通过实例学习，好的，就这样吧。