一、作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、作品效果
▶️视频演示
https://live.csdn.net/v/embed/239800
(title-A31XY 影视动漫资讯bootstrap网页(9页))]
截图演示
三、 作品代码
HTML代码
动漫 | 模板
现在趋势
18 / 18
11
9141
- 积极的
- 电影
七大罪:众神之怒
18 / 18
11
9141
18 / 18
11
9141
18 / 18
11
9141
- 积极的
- 电影
钢之炼金术师:兄弟会
18 / 18
11
9141
- 积极的
- 电影
白鸟泽学园公园
18 / 18
11
9141
- 积极的
- 电影
Code Geass:Hangyaku的鲁路修R2
热门节目
18 / 18
11
9141
- 积极的
- 电影
千寻之神觉
18 / 18
11
9141
18 / 18
11
9141
18 / 18
11
9141
- 积极的
- 电影
浪客剑心:明治剑阁罗曼丹
18 / 18
11
9141
- 积极的
- 电影
Mushishi Zoku Shou 第二季
18 / 18
11
9141
- 积极的
- 电影
物语系列:第二季
最近添加的节目
18 / 18
11
9141
- 积极的
- 电影
鬼冢老师
18 / 18
11
9141
- 积极的
- 电影
命运/留夜电影:天堂的感觉 - II. 丢失
18 / 18
11
9141
- 积极的
- 电影
Mushishi Zoku Shou: 铃之雫
18 / 18
11
9141
- 积极的
- 电影
命运/零第二季
18 / 18
11
9141
18 / 18
11
9141
- 积极的
- 电影
七大罪:众神之怒
现场录制
18 / 18
11
9141
- 积极的
- 电影
昭和元禄落语新宿
18 / 18
11
9141
- 积极的
- 电影
Mushishi Zoku Shou 第二季
18 / 18
11
9141
- 积极的
- 电影
Mushishi Zoku Shou: 铃之雫
18 / 18
11
9141
- 积极的
- 电影
七大罪:众神之怒
18 / 18
11
9141
- 积极的
- 电影
命运/留夜电影:天堂的感觉 - II. 丢失
18 / 18
11
9141
CSS代码
h1 {
font-size: 70px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 24px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
p {
font-size: 15px;
font-family: "Mulish", sans-serif;
color: #3d3d3d;
font-weight: 400;
line-height: 25px;
margin: 0 0 15px 0;
}
img {
max-width: 100%;
}
input:focus,
select:focus,
button:focus,
textarea:focus {
outline: none;
}
a:hover,
a:focus {
text-decoration: none;
outline: none;
color: #ffffff;
}
ul,
ol {
padding: 0;
margin: 0;
}
/*---------------------
Helper CSS
-----------------------*/
.section-title {
margin-bottom: 30px;
}
.section-title h4,
.section-title h5 {
color: #ffffff;
font-weight: 600;
line-height: 21px;
text-transform: uppercase;
padding-left: 20px;
position: relative;
font-family: "Oswald", sans-serif;
}
.section-title h4:after,
.section-title h5:after {
position: absolute;
left: 0;
top: -6px;
height: 32px;
width: 4px;
background: #e53637;
content: "";
}
.set-bg {
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
四、更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库(持续更新中...)
【web学习指南】从web基础、计算机基础到前端常用框架的教程,涵盖前端大部分必备知识(学习指南 + 技术文章 + 资源分享)
Gitee仓库地址(来个Star吧~): https://gitee.com/zhanyuqiu2022/my-app