深入浅出DIV+CSS(二):网页banner设计
对于DIV+CSS概念上的论述另一片博客已经写了很多了:http://blog.csdn.net/cjl5678/article/details/7606229
下面,我自己敲了一个小demo,加强一下对于Div+Css的理解,同时了解一下这方面的使用技巧。实例主要是用于设置网站的Banner。
html 上面的代码:
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Banner设计</title><%--加入CSS引用--%><link href="../Banner/Banner.css" rel="stylesheet" type="text/css" /></head><body><div id="banner"><div id="logo"><img src="logo.jpg" /></div><%--菜单栏--%><ul><li><a href="#">首 页</a></li><li><a href="#">学生信息</a></li><li><a href="#">考勤验证</a></li><li><a href="#">学习计划</a></li><li><a href="#">资料管理</a></li></ul></div></body></html>CSS代码:
body{/*背景效果设置*/background-image:url(backgroundimage.jpg);}#banner{/* banner整体布局 */text-align:center;position:absolute;/*设置网页居中*/width:700px;margin-left:-350px;left:50%;}ul{list-style:none;margin-top:2px;margin-left:-41px;}li{/* 清除列表格式 */list-style:none;margin:1px;float:left;}a{/* 标签按钮样式设置*//*去除原有格式*/text-decoration:none;/*设置按钮新样式*/padding:3px;background-image:url(button.jpg);background-repeat:repeat-x;color:#FFFFFF;}a:hover{/* 鼠标盘旋事件,标签实现按钮效果 */text-decoration:none;background-image:none;background-color:#0099FF;color:#000000;}效果图:
实例中使用到的主要技巧:
(1)将标签实现按钮的效果
(2)嵌套ID的使用