一、观察分析页面布局
可以从上至下分为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>
