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