我的母校zbvc试做

一、观察分析页面布局

可以从上至下分为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试做的更多相关文章

2017国家集训队作业Atcoder题目试做
2017国家集训队作业Atcoder题目试做虽然远没有达到这个水平,但是据说Atcoder思维难度大,代码难度小,适合我这种不会打字的选手,所以试着做一做不知道能做几题啊在完全自己做出来的题前面 ...
试做Chrome插件——whatweb的chrome插件(从老博客转)
引子最近一个月每天早上在学Javascript,刚学完基础语法和一点点jQuery,今天忍不住写个Chrome玩玩看看自己对JavaScript的掌握怎么样了. 目标考虑了一下,打算做个小东西,但 ...
菜鸟试做GUI简单数据库查询界面 python+tkinter+mysql
一.准备工作: 1.安装mysql3.7,创建一个test数据库,创建student表,创建列:(列名看代码),创建几条数据 (以上工作直接用navicat for mysql工具完成) 二.代码: ...
itnba试做
http://www.itnba.com/ 首先标题.ico添加 <link href="title.ico" rel="shortcut icon" / ...
angularjs之filter过滤器
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...
单独编译使用WebRTC的音频处理模块
块,每块个点,(12*64=768采样)即AEC-PC仅能处理48ms的单声道16kHz延迟的数据,而 - 加载编译好的NS模块动态库接下来只需要按照此文的描述在 android 的JAVA代码 ...
成功的背后 !( 致给所有IT人员)
转载了这篇文章,希望能对自己和看到这篇博客的人有所激励. 成功的背后,有着许多不为人知的故事,而正是这些夹杂着泪水和汗水的过去,才成就了一个个走向成功的普通人. ------------------- ...
TY创新D总个人经历谈
这是深圳一个公司的老板(就叫D总吧)在吃饭间和我们讲起的他的个人经历,这中间个人的苦辣酸甜,有些意思,值得玩味,就做了个实录. D总:我当时做餐饮是在我第一次创业失败之后.我做的是一家火锅店. 这家餐 ...
APIO2013 tasksauthor
喜闻乐见的提答题,这道题还是蛮有趣的数据结构题写得心塞,来一道提答意思意思如果喜欢这类题的话还可以去做做uoj83. 这题是给出了两个问题,一个最短路,一个无向图染色问题. Data 1 Floy ...

随机推荐

Mongo查询分组
db.test.aggregate( {'$match':{"url":/http:\/\/www.baidu.cn\/member\/T107581\//}}, {'$group ...
jQuery绑定和解绑点击事件及重复绑定解决办法
原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...
folly无锁队列正确性说明
folly无锁队列是facebook开源的一个无所队列,使用的是单向链表,通过compare_exchange语句实现的多生产多消费的队列,我曾经花了比较多的时间学习memory_order的说明,对 ...
方法 - ShellCode测试
机器码->汇编 1 // ShellCode测试.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <windo ...
[UE4]暂停游戏、退出游戏、游戏输入模式
游戏主界面WB_Main蓝图 Set Game Paused:暂停游戏 Show Mouse Cursor:显示鼠标 Set Input Mode:设置游戏输入模式(游戏和UI).仅仅游戏.仅仅UI( ...
[UE4]Overlay容器：图片随着其他容器（比如Vertical Box）大小而同步改变
第5章 IP地址和子网划分（4）_超网合并网段
7. 超网合并网段 7.1 合并网段 (1)子网划分是将一个网络的主机位当网络位,来划分出多个子网.而多个网段合并成一个大网段,合并后的网段称为超网. (2)需求分析某企业有一个网段,该网段有200 ...
spring 中几种注解的说明
1.@controller 控制器(注入服务) 2.@service 服务(注入dao) 3.@repository dao(实现dao访问) 4.@component (把普通pojo实例化到spr ...
深度学习 + OpenCV，Python实现实时视频目标检测
使用 OpenCV 和 Python 对实时视频流进行深度学习目标检测是非常简单的,我们只需要组合一些合适的代码,接入实时视频,随后加入原有的目标检测功能. 在本文中我们将学习如何扩展原有的目标检测项 ...
SpringBoot 实现前后端分离的跨域访问（CORS）
序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍简单来说,CORS ...

我的母校zbvc试做

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

随机推荐

热门专题