我的母校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>

 

posted @ 2018-01-15 09:15  刘半封  Views(378)  Comments(0)  Edit  收藏  举报