成都文理校园官网制作：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .logo{ text-align: center; } .container { 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 { float: left; line-height: 43px; padding: 0 20px; background-image: url("nav-g.jpg"); background-repeat: no-repeat; background-position: right; } .nav li:last-child { background-image: none; } .nav a { color: white; text-decoration: none; } .nav li:hover>a { color: red; } .menu { position: absolute; /* display: none; */ background-color: #eee; /* padding: 0 10px; */ margin-left: -10px; display: none; } .menu>div { border-bottom: 1px solid #ccc; padding: 0 10px; line-height: 30px; } .nav li:hover .menu {} .image-content { width: 1170px; height: 500px; background-image: url("z.jpg"); margin: 0 auto; } .text-content { width: 1170px; margin: 0 auto; } .second-nav { width: 810px; height: 25px; background-image: url("nav-2-bg.png"); } .second-nav>div { float: left; width: 132px; font-size: 13px; color: white; line-height: 25px; } .second-nav>div::after { content: "|"; margin-left: 15px; } .second-nav>div:last-child::after { content: ""; } .left { width: 810px; /* border: 1px solid rebeccapurple; */ } .left-text, .right-text { float: left; width: 48%; position: relative; } .right-text { float: right; } .text-news>div { padding: 5px 0; font-size: 12px; text-align: left; border-bottom: 1px dashed #ccc; font-weight: 300; } .text-news>div::before { content: ""; display: inline-block; background-image: url("ico_001.gif"); width: 6px; height: 7px; } .text-news a { color: black; text-decoration: none; } .text-news img { vertical-align: middle; } .text-news span { float: right; } .text-news>div:first-child::before { background: none; width: 0; } .text-news>div:first-child>a { line-height: 30px; color: darkred; font-size: 13px; float: right; } .text-news>div:first-child>a:hover { color: orange; } .left { /* border: 4px solid red; */ } .right { width: 330px; /* height: 300px; */ /* border: 4px solid blue; */ float: right; } .video{ background: url("28289pe9gb.jpg"); background-repeat: no-repeat; width: 330px; height: 330px; position: relative; } .video-con{ position: absolute; bottom:0px; right: 0px; } .video-con > a{ display: inline-block; background-color: #ccc; width: 35px; height: 35px; text-align: center; line-height: 35px; } </style> </head> <body> <div class="container"> <img class="logo" src="logo.jpg" alt=""> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li> <a href="#">学院概况</a> <div class="menu"> <div>简介</div> <div>风光</div> <div>服务</div> <div>表示</div> </div> </li> <li> <a href="#">教学科研</a> <div class="menu"> <div>教务管理</div> <div>科研管理</div> <div>素质教育</div> <div>优质课程</div> </div> </li> <li><a href="#">综改评建</a></li> <li><a href="#">国际交流</a></li> <li> <a href="#">招生</a> <div class="menu"> <div>本专科招生</div> </div> </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> <div class="image-content"></div> <div class="text-content"> <div class="second-nav" style="float: left;"> <div>学生工作部</div> <div>团委 学联 社团</div> <div>教务管理系统</div> <div>校长书记信箱</div> <div>高校网络理政平台</div> <div>2022本专科招生</div> </div> <div class="search-bar" style="text-align: right;"> <form action="#" method="get" enctype="text/plain"> 搜索: <input type="text" name="search" value="坤坤"> <button>提交</button> </form> </div> <div class="left" style="float: left;"> <div class="left-text"> <div class="text-news"> <div><img src="../pic/title-news.jpg" alt=""><a href="#">更多>></a></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> </div> <div class="text-news"> <div><img src="../pic/title-news.jpg" alt=""><a href="#">更多>></a></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> </div> </div> <div class="right-text"> <div class="text-news"> <div><img src="../pic/title-news.jpg" alt=""><a href="#">更多>></a></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> </div> <div class="text-news"> <div><img src="../pic/title-news.jpg" alt=""><a href="#">更多>></a></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif" alt=""><span>2022/09/22</span></div> </div> </div> </div> <div class="right"> <div class="video"> <div class="video-con"> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> </div> </div> </div> </div> </div> </body> </html>
