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

网页效果展示：

网页源码解析：

HTML模块：

CSS模块：

JS模块：

参考：

网站链接：元之旅

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

网页效果展示：

首页：

文创购买页面：

网页源码解析：

HTML模块：

1.

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

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

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

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

2.

(1)被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。

(2)在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。

3.

&&

一：

1）理解：Nav是与导航相关的，所以一般用于网站导航布局。同时完全就像使用div标签、span标签一样来使用

标签可添加id或class，而与div标签又有不同处是，此标签一般只用于导航相关地方使用，所以在一个html网页布局中可能就使用在导航条处，或与导航条相关的地方布局使用。

2）兼容性：因为

标签是html 5新增的标签，而在IE8及以下IE浏览器（IE8、IE7、IE6）不支持，所以根据需求选择布局HTML

二：

1）

元素应当含有其包含元素的信息。

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中

标签的理解_edg2333的博客-CSDN博客_section标签的作用

网站链接：元之旅

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

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

轻触开源(三)-Gson项目源码解析_贰
2019独角兽企业重金招聘Python工程师标准>>> 转载请注明出处:https://my.oschina.net/u/874727/blog/750473 Q:102525062 ...
android项目源码解析04:新浪微博客户端源码解析
本文主要介绍如何构建新浪微博客户端.以网上流传weiboSina源码为例介绍,其下载地址为: http://download.csdn.net/detail/ryzhanglu/3453875. 1. ...
轻触开源(二)-Gson项目源码解析_壹
2019独角兽企业重金招聘Python工程师标准>>> 上篇文章<轻触开源-Java泛型Type类型的应用和实践(一)> https://my.oschina.net/u ...
图片管理系统源码_「程序员分享」基于SpringBoot开发的天猫商城源码
前言大家好,我是程序员it分享师,应粉丝的要求,今天给大家带来一个基于Springboot开发的天猫商城的源码! 使用技术天猫商城系统使用的是Spring,SpringMvc,SpringBoot ...
语义分割丨PSPNet源码解析「训练阶段」
引言之前一段时间在参与语义分割的项目,最近有时间了,正好把这段时间的所学总结一下. 在代码上,语义分割的框架会比目标检测简单很多,但其中也涉及了很多细节.在这篇文章中,我以PSPNet为例,解读一下 ...
大型项目源码集合「GitHub 热点速览 v.21.39」
作者:HelloGitHub-小鱼干代码,尤其是优雅规范的代码,一直都是学习编程技巧的捷径.虽然有实用的代码小片段,能拯救当前业务的燃眉之急,但是真要去提升自己的技能还是得从大型的项目,尤其是有一定 ...
派工单系统源码_「青鸟报修云」酒店设备报修管理系统
近几年随着信息化的快速发展,酒店方面也越来越重视设备的报修管理,争取将酒店的服务做到极致,满足顾客的需求.但是酒店内部设备的报修问题,一直困扰着许多酒店管理者,而一旦酒店的设备设施出现故障,就会直接影 ...
派工单系统源码_「VIP报修云」报修工单进度通知方法
报修进度如何及时通知报修人.技术维修员.管理员是故障报修中应用最广泛的功能之一,在报修的场景中消息通知起到及时通知和报修体验的作用. 工单进度报修通知场景: 1.通知报修人,用户报修后需要用到的通知 ...
[转]ViewPagerindicator 源码解析
转自:http://www.codekk.com/open-source-project-analysis/detail/Android/lightSky/ViewPagerindicator%20% ...
源码解析-Volley(转自codeKK)
Volley 源码解析本文为 Android 开源项目源码解析中 Volley 部分项目地址:Volley,分析的版本:35ce778,Demo 地址:Volley Demo 分析者:grumo ...

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

网页效果展示：

网页源码解析：

HTML模块：

CSS模块：

JS模块：

参考：

网站链接：元之旅

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

最新文章

热门文章