底端
<!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/show4+.css">
</head>
<body>
<div class="jx">
<div class="jx_main">
<div class="jx_main_top">
<span>军训专题</span>
<a href="#">more+</a>
</div>
<div class="jx_main_bottom">
<div class="item">
<span>2023.8.13</span>
<img src="/img/3.png" alt="">
<h3>军训小贴士——管理篇</h3>
<p>军训是必修课,占 2 学分,军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学们须积极参加,态度端正,全程训练。</p>
</div>
<div class="item">
<span>2023.8.13</span>
<img src="/img/3.png" alt="">
<h3>军训小贴士——管理篇</h3>
<p>军训是必修课,占 2 学分,军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学们须积极参加,态度端正,全程训练。</p>
</div>
<div class="item">
<span>2023.8.13</span>
<img src="/img/3.png" alt="">
<h3>军训小贴士——管理篇</h3>
<p>军训是必修课,占 2 学分,军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学们须积极参加,态度端正,全程训练。</p>
</div>
<div class="item">
<span>2023.8.13</span>
<img src="/img/3.png" alt="">
<h3>军训小贴士——管理篇</h3>
<p>军训是必修课,占 2 学分,军训成绩区分为优秀、良好、中、合格、不合格五个档次。同学们须积极参加,态度端正,全程训练。</p>
</div>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.jx
{
background: rgb(245,245,245);
padding:20px 0;
margin:100px 0;
}
.jx .jx_main{
width:1200px;
margin:20px auto;
}
.jx .jx_main .jx_main_top{
display: flex;
justify-content: space-between; /*两边分布*/
border-bottom: 1px solid rgb(221,221,221);
}
.jx .jx_main .jx_main_top span{
border-bottom: 2px solid rgb(195,63,48);
padding-bottom:10px ;
font-size: 18px;
}
.jx .jx_main .jx_main_top a{
color: rgb(153,153,176);
text-decoration: none;/*去下划线用文本装修*/
}
.jx .jx_main .jx_main_bottom{
margin-top:20px;
margin-bottom: 40px;
display: flex;
justify-content: space-between;
}
.jx .jx_main .jx_main_bottom .item{
width: 24%;
background-color:rgb(255,255,255);
position:relative;
}
.jx .jx_main .jx_main_bottom .item :hover{
color:rgb(195,63,48);
cursor: pointer;
}
.jx .jx_main .jx_main_bottom .item img{
width:100%;
}
.jx .jx_main .jx_main_bottom .item span
{
background-color: rgb(229,145,135);
color:#fff;
padding:4px;
position:absolute;
font-size:13px;
top:0;
left:0;
}
.jx .jx_main .jx_main_bottom .item h3{
padding:8px 8px 0 8px;
font-weight: 500;/*字体粗细*/
font-size:16px;
color: rgb(195,63,48);
}
.jx .jx_main .jx_main_bottom .item p{
padding:8px;
font-size:14px;
color:rgb(153,153,176);
line-height: 25px;/*行高*/
}
顶端
<!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/show5+.css">
</head>
<body>
<div class="page_top">
<div class="page_top_left">
<img src="/img/logo.png" alt="" class="logo">
<div class="sub_logo">
<img src="/img/yinxin.png" alt="" class="sub_yx">
<p>Newcomers' Session</p>
</div>
</div>
<div class="page_top_right">
<a href="#">河大主页</a>
<a href="#">学工网</a>
</div>
</div>
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网上报道</a></li>
<li><a href="#">入学指南</a></li>
<li><a href="#">走进河大</a></li>
<li><a href="#">学在河大</a></li>
<li><a href="#">家在河大</a></li>
<li><a href="#">奖助贷补</a></li>
<li><a href="#">河大易班</a></li>
</ul>
</div>
</body>
</html>
.page_top
{
align-items: center;
width: 1170px;
margin: 20px auto;
display: flex;
justify-content: space-between;
}
.page_top .page_top_left
{
display: flex;
align-items: flex-end;
}
.page_top .page_top_left .sub_logo
{
position: relative;
top:10px;
left:10px;
}
.page_top .page_top_left .sub_logo p
{
color:rgb(148,50,39);
font-size: 15px;
}
.page_top .page_top_right a
{
color:rgb(148,50,39);
font-size: 14px;
text-decoration: none;
}
.page_top .page_top_right a:first-child
{
border-right:1px solid rgb(119,119,119);
padding-right:4px ;
}
.menu
{
background-color: rgb(148,50,39);
}
.menu ul
{
width:1000px;
margin:0 auto;
display: flex;
justify-content: space-between;
}
.menu ul li
{
list-style: none;
}
.menu ul li a
{
padding:10px 7px;
display:block;/*变成块级元素才能撑开*/
text-decoration:none;
color:#fff;
}
.menu ul li a:hover{
color:rgb(148,50,39);
background-color: rgb(247,239,232);
}
主要部分
<!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/show6+.css">
</head>
<body>
<div class="page_main">
<div class="page_main_left">
<div class="top">
<span>快捷方式</span>
</div>
<ul>
<li>
<a href="#">
<img src="/img/12155837ihre.png" alt="">
<h3>学院简介</h3>
</a>
</li>
<li>
<a href="#">
<img src="/img/12155851xeox.png" alt="">
<h3>学院简介</h3>
</a>
</li>
<li>
<a href="#">
<img src="/img/12155837ihre.png" alt="">
<h3>学院简介</h3>
</a>
</li>
<li>
<a href="#">
<img src="/img/12155837ihre.png" alt="">
<h3>学院简介</h3>
</a>
</li>
</ul>
</div>
<div class="page_main_center">
<div class="top">
<span>通知公告</span>
<a href="#">more+</a>
</div>
<ul>
<li>
<a href="#">
<div class="page_main_center_left">
<h3>09</h3>
<p>2023.08</p>
</div>
<div class="page_main_center_right">
<h3>【链接推文】关于校方认证和网上预报到流程</h3>
<p>速看!新生预报到已开启,快来看看这篇保姆级教程吧。
亲爱的新同学们网上预报到和易班校方认证工作即将于8月14日-25日
开启小易整理了一份详细流程一...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="page_main_center_left">
<h3>09</h3>
<p>2023.08</p>
</div>
<div class="page_main_center_right">
<h3>【链接推文】关于校方认证和网上预报到流程</h3>
<p>速看!新生预报到已开启,快来看看这篇保姆级教程吧。
亲爱的新同学们网上预报到和易班校方认证工作即将于8月14日-25日
开启小易整理了一份详细流程一...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="page_main_center_left">
<h3>09</h3>
<p>2023.08</p>
</div>
<div class="page_main_center_right">
<h3>【链接推文】关于校方认证和网上预报到流程</h3>
<p>速看!新生预报到已开启,快来看看这篇保姆级教程吧。
亲爱的新同学们网上预报到和易班校方认证工作即将于8月14日-25日
开启小易整理了一份详细流程一...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="page_main_center_left">
<h3>09</h3>
<p>2023.08</p>
</div>
<div class="page_main_center_right">
<h3>【链接推文】关于校方认证和网上预报到流程</h3>
<p>速看!新生预报到已开启,快来看看这篇保姆级教程吧。
亲爱的新同学们网上预报到和易班校方认证工作即将于8月14日-25日
开启小易整理了一份详细流程一...</p>
</div>
</a>
</li>
</ul>
</div>
<div class="page_main_right">
<div class="top">
<span>视频河大</span>
<a href="#">more+</a>
</div>
</div>
</div>
</body>
</html>
.page_main{
width:1170px;
margin:30px auto 0;
display: flex;
justify-content: space-between;
}
.page_main .page_main_left{
width:20%;
}
.page_main .page_main_left ul{
margin-top: 20px;
}
.page_main .page_main_left ul li{
list-style: none;
text-align: center;
margin-bottom: 15px;
}
.page_main .page_main_left ul li a{
display: block;
padding: 15px 0;
color:#fff;
text-decoration: none;
}
.page_main .page_main_left ul li a:hover{
/* opacity: ;透明度*/
box-shadow: 0 0 10px #fff inset;/*阴影 内阴影*/
}
.page_main .page_main_left ul li:nth-child(1){
background:rgb(148,193,219);
}
.page_main .page_main_left ul li:nth-child(2){
background:rgb(241,195,69);
}
.page_main .page_main_left ul li:nth-child(3){
background:rgb(195,212,81);
}
.page_main .page_main_left ul li:nth-child(4){
background:rgb(187,24,100);
}
.page_main .page_main_center{
width:53%;
}
.page_main .page_main_center ul{
margin-top:20px;
}
.page_main .page_main_center ul li{
list-style: none;
margin-bottom: 26px;
border: 1px dashed rgb(221,221,221);
padding-bottom: 26px;
}
.page_main .page_main_center ul li:last-child{
border:none;
}
.page_main .page_main_center ul li a{
display: flex;
}
.page_main .page_main_center ul li a .page_main_center_left{
width:15%;
text-align: center;
}
.page_main .page_main_center ul li a .page_main_center_left h3{
background-color:rgb(238,238,238);
color:rgb(195,63,48);
font-size: 30px;
padding:5px 0;
}
.page_main .page_main_center ul li a .page_main_center_left p{
background-color: rgb(195,63,48);
color: #fff;
font-size: 13px;
padding:4px 0;
}
.page_main .page_main_center ul li a .page_main_center_right
{
width:83%;
}
.page_main .page_main_center ul li a .page_main_center_right h3{
font-weight: 500;
font-size: 16px;
color:rgb(195,63,48);
}
.page_main .page_main_center ul li a .page_main_center_right p{
font-size:14px;
color:rgb(153,153,176);
margin-top:10px;
}
.page_main .page_main_right{
width: 25%;
}
.page_main .top{
display: flex;
justify-content: space-between; /*两边分布*/
border-bottom: 1px solid rgb(221,221,221);
}
.page_main .top span{
border-bottom: 2px solid rgb(195,63,48);
padding-bottom:10px ;
font-size: 18px;
}
.page_main .top a{
color: rgb(153,153,176);
text-decoration: none;/*去下划线用文本装修*/
}
整个:
html
css