HTML期末学生大作业 响应式动漫网页作业 html+css+javascript

一、作品介绍

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
  • 积极的
  • 电影
七大罪:众神之怒

现场录制

18 / 18
11
9141
  • 积极的
  • 电影
昭和元禄落语新宿
18 / 18
11
9141
  • 积极的
  • 电影
Mushishi Zoku Shou 第二季
18 / 18
11
9141
18 / 18
11
9141
  • 积极的
  • 电影
七大罪:众神之怒
18 / 18
11
9141
18 / 18
11
9141
New Comment
  • 积极的
  • 电影
The Seven Deadly Sins: Wrath of the Gods
19.141 Viewes
新评论
  • 积极的
  • 电影
七大罪:众神之怒
9.141 次观看
  • 积极的
  • 电影
Shirogane Tamashii hen Kouhan sen
9.141 次观看
  • 积极的
  • 电影
Kizumonogatari III: Reiket su-hen
9.141 次观看
  • 积极的
  • 电影
物语系列:第二季
9.141 次观看

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

你可能感兴趣的:(HTML期末学生大作业 响应式动漫网页作业 html+css+javascript)