一、观察分析页面布局

可以从上至下分为6大部分

logo栏

menu菜单栏

slide幻灯片

news新闻区域

other其他

bottom底部

二、logo

分为三部分

①左侧logo

②中间logo

③右侧小菜单

右侧小菜单分三行，分别是：链接+链接+表单

<style>

*{margin:0 auto;padding: 0; font-family:"微软雅黑"}

#bgcolor{

        height: 100px;

        width: 100%;

        background: linear-gradient(#93BD95 10%,white 90%);

        position: absolute;

        z-index: -1;

}

/*顶部logo区域*/

    #logo{

            width: 1000px;

            height: 100px;

    }

    #logo_menu{

            width: 240px;

            height: 100px;

            float: right;

            color: #008c8e;

            font-size: 14px;

            text-align: right;

            right: 0;

    }

    #logo_menu_one{

            margin-top: 15px;

    }

    #logo_menu_two{

            margin-top: 5px;

    }

    #logo_menu form{

            margin-top: 5px;

    }

    #btn_text{

            width: 154px;

            height: 22px;

    }

    #btn_image{

            width: 50.52px;

            height: 20px;

            line-height: 20px;

            vertical-align: middle;

    }

</style>

<body>

<div id="bgcolor"></div>

<!--顶部logo区域-->

<div id="logo">

    <img src="logo.gif" />

    <img src="zbvc-banner.gif" style="position: absolute; top: 10px;" />

    <div id="logo_menu">

        <div id="logo_menu_one">

            <a>淄博文明网</a>

            <a>信息公开</a>

        </div>

        <div id="logo_menu_two">

            <a>招标采购</a>

            <a>图书馆</a>

            <a>ENGLISH</a>

        </div>

        <form>

            <input type="text" name="vlaue" id="btn_text" />

            <input type="image" id="btn_image" src="search.gif" />

        </form>

    </div>

</div>

</body>

三、菜单栏下拉列表

共一行十一块

<style>

    #menu{

            width: 1000px;

            height: 35px;

    }

    .menu_menu{

            float: left;

            width: 90.89px;

            height: 31px;

            margin-top: 4px;

    }

    .menu_list{

            width: 90.89px;

            height: 31px;

            background: #008c8e;

            color: white;

            text-align: center;

            line-height: 30px;

            vertical-align: middle;

            font-size: 14px;

            font-weight: bold;

            border-bottom: 1px solid white;

            border-right: 1px solid white;

    }

    .menu_list:hover{

            background: #c9c9a7;

            cursor: pointer;

    }

    .menu_list_header div{

            width: 90.89px;

            height: 31px;

            background: #008c8e;

            text-align: center;

            line-height: 30px;

            vertical-align: middle;

            font-size: 14px;

            font-weight: bold;

            color: white;

            border-bottom: 1px solid white;

    }

    .menu_list_header div:hover{

            background: #c9c9a7;

            cursor: pointer;

            color: black;

    }

    .menu_list_header div{

            display:none;

    }

    .menu_menu:hover .menu_list_header div{

            display: block;

    }

</style>

<body>

<div id="menu">

    <div class="menu_menu">

        <div class="menu_list">新闻中心</div>

        <div class="menu_list_header">

            <div>图片频道</div>

            <div>学院新闻</div>

            <div>部门动态</div>

            <div>视频新闻</div>

            <div>媒体报道</div>

        </div>

    </div>

</div>

</body>

四、第四部分slide图片幻灯片轮播区

六个幻灯片，每个幻灯片分为两大部分图片区、序列区。图片区又分图片、标题。

<style>

    #slide, .slide_header, #slide img{

            width: 1000px;

            height: 300px;

    }

    .slide_text{

            width: 434px;

            height: 30px;

            float: left;

            position: relative;

            bottom: 30px;

            text-indent: 30px;

            font-size: 14px;

            font-weight: bold;

            color: white;

            z-index: 2;

    }

    #slide_background{

            width: 1000px;

            height: 30px;

            background: rgba(0,0,0,0.3);

            position: relative;

            bottom: 30px;

            z-index: 1;

    }

    #slide_list{

            width: 126px;

            height: 20px;

            position: relative;

            bottom: 52px;

            float: right;

            z-index: 2;

    }

    #slide_list span{

            color: white;

            font-size: 14px;

            display: block;

            float: left;

            margin: 1px;

            width: 19px;

            height: 19px;

            text-align: center;

            line-height: 19px;

            vertical-align: middle;

            z-index: 2px;

            background: #666;

    }

</style>

<body>

