HTML5+CSS3集训（7）

最新推荐文章于 2024-06-29 23:22:36 发布

超越～and me

最新推荐文章于 2024-06-29 23:22:36 发布

阅读量239

点赞数 8

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/2301_78986604/article/details/140002688

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p97</title>
    <style>
    div{
        width:300px;
        height:300px;
        border:1px solid black;
        padding:20px;
    }
    img{
        width:200px;
        height:140px;
    }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>
                <img src="巧克力.jpg" alt="">
            </li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p97</title>
    <style>
    *{margin: 0;padding: 0;}
    div{
        width:300px;
        height:300px;
        border:1px solid black;
        padding:10px;
        box-sizing:border-box;
        margin:0px auto;
        margin-top:100px;
    }
    img{
        width:260px;
        height:140px;
        margin-left:10px;
    }
    li{
        list-style-type:none;
    }
    h3{
        line-height:20px;
        font-size:18px;
        color:skyblue;
    }
    a{
        text-decoration:none;
        color:pink;
    }
    span{
        color:violet;
    }
    p{
        color:green;
    }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>
                <img src="巧克力.jpg" alt="">
                <h3>你的名字</h3>
                <a href="#">原创作品-影视-Motion Graphic</a>
                <p>3小时前上传</p>
                <span>1569&nbsp</span><span>&nbsp人气/50&nbsp&nbsp评论/125&nbsp&nbsp</span><span>推荐</span>
            </li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p97</title>
</head>
<body>
    <ul>
        <li>
            <a href="">
                <img src="巧克力.jpg" alt=""width='250px' height='188px'>
            </a>
            <h3>你的名字</h3>
            <p><span>原创作品</span>-影视-Motion Graphic</p>
            <p>2小时前上传</p>
            <p><span>2016</span>人气/<span>99+</span>评论/<span>99+</span>推荐</p>
        </li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p97</title>
    <style>
    *{margin: 0;padding: 0;}
    li{
        list-style:none;
    }
    a{
        text-decoration:none;
    }
    body{
        font-size:12px;
        color:#66667f;
    }
    li{
        width:250px;
        height:320px;
        margin-left:50px;
        margin-bottom:10px;
        padding:10px;
        border:1px solid #ccc;
    }
    h3{
        white-space: nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        line-height:32px;
    }
    h3 a{
        font-size:14px;
        color:#666;
    }
    li p{
        line-height:25px;
    }
    li .movie span{
        font-weight:bold;
        color:#ff5584;
    }
    li .hot span{
        margin-right:10px;
        color:red;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">
                <img src="巧克力.jpg" alt=""width='250px' height='188px'>
            </a>
            <h3>你的名字</h3>
            <p class="movie"><span>原创作品</span>-影视-Motion Graphic</p>
            <p>2小时前上传</p>
            <p class="hot"><span>2016</span>人气/<span>99+</span>评论/<span>99+</span>推荐</p>
        </li>
    </ul>
</body>
</html>