深入显出DIV+CSS（二）：网页banner设计
日期：2014-05-17 浏览次数：20590 次
深入浅出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的使用
- 2楼jyhye8分钟前
- 真难看哦~~~~~~~~~~
- 1楼xqf30910分钟前
- 不错，抢个沙发
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
