一、观察分析页面布局

可以从上至下分为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. Java 内存溢出（java.lang.OutOfMemoryError）情况总结

    最近做一个项目,因为分了十几个模块,但是每次在Eclipse中启动Tomcat必须加载四五个模块,这样出现了 java.lang.OutOfMemoryError 原因是Eclipse中Tomcat设 ...

  2. HTTP是什么？，GET与POST区别？

    HTTP是什么? 超文本传输协议(HTTP),目的是保证客户端与服务器之间的通信. 工作方式是客户端与服务器之间的请求-应答协议. web浏览器可能是客户端,计算机上的网络应用程序也可能作为服务器端. ...

  3. PAT 乙级 1041 考试座位号(15) C++版

    1041. 考试座位号(15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 每个PAT考生在参加考试时都会被分 ...

  4. redis安装，修改配置文件，多实例部署 redis-server

    redis 安装 解压: [root@Aliyun software]# tar -xvf redis-3.2.11.tar.gz 进入redis根目录: [root@Aliyun software] ...

  5. Zabbix 添加主机

    #1 #2

  6. Scrapy实战篇（八）之Scrapy对接selenium爬取京东商城商品数据

    本篇目标:我们以爬取京东商城商品数据为例,展示Scrapy框架对接selenium爬取京东商城商品数据. 背景: 京东商城页面为js动态加载页面,直接使用request请求,无法得到我们想要的商品数据 ...

  7. [UE4]AWP组合

    AWP狙击枪可以由主枪和镜头模型组合而成. 一.主枪 二.镜头组合

  8. [UE4]自动旋转组件

  9. iis ajax post 跨域问题解决

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

  10. supervisor管理hive metastore和hive server2进程

    1. hive_metastore.ini [program:hive_metastore] environment = JAVA_HOME=/usr/java/jdk1..0_172-amd64,H ...