zy web

Andrewhj

已于 2022-12-01 09:20:11 修改

阅读量133

点赞数

分类专栏：笔记文章标签：前端 css css3

于 2022-11-25 18:40:38 首次发布

本文链接：https://blog.csdn.net/Andrewhj/article/details/128042704

版权

笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

使用html+css制作学校官网

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }

           .container {
               text-align: center;
           }

           .nav {
               height: 43px;
               background-image: url("./img/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("./img/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 {
               display: block;
           }

           .image-content {
               width: 1170px;
               height: 500px;
               background-image: url("./img/233ngea9mg.jpg");
               margin: 0 auto;
           }

           .text-content {
               width: 1170px;
               margin: 0 auto;
           }

           .second-nav {
               width: 810px;
               height: 25px;
               background-image: url("img/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%;
           }

           .right-text {
               float: right;
           }

           .text-news>div {
               padding: 4px 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("img/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 {
               height: 800px;
               /* border: 4px solid red; */
           }

           .right {
               width: 320px;
               /* height: 300px; */
               border: 4px solid bluse;
               float: right;
           }

           .video{
               background: url("img/28289pe9gb.jpg   ");
               background-repeat: no-repeat;
               background-size: 100%;
               width: 320px;
               height: 240px;
               float: left;
               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;
           }
           .xizong {
               background-image: url("img/xizong.jpg");
               width: 100%;
               height: 65px;
               margin-top: 455px;
           }
           .ten_pic {
               margin-top: 15px;
               float: left;
           }
           .ten_pic > a > img {
               width: 157px;
           }
           .bottom_text {
               height: 30px;
               width: 810px;
               margin-top: 110px;
           }
           .leftbottom_text > span {
               color: brown;
               width: 13.7%;
               font-size: 12px;
               display: inline-block;
           }
           .right_pic {
               margin-top: 280px;
           }
           .right_pic > img:first-child {
               float: left;
           }
           .right_pic > img:last-child {
               width: 100%;
           }
           .bottom_bg {
               height: 130px;
               background-image: url("img/bottom-bg.jpg");
               margin-top: 800px;
               background-repeat: repeat-x;
           }
           .bottom_text {
               margin: auto;
               width: 1500px;
               height: 25px;
               font-size: 18px;
               line-height: 25px;
               font-size: 15px;
           }
           .bottom {
               height: 60px;
               background-color: #485c7c;
               line-height: 60px;
               color: gray;
               font-size: 15px;
           }
           .bottom > a {
               text-decoration: none;
               color: black;
           }
       </style>
   </head>
   <body>
       <div class="container">
           <img class="logo" src="./img/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">
                       <button>提交</button>
                   </form>
               </div>
               <div class="left" style="float: left">
                   <div class="left-text">
                       <div class="text-news">
                           <div><img src="img/title-news.jpg" alt=""><a href="#">更多>></a></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                       </div>
                       <div class="text-news">
                           <div><img src="img/title-news.jpg" alt=""><a href="#">更多>></a></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                       </div>
                   </div>
                   <div class="right-text">
                       <div class="text-news">
                           <div><img src="img/title-news.jpg" alt=""><a href="#">更多>></a></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                       </div>
                       <div class="text-news">
                           <div><img src="img/title-news.jpg" alt=""><a href="#">更多>></a></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                           <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
                                   alt=""><span>2022/09/22</span></div>
                       </div>
                   </div>
                   <div class="xizong"></div>
                   <div class="ten_pic">
                       <a href="#"><img src="img/6.jpg"></a>
                       <a href="#"><img src="img/6.jpg"></a>
                       <a href="#"><img src="img/6.jpg"></a>
                       <a href="#"><img src="img/6.jpg"></a>
                       <a href="#"><img src="img/6.jpg"></a>
                       <a href="#"><img src="img/6.jpg"></a>
                       <a href="#"><img src="img/6.jpg"></a>
                       <a href="#"><img src="img/6.jpg"></a>
                       <a href="#"><img src="img/6.jpg"></a>
                       <a href="#"><img src="img/6.jpg"></a>
                   </div>
                   <div class="leftbottom_text">
                       <span>教育部网站</span>
                       <span>四川省教育厅</span>
                       <span>中国教研网</span>
                       <span>中国教育新闻网</span>
                       <span>中国大学生在线</span>
                       <span>图书管理系统</span>
                       <span>校内网</span>
                   </div>
               </div>
               <div class="right">
                   <div style="float: left;"><img src="img/title-news.jpg" alt=""></div>
                   <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 class="right_pic">
                       <img src="img/title-news.jpg" alt="">
                       <a href="#"><img src="./img/zt_zf.jpg" alt=""></a>
                       <a href="#"><img src="./img/zt_8.jpg" alt=""></a>
                       <a href="#"><img src="./img/zt_7.jpg" alt=""></a>
                       <a href="#"><img src="./img/zt_4.jpg" alt=""></a>
                       <a href="#"><img src="./img/zt_22.png" alt=""></a>
                       <img src="./img/g_f_e_w_m_.png" alt="">
                   </div>
               </div>
           </div>
           <div class="bottom_bg"></div>
           <div class="bottom_text">
                  联系电话：61565000（校办）
                  61566000（校办）
                  028-61560112（招办）
                   61560113（招办）
                  61565148
                    传真：028-61565128
           </div>
           <div class="bottom">
               学校地址：成都市金堂县学府大道278号（邮编610401）成都文理学院版权所有 
               <a href="#">蜀ICP备11012699号</a> 
               <img src="img/13flxkue78.png" alt="">
               <a href="#">川公网安备 51012102000211号</a>
</div>
       </div>
   </body>
</html>