写在开头(声明)
本文初衷记录本人(kj)的web学习过程,希望能留下一些痕迹,以下所有出现的代码均为本人纂写,对于一些写代码的语法和逻辑可能没有那么精简,或是用上高端的语法,但是我相信在未来n年的学习里会“更上一层楼”!
web商品网页制作(整体)
2024年11月15日web网格制作实践
预览网页→https://hmho000.github.io/web-learning/1115web2.html
代码展示(史山)
.center{
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.main{
display: flex;
}
.one{
height: 200px;
width:200px;
background-color: red;
float: left;
}
.two{
height: 200px;
width: 700px;
background-color: #1bd8fa;
margin-left: 20px;
float: right;
}
.color{
background-color: green;
height: 80px;
width: 140px;
margin-left: 10%;
margin-top: 13px;
/*float: left;*/
}
.color-text{
text-align: center;
font-size: 25px
}
.main1{
width: 80%;
margin: auto;
margin-bottom: 10px;
display: flex;
}
.top{
height: 90px;
width: 100%;
background-color: aqua;
/* margin-bottom: 0 auto; */
margin-bottom: 10px;
display: flex;
}
.top-1{
height: 90px;
width: 80%;
background-color: black;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.middle{
height: 90px;
background-color: yellow;
}
.ad{
height: 270px;
/* background-color: aqua; */
}
.ad-1{
background-color: tomato;
height: 270px;
width: 25%;
/*margin-bottom: 0 auto;*/
float: left;
}
.ad-2{
background-color: green;
height: 270px;
width: 25%;
/* margin-bottom: 10px; */
float: left;
}
.ad-3{
background-color: burlywood;
height: 270px;
width: 25%;
float: left;
}
.ad-4{
background-color: darkorchid;
height: 270px;
width:25%;
float: left;
}
.ad-text{
font-size: 60px;
width: 100%;
line-height: 250%;
text-align: center;
}
.end{
background-color: aqua;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.end-2{
background-color: rgb(0, 255, 255);
height:110px;
display: flex;
align-items: center;
justify-content: center;
}
.top-title-text{
font-size: 40px;
color: rgb(255, 255, 255);
}
.title2{
font-size: 40px;
align-items: center;
justify-content: center;
}
.kj{
display: flex;
float: right;
height:auto;
width: auto;
background-color: peru;
font-size: 20px;
align-items: center;
justify-content: center;
margin-top: 70px;
}
主标题
副标题
广1
广2
广3
广4
分隔栏1
工具栏
版块1
版块2
版块3
版块4
版块5
版块6
分隔栏2
web商品页面小米su7(结合图片)
2024年11月20日web网格与图片练习
预览网页→https://hmho000.github.io/web-learning/1120web21
代码展示
.center{
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.main{
display: flex;
}
.one{
height: 200px;
width:200px;
background-color: red;
float: left;
}
.two{
height: 200px;
width: 700px;
background-color: #1bd8fa;
margin-left: 20px;
float: right;
}
.color{
background-color: green;
height: 80px;
width: 140px;
margin-left: 10%;
margin-top: 13px;
/*float: left;*/
}
.color-text{
text-align: center;
font-size: 25px
}
.main1{
width: 80%;
margin: auto;
margin-bottom: 10px;
display: flex;
}
.top{
height: 90px;
width: 100%;
background-color: aqua;
/* margin-bottom: 0 auto; */
margin-bottom: 10px;
display: flex;
}
.top-1{
height: 90px;
width: 80%;
background-color: black;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.middle{
height: auto;
background-color: yellow;
}
.ad{
height: 270px;
/* background-color: aqua; */
}
.ad-1{
background-color: tomato;
height: 270px;
width: 25%;
/*margin-bottom: 0 auto;*/
float: left;
}
.ad-2{
background-color: green;
height: 270px;
width: 25%;
/* margin-bottom: 10px; */
float: left;
}
.ad-3{
background-color: burlywood;
height: 270px;
width: 25%;
float: left;
}
.ad-4{
background-color: darkorchid;
height: 270px;
width:25%;
float: left;
}
.ad-text{
font-size: 60px;
width: 100%;
line-height: 250%;
text-align: center;
}
.end{
background-color: aqua;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.end-2{
background-color: rgb(0, 255, 255);
height:110px;
display: flex;
align-items: center;
justify-content: center;
}
.top-title-text{
font-size: 40px;
color: rgb(255, 255, 255);
}
.title2{
font-size: 40px;
align-items: center;
justify-content: center;
}
.img{
height: 270px;
width: auto;
width: 100%;
}
小米su7





2024年11月20日 kj制作
web商品网页网格练习(图片、文字版)
2024年11月22日web网格图片文字结合练习
预览网页→https://hmho000.github.io/web-learning/1122web22.html
代码展示
.one{
width: 80%;
height: 250px;
background-color: blanchedalmond;
display: grid;
grid-template-columns: repeat(5,1fr);
grid-template-rows: repeat(2,120px);
grid-gap: 10px 10px;
margin: 0 auto;
}
.two{
height: 120px;
border: 0.5px solid black;
text-align: center;
}
.two:nth-child(1){
background-color: rgb(245, 223, 99);
width: 100%;
height: 100%;
grid-row-start: 1;
grid-row-end: 3;
}
.img1{
height: 250px;
width: 100%;
}
.img2{
height: 65%;
}
.text{
font-size: 25px;
margin-top: 0px;
}

手机1

手机2

手机3

手机4

手机5

手机6

手机7
手机8
web链接导航练习
2024年11月27日web链接定位导航练习
预览网页→https://hmho000.github.io/web-learning/1127web23.html
代码展示
Docker简介
Docker是一个开源的应用容器引擎,它允许开发者将应用及其依赖打包成一个轻量级、可移植的容器,然后可以在任何支持Docker的Linux机器上运行。这种容器化的方法使得应用可以在不同的环境中以一致的方式运行,无论是开发者的个人笔记本电脑还是高端的云平台。
Docker的工作原理
Docker利用Linux内核的cgroup、namespace以及OverlayFS等技术,对进程进行封装隔离,实现了操作系统层面的虚拟化。在Docker中,每个容器都是独立的,并且与宿主机和其他容器隔离。Docker容器的性能开销极低,因为容器直接运行于宿主的内核,没有自己的内核,也不需要像传统虚拟机那样进行硬件虚拟化。
Docker的组件
Docker的架构包括几个关键的组件:
Docker守护进程(Docker daemon):负责管理Docker的镜像、容器、网络和数据卷。
Docker客户端(Client):用户通过客户端发送指令来管理和运行容器。
Docker镜像(Image):容器的模板,可以通过Dockerfile文件定义,并且可以继承。
Docker仓库(Registry):用于存储和管理镜像的服务,类似于git仓库。
Docker容器(Container):通过镜像创建的运行实例,类似于面向对象编程中类和对象的关系。
Docker的优势
Docker的优势在于其轻量级和高效性。与传统虚拟机相比,Docker容器不需要额外的操作系统,启动速度更快,资源消耗更少。此外,Docker的镜像使用分层存储,使得镜像的复用和定制变得更加容易。开发者可以基于已有的镜像添加新的层,构建自己所需的应用环境。
Docker的应用场景
Docker广泛应用于微服务架构中,因为它可以轻松地将应用容器化,实现快速部署和扩展。Docker也被用于持续集成和持续部署(CI/CD)的流程中,自动化应用的构建、测试和部署。此外,Docker还支持数据卷和网络配置,为复杂应用的部署提供了灵活性。
Docker的发展
Docker自2013年开源以来,已经成为容器技术中的佼佼者,并且得到了广泛的实践和应用。Docker的社区版(CE)和企业版(EE)为不同用户提供了丰富的选择。Docker的项目代码主要在GitHub上维护,其星标和fork数量持续增长,显示了其在开发者社区中的受欢迎程度。
总结
Docker通过容器化技术,为软件的开发、交付和运行提供了一个高效、标准化的平台。它不仅改变了软件的部署方式,也推动了DevOps文化的发展。Docker的出现,使得“构建一次,运行任何地方”的理念成为可能,极大地促进了软件开发和运维的协作。
web链接导航练习( 附带动效)
2024年11月29日web链接定位导航练习
预览网页→https://hmho000.github.io/web-learning/1129web24.html
代码展示
a{
text-decoration: none;
display: block;
margin-top: 20px;
line-height: 2;
}
div{
width: auto;
}
nav{
width: 550px;
height: auto;
text-align: center;
background-color: rgb(87, 181, 207);
margin-left: 25px;
position: relative;
}
a:hover{
color: red;
transform: scale(1.1);
text-shadow: 10px 10px 10px 10px black;
box-shadow: 2px 2px 2px 2px black;
transition: transform 0.5s, box-shadow 0.5s;
background-color: blueviolet;
}
svg{
width: 35px;
position: absolute;
bottom: 10px;
left: 10px;
}
Docker简介
Docker是一个开源的应用容器引擎,它允许开发者将应用及其依赖打包成一个轻量级、可移植的容器,然后可以在任何支持Docker的Linux机器上运行。这种容器化的方法使得应用可以在不同的环境中以一致的方式运行,无论是开发者的个人笔记本电脑还是高端的云平台。
Docker的工作原理
Docker利用Linux内核的cgroup、namespace以及OverlayFS等技术,对进程进行封装隔离,实现了操作系统层面的虚拟化。在Docker中,每个容器都是独立的,并且与宿主机和其他容器隔离。Docker容器的性能开销极低,因为容器直接运行于宿主的内核,没有自己的内核,也不需要像传统虚拟机那样进行硬件虚拟化。
Docker的组件
Docker的架构包括几个关键的组件:
Docker守护进程(Docker daemon):负责管理Docker的镜像、容器、网络和数据卷。
https
Docker客户端(Client):用户通过客户端发送指令来管理和运行容器。
Docker镜像(Image):容器的模板,可以通过Dockerfile文件定义,并且可以继承。
Docker仓库(Registry):用于存储和管理镜像的服务,类似于git仓库。
Docker容器(Container):通过镜像创建的运行实例,类似于面向对象编程中类和对象的关系。
Docker的优势
Docker的优势在于其轻量级和高效性。与传统虚拟机相比,Docker容器不需要额外的操作系统,启动速度更快,资源消耗更少。此外,Docker的镜像使用分层存储,使得镜像的复用和定制变得更加容易。开发者可以基于已有的镜像添加新的层,构建自己所需的应用环境。
Docker的应用场景
Docker广泛应用于微服务架构中,因为它可以轻松地将应用容器化,实现快速部署和扩展。Docker也被用于持续集成和持续部署(CI/CD)的流程中,自动化应用的构建、测试和部署。此外,Docker还支持数据卷和网络配置,为复杂应用的部署提供了灵活性。
Docker的发展
Docker自2013年开源以来,已经成为容器技术中的佼佼者,并且得到了广泛的实践和应用。Docker的社区版(CE)和企业版(EE)为不同用户提供了丰富的选择。Docker的项目代码主要在GitHub上维护,其星标和fork数量持续增长,显示了其在开发者社区中的受欢迎程度。
总结
Docker通过容器化技术,为软件的开发、交付和运行提供了一个高效、标准化的平台。它不仅改变了软件的部署方式,也推动了DevOps文化的发展。Docker的出现,使得“构建一次,运行任何地方”的理念成为可能,极大地促进了软件开发和运维的协作。
于2024年12月6日 17:55:06由kj更新