目录
前言
作品效果
html代码
CSS代码
图片资源
前言
在学习html过程中我们要试着去写写一些案例，通过这些案例让我们更加熟悉代码以及丰富我们的经验，下面是我个人写的一个案例，代码和图片也给出了大家，你们可以参考参考。
作品效果
1691670295000
html代码
<!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" href="./work.css">
</head>
<body>
<div class="box">
<!-- 1部分 中心部分图案-->
<div class="box_content">
<div class="first">
<div class="second">
<img src="../image/OIP-C.jpg" alt="" width="820px" height="340px">
</div>
<div class="boy">
<ul>
<li>波奇酱</li>
<li>虹夏</li>
<li>凉</li>
<li>喜多</li>
</ul>
</div>
</div>
<div class="third">
<div class="new_bo">
<ul>
<li>波奇酱</li>
<li>喜多</li>
<li>虹夏</li>
<li>凉</li>
</ul>
</div>
<div class="new_titel">
<h2>new!波奇酱加入了纽带乐队并且进行了首场演出</h2>
</div>
<div class="new_content">
<ul>
<li><span>第一天</span>
<span>波奇酱在家里练习吉他</span>
<span>8.12</span>
</li>
<li>
<span>第二天</span>
<span>虹夏介绍波奇酱加入纽带乐队，波奇酱成为了吉他手</span>
<span>8.13</span>
</li>
<li>
<span>第三天</span>
<span>喜多同学回归纽带乐队</span>
<span>8.14</span>
</li>
<li>
<span>第四天</span>
<span>凉学姐吃饭没钱，向波奇酱借钱</span>
<span>8.15</span>
</li>
<li>
<span>第五天</span>
<span>波奇酱报名参加学校的文艺表演((⁄ ⁄•⁄ω⁄•⁄ ⁄))</span>
<span>8.16</span>
</li>
<li>
<span>第六天</span>
<span>纽带乐队成员为演出做准备</span>
<span>8.17</span>
</li>
</ul>
</div>
<a href="https://www.bilibili.com/bangumi/play/ss43164?spm_id_from=333.337.0.0" style="font-size: 12px;text-decoration: none;" target="_blank">
<div class="new_more">
<span>查看更多</span>
</div>
</a>
</div>
</div>
<!-- 2部分 侧边图案-->
<div class="page">
<ul>
<li>
<i></i>
<div>虹夏</div>
</li>
<li>
<i></i>
<div>凉</div>
</li>
<li>
<i></i>
<div>喜多</div>
</li>
<li>
<i></i>
<div>波奇酱</div>
</li>
</ul>
</div>
</div>
</body>
</html>CSS代码
*{
margin: 0px;
padding: 0px;
list-style: none;
}
.box_content{
width: 1358px;
margin: 0 auto;
margin-top: 100px;
background-color: white;
}
.first{
width: 820px;
height: 380px;
float: left;
}
.box_content::after{
clear: both;
display: block;
content: "";
}
.second{
width: 820px;
height: 340px;
background-color: burlywood;
}
.boy{
width: 820px;
height: 40px;
background-color: rgb(233, 12, 145);
}
.third{
width: 520px;
height: 380px;
/* background-color: red; */
float: right;
/* background-image: url(../image/20230714234449.gif); */
background-size: 520px 380px;
}
ul::after{
content: '';
display: block;
clear: both;
}
.boy ul{
background-color: #eee;
}
.boy ul li{
text-align: center;
list-style: none;
width:25%;
height: 40px;
color:palevioletred;
float: left;
box-sizing: border-box;
line-height: 40px;
}
.boy ul>li:hover{
color:blue;
background-color: #fff;
border-bottom:2px solid #AB8E66;
font-weight: 600;
}
.new_bo{
width: 100%;
height: 35px;
border-bottom: 2px solid #dbdada;
}
.new_bo ul li{
list-style: none;
float: left;
height: 35px;
font-size: 18px;
margin-right: 125px;
font-weight: 300;
}
.new_bo li:nth-of-type(4){
margin: 0;
}
.new_bo ul li:hover{
color: #1da6ba;
font-weight: 700;
border-bottom: 2px solid red;
}
.new_titel{
width: 100%;
height: 60px;
}
.new_titel h2{
color: #1da6ba;
height: 60px;
box-sizing: border-box;
line-height: 60px;
border-bottom: 2px solid #dbdada;
text-align: center;
padding: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.new_content{
height: 245px;
width: 100%;
box-sizing: border-box;
}
.new_content ul li{
height: 40px;
border-bottom: 1px solid #dbdada;
line-height: 40px;
list-style: none;
font-size: 14px;
font-weight: 300;
}
.new_content ul li span:nth-of-type(1){
border: 1px solid red;
padding: 1px 2px;
margin-right: 10px;
}
.new_content ul li span:nth-of-type(2){
padding: 1px 2px;
margin-right: 10px;
width: 80%;
/* 文字超出处理 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.new_content ul li span:nth-of-type(2):hover{
color: #e9852d;
font-weight: 600;
}
.new_content ul li span:nth-of-type(3){
float: right;
}
.new_more{
height: 40px;
line-height: 40px;
font-size: 12px;
background-color: #e3e2e2;
text-align: center;
}
.new_more:hover{
color: blueviolet;
font-weight: 600;
background-color: gainsboro;
font-size: 16px;
}
.page ul{
list-style: none;
width: 66px;
height: px;
background-color:#e3e2e2;
/* 描述圆角边框 */
border-top-left-radius:5px;
border-bottom-left-radius: 5px;
position: absolute;
right: 0;
top: 50%;
/* border: 2px solid red; */
box-sizing: border-box;
}
.page ul li{
height: 57px;
padding-top: 10px;
width: 66px;
/* border: 2px solid red; */
}
.page ul li:nth-of-type(1) i{
display: block;
width: 23px;
height: 30px;
background-image: url(../image/虹夏.webp);
background-repeat: no-repeat;
background-size: 23px 30px;
margin: 0 auto;
/* 过渡准备 */
position: relative;
top: 0;
transition: all 0.2s;
}
.page ul li div{
text-align: center;
margin: 0 auto;
font-size: 12px;
width: 66px;
font-weight: 400;
color: #1da6ba;
/* border: 2px solid red; */
}
.page ul li:nth-of-type(2) i{
display: block;
width: 23px;
height: 30px;
background-image: url(../image/凉.webp);
background-repeat: no-repeat;
background-size: 23px 30px;
margin: 0 auto;
position: relative;
top: 0;
transition: all 0.2s;
}
.page ul li:nth-of-type(3) i{
display: block;
width: 23px;
height: 30px;
background-image: url(../image/c9fcc3cec3fdfc03924559cff0699094a4c27d1e8834.webp);
background-repeat: no-repeat;
background-size: 23px 30px;
margin: 0 auto;
position: relative;
top: 0;
transition: all 0.2s;
}
.page ul li:nth-of-type(4) i{
display: block;
width: 23px;
height: 23px;
background-image: url(../image/波奇.webp);
background-repeat: no-repeat;
background-size: 23px 30px;
margin: 0 auto;
position: relative;
top: 0;
transition: all 0.2s;
}
.page ul li:hover div{
font-weight: 500;
font-size: 16px;
}
.page ul li:hover i{
top: -6px;
}图片资源
好了，以上就是本期的全部内容了，我们下一期再见，再分享一张壁纸给大家~
