一、代码部分
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cdcastitle>
head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
text-align: center;
}
.top{
margin: auto;
text-align: center;
}
.nav{
height: 43px;
background-image: url("nav-bg.jpg");
background-repeat: repeat-x;
}
.nav ul{
width: 1200px;
margin: auto;
list-style: none;
}
.nav li{
line-height: 43px;
margin: 0 10px;
float: left;
}
.nav a,.second-nav a{
color: white;
text-decoration: none;
}
.nav a:hover,.text a:hover{
color: red;
}
.nav li:nth-of-type(even){
background: url("nav-g.jpg");
height: 43px;
width: 4px;
}
.colloge-detail,.Teaching,.recruit,.messag,.public-services,.team-building{
position: relative;
}
.colloge-detail>.select,.Teaching>.select,.recruit>.select,.messag>.select,.public-services>.select,.team-building>.select{
border: none;
background-color: #eee;
font-size: 10px;
position: absolute;
left: 0px;
top: 0px;
margin-top: 43px;
margin-left: -20px;
display: none;
}
.select a{
color: black;
}
.select div{
padding-left: 15px;
padding-right: 15px;
width: 75px;
border-bottom: 1px solid #ccc;
}
.nav li:nth-child(3):hover .select,.nav li:nth-child(5):hover .select,.nav li:nth-child(11):hover .select,.nav li:nth-child(19):hover .select,.nav li:nth-child(21):hover .select,.nav li:nth-child(23) :hover .select{
display: block;
}
.second-nav{
background-image: url("nav-2-bg.png");
width: 810px;
height: 25px;
}
.second-nav>div{
float: left;
width: 132px;
height: 25px;
font-size: 14px;
}
.second-nav>div::after{
margin-left: 15px;
content: "|";
color: white;
}
.contet{
width: 1170px;
margin: auto;
}
.second-nav>div:last-child::after{
content: "|";
}
.text-contet{
margin: 0 auto;
float: left;
/*border: 1px solid red;*/
position: relative;
}
.left{
width: 48%;
float: left;
}
.right{
position: relative;
float: right;
width: 48%;
}
.media-contet{
float: right;
}
.text{
text-align: left;
font-size: 14px;
position: relative;
font-weight: 200;
}
.text>div{
margin-top: 5px;
border-bottom: 1px dashed #ccc;
}
.text img{
vertical-align: middle;
}
.text span{
position: absolute;
right: 0px;
}
.text a{
color: black;
text-decoration: none;
}
.text >div::before{
display: inline-block;
content: "";
width: 6px;
height: 7px;
background-image: url("ico_001.gif");
}
.text >div:first-child::before{
content: "";
background-image: none;
}
.text >div:first-child{
text-align: left;
border: none;
margin-bottom: 10px;
}
.text >div:first-child>a:last-child{
color: darkred;
}
.text >div:first-child>a:last-child:hover{
color: orange;
}
.media-contet{
width: 340px;
text-align: left;
position: relative;
}
.search-bar{
position: absolute;
right: 0px;
}
.media-contet >img{
clear: both;
margin-top: 30px;
text-align: left;
border-bottom: 5px solid darkblue;
}
.media-banne{
width: 325px;
height: 245px;
background-image: url("28289pe9gb.jpg");
clear: both;
margin-top: 1px;
position: relative;
}
.a-container{
position: absolute;
right: 0px;
bottom: 0px;
float: left;
}
.a-container>a{
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid rebeccapurple;
text-align: center;
line-height: 30px;
text-decoration: none;
color: white;
background-color: gray;
}
.a-container>a:hover{
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid red;
text-align: center;
line-height: 30px;
text-decoration: none;
color: white;
background-color: rgb(239, 16, 16);
}
.one{
padding-top: 5px;
}
style>
<body>
<div class="container">
<img class="top" src="./logo.jpg" alt="">
<div class="nav" >
<ul>
<li><a href="#">首页a>li>
<li>li>
<li>
<div class="colloge-detail">
<a href="#">学院概况a>
<div class="select">
<div><a href="#">学院简介a>div>
<div><a href="#">校园风光a>div>
<div><a href="#">管理服务a>div>
<div><a href="#">学校标识a>div>
div>
div>
li>
<li>li>
<li>
<div class="Teaching">
<a href="#">教学科研a>
<div class="select">
<div><a href="#">教务管理a>div>
<div><a href="#">科研管理a>div>
<div><a href="#">素质教育a>div>
<div><a href="#">优质课程a>div>
div>
div>
li>
<li>li>
<li><a href="#">综合评建a>li>
<li>li>
<li><a href="#">国际交流a>li>
<li>li>
<li>
<div class="recruit">
<a href="#">招生a>
<div class="select">
<div><a href="#">本专科招生a>div>
div>
div>
li>
<li>li>
<li><a href="#">就业a>li>
<li>li>
<li><a href="#">学院位置a>li>
<li>li>
<li><a href="#">学子风采a>li>
<li>li>
<li>
<div class="messag">
<a href="#">信息公开a>
<div class="select">
<div><a href="*">基本信息a>div>
<div><a href="*">党务信息a>div>
<div><a href="*">招生考试信息a>div>
<div><a href="*">教育收费信息a>div>
<div><a href="*">教学质量信息a>div>
<div><a href="*">科研信息a>div>
<div><a href="*">学生管理信息a>div>
<div><a href="*">学风建设信息a>div>
<div><a href="*">学位学科信息a>div>
<div><a href="*">对外交流信息a>div>
<div><a href="*">其他a>div>
div>
div>
li>
<li>li>
<li>
<div class="public-services">
<a href="#">公共服务a>
<div class="select">
<div><a href="*">图书资源a>div>
<div><a href="*">网络服务a>div>
<div><a href="*">实验服务a>div>
<div><a href="*">校历a>div>
<div><a href="*">校车时刻表a>div>
<div><a href="*">校区地图a>div>
<div><a href="*">公务电话a>div>
<div><a href="*">自主学习a>div>
<div><a href="*">考研服务a>div>
<div><a href="*">站内导航a>div>
<div><a href="*">实习实训平台a>div>
div>
div>
li>
<li>li>
<li>
<div class="team-building">
<a href="#">队伍建设a>
<div class="select">
<div><a href="*">人事信息a>div>
<div><a href="*">人才招聘a>div>
<div><a href="*">教发中心a>div>
div>
div>
li>
ul>
div>
<img src="3p8mffq5ur.jpg">
<div class="contet">
<div class="text-contet">
<div class="second-nav">
<div><a href="#">学生工作部a>div>
<div><a href="#">团委 学联 社团a>div>
<div><a href="#">教务管理a>div>
<div><a href="#">校长书信箱a>div>
<div><a href="#">高效网络理政平台a>div>
<div><a href="#">2022本专科招生a>div>
div>
<div class="left">
<div class="text">
<div><a href="#">a><img src="title-news.jpg" alt="">
<a href="#" style="float: right">更多>>a>
div>
<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组a><img src="imgbz.gif" alt=""><span>2022/09/26span>div>
<div><a href="#">成都文理学院喜迎2022级新生入学报到a><img src="imgbz.gif" alt=""><span>2022/09/26span>div>
<div><a href="#">传媒与演艺学院学子在第九届“未来金话筒”...a><img src="imgbz.gif" alt=""><span>2022/09/21span>div>
<div><a href="#">防风险、保安全、护稳定，迎接党的二十大a><img src="imgbz.gif" alt=""><span>2022/09/21span>div>
<div><a href="#">学校召开安全稳定工作部署会a><img src="imgbz.gif" alt=""><span>2022/09/15span>div>
<div><a href="#">“地震无情，人间有爱”——成都文理学院对...a><img src="imgbz.gif" alt=""><span>2022/09/15span>div>
<div><a href="#">外国语学院学子在首届“高教社·SSTTS杯”全...a><img src="imgbz.gif" alt=""><span>2022/09/10span>div>
div>
<div class="text">
<div><a href="#">a><img src="title-uni1.jpg" alt="">
<a href="#" style="float: right">更多>>a>
div>
<div><a href="#">马克思主义学院副院长夏冰参加四川省首届马... a><img src="imgbz.gif" alt=""><span>2022/09/26span>div>
<div><a href="#">教育学院在“第十六届全国高校学前教育专业... a><img src="imgbz.gif" alt=""><span>2022/09/26span>div>
<div><a href="#">传媒与演艺学院召开党政联席扩大会议a><img src="imgbz.gif" alt=""><span>2022/09/21span>div>
<div><a href="#">马克思主义学院召开党政联席会 a><img src="imgbz.gif" alt=""><span>2022/09/21span>div>
<div><a href="#">传媒与演艺学院王永刚教授应邀出席2022年“... a><img src="imgbz.gif" alt=""><span>2022/09/15span>div>
<div><a href="#">会计学院召开2022年秋季学期学生来（返）校... a><img src="imgbz.gif" alt=""><span>2022/09/15span>div>
<div><a href="#"> 文法学院召开党政联席会议a><img src="imgbz.gif" alt=""><span>2022/09/10span>div>
div>
div>
<div class="right">
<div class="text">
<div><a href="#">a><img src="title-article.jpg" alt="">
<a href="#" style="float: right">更多>>a>
div>
<div><a href="#"> 我校举办课程思政教学能力提升专题讲座a><img src="imgbz.gif" alt=""><span>2022/09/26span>div>
<div><a href="#">学校举办《高校教师的职业生涯规划》专题讲座a><img src="imgbz.gif" alt=""><span>2022/09/26span>div>
<div><a href="#"> 四川师范大学帅晓红教授讲《课堂教学的方法...a><img src="imgbz.gif" alt=""><span>2022/09/21span>div>
<div><a href="#"> 我校举办“你比想象中更美丽--自尊与心理健...a><img src="imgbz.gif" alt=""><span>2022/09/21span>div>
<div><a href="#">学工系统开展“常见心理问题的识别与处理”...a><img src="imgbz.gif" alt=""><span>2022/09/15span>div>
<div><a href="#"> 诗人李自国作客文理讲“校园文学沃土的诗与...a><img src="imgbz.gif" alt=""><span>2022/09/15span>div>
<div><a href="#">文法学院举行《教育类科研课题的申报及优化...a><img src="imgbz.gif" alt=""><span>2022/09/10span>div>
div>
<div class="text">
<div><a href="#">a><img src="title-notice.jpg" alt="">
<a href="#" style="float: right">更多>>a>
div>
<div><a href="#">成都文理学院2023年全国硕士研究生招生考试...a><img src="imgbz.gif" alt=""><span>2022/09/26span>div>
<div><a href="#"> 关于做好2022年秋季学期师生员工来（返）校...a><img src="imgbz.gif" alt=""><span>2022/09/26span>div>
<div><a href="#">关于启动2022级新生线上教育教学活动的通知a><img src="imgbz.gif" alt=""><span>2022/09/21span>div>
<div><a href="#"> 关于推迟老生和2022级专升本学生返（来）校...a><img src="imgbz.gif" alt=""><span>2022/09/21span>div>
<div><a href="#">致泸定县学子的一封信a><img src="imgbz.gif" alt=""><span>2022/09/15span>div>
<div><a href="#"> 关于2022级新生推迟报到的通知a><img src="imgbz.gif" alt=""><span>2022/09/15span>div>
<div><a href="#"> 成都文理学院关于落实成都市疫情防控新要求...a><img src="imgbz.gif" alt=""><span>2022/09/10span>div>
div>
div>
div>
<div class="media-contet">
<div class="search-bar">
<form action="#" method="get" enctype="text/plain">
<input type="" name="search-contet" value="search">
<button>提交button>
form>
div>
<img src="title-wenli_1.jpg">
<div class="media-banne">
<div class="a-container">
<a href="#">1a><a href="#">2a><a href="#">3a>