AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

web前端作业3

2024-05-20 34
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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>
文章标签：
前端开发
关键词：
web前端
前端web
前端作业
web作业
Healer。。
目录
相关文章
土木林森
|
1月前
|
前端开发 JavaScript 安全
前端性能调优：HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性，HTTP/2显著提升了Web性能。同时，HTTPS确保了数据传输的安全性。文章提供了示例代码，展示了如何使用Node.js创建一个HTTP/2服务器。
土木林森
60 3
请看我回答~
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中，Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念，正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用，同时通过一个简单的代码示例，揭示如何将一个庞大的前端工程拆分成小而美的模块，进而提升项目的可维护性、可扩展性和开发效率。
请看我回答~
41 0
土木林森
|
27天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
35 6
爱的不是纯牛奶-47754
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构：构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略，旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分，提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势，并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
爱的不是纯牛奶-47754
38 1
爱的不是纯牛奶-47754
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构：构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略，通过将大型前端应用拆分为多个独立的微应用，提高开发效率、增强可维护性，并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
爱的不是纯牛奶-47754
44 6
土木林森
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优：HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展，前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用，介绍了二进制分帧、多路复用和服务器推送等特性，并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS，以提升Web应用的性能和安全性。
土木林森
39 3
土木林森
|
1月前
|
前端开发 JavaScript API
前端框架新探索：Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来，前端技术飞速发展，Svelte凭借独特的编译时优化和简洁的API设计，成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势，包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制，并通过示例代码展示其使用方法。
土木林森
52 2
小周sir
|
1月前
|
监控 前端开发 JavaScript
前端技术探索：构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索：构建高效、可维护的Web应用
小周sir
54 0
想飞的雪糕
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
189 2
你都不懂
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
55 0

热门文章

最新文章

  • 1
    「前端工程化」从0-1搭建react，ts脚手架（1.2w字超详细教程）
  • 2
    合格前端系列第四弹-如何监听一个数组的变化
  • 3
    前端提交POST请求却变成GET请求的原因及解决方法
  • 4
    wordpress页面前端添加编辑按钮
  • 5
    前端 时间个性化 插件 jquery.timeago.js
  • 6
    前端实现tab栏切换，这么常见的案例你学会了吗？
  • 7
    你用过的网站前端优化的技术有哪些？
  • 8
    基于qiankun落地部署微前端爬”坑“记
  • 9
    前端进阶|第四天从setTimeout、Promise看js 的异步机制
  • 10
    python 学习 第九篇 前端应用
  • 1
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    87
  • 2
    了解常见的web漏洞-XXE漏洞，日常如何做好web安全
    98
  • 3
    Python Web开发主要常用的框架
    214
  • 4
    MVC（模型-视图-控制器）是一种在Web应用程序开发中广泛使用的软件设计模式
    71
  • 5
    Web应用程序的会话管理是一种跟踪和识别特定用户与Web服务器之间交互的技术
    266
  • 6
    在Python Web开发中，测试是一个至关重要的环节
    179
  • 7
    深入探索Spring Boot Web应用源码及实战应用
    107
  • 8
    golang学习7，glang的web的restful接口结构体传参
    60
  • 9
    golang学习6，glang的web的restful接口传参
    57
  • 10
    golang学习5，glang的web的restful接口
    53

    • 相关课程

    更多
  • 企业Web常用架构LAMP-LNMP实战
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 1分钟SAE部署Web在线游戏
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS