UI 软件 设计 网页基本元素设计(二)
目录 基本菜单设计 1 多级下拉菜单设计 2 练习 3 小结 4 — * —
设计竖直排列菜单 UI DESIGN <UL>称为无序清单标记 : <ul>是项目列表,<li>是列表项,项目列表就是用符号来列的,所以你列出来默认的就是黑点,还有一个是<ol>这个是编号列表,用数字来列的,也是用<li>做列表项 基本菜单设计 — * —
UI DESIGN 设计竖直排列菜单 #box{width:120px; font-size:12px;font-family:"宋体";} <div id="box"> <ul> <li><a href="#">首页</a></li> <li><a href="#">音乐MP3</a></li> <li><a href="#">个人相册</a></li> <li><a href="#">我的博客</a></li> <li><a href="#">我的空间</a></li> </ul> </div> 基本菜单设计 — * —
UI DESIGN 设计竖直排列菜单 #box ul { margin:0px; padding:0px; list-style-type:none; } #box li { border-bottom:#ed9f9f solid 1px; /*添加下划线*/ 基本菜单设计 — * —
display:block; /*区块显示*/ padding:5px 5px 5px 8px; text-decoration:none; 设计竖直排列菜单 UI DESIGN #box li a { display:block; /*区块显示*/ padding:5px 5px 5px 8px; text-decoration:none; border-left:12px solid #711515; /*左边的粗红边*/ border-right:1px solid #711515; /*右侧阴影*/ } 基本菜单设计 — * —
UI DESIGN 设计竖直排列菜单 #box li a:link { /*连接显示*/ background-color:#c11136; /*设置背景颜色*/ color:#ffffff; /*改变文字颜色*/ } ,#box li a:visited { /*鼠标指针点击后*/ background-color:#c11136; color:#ffffff; #box li a:hover { /*鼠标指针经过时*/ background-color:#990020; color:#ffff00; 基本菜单设计 — * —
横排菜单只需要设置<li>标记为作浮动就行 #box li { float:left; } 设计横排菜单 UI DESIGN 横排菜单只需要设置<li>标记为作浮动就行 #box li { float:left; } 基本菜单设计 — * —
设计多级下拉菜单 UI DESIGN 了解下拉菜单的设计 多级下拉菜单设计 — * —
http://www.51xuediannao.com/js/nav/ 使用已有特效菜单放置自己网页 学习与练习 UI DESIGN http://www.51xuediannao.com/js/nav/ 使用已有特效菜单放置自己网页 基本菜单设计 — * —
Thank You