UI 软件 设计 网页基本元素设计（二）.

Presentation on theme: "UI 软件 设计 网页基本元素设计（二）."— Presentation transcript:

1 UI 软件 设计 网页基本元素设计（二）

2 目录 基本菜单设计 1 多级下拉菜单设计 2 练习 3 小结 4 — * —

3 设计竖直排列菜单 UI DESIGN <UL>称为无序清单标记 ： 　　<ul>是项目列表，<li>是列表项，项目列表就是用符号来列的，所以你列出来默认的就是黑点，还有一个是<ol>这个是编号列表，用数字来列的，也是用<li>做列表项 基本菜单设计 — * —

4 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> 基本菜单设计 — * —

5 UI DESIGN 设计竖直排列菜单 #box ul { margin:0px; padding:0px;
list-style-type:none; } #box li { border-bottom:#ed9f9f solid 1px; /*添加下划线*/ 基本菜单设计 — * —

6 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; /*右侧阴影*/ } 基本菜单设计 — * —

7 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; 基本菜单设计 — * —

8 横排菜单只需要设置<li>标记为作浮动就行 #box li { float:left; }
设计横排菜单 UI DESIGN 横排菜单只需要设置<li>标记为作浮动就行 #box li { float:left; } 基本菜单设计 — * —

9 设计多级下拉菜单 UI DESIGN 了解下拉菜单的设计 多级下拉菜单设计 — * —

10 http://www.51xuediannao.com/js/nav/ 使用已有特效菜单放置自己网页
学习与练习 UI DESIGN 使用已有特效菜单放置自己网页 基本菜单设计 — * —

11 Thank You