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

目录

前言

作品效果

html代码

CSS代码 

图片资源 

---

前言

        在学习html过程中我们要试着去写写一些案例，通过这些案例让我们更加熟悉代码以及丰富我们的经验，下面是我个人写的一个案例，代码和图片也给出了大家，你们可以参考参考。 

作品效果

1691670295000

html代码

    
    
    
    
    


    

        
        

            

                

                    
                
                

                    

                        
波奇酱
                        
虹夏
                        
凉
                        
喜多
                    
                
            
            

                

                    

                        
波奇酱
                        
喜多
                        
虹夏
                        
凉
                    
                
                

                    
new!波奇酱加入了纽带乐队并且进行了首场演出
                
                

                    

                        
第一天
                            波奇酱在家里练习吉他
                            8.12
                        
                        

                            第二天
                            虹夏介绍波奇酱加入纽带乐队，波奇酱成为了吉他手
                            8.13
                        
                        

                            第三天
                            喜多同学回归纽带乐队
                            8.14
                        
                        

                            第四天
                            凉学姐吃饭没钱，向波奇酱借钱
                            8.15
                        
                        

                            第五天
                            波奇酱报名参加学校的文艺表演((⁄ ⁄•⁄ω⁄•⁄ ⁄))
                            8.16
                        
                        

                            第六天
                            纽带乐队成员为演出做准备
                            8.17
                        
                    
                
                
                    

                        查看更多
                    
                
            
        
       
       

            

                

                    
                    
虹夏
                
                

                    
                        
凉
                
                

                    
                        
喜多
                
                

                    
                    
波奇酱
                
            
       
    

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;
}

图片资源 

 

 好了，以上就是本期的全部内容了，我们下一期再见，再分享一张壁纸给大家~