创建美观的网页导航栏代码分享
“一款漂亮导航栏”是一份网页设计资源,提供了用于创建美观导航栏的HTML和CSS代码。这个导航栏具有简洁的样式和鼠标悬停效果。 在这段代码中,我们可以学习到以下网页设计和CSS相关的知识点: 1. HTML基础结构:代码始于`<!DOCTYPE html>`声明,表示这是一个符合HTML5标准的文档。接着是`<html>`元素,它是整个HTML文档的根元素。`<head>`包含文档的元数据,如页面标题和CSS样式,而`<body>`则包含页面的实际内容。 2. 字符编码:`<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>`定义了文档的字符编码为GBK(GB2312),这是一种简体中文的编码方式,确保中文字符能正确显示。 3. CSS样式:在`<style>`标签内,我们看到了对元素样式的定义。CSS选择器如`*`(通用选择器)和`#info`(ID选择器)被用来设置元素的样式属性,如边距、填充、列表样式、字体大小等。 4. 浮动布局:`#info`元素设置了浮动(`float:left`),以便在页面中水平排列。`#infoli`元素也使用了浮动,使得导航链接可以在同一行显示。 5. 背景图像:导航栏背景通过`background`属性设置,`url(/upload/200732411541374.gif)`定义了背景图像的路径。`no-repeat`表示图像不重复,`left top`指定了图像的定位。 6. 链接样式:`#infolia`选择器定义了导航链接的样式,包括文字颜色、行高、内边距和背景图像。`:link`、`:visited`、`:hover`和`:active`伪类分别对应链接的未访问、已访问、鼠标悬停和活动状态,调整了背景图像的位置以实现悬停效果。 7. 目标属性:`<a href="http://www.jb51.net" target="_blank">`标签中的`target="_blank"`属性表示链接将在新窗口或标签页中打开,这样用户可以同时浏览多个页面。 8. 响应式设计:这段代码并未包含响应式设计的元素,如媒体查询,这意味着它可能在不同屏幕尺寸下的表现不如现代网站那样适应性好。 9. 列表无序符号:`list-style:none`用于移除`<ul>`列表的默认无序符号,使导航栏看起来更整洁。 10. 边框和宽度:`border`属性定义了元素的边框,`width`设置了元素的宽度。这些属性对于控制元素的外观和页面布局至关重要。 这个代码示例提供了一个简单的导航栏设计实例,展示了如何利用HTML和CSS来创建具有视觉吸引力和交互性的网页元素。对于初学者来说,这是一个很好的起点,可以了解和练习基本的网页设计技术。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style>
* {margin:0; padding:0; list-style:none;}
body{font-size:12px; margin:100px;}
#info{border:1px solid #BCFF1D; width:348px; background:#blue url(/upload/200732411541374.gif) no-repeat left top; float:left; }
#info ul{ margin:5px;width:338px}
#info li{ width:33%; height:40px; float:left;}
#info li a{ font-size:12px; font-weight:normal; line-height:35px; display:block;color:#000; text-decoration:none; padding-left:40px;background:url(/upload/200732411542811.gif) no-repeat;}
#info li a:link,#info li a:visited{background-position:center top}
#info li a:hover,#info li a:active{background-position:center bottom}
</style>
</head>
<body>
<div id="info">
<ul>
<li></li>
<li><a href="http://www.jb51.net" target="_blank">找工作</a></li>
<li><a href="http://www.jb51.net" target="_blank">找房子</a></li>
<li><a href="http://www.jb51.net" target="_blank">自行车买卖</a></li>
<li><a href="http://www.jb51.net" target="_blank">带车求职</a></li>
<li><a href="http://www.jb51.net" target="_blank">拼车上下班</a></li>
<li><a href="http://www.jb51.net" target="_blank">技能交换</a></li>
<li><a href="http://www.jb51.net" target="_blank">物品交换</a></li>
<li><a href="http://www.jb51.net" target="_blank">语言交换</a></li>
</ul>
</div>
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 0
- 资源: 1
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展