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

web前端作业3

2024-05-20 26
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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。。
目录
相关文章
土木林森
|
15天前
|
前端开发 JavaScript 安全
前端性能调优：HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性，HTTP/2显著提升了Web性能。同时，HTTPS确保了数据传输的安全性。文章提供了示例代码，展示了如何使用Node.js创建一个HTTP/2服务器。
土木林森
29 3
爱的不是纯牛奶-47754
|
12天前
|
监控 前端开发 JavaScript
探索微前端架构：构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略，通过将大型前端应用拆分为多个独立的微应用，提高开发效率、增强可维护性，并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
爱的不是纯牛奶-47754
32 6
二二*一一
|
16天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
二二*一一
30 3
土木林森
|
16天前
|
前端开发 安全 应用服务中间件
前端性能调优：HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展，前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用，介绍了二进制分帧、多路复用和服务器推送等特性，并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS，以提升Web应用的性能和安全性。
土木林森
17 3
土木林森
|
16天前
|
前端开发 JavaScript API
前端框架新探索：Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来，前端技术飞速发展，Svelte凭借独特的编译时优化和简洁的API设计，成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势，包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制，并通过示例代码展示其使用方法。
土木林森
32 2
二二*一一
|
17天前
|
开发框架 前端开发 JavaScript
Web前端框架
Web前端框架等名词
二二*一一
16 2
码农小达人
|
27天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」：等你来报名！
2024 川渝 Web 前端开发技术交流会「互联」：等你来报名！
码农小达人
70 0
2024 川渝 Web 前端开发技术交流会「互联」：等你来报名！
小周sir
|
17天前
|
监控 前端开发 JavaScript
前端技术探索：构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索：构建高效、可维护的Web应用
小周sir
36 0
土木林森
|
1月前
|
XML JSON API
ServiceStack：不仅仅是一个高性能Web API和微服务框架，更是一站式解决方案——深入解析其多协议支持及简便开发流程，带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架，支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程，提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑，安装简单，通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务，包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议，具备自动验证、自动过滤器等丰富功能，适合快速搭建高性能、可扩展的服务端应用。
土木林森
100 3
土木林森
|
15天前
|
设计模式 前端开发 数据库
Python Web开发：Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用，涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容，并展示了实际代码示例，帮助读者快速掌握Django全栈开发的核心技术。
土木林森
101 44

热门文章

最新文章

  • 1
    动态切换 web 报表中的统计图类型
  • 2
    web程序的统一认证实现：filter操作
  • 3
    互联网信息路上的国学、WEB2.0与互动营销
  • 4
    超级硬件代理解决企业Web提速上网问题
  • 5
    细谈WEB标准
  • 6
    阿里云Web应用托管服务(web+)如何使用命令行工具变更部署环境配置?
  • 7
    使用Axis2来构建Web Service客户端
  • 8
    web QQ页面内发现一首诗
  • 9
    【温故而知新-Javascript】使用Web存储
  • 10
    【ASP.NET Web API教程】2.4 创建Web API的帮助页面
  • 1
    告别‘老司机’时代，AJAX与Fetch API让你的前端与Python后端无缝对接！
    59
  • 2
    现代前端开发中的响应式设计原则与实践
    90
  • 3
    现代前端开发中的响应式设计实践与优化
    60
  • 4
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 5
    前端项目部署问题总结
    65
  • 6
    前端框架与库 - React生命周期与Hooks
    50
  • 7
    前端性能优化都有那些方案 ？
    73
  • 8
    高级前端常见的面试题？
    101
  • 9
    前端框架与库 - React基础：组件、Props、State
    71
  • 10
    技术心得：前端点击按钮，导入excel文件，上传到后台，excel接收和更新数据
    52

    • 相关课程

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

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来

    • 相关实验场景

    更多
  • 基于ECS搭建Java Web开发环境
  • 搭建Java Web开发环境
  • Internet Information Services（IIS）部署Web项目
  • 云上Web及FTP
  • WEB网页编程实战
    • 下一篇
    阿里云OSS设置跨域访问