首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

深入显出DIV+CSS(二):网页banner设计

2012-08-28 
深入浅出DIV+CSS(二):网页banner设计对于DIVCSS概念上的论述另一片博客已经写了很多了:http://blog.csdn.n

深入浅出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;}
效果图:

深入显出DIV+CSS(二):网页banner设计

实例中使用到的主要技巧:

(1)将标签实现按钮的效果

(2)嵌套ID的使用

2楼jyhye8分钟前
真难看哦~~~~~~~~~~
1楼xqf30910分钟前
不错,抢个沙发

热点排行