HTML+CSS练习

最新推荐文章于 2024-04-13 15:54:34 发布

扶夙

最新推荐文章于 2024-04-13 15:54:34 发布

阅读量265

点赞数

分类专栏： HTML练习文章标签： css html 前端

本文链接：https://blog.csdn.net/lijiaxuan_/article/details/122383581

版权

HTML练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一个简单的页面

效果图

鼠标放在上边效果
在这里插入图片描述
鼠标变形

代码：

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

<body>
    <div class="container">
        <div class="content">
            <div class="title">
                <span class="jx">军训专题</span>
                <span class="more">more+</span>
            </div>
            <ul class="main">
                <li>
                    <img src="images/1.jpg" alt="">
                    <h3>军训小贴士-生活篇</h3>
                    <p>军训后体力消耗极大，这个时候要多补充一些蛋白质，多吃一些肉类、蛋类，或豆制品代替。另外，最好还多喝点汤菜类，同时注意补充各种维生...</p>
                </li>
                <li>
                    <img src="images/2.jpg" alt="">
                    <h3>军训小贴士-安全篇</h3>
                    <p>用电安全。离开宿舍前注意切断屋内所有电源（把电脑、充电器等用电设备的电源全部拔掉）；晚间熄灯后不得使用任何用电设备，不使用违章电...</p>
                </li>
                <li>
                    <img src="images/3.jpg" alt="">
                    <h3>军训小贴士-心理篇</h3>
                    <p>军训后体力消耗极大，这个时候要多补充一些蛋白质，多吃一些肉类、蛋类，或豆制品代替。另外，最好还多喝点汤菜类，同时注意补充各种维生...</p>
                </li>
                <li>
                    <img src="images/4.jpg" alt="">
                    <h3>军训小贴士-管理篇</h3>
                    <p>军训后体力消耗极大，这个时候要多补充一些蛋白质，多吃一些肉类、蛋类，或豆制品代替。另外，最好还多喝点汤菜类，同时注意补充各种维生...</p>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

* {
    margin: o;
    padding: 0;
}

.container {
    background: rgb(241, 241, 241);
}

.container .content {
    width: 80%;
    margin: auto;
    padding: 20px 0;
}

.container .content .title {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid rgb(221, 221, 221);
    align-items: center;
}

.container .content .title .jx {
    border-bottom: rgb(217, 49, 36) 3px solid;
    padding-bottom: 10px;
}

.container .content .title .more {
    color: #999;
}

.container .content .title .more:hover {
    color: #D93124;
    cursor: pointer;
}

.container .content .main {
    display: flex;
    list-style: none;
    justify-content: space-between;
    margin-top: 20px;
}

.container .content .main li {
    background: rgb(193, 196.196);
    width: 23%;
}

.container .content .main li img {
    width: 100%;
}

.container .content .main li h3 {
    padding: 10px 10px 0;
    font-size: 15px;
    color: #D93124;
    font-weight: 500px;
}

.container .content .main li p {
    padding: 10px;
    font-size: 14px;
    color: rgb(122, 122, 121);
    margin-bottom: 10px;
    line-height: 23px;
}

.container .content .main li:hover p {
    color: #D93124;
}

扶夙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
HTML+CSS练习

一个简单的页面效果图鼠标放在上边效果鼠标变形代码：<!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-s
复制链接

扫一扫