web前端作业3

简介: web前端作业3

成都文理校园官网制作:

<!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>
相关文章
|
28天前
|
缓存 前端开发 JavaScript
使用Web前端性能优化提高网站加载效率
前端性能优化关键在于提高用户体验和降低资源消耗,Webpack是重要工具。基础优化策略包括减少HTTP请求、资源压缩与缓存、异步加载。Webpack优化配置涉及Tree Shaking、代码分割。高级策略涵盖Long-term Caching、缓存提升和插件优化。打包部署时,自动化流程和环境管理也至关重要。通过这些方法,可提升Web应用速度和体验。
114 0
|
22小时前
|
前端开发 JavaScript 安全
Web前端开发中的三大主流框架
Web前端开发中的三大主流框架
|
1天前
|
缓存 前端开发 JavaScript
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
10 1
|
5天前
|
前端开发 JavaScript 测试技术
web前端语言框架:探索现代前端开发的核心架构
web前端语言框架:探索现代前端开发的核心架构
17 4
|
5天前
|
前端开发 JavaScript 开发工具
Web网页前端教程免费:引领您踏入编程的奇幻世界
Web网页前端教程免费:引领您踏入编程的奇幻世界
9 3
|
17天前
|
JavaScript 前端开发 Java
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
|
18天前
|
前端开发 JavaScript Java
Java语言在Web前端开发中的技术应用
Java语言在Web前端开发中的技术应用
|
28天前
|
前端开发 JavaScript Java
web 技术中前端和后端交互过程
客户端:上网过程中,负责浏览资源的电脑,叫客户端
32 0
|
XML Web App开发 JavaScript
前端入门教程(二)Web前端与HTML简介
一 web1.0时代的网页制作 网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。 例如一篇QQ日志、一篇博文等展示性文章。
2500 0
|
4天前
|
前端开发 JavaScript Java
计算机Java项目|基于Web的足球青训俱乐部管理后台系统的设计与开发
计算机Java项目|基于Web的足球青训俱乐部管理后台系统的设计与开发