一、观察分析页面布局

可以从上至下分为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. 10分钟复习javaweb

    html:是网页的骨架,静态网页初步的轮廓,简单粗糙,僵硬又没有美感.表单的标签<form>,里面的<input>很常用,里面有type属性等css:为了更加灵活,常与div一 ...

  2. PAT 乙级 1019 数字黑洞 (20) C++版

    1019. 数字黑洞 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 给定任一个各位数字不完全相同的4位 ...

  3. chrome 抓包的小功能--preserve log (记录页面跳转后，所有的抓包记录)

    1.记录页面跳转后,所有的抓包记录,勾上

  4. [UE4]widget事件：On Mouse Enter、On Move Leave、Set Color And Opactiy

    只要是widget对象,都具有On Mouse Enter.On Move Leave事件

  5. Mybatis 系列1-环境搭建

    [Mybatis 系列10-结合源码解析mybatis 执行流程] [Mybatis 系列9-强大的动态sql 语句] [Mybatis 系列8-结合源码解析select.resultMap的用法] ...

  6. （转）开源OpenWRT知识

    原博地址:http://www.thinkingquest.net/article/466 我们都需要使用google提供的搜索,gmail等优质服务.但是由于方墙的存在,使得大家各自搞各自的FQ办法 ...

  7. adb显示 部分乱码修改方法

    用windows自带的命令行[cmd]软件链接adb 设备后,部分显示乱码,如下图片所示: 图1 修改方法如下: alias ls='busybox ls --color=never' 修改后显示正常 ...

  8. SAS DATA ENCODING 解决odbc乱码问题

    首先获取编码格式: %PUT %SYSFUNC(getOption(ENCODING)); libname findoout ODBC datasrc=SurveyReport user=shendu ...

  9. HBase分布式集群部署与设计

    先是把cdh版本的hbase上传上来 把安装吧的权限设置一下 解压 把没用的东西干掉 hbase的官网 配置文件 到hbase-site.xml 下面我不基于HA配置了 把hbase分发到其他两个节点 ...

  10. JVM总结-字节码

    在运行过程中,每当调用进入一个 Java 方法,Java 虚拟机会在当前线程的 Java 方法栈中生成一个栈帧,用以存放局部变量以及字节码的操作数.这个栈帧的大小是提前计算好的,而且 Java 虚拟机 ...