web 作业 cdcas

最新推荐文章于 2024-11-06 20:56:04 发布
最新推荐文章于 2024-11-06 20:56:04 发布
阅读量176 收藏
点赞数
文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaobaijiaowo/article/details/128052596
版权

样式图

 

制作官网，通过多层div，position 固定位置，行内元素等制作

代码如图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>cdcas</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        text-align: center;
    }
    .top{
        margin: auto;
        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{
        line-height: 43px;
        margin: 0 10px;
        float: left;
    }
    .nav a,.second-nav a{
        color: white;
        text-decoration: none;
    }
    .nav a:hover,.text a:hover{
        color: red;
    }
    .nav li:nth-of-type(even){
        background: url("nav-g.jpg");
         height: 43px;
         width: 4px;
    }
    .colloge-detail,.Teaching,.recruit,.messag,.public-services,.team-building{
        position: relative;
    }
    .colloge-detail>.select,.Teaching>.select,.recruit>.select,.messag>.select,.public-services>.select,.team-building>.select{
        border: none;
        background-color: #eee;
        font-size: 10px;
        position: absolute;
        left: 0px;
        top: 0px;
        margin-top: 43px;
        margin-left: -20px;
        display: none;
    }
    .select a{
        color: black;

    }
    .select div{
        padding-left: 15px;
        padding-right: 15px;
        width: 75px;
        border-bottom: 1px solid #ccc;
    }
    .nav li:nth-child(3):hover .select,.nav li:nth-child(5):hover .select,.nav li:nth-child(11):hover .select,.nav li:nth-child(19):hover .select,.nav li:nth-child(21):hover .select,.nav li:nth-child(23) :hover .select{
        display: block;
    }
    .second-nav{
        background-image: url("nav-2-bg.png");
        width: 810px;
        height: 25px;
    }
    .second-nav>div{
        float: left;
        width: 132px;
        height: 25px;
        font-size: 14px;
    }
    .second-nav>div::after{
        margin-left: 15px;
        content: "|";
        color: white;
    }
    .contet{
        width: 1170px;
        margin: auto;
    }
    .second-nav>div:last-child::after{
        content: "|";
    }
    .text-contet{
        margin: 0 auto;
        float: left;
        /*border: 1px solid red;*/
        position: relative;
    }
    .left{
        width: 48%;
        float: left;
    }
    .right{
        position: relative;
        float: right;
        width: 48%;
    }
    .media-contet{
        float: right;
    }
    .text{
        text-align: left;
        font-size: 14px;
        position: relative;
        font-weight: 200;
    }
    .text>div{
        margin-top: 5px;
        border-bottom: 1px dashed #ccc;
    }
    .text img{
        vertical-align: middle;
    }
    .text span{
        position: absolute;
        right: 0px;
    }
    .text a{
        color: black;
        text-decoration: none;
    }
    .text >div::before{
        display: inline-block;
        content: "";
        width: 6px;
        height: 7px;
        background-image: url("ico_001.gif");
    }
    .text >div:first-child::before{
        content: "";
        background-image: none;
    }
    .text >div:first-child{
        text-align: left;
        border: none;
        margin-bottom: 10px;
    }
    .text >div:first-child>a:last-child{
        color: darkred;
    }
    .text >div:first-child>a:last-child:hover{
        color: orange;
    }
    .media-contet{
        width: 340px;
        text-align: left;
        position: relative;
    }
    .search-bar{
        position: absolute;
        right: 0px;
    }
    .media-contet >img{
        clear: both;
        margin-top: 30px;
        text-align: left;
        border-bottom: 5px solid darkblue;
    }

    .media-banne{
        width: 325px;
        height: 245px;
        background-image: url("28289pe9gb.jpg");
        clear: both;
        margin-top: 1px;
        position: relative;
    }
     .a-container{
         position: absolute;
         right: 0px;
         bottom: 0px;
         float: left;
    }
    .a-container>a{
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 1px solid rebeccapurple;
        text-align: center;
        line-height: 30px;
        text-decoration: none;
        color: white;
        background-color: gray;
    }
    .one{
        padding-top: 5px;
    }

</style>
<body>
   <div class="container">
     <img class="top" src="./logo.jpg" alt="">
         <div class="nav" >
          <ul>
              <li><a href="#">首页</a></li>
              <li></li>
              <li>
                  <div class="colloge-detail">
                      <a href="#">学院概况</a>
                      <div class="select">
                          <div><a href="#">学院简介</a></div>
                          <div><a href="#">校园风光</a></div>
                          <div><a href="#">管理服务</a></div>
                          <div><a href="#">学校标识</a></div>

                      </div>
                  </div>
              </li>
              <li></li>
              <li>
                  <div class="Teaching">
                   <a href="#">教学科研</a>
                    <div class="select">
                        <div><a href="#">教务管理</a></div>
                        <div><a href="#">科研管理</a></div>
                        <div><a href="#">素质教育</a></div>
                        <div><a href="#">优质课程</a></div>
                    </div>
                  </div>
              </li>
              <li></li>
              <li><a href="#">综合评建</a></li>
              <li></li>
              <li><a href="#">国际交流</a></li>
              <li></li>
              <li>
                  <div class="recruit">
                  <a href="#">招生</a>
                      <div class="select">
                          <div><a href="#">本专科招生</a></div>
                      </div>
                  </div>
              </li>
              <li></li>
              <li><a href="#">就业</a></li>
              <li></li>
              <li><a href="#">学院位置</a></li>
              <li></li>
              <li><a href="#">学子风采</a></li>
              <li></li>
              <li>
                  <div class="messag">
                  <a href="#">信息公开</a>
                      <div class="select">
                          <div><a href="*">基本信息</a></div>
                          <div><a href="*">党务信息</a></div>
                          <div><a href="*">招生考试信息</a></div>
                          <div><a href="*">教育收费信息</a></div>
                          <div><a href="*">教学质量信息</a></div>
                          <div><a href="*">科研信息</a></div>
                          <div><a href="*">学生管理信息</a></div>
                          <div><a href="*">学风建设信息</a></div>
                          <div><a href="*">学位学科信息</a></div>
                          <div><a href="*">对外交流信息</a></div>
                          <div><a href="*">其他</a></div>
                      </div>
                  </div>
              </li>
              <li></li>
              <li>
                  <div class="public-services">
                  <a href="#">公共服务</a>
                      <div class="select">
                          <div><a href="*">图书资源</a></div>
                          <div><a href="*">网络服务</a></div>
                          <div><a href="*">实验服务</a></div>
                          <div><a href="*">校历</a></div>
                          <div><a href="*">校车时刻表</a></div>
                          <div><a href="*">校区地图</a></div>
                          <div><a href="*">公务电话</a></div>
                          <div><a href="*">自主学习</a></div>
                          <div><a href="*">考研服务</a></div>
                          <div><a href="*">站内导航</a></div>
                          <div><a href="*">实习实训平台</a></div>
                      </div>
                  </div>
              </li>
              <li></li>
              <li>
                  <div class="team-building">
                      <a href="#">队伍建设</a>
                        <div class="select">
                            <div><a href="*">人事信息</a></div>
                            <div><a href="*">人才招聘</a></div>
                            <div><a href="*">教发中心</a></div>
                        </div>
                  </div>
              </li>
          </ul>
         </div>
         <img src="3p8mffq5ur.jpg">
         <div class="contet">
             <div class="text-contet">
                 <div class="second-nav">
                     <div><a href="#">学生工作部</a></div>
                     <div><a href="#">团委 学联 社团</a></div>
                     <div><a href="#">教务管理</a></div>
                     <div><a href="#">校长书信箱</a></div>
                     <div><a href="#">高效网络理政平台</a></div>
                     <div><a href="#">2022本专科招生</a></div>
                 </div>
              <div class="left">
                  <div class="text">
                      <div><a href="#"></a><img src="title-news.jpg" alt="">
                            <a href="#" style="float: right">更多>></a>
                      </div>
                      <div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组</a><img src="imgbz.gif" alt=""><span>2022/09/26</span></div>
                      <div><a href="#">成都文理学院喜迎2022级新生入学报到</a><img src="imgbz.gif" alt=""><span>2022/09/26</span></div>
                      <div><a href="#">传媒与演艺学院学子在第九届“未来金话筒”...</a><img src="imgbz.gif" alt=""><span>2022/09/21</span></div>
                      <div><a href="#">防风险、保安全、护稳定，迎接党的二十大</a><img src="imgbz.gif" alt=""><span>2022/09/21</span></div>
                      <div><a href="#">学校召开安全稳定工作部署会</a><img src="imgbz.gif" alt=""><span>2022/09/15</span></div>
                      <div><a href="#">“地震无情，人间有爱”——成都文理学院对...</a><img src="imgbz.gif" alt=""><span>2022/09/15</span></div>
                      <div><a href="#">外国语学院学子在首届“高教社·SSTTS杯”全...</a><img src="imgbz.gif" alt=""><span>2022/09/10</span></div>
                  </div>
                  <div class="text">
                      <div><a href="#"></a><img src="title-uni1.jpg" alt="">
                          <a href="#" style="float: right">更多>></a>
                      </div>
                      <div><a href="#">马克思主义学院副院长夏冰参加四川省首届马... </a><img src="imgbz.gif" alt=""><span>2022/09/26</span></div>
                      <div><a href="#">教育学院在“第十六届全国高校学前教育专业... </a><img src="imgbz.gif" alt=""><span>2022/09/26</span></div>
                      <div><a href="#">传媒与演艺学院召开党政联席扩大会议</a><img src="imgbz.gif" alt=""><span>2022/09/21</span></div>
                      <div><a href="#">马克思主义学院召开党政联席会 </a><img src="imgbz.gif" alt=""><span>2022/09/21</span></div>
                      <div><a href="#">传媒与演艺学院王永刚教授应邀出席2022年“... </a><img src="imgbz.gif" alt=""><span>2022/09/15</span></div>
                      <div><a href="#">会计学院召开2022年秋季学期学生来（返）校... </a><img src="imgbz.gif" alt=""><span>2022/09/15</span></div>
                      <div><a href="#">	文法学院召开党政联席会议</a><img src="imgbz.gif" alt=""><span>2022/09/10</span></div>
                  </div>
              </div>
              <div class="right">
                  <div class="text">
                      <div><a href="#"></a><img src="title-article.jpg" alt="">
                          <a href="#" style="float: right">更多>></a>
                      </div>
                      <div><a href="#">	我校举办课程思政教学能力提升专题讲座</a><img src="imgbz.gif" alt=""><span>2022/09/26</span></div>
                      <div><a href="#">学校举办《高校教师的职业生涯规划》专题讲座</a><img src="imgbz.gif" alt=""><span>2022/09/26</span></div>
                      <div><a href="#">	四川师范大学帅晓红教授讲《课堂教学的方法...</a><img src="imgbz.gif" alt=""><span>2022/09/21</span></div>
                      <div><a href="#">	我校举办“你比想象中更美丽--自尊与心理健...</a><img src="imgbz.gif" alt=""><span>2022/09/21</span></div>
                      <div><a href="#">学工系统开展“常见心理问题的识别与处理”...</a><img src="imgbz.gif" alt=""><span>2022/09/15</span></div>
                      <div><a href="#">	诗人李自国作客文理讲“校园文学沃土的诗与...</a><img src="imgbz.gif" alt=""><span>2022/09/15</span></div>
                      <div><a href="#">文法学院举行《教育类科研课题的申报及优化...</a><img src="imgbz.gif" alt=""><span>2022/09/10</span></div>
                  </div>
                  <div class="text">
                      <div><a href="#"></a><img src="title-notice.jpg" alt="">
                          <a href="#" style="float: right">更多>></a>
                      </div>
                      <div><a href="#">成都文理学院2023年全国硕士研究生招生考试...</a><img src="imgbz.gif" alt=""><span>2022/09/26</span></div>
                      <div><a href="#">	关于做好2022年秋季学期师生员工来（返）校...</a><img src="imgbz.gif" alt=""><span>2022/09/26</span></div>
                      <div><a href="#">关于启动2022级新生线上教育教学活动的通知</a><img src="imgbz.gif" alt=""><span>2022/09/21</span></div>
                      <div><a href="#">	关于推迟老生和2022级专升本学生返（来）校...</a><img src="imgbz.gif" alt=""><span>2022/09/21</span></div>
                      <div><a href="#">致泸定县学子的一封信</a><img src="imgbz.gif" alt=""><span>2022/09/15</span></div>
                      <div><a href="#">	关于2022级新生推迟报到的通知</a><img src="imgbz.gif" alt=""><span>2022/09/15</span></div>
                      <div><a href="#">	成都文理学院关于落实成都市疫情防控新要求...</a><img src="imgbz.gif" alt=""><span>2022/09/10</span></div>
                  </div>
              </div>
             </div>
             <div class="media-contet">
                 <div class="search-bar">
                     <form action="#" method="get" enctype="text/plain">
                         <input type="" name="search-contet" value="就这">
                         <button>提交</button>
                     </form>
                 </div>
                 <img  src="title-wenli_1.jpg">
                 <div class="media-banne">
                     <div class="a-container">
                     <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a>

                     </div>

                 </div>

                 <div class="one"><img src="title-zhuan.jpg"></div>
                 <div class="two"><img src="one.png"></div>
             </div>
             <img src="xizong.png">
         </div>
   </div>
</body>
</html>

 

不是 这还拿不下你
关注
web学习笔记
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
IO & IR 个人作业汇总——康熙
qq_38425619的博客
06-24 1912
目录 一, 信息组织读后感 (1)ICT环境下信息组织的任务与挑战——元数据的管理 二, 爬虫报告 (1) robots协议分析—-以淘宝为例 (2) Python数据采集 - quotes (3) Scrapy框架抓取四川大学公共管理学院教师信息 (4) 八爪鱼爬取网页数据的简单使用 三, 分词报告 (1)分词工具介绍与简单实例 四, 文本解析报告 (1)Apache Tika格式转
html5图标爆炸碎片js特效_鼠标悬浮图片爆炸效果
ICode联盟
12-24 188
下载地址 $(function(){ var now=0; var ready=true; var W=400; var H=300; var $img = $("#imgbz"); var oDiv = $img.get(0); var next =function(){ return (now+1)%3; } //爆炸 $("#imgbz").on("mouseover",function(){ if(!ready)return; ready=false; var R=4; var C=7; var
网站页面模仿学习
qq_52566242的博客
11-26 548
模仿网站页面作业
zimage 和 bzimage 区别
就你了，小样
12-26 8569
在网络中，不少服务器采用的是Linux系统。为了进一步提高服务器的性能，可能需要根据特定的硬件及需求重新编译Linux内核。编译Linux 内核，需要根据规定的步骤进行，编译内核过程中涉及到几个重要的文件。比如对于RedHat Linux，在/boot目录下有一些与Linux内核有关的文件，进入/boot执行。 　　编译过RedHat Linux内核的人对其中的System.map、vmlinu
Web-Day01-20210105
Fosyme的博客
01-05 245
Web-Day01-20210105 文章目录Web-Day01-20210105HTML元素块级元素内联元素超链接 ``列表图片 ``表格 ``作业C语言训练行测-数量关系行测-判断推理 HTML元素 html 根元素 head 头部 meta 页面信息 title 页面标题 style 页面CSS风格 body 页面主体 块级元素 h1-h6 标题1-6 p 段落 div 容器 hr 水平线 address 地址 blockquote 段落引用 code 代码块 pre 预格式化 内
网络程序设计期末大作业——高性能网络并发处理
qq_45753047的博客
12-23 1299
高性能服务器的编写有多种方式，此处仅仅采用了基于Reactor模式实现的TCP网络编程库，围绕Multi-reactor模型进行展开，通过one loop per thread的方式工作，在多个细节上提高了运行性能。今后可能会完善http模块，rpc模块以及内存池等。
docker中 gitlab 安装、配置和初始化
jclee95的个人博客
02-18 5624
配置文件 /etc/gitlab/gitlab.rb： 当然你也可以使用 桌面端的 VSCode 链接dockeer 打开，显示效果比 vim 更好： 然后今天主要记录以下这些配置项的注释都说了什么，下次好直接配置：
2021年最新总结，腾讯、阿里、美团、百度、字节跳动、京东等技术面试题，以及答案，专家出题人分析汇总。持续更新中。
码农code之路
02-08 2369
阿里篇 华为篇 百度篇 腾讯篇 美团篇 字节跳动篇 滴滴篇 京东篇 MySQL篇 Redis篇 MongoDB篇 Zookeeper篇 Nginx篇 算法篇 内存篇 cpu篇 磁盘篇 网络通信篇 安全篇 并发篇 阿里篇 1.1.1 如何实现一个高效的单向链表逆序输出？ 1.1.2 已知sqrt(2)约等于1.414，要求不用数学库，求sqrt(2)精确到小数点后10位 1.1.3 给定一个二叉搜索树(BST)，找到树中第 K 小的节点 1.1.4 LRU缓存机制
常见端口表汇总
威力的BLOG空间
09-03 3118
常见端口表汇总 1　tcpmux　TCP Port Service Multiplexer 传输控制协议端口服务多路开关选择器 2　compressnet　Management Utility　　　　 compressnet 管理实用程序 3　compressnet　Compression Process　　　　压缩进程 5　rje　Remote Job Entry　　　　　　　　　 远程作业
信息检索与利用（第三版）第五章 信息法与综合性信息检索
热门推荐
qq494370的博客
04-12 3万+
第五章 信息法与综合性信息检索 目录： 5.1 信息法概述 5.1.1 信息法的概念 从广义上讲，信息法是调整信息活动中产生的各种社会关系的法律规范的总称。 一般来说，信息法由信息资源管理法、政府信息公开法、信息保密法、大众传播法、知识产权法、网络信息法等组成，涉及宪法、法律、行政法规、部门规章、地方行政和规章在内的所有关于信息活动和信息工作的法律法规。 5.1.2 信息法律关系 信息法律关系...
计算机端口详解
墨鱼菜鸡
07-11 7243
一、摘要 计算机 "端口" 是英文 port ，可以认为是计算机与外界通讯交流的出口。 其中硬件领域的 端口 又称 接口，如：USB端口、串行端口等。软件领域的 端口 一般指网络中面向连接服务和无连接服务的通信协议端口，是一种抽象的软件结构，包括一些 数据结构 和 I/O(基本输入输出)缓冲区。 面向连接 和 无连接 协议(Connection－Or...
【前端基础】CSS进阶
qq_41413652的博客
11-01 899
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
前端学习Day10 CSS盒子属性（附练习版）
As977_的博客
11-02 493
medium 为默认宽度，thin 为小于默认宽度，thick 为大于默认宽度。⚠️：要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为absolute。在web页面中，“盒子”的结构包括厚度、边距、填充等元素，引申到CSS中，就是border、margin和padding。对于任何盒子，都可以分别设定4条边的padding、border和maegin，实现各种各样的排版效果。length 由浮点数字和单位标识符组成的长度值，不允许负值。
第八章 利用CSS制作导航菜单课后习题
2302_80786141的博客
11-01 781
【代码】第八章 利用CSS制作导航菜单课后习题。
CSS例子: 横向排列的格子
11-01 382
【代码】CSS例子: 横向排列的格子。
CSS弹性布局：灵活布局的终极指南
最新发布
weixin_44520557的博客
11-06 1187
在网页设计中，CSS 弹性布局（Flexbox）是一个不可或缺的工具。它能帮助你轻松地排列和对齐元素，尤其是在响应式设计中表现出色。今天，我们就来深入探讨一下 Flexbox 的各个属性，让你彻底掌握这个强大的布局工具。
第8章利用CSS制作导航菜单(第八次作业)
H2629896520的博客
11-01 663
【代码】第8章利用CSS制作导航菜单(第八次作业)
CSS【二】与盒子模型
2302_79986066的博客
11-02 714
div id="div文件01" class="div文件01" style="background-color: darkblue;border:10px solid[线形] 颜色默认情况下与字体颜色保持一致。4 外边框【margin】:看不见摸不着的空气墙[元素与元素之间的距离]选择符1 + 空格 + 选择符2[包含关系]【双标签：标签体可以撑起元素的高度或宽度】2 颜色[color]/*后代选择器 复杂选择器: 缩小范围。padding-top:上。2 内边框【padding】/*内边框 上*/
利用Spring Webflow实现CAS登录流程详解
本文主要探讨了CAS (Central Authentication Service) 原理、Webflow、MVC架构以及IoC在登录流程中的应用。CAS是一种身份验证系统，用于集中管理和授权用户的访问，确保单点登录(Single Sign-On, SSO)的功能。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值