<div id="slide">

    <div class="slide_header">

        <img src="chuxin.jpg" />

        <div class="slide_text">不忘初心 牢记使命</div>

    </div>

    <div id="slide_background"></div>

    <div id="slide_list">

        <span>1</span>

        <span>2</span>

        <span>3</span>

        <span>4</span>

        <span>5</span>

        <span>6</span>

    </div>

</div>

</body>

我的母校zbvc试做的更多相关文章

  1. 2017国家集训队作业Atcoder题目试做

    2017国家集训队作业Atcoder题目试做 虽然远没有达到这个水平,但是据说Atcoder思维难度大,代码难度小,适合我这种不会打字的选手,所以试着做一做 不知道能做几题啊 在完全自己做出来的题前面 ...

  2. 试做Chrome插件——whatweb的chrome插件(从老博客转)

    引子 最近一个月每天早上在学Javascript,刚学完基础语法和一点点jQuery,今天忍不住写个Chrome玩玩看看自己对JavaScript的掌握怎么样了. 目标 考虑了一下,打算做个小东西,但 ...

  3. 菜鸟试做GUI简单数据库查询界面 python+tkinter+mysql

    一.准备工作: 1.安装mysql3.7,创建一个test数据库,创建student表,创建列:(列名看代码),创建几条数据 (以上工作直接用navicat for mysql工具完成) 二.代码: ...

  4. itnba试做

    http://www.itnba.com/ 首先标题.ico添加 <link href="title.ico" rel="shortcut icon" / ...

  5. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

  6. 单独编译使用WebRTC的音频处理模块

    块,每块个点,(12*64=768采样)即AEC-PC仅能处理48ms的单声道16kHz延迟的数据,而 - 加载编译好的NS模块动态库 接下来只需要按照 此文 的描述在 android 的JAVA代码 ...

  7. 成 功 的 背 后 !( 致给所有IT人员)

    转载了这篇文章,希望能对自己和看到这篇博客的人有所激励. 成功的背后,有着许多不为人知的故事,而正是这些夹杂着泪水和汗水的过去,才成就了一个个走向成功的普通人. ------------------- ...

  8. TY创新D总个人经历谈

    这是深圳一个公司的老板(就叫D总吧)在吃饭间和我们讲起的他的个人经历,这中间个人的苦辣酸甜,有些意思,值得玩味,就做了个实录. D总:我当时做餐饮是在我第一次创业失败之后.我做的是一家火锅店. 这家餐 ...

  9. APIO2013 tasksauthor

    喜闻乐见的提答题,这道题还是蛮有趣的 数据结构题写得心塞,来一道提答意思意思 如果喜欢这类题的话还可以去做做uoj83. 这题是给出了两个问题,一个最短路,一个无向图染色问题. Data 1 Floy ...

随机推荐

  1. 峰Redis学习（5）Redis 数据结构（Set的操作）

    第五节:Redis 数据结构之Set 类型 存储Set,这里的Set是无序的:  和List类型不同的是,Set集合中不允许出现重复的元素  Set可包含的最大元素数量是4294967295   存储 ...

  2. Flume的Sink

    一.Logger Sink 记录指定级别(比如INFO,DEBUG,ERROR等)的日志,通常用于调试 要求,在 --conf(-c )参数指定的目录下有log4j的配置文件 根据设计,logger ...

  3. ACM主要算法

    ACM主要算法ACM主要算法介绍 初期篇 一.基本算法(1)枚举(poj1753, poj2965)(2)贪心(poj1328, poj2109, poj2586)(3)递归和分治法(4)递推(5)构 ...

  4. Zabbix 卸载包 采用yum方式

  5. centos7搭建Gitlab服务器

    虚拟机配置信息 内存最好大于或等于4G,之前用2G内存搭建,访问出现502报错信息 不考虑selinux和防火墙问题 搭建之前最好关掉selinux和防火墙 临时调增selinux和关闭防火墙 下载G ...

  6. [UE4]修改相机裁剪距离

    在UE4中,相机距离一个物体太近,物体就会被裁剪,这个距离是一个全局设定,无法单个相机设置. 项目设置:

  7. [UE4]小技巧：自动添加函数返回值

    将一个变量拖放到返回节点上面会自动创建响应类型的返回值 同样的,函数参数也可以这样来做:

  8. sqlserver基本增删查语句

    use StudentManageDB go insert into Students (StudentName,Gender,Birthday,Age,StudentIdNo ,PhoneNumbe ...

  9. iis ajax post 跨域问题解决

    iis ajax post时会遇到跨域的问题 只需要在IIS中http响应头中增加:Access-Control-Allow-Origin:*,即可解决问题

  10. 轻型DNS服务器dnsmasq

    源码安装 源码下载地址 apt 安装 apt install dnsmasq 编辑配置 vim /etc/dnsmasq.conf resolv-file=/etc/resolv.dnsmasq.co ...