用html和css制作图片集

最新推荐文章于 2024-04-28 15:06:30 发布

赛博工地电子打灰

最新推荐文章于 2024-04-28 15:06:30 发布

阅读量1.6k

点赞数 6

文章标签： css html

本文链接：https://blog.csdn.net/PDyee/article/details/120432405

版权

图片集

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="test3.css">
</head>

<body>
    <div class="box">
        <div class="content">
            <h3>
                <span class="span1">新闻动态</span>
                <a class="a1" href="#">more+</a>
            </h3>
            <ul>
                <a href="#">
                    <li>
                        <img src="img1.jpg" alt="无法显示">
                        <h4>军训专题</h4>
                        <p>“中国近代科学社团史研究：史料、视角及方法”学术研讨会于2021年6月27日至28日在河北大学五四路校区举行。来自清华大学、同济大学、</p>
                    </li>
                </a>
                <a href="#">
                    <li>
                        <img src="img1.jpg" alt="无法显示">
                        <h4>军训专题</h4>
                        <p>中央财经大学、中国农业大学、东华大学、西北大学、天津大学、江苏师范大学、山西师范大学、内蒙古师范大学、河北大学、</p>
                    </li>
                </a>
                <a href="#">
                    <li>
                        <img src="img1.jpg" alt="无法显示">
                        <h4>军训专题</h4>
                        <p>开幕式上，历史学院院长肖红松教授首先致辞，向与会学者表示欢迎，并向与会专家学者介绍了历史学院的发展历程、学科特色及成就；</p>
                    </li>
                </a>
                <a href="#">
                    <li>
                        <img src="img1.jpg" alt="无法显示">
                        <h4>军训专题</h4>
                        <p>开幕式结束后进入主题报告，由东华大学教授仪德刚主持。北京大学张大庆教授、同济大学万立明教授、天津大学陈印政副研究员、</p>
                    </li>
                </a>
            </ul>
        </div>
    </div>
</body>

</html>

css代码

* {
    margin: 0;
    padding: 0;
}

.box {
    margin-top: 100px;
    width: 100%;
    height: 500px;
    background-color: rgb(243, 243, 243);
}

.content {
    margin: auto;
    width: 80%;
    height: 400px;
    background-color: rgb(243, 243, 243);
}

.content h3 {
    border-bottom: 1px solid rgb(221, 221, 221);
    height: 35px;
}

.span1 {
    border-bottom: 1px solid rgb(217, 49, 36);
    padding-bottom: 10px;
}

.a1 {
    float: right;
    color: rgb(170, 170, 170);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.box .content ul li {
    float: left;
    width: 23%;
    margin: 15px 1%;
    display: block;
    text-decoration: none;
}

.box .content ul li img {
    width: 100%;
}

.box .content ul li h4 {
    margin-top: 10px;
    font-weight: 500;
    color: rgb(217, 49, 36);
}

.box .content ul li p {
    margin-top: 10px;
    color: #999;
    font-size: 14px;
    font-weight: 500px;
}

.box .content ul a p:hover {
    color: rgb(217, 49, 36);
}

最终效果

在这里插入图片描述

赛博工地电子打灰

关注

6
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
用html和css制作图片集

图片集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"> <
复制链接

扫一扫