一、观察分析页面布局

可以从上至下分为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. Android开发之Activity生命周期篇

    一.Activity: 1.Activity:Activity是一个与用记交互的系统模块,几乎所有的Activity都是和用户进行交互的. 2.在Android中Activity主要是用来做控制的,它 ...

  2. bzoj4937: [Ceoi2016]popeala

    Description 你办了一场比赛,有n给人参加,只有一道题,有m个数据点,标号为1~m,每个测试点都有一个分数a[i].现在所 有选手已经提交了程序并且测评完了,你知道每个人都能通过哪些测试点. ...

  3. Mongodb条件查询Query的用法

    Query.All("name", "a", "b");//通过多个元素来匹配数组Query.And(Query.EQ("name ...

  4. 面试总结之PYTHON

    source code https://github.com/haoran119/interview/tree/master/interview%20summary%20of%20python [ZZ ...

  5. 远程服务器安装mysql数据库

    https://www.cnblogs.com/renjidong/p/7047396.html 1.新开的云服务器,需要检测系统是否自带安装mysql # yum list installed | ...

  6. 控件之ReleLayout属性

    Android:控件布局(相对布局)RelativeLayout RelativeLayout是相对布局控件:以控件之间相对位置或相对父容器位置进行排列. 相对布局常用属性: 子类控件相对子类控件:值 ...

  7. 知识点：java 注解 @SuppressWarnings

    前言: 简介:java.lang.SuppressWarnings是J2SE5.0中标准的Annotation之一.可以标注在类.字段.方法.参数.构造方法,以及局部变量上.作用:告诉编译器忽略指定的 ...

  8. Go语言 数据类型，流程控制

    Go语言 数据类型,流程控制 人生苦短,Let's Go ! package main // 必须要有一个main包 import "fmt" func main() { fmt. ...

  9. U3D学习11——nav导航和动画

    一.nav导航 1.nav mesh agent 2.off mesh link 3.navigation面板-areas标签的应用,导航分层 二.动画 1.avatar可重用. 2.Animator ...

  10. 电商系统架构总结1（EF）

    最近主导了一个电商系统的设计开发过程,包括前期分析设计,框架搭建,功能模块的具体开发(主要负责在线支付部分),成功上线后的部署维护,运维策略等等全过程. 虽然这个系统不是什么超大型的电商系统 数亿计的 ...