目录
网页效果展示:
网页源码解析:
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」
发布评论