web前端日常更新 7.26

最新推荐文章于 2022-11-02 19:49:34 发布

呵呵＆

最新推荐文章于 2022-11-02 19:49:34 发布

阅读量371

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_72174649/article/details/126002153

版权

用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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            text-decoration: none;
        }
         a{
            color:#737373;
            text-decoration: none;
         }
         #top-box{
            width: 500px;
            height: 30px;
            border:3px solid #F2F2F5 ;
        }
        .pic-box{
            width: 115px;
            height: 125px;
            border: 3px solid #F2F2F5;
            margin-top: 20px;
            padding: 3px;
        }
           .zi{
            width: 210px;
            height: 110px;
           position: absolute;
           left: 150px;
           top: 80px;
           }
           #bottom-box{
            width: 500px;
            height: 300px;
            background-color:white;
            margin-top: 20px;
           }
           span{
            float: right;
           }
           .zhou{
            color: #000;
            font-weight: 999;
           }
           .star{
            font-size: 20px;
            font-weight: 999;
            
           }
    </style>
        
</head>
<body>
    <div class="all">
    <div id="top-box">
        <a><img src="./03.电视剧详情列表/image/1.gif" alt=""></a>
        <saan class="star">明星荐片</saan>
        <div class="pic-box">
    <a href="#"><img src="./03.电视剧详情列表/image/3.gif" alt=""></a>
</div>
<div>
<ul class="zi">
    <a href="#">
    <li class="zhou">周秀娜荐片:让子弹飞</li>
    <li>导演：姜文</li>
    <li>主演：姜文 周润发 葛优</li>
     <li> 点评：我最喜欢的要算《让子弹飞》了,超喜欢...[详情]</li></a>

</ul>
<div id="bottom-box">
    <ol class="bottm">
        <a href="#"><li>《巴别塔》：好的故事引人深思
            <span>阿朵</span></a>
        </li>
        <br>
         <a href="#"><li>《洛杉矶之战》：外星人那么弱智？
            <span>丁子俊</span></a>
        </li>
        <br>
        <a href="#"><li>《让子弹飞》：武侠里也可以有爱情
            <span>周秀娜</span></a>
        </li>
        <br>
        <a href="#"><li>《剑雨》：好的故事引人深思
            <span>叶年生</span></a>
        </li>
        <br>
          <a href="#"> <li>《春风沉醉的夜晚》：非常真实
            <span>如小果</span></a>
        </li>
        <br>
         <a href="#"><li>克洛伊》：故事简单却细致
            <span>刘若英</span></a>
        </li>
    </ol>
</div>

</div>
    </div>
</body>
</html>

出来的效果图：