定个小目标，先练习100个。
模仿的樱花动漫写的静态页面，过两天学完js再写互动。
希望大佬们能够指导一下不足的地方，自学的有很多地方不足，感谢。
这是网页的html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>狗狗显卡仿造樱花动漫前端</title>
<link href="css/new_file.css" rel="stylesheet" />
</head>
<body>
<!-- 头部开始制作 -->
<div class="tobei">
<!-- 用来当前面的背景 -->
<div class="juzhong tohezi">
<!-- 居中对齐的盒子，负责约束后面的内容 -->
<ul>
<!-- 左边的列表 -->
<li>樱花动漫</li>
<li id="toubuimg"><img src="img/1 (1).jpg" alt="">导航</li>
<li>首页</li>
<li>电视剧</li>
<li>电影</li>
<li>动漫</li>
<li>综艺</li>
<li>播出表</li>
</ul>
<div>
<!-- 右边的列表 -->
<ul>
<li><img src="img/1 (3).jpg" alt=""></li>
<li>观看记录</li>
<li><input type="text"><img src="img/1 (2).jpg" alt=""></li>
</ul>
</div>
</div>
</div>
<!-- 头部制作结束 -->
<!-- 头部小部件开始 -->
<div class="tbxiaobvujian juzhong tbxx1">
<p>请记住本站域名(樱花动漫):xxxxxxx.com</p>
</div>
<div class="tbxiaobujian2 juzhong tbxx1">
<p>备用域名xxxx.com,如不能访问输入此域名打开</p>
</div>
<!-- 头部小部件结束 -->
<!-- 居中内容区域开始 -->
<div class="jznrdahezi juzhong">
<!-- 创建一个大盒子约束里面的内容 -->
<div class="ZuobianBox">
<!-- 再次创建一个盒子约束左边的内容 -->
<div class="juzhong tbtitie">
<!-- 内容的头部显示区域 -->
<p>动漫</p>
<em>更多>></em>
</div>
<div class="tbBoxda">
<!-- 约束里面的两行li -->
<ul>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_001.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_002.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_003.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_004.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_001.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_002.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_003.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_004.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
</ul>
</div>
</div>
<div class="Youbianhezi">
<!-- 创建盒子约束右边的内容 -->
<ul>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
</ul>
</div>
</div>
<!-- 居中内容区域结束 -->
<div class="jznrdahezi juzhong">
<!-- 创建一个大盒子约束里面的内容 -->
<div class="ZuobianBox">
<!-- 再次创建一个盒子约束左边的内容 -->
<div class="juzhong tbtitie">
<!-- 内容的头部显示区域 -->
<p>动漫</p>
<em>更多>></em>
</div>
<div class="tbBoxda">
<!-- 约束里面的两行li -->
<ul>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_001.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_002.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_003.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_004.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_001.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_002.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_003.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
<li>
<div class="da">
<img src="img/dm/DM_20240417175420_004.jpg" alt="">
<div class="heibian"><em>最新:4集</em></div>
</div>
<p>被称为废物的原英雄、被家里流放后随心所欲地活下去第一季</p>
</li>
</ul>
</div>
</div>
<div class="Youbianhezi">
<!-- 创建盒子约束右边的内容 -->
<ul>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
<li><a>失忆投捕第一季</a><em>2集</em></li>
</ul>
</div>
</div>
<div class="zuihou1">
<div>
<h4>友情链接</h4>
</div>
<span>狗狗显卡</span>
<span>网页仿制樱花动漫</span>
<div class="zhwenzi">
<p>本网站提供的最新影视资源均系收集于各大视频网站，本网站只提供web页面服务，并不提供影片资源存储，也不参与录制、上传</p>
若本站收录的链接无意侵犯了贵司版权，请邮箱联系我们，我们会及时处理相关内容，谢谢！邮箱：xxxx@gmail.com
</div>
</div>
</body>
</html>
这是网页的css部分
* {
margin: 0;
padding: 0;
}
.tobei {
background-color: rgb(7, 132, 215);
width: 100%;
height: 55px;
}
.juzhong {
margin: 0 auto;
width: 1100px;
}
.tohezi {
height: 55px;
/* margin-bottom: 55px; */
}
.tohezi ul li {
float: left;
list-style: none;
padding: 15px 13px;
color: white;
display: flex;
align-items: center;
}
.tohezi div ul li {
float: right;
}
.tohezi div ul li input {
width: 178px;
height: 28px;
background-color: rgb(5, 112, 175);
}
.tohezi div ul li img {
height: 33px;
}
#toubuimg {
padding-top: 8px;
}
.tbxx1 {
margin-top: 10px;
background-color: rgb(233, 233, 233);
height: 25px;
padding: 3px;
font-size: 14px;
}
.tbxiaobvujian {
margin-top: 15px;
color: rgb(119, 119, 119);
}
.tbxiaobujian2 {
color: red;
margin-bottom: 32px;
}
.jznrdahezi {
height: 766px;
/* background-color: aqua; */
margin-top: 20px;
}
.ZuobianBox {
width: 863px;
height: 660px;
/* background-color: rebeccapurple; */
float: left;
}
.Youbianhezi {
width: 237px;
height: 769px;
/* background-color: red; */
float: right;
}
.tbtitie {
height: 17px;
width: 100%;
padding: 8px 0;
color: blue;
border-bottom: 2px solid rgb(229, 229, 229);
}
.tbtitie p {
float: left;
font-weight: 800;
}
.tbtitie em {
float: right;
font-size: 14px;
}
.tbBoxda>ul>li {
width: 180px;
height: 280px;
/* background-color: chocolate; */
float: left;
padding: 10px;
margin: 7px;
list-style: none;
}
.tbBoxda>ul>li img{
width: 100%;
float: left;
}
.tbBoxda>ul>li p{
float: left;
padding-top: 7px;
width: 100%;
overflow:hidden;
height: 20px;
font-size: 14px;
font-weight: 800;
}
.tbBoxda>ul>li>.da {
position: relative;
}
.tbBoxda>ul>li>.da .heibian{
width: 100%;
height: 20px;
background-color:rgba(22, 21, 30,0.9);
position: absolute;
top: 235px;
}
.tbBoxda>ul>li>.da .heibian em{
float: right;
margin-right: 5px;
font-size: 0.775rem;
font-style: normal;
color: aliceblue;
}
.Youbianhezi ul{
list-style: none;
}
.Youbianhezi ul li{
padding: 5px 0;
font-size: 15px;
}
.Youbianhezi ul em{
float: right;
font-style: normal;
font-size: 14px;
color: midnightblue;
}
.zuihou1{
width: 1200px;
margin: 0 auto;
}
.zuihou1 h4{
text-align: center;
color: blue;
width: 80px;
border-bottom: 2px solid blue;
margin-bottom: 20px;
}
.zuihou1 span{
margin: 0 20px;
color: goldenrod;
font-weight: 600;
}
.zhwenzi{
color: slategray;
margin-top: 10px;
text-align: center;
padding: 10px;
}祝你健康幸福，感谢。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
