html&CSS-----案例展示

Fitz&

已于 2023-08-10 20:41:34 修改

阅读量938

点赞数 1

分类专栏： html和css框架文章标签： html css 前端前端框架 css3

于 2023-08-10 20:40:46 首次发布

本文链接：https://blog.csdn.net/m0_73633088/article/details/132217937

版权

html和css框架专栏收录该内容

14 篇文章 2 订阅

订阅专栏

前言

在学习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;
}