目录

网页效果展示：​​​​​​​

网页源码解析：

HTML模块：

CSS模块：

JS模块：

参考：

网站链接：元之旅

源代码：​​​​​​​​​​​​​​​​​​​​​​​​GitHub - lzt123lzt/lzt123lzt.github.io: Config files for my GitHub profile.​​​​​​​​​​​​​​

网页效果展示：

首页：

 

文创购买页面：

 

网页源码解析：

HTML模块：

1.<section>

(1)section元素代表了一个文档或应用的通用部分，在文章中，section是主题内容，通常带着heade

(2)section 不是一个专用来做容器的标签，如果仅仅是用于设置样式或脚本处理,专用的是 div。

(3)section 里应该有 标题（h1~h6），但文章中推荐用 article 来代替「article包含section，section用来划分其中的段落」

(4)在网页大纲（outline）里面   作为一种层级落差的体现实现  

2.<aside> (1)被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。 (2)在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。

3.<nav>&&<footer>

一：

1）理解：Nav是与导航相关的，所以一般用于网站导航布局。同时完全就像使用div标签、span标签一样来使用<nav>标签可添加id或class，而与div标签又有不同处是，此标签一般只用于导航相关地方使用，所以在一个html网页布局中可能就使用在导航条处，或与导航条相关的地方布局使用。

2）兼容性：因为<nav></nav>标签是html 5新增的标签，而在IE8及以下IE浏览器（IE8、IE7、IE6）不支持，所以根据需求选择布局HTML

二：

1）<footer> 元素应当含有其包含元素的信息。

2）页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

3）是用的比较多的，层进式的结构：

CSS模块：

实现变大效果（鼠标在图片上空时）
 


img{
	width:100px;
	height:140px;
	transition:all 2s ease;
}
img:hover{					
	cursor:pointer;/*变手势光标*/
}

img:hover{		/*变大*/
	width:100px;
	height:150px;
}

点击并拖拽以移动
值得学习的点（增大的部分）

transition: property duration timing-function delay 

transition-property 规定设置过渡效果的css属性名称

transition-duration 规定完成过渡效果需要多少秒或毫秒

transition-timing-function 指定过渡函数，规定速度效果的速度曲线

1)ease:由快到慢到更慢

2)linear:恒速

3)ease-in:越来越快

4)ease-out:越来越慢

5)ease-in-out:先加速后减速transition-delay 指定开始出现的延迟时
 

JS模块：

功能一：

行与列自动适配屏幕大小

function smartColumns() { //Create a function that calculates the smart columns

//Reset column size to a 100% once view port has been adjusted
$("ul.column").css({ 'width' : "100%"});

var colWrap = $("ul.column").width(); //Get the width of row
var colNum = Math.floor(colWrap / 200); //Find how many columns of 200px can fit per row / then round it down to a whole number
var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column

$("ul.column").css({ 'width' : colWrap}); //Set exact width of row in pixels instead of using % - Prevents cross-browser bugs that appear in certain view port resolutions.
$("ul.column li").css({ 'width' : colFixed}); //Set exact width of the re-adjusted column	

}	

smartColumns();//Execute the function when page loads

$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
smartColumns();
});

但是使用CSS同样可以达到这个效果哦：

ul.column{
    display:flex;
    flex-warp:warp;
}

参考：

html中<section>标签的理解_edg2333的博客-CSDN博客_section标签的作用

网站链接：元之旅

源代码：​​​​​​​​​​​​​​​​​​​​​​​​GitHub - lzt123lzt/lzt123lzt.github.io: Config files for my GitHub profile.​​​​​​​​​​​​​​



 

更多推荐

个人网页（项目）源码解析「HTML+CSS+JS」