一个简单的页面
效果图
鼠标放在上边效果
鼠标变形
代码:
<!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;
}