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

web前端作业3

2024-05-20 17
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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。。
目录
相关文章
叫个什么名字
|
14小时前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点，通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互，全面解析从数据请求到响应的全过程。
叫个什么名字
25 18
温轻舟
|
2天前
|
前端开发 搜索推荐 JavaScript
Web前端网站（二）- 主页
页面星空是可动的哦~~~毒药水特效的颜色搭配，文字渐变的动态效果，图片360度旋转展示特效等等等；每一次的按钮点击都是满满的惊艳 ~ ~ ~
温轻舟
19 4
Web前端网站（二）- 主页
温轻舟
|
2天前
|
存储 前端开发 搜索推荐
Web前端网站（一） - 登录页面及账号密码验证
页面背景动态是烟花和文字特效与缓缓下落的雪花相结合，在登录表单的旁边还有五个白色光圈以不规则的方式环绕，当鼠标靠近时，会发出彩色的光芒~~~
温轻舟
19 1
Web前端网站（一） - 登录页面及账号密码验证
杨校
|
3天前
|
编解码 前端开发 JavaScript
WEB前端响应式布局之BootStarp使用
WEB前端响应式布局之BootStarp使用
杨校
14 0
杨校
|
3天前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校
11 0
杨校
|
3天前
|
前端开发 安全 数据安全/隐私保护
杨校老师课堂之WEB前端HTML2
杨校老师课堂之WEB前端HTML
杨校
16 0
杨校
|
3天前
|
XML 移动开发 前端开发
杨校老师课堂之WEB前端HTML1
杨校老师课堂之WEB前端HTML
杨校
22 0
艾尼麻麻
|
20天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
艾尼麻麻
26 2
老板这功能得加钱
|
1月前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效，2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效，2024年最新面试题+笔记+项目实战
老板这功能得加钱
29 0
yma16
|
1月前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
yma16
50 1

热门文章

最新文章

  • 1
    Redis多级缓存指南：从前端到后端全方位优化！
  • 2
    【好用】推荐10套后端管理系统前端模板
  • 3
    【Flutter前端技术开发专栏】Flutter中的热重载与热更新机制
  • 4
    探索未来：2024年前端技术趋势解读
  • 5
    前端vue2、vue3去掉url路由“ # ”号——nginx配置（二）
  • 6
    前端vue2、vue3去掉url路由“ # ”号——nginx配置（一）
  • 7
    前端xss攻击——规避innerHtml过滤标签节点及属性
  • 8
    【Flutter前端技术开发专栏】Flutter中的图片加载与缓存优化
  • 9
    【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
  • 10
    【Flutter前端技术开发专栏】Flutter中的内存泄漏检测与解决
  • 1
    什么是web与搭建自己的第一个pikachu靶场
    45
  • 2
    【Web系列笔记】Restful
    42
  • 3
    【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的？
    35
  • 4
    【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
    39
  • 5
    【Web 前端】如何找到所有 HTML select 标签的选中项？
    45
  • 6
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    27
  • 7
    【Web 前端】$(document).ready() 是个什么函数？为什么要用它？
    49
  • 8
    【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
    60
  • 9
    20：基于EL与JSTL的产品管理页-Java Web
    30
  • 10
    19：Web开发模式与MVC设计模式-Java Web
    39

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • Internet Information Services（IIS）部署Web项目
  • 云上Web及FTP
  • WEB网页编程实战
  • 前端开发基础1：前端开发环境的安装和配置
  • 网站用户流量分析—适用于电商网站、资讯网站、游戏主站等各类Web站点场景
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考