web 作业练习4

最新推荐文章于 2024-05-18 22:08:03 发布

池棠逍荷

最新推荐文章于 2024-05-18 22:08:03 发布

阅读量48

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_63162792/article/details/128285959

版权

1.使用h5+c3制作本校官网

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>cdwl</title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           .container{
               text-align: center;
           }
           .nav{
               height: 43px;
               background-image: url("../pic/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("../pic/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("../pic/233ngea9mg.jpg");
       margin: 0 auto;
       }

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

       .second-nav {
       width: 810px;
       height: 25px;
       background-image: url("../pic/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("../pic/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("../pic/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("../pic/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("../pic/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="../pic/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="pic/6.jpg"></a>
       <a href="#"><img src="pic/6.jpg"></a>
       <a href="#"><img src="pic/6.jpg"></a>
       <a href="#"><img src="pic/6.jpg"></a>
       <a href="#"><img src="pic/6.jpg"></a>
       <a href="#"><img src="pic/6.jpg"></a>
       <a href="#"><img src="pic/6.jpg"></a>
       <a href="#"><img src="pic/6.jpg"></a>
       <a href="#"><img src="pic/6.jpg"></a>
       <a href="#"><img src="pic/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="pic/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="pic/title-news.jpg" alt="">
       <a href="#"><img src="../pic/zt_zf.jpg" alt=""></a>
       <a href="#"><img src="../pic/zt_8.jpg" alt=""></a>
       <a href="#"><img src="../pic/zt_7.jpg" alt=""></a>
       <a href="#"><img src="../pic/zt_4.jpg" alt=""></a>
       <a href="#"><img src="../pic/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="../pic/13flxkue78.png" alt="">
       <a href="#">川公网安备 51012102000211号</a>
       </div>
       </div>
   </body>
</html>