纯HTML+CSS网页设计期末作业
2024-05-26 10:00:33
目录
效果展示：
index页面
EDG战队 页面
选手介绍 页面
获奖记录 页面
夺冠瞬间 页面
海贼王 页面
海贼王(其二) 页面
精彩视频 页面
部分HTML代码
部分CSS代码
Hello，小伙伴们这是博主大一期末选修课的结课大作业，所用知识HTML+CSS，我写的主要内容是动漫和一个战队介绍，都是我比较感兴趣的，如果对你有帮助的话，点个赞呗！
效果展示：
index页面
EDG战队 页面
选手介绍 页面
获奖记录 页面
夺冠瞬间 页面
海贼王 页面
海贼王(其二) 页面
精彩视频 页面
另一个精彩视频类似
部分HTML代码
index代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/common2.css"><link rel="stylesheet" type="text/css" href="css/index01.css">
</head>
<body><main><aside class="clearfix"><ul><li><a href="index.html" class="a">主页</a></li><li><a href="html/index1.html" class="a">EDG战队</a></li><li><a href="html/index2.html" class="a">海贼王</a></li><li><a href="html/精彩视频1.html" class="a">精彩视频</a></li><li><a href="html/精彩视频2.html" class="a">精彩视频</a></li></ul><div class="indexbg3"></div><div class = "indexbg4"><p > <a href="html/index2.html" class = "two">电影详情</a></p><p class="indexsize">《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，于1997年07月22日在集英社《周刊少年Jump》开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。2012年05月11日，《航海王》获得第41回日本漫画家协会赏 。本作被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画”。2017年07月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日” </p></div><div class="indexbg1"></div><div class = "indexbg2"><p> <a href="html/index1.html" class = "two">战队详情</a></p><p class="indexsize"> EDG电子竞技俱乐部（EDward Gaming），简称EDG，是一家中国电子竞技俱乐部，于2013年9月13日在广州成立 。旗下拥有英雄联盟、王者荣耀、绝地求生等分部。英雄联盟分部在2014年取得LPL春季赛 、夏季赛冠军，在2015年取得LPL春季赛冠军、MSI季中邀请赛冠军。在2016年取得LPL夏季赛冠军，德玛西亚杯五连冠，在2017年LPL夏季赛上再次夺得冠军。2021年取得LPL夏季赛冠军，英雄联盟全球总决赛冠军。</p></div></aside></main></body>
</html>EDG首页代码
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="../css/common.css"><link rel="stylesheet" type="text/css" href="../css/index.css">
</head>
<body><header><ul><li><a href="index1.html" class="a">战队简介</a></li><li><a href="page2.html"class="a">选手介绍</a></li><li><a href="page3.html"class="a">战队历史</a></li><li><a href="page4.html"class="a">夺冠瞬间</a></li><li><a href="page7.html"class="a">获奖记录</a></li><li><a href="page8.html"class="a">战队评价</a></li><li><a href="page10.html"class="a">精美壁纸</a></li><li><a href="../index.html"class="a">返回首页</a></li><img src="../images/edg01.png"></ul></header><main><div class="text"><h1><B>EDG电子竞技俱乐部</B></h1><p>EDG电子竞技俱乐部（EDward Gaming），简称EDG，是一家中国电子竞技俱乐部，于2013年9月13日在广州成立 。旗下拥有英雄联盟、王者荣耀、绝地求生等分部。</P><P>英雄联盟分部在2014年取得LPL春季赛 、夏季赛冠军，在2015年取得LPL春季赛冠军、MSI季中邀请赛冠军。在2016年取得LPL夏季赛冠军，德玛西亚杯五连冠，在2017年LPL夏季赛上再次夺得冠军。2021年取得LPL夏季赛冠军，英雄联盟全球总决赛冠军。</p><P class ="p1" > <a href="index.html"class="h1"><B>返回首页</B></a></P></main> </body>
</html>部分CSS代码
body{background: url(../images/bgi.jpg);background-size: 100%;background-repeat: no-repeat;
}
content{float: left;width: 550px;
}
content h1{line-height: 60px;margin-top: 26px;padding-left: 140px;color: rgb(182, 235, 48);font-size: 50px;}
content h4{line-height: 50px;font-size: 20px;color: #0a73e4;
}
content p{line-height: 28px;font-size: 20px;text-indent: 2em;background-color: #e6e6e6;color: #222;padding: 10px;border-radius: 10px;font-weight: bold;
}
main .p1{width: 500px;margin: 10px auto;
}
main{height: auto;
}
.a{font-size: 20px;color:rgb(42, 45, 230) ;font-weight: bold;
}
.indexbg1{width: 641px;height: 351px;background: url(../images/indelbg1-1.jpg);float: right;margin-top: 76px;
}
.indexbg2{width: 830px;height: 400px;float: right;margin-top: 53px;margin-right: 10px;font-size: 25px;font-family: "楷体";
}
.indexbg3{width: 641px;height: 361px;background: url(../images/indexbg02.png);margin-left: 185px;margin-top: -265px;}
.indexbg4{width: 581px;/* 835 l 600*/float: right;margin-left: 850px;margin-top: -328px;font-size: 25px;font-family: "楷体";
}
a.two{color: aqua;
}
.indexsize{color: #6f93a0;font-weight: bold;}
.biaoti1{text-align: center;font-size: 60px;color: rgb(25, 80, 245);margin-left: 535px;margin-top: -280px;
}
video{width: 800px;position: absolute;left: 365px;top: 57px;
}
.vide01{width: 600px;position: relative;
}
.biaoti2{text-align: center;font-size: 60px;color: rgb(123, 234, 5);margin-left: 604px;margin-top: -280px;
}body{background: url(../images/bg1.jpg) no-repeat;background-size: 100% 800px;position: relative;height: 800px;padding-top: 20px;
}
header img{position: absolute;right: 150px;top: 150px;border-radius: 50%;box-shadow:0px 0px 10px 10px #bc2e22;
}
header ul{width: 90%;display: flex;justify-content: space-around;margin: 20px auto;
}
header ul li{width: 9.7%;
}
header ul li a{color: #fff;display: block;background-color: rgba(0,0,0,0.4);border: 1px solid gray;text-align: center;line-height: 45px;font-size: 14px;border-radius: 5px;
}
header ul li a:hover{color: #bc2e22;background-color: rgba(0,0,0,0.6);
}
main .text{width: 45%;padding: 20px;
}
main h1{color: black;line-height: 83px;text-align: center;font-size: 45px;}
main .text p{color: lightyellow;font-size: 20px;line-height: 30px;text-indent: 2em;
}
main .ping{width: 60%;text-indent: 2em;font-size: 16px;line-height: 35px;padding: 20px;
}
main .ping .p2{color:black;font-family: "微软雅黑";font-size: 20px;
}
main .ping .p3{color: black;font-family: "微软雅黑";font-size: 20px;
}
main .p1{float:right;margin-right: 100px;margin-top: 100px;font-size: 30px;font-family: "楷体";}
a.h1{color: #41cfb3;
}
main p span{display: block;margin-left:340px;
}
.a{font-size: 20px;color:red ;font-weight: bold;
}博主个人实力有限，刚接触前端，选修课期末大作业，不喜勿喷，参考学习资料来自B站。最后，看到这里的话就动动手点个赞呗！
纯HTML+CSS网页设计期末作业相关推荐
- 纯HTML+CSS网页设计期末作业（海贼王主题网站——图片可换，主题可换）
纯HTML+CSS网页设计期末作业(海贼王主题网站--图片可换,主题可换) 博主:命运之光 专栏:web网页制作大作业 网页最底下有视频可以观看网页效果,喜欢的可以在博主主页资源里免费下载(●'◡'● ...
- HTML+CSS网页设计期末课程大作——运动系列NBA篮球主题(7页) 大学生运网页作品 篮球设计作业模板
HTML+CSS网页设计期末课程大作--运动系列NBA篮球主题(7页) 大学生运网页作品 篮球设计作业模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
- HTML+CSS网页设计期末课程大作——绿色精美全民健身网站(10页) dreamweaver作业静态HTML网页设计模板
HTML+CSS网页设计期末课程大作--绿色精美全民健身网站(10页) dreamweaver作业静态HTML网页设计模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
- HTML5+CSS大作业——彭于晏明星(15页) _网页设计期末作业
HTML5+CSS大作业--彭于晏明星(15页) _网页设计期末作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明 ...
- html网页设计代码作业——家乡介绍-长治(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作期末大作业成品_网页设计期末作业
HTML5期末大作业:家乡介绍网站设计--家乡介绍-长治(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作期末大作业成品_网页设计期末作业 常见网页设计作业题 ...
- html期末作业代码网页设计——云南民族文化(8页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业
HTML5期末大作业:家乡文化网站设计--云南民族文化(8页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业 常见网页设计作业题材有 个人. 美食. 公司. ...
- HTML+CSS网页设计期末课程大作——体育篮球(5页面)大学生体育运动网页设计模板代码 校园篮球网页作业成品
HTML+CSS网页设计期末课程大作--体育篮球(5页面)大学生体育运动网页设计模板代码 校园篮球网页作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
- 学生网页设计与制作成品 HTML5+CSS大作业——黑色主题个人博客(5页) 网页设计期末作业个人主页
HTML5+CSS大作业--黑色主题个人博客(5页) 网页设计期末作业个人主页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. ...
- HTML5期末大作业：烧烤美食网站设计——火锅烧烤美食山庄(7页) HTML+CSS+JavaScript 网页设计期末作业个人主页
HTML5期末大作业:烧烤美食网站设计--火锅烧烤美食山庄(7页) HTML+CSS+JavaScript 网页设计期末作业个人主页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
最新文章
- 关于/etc/fstab
- iOS架构-静态库.a打包之资源文件打包成bundle（4）
- CkEditor批量上传图片(java)
- angular模板加载 ----ng-template
- php源码 网页聊天_php即时在线网页聊天源码-响应式设计自适应手机端
- Docker 安装 Elasticsearch 7.12.1
- Android源码分析（十三）----SystemUI下拉状态栏如何添加快捷开关
- nyoj-1016-德莱联盟（向量叉乘判断线段相交）
- ZStack-ZCCE-网络实验-VPC网络创建
- MD5加密，16位加密，32位加密，Base64加密，解密
- Stata画图——散点图与折线图
- html button 点击无效,HTML button点击不了
- 每个人心里都有一座巴别塔－The dogs of babel巴别塔之犬
- springboot微信公众号发送模板消息
- 【Unity VR开发】结合VRTK4.0：不可移动区域
- 单片机C51使用一个按键控制继电器开关通断
- 3D设计为什么要选择实时云渲染技术？
- linux新建ftp共享文件夹,共享文件的访问和ftp的创建
- 实例分享！告诉你西门子PLC如何通过MODBUS控制变频器
- 群星闪耀时刻：当数据库大师遇见大师，他们会谈论什么？