CSS布局实例 简洁的效果 火红的围城
来源:互联网 发布:java登录界面复杂代码 编辑:程序博客网 时间:2024/04/29 13:08
在前面的文章中学习《用列表ul制作CSS横向菜单的基础知识》http://www.52css.com/article.asp?id=395。以及《蓝绿色调》http://www.52css.com/article.asp?id=396 《会动的小竖条》http://www.52css.com/article.asp?id=401 《红蓝炫》http://www.52css.com/article.asp?id=404 等等一些CSS横向菜单的制作方法。今天我们继续讨论CSS横向菜单的制作,简洁的效果 火红的围城。www.52css.com原创,转载请注明出处。效果图如下:
HTML代码我们就飘过吧,都成了老生常谈了。不清楚大家会不会厌倦。但知道是需要多巩固的,尤其是你认为已经掌握了的知识,在实际操作的时候就很可能在这些小问题上出现问题。而且些微的变化往往形成完全不同的视觉效果,我们除了掌握编码的知识,更应该认识网页制作工作的乐趣,不唠叨了,让我们上路吧,看CSS代码:
我们今天换个花样,以代码块的形式向大家介绍各区域字母的意义何在:
1、整体布局声明,文字大小及居中。www.52css.com原创,转载请注明出处。
2、声明body的背景色,此例中,好象背景有无颜色并不重要,但我们还是这样设置吧。
3、菜单列表UL的一些设置,宽度为700px,距顶20并左右居中对齐,底部不作声明即设置成零。
背景色为#f60,我们那火红的融炉就是它营造的。设置填充,上下8px、左右12px。
4、菜单列表项LI的设置,内联对象并取消列表项预设标记。
5、设置菜单链接元素、已访问元素的样式。www.52css.com原创,转载请注明出处。
向左浮动,右边距为8px,让各“城”之间有一定的距离,不要“城城相连”。
设置填充上下2px、左右5px。取消链接文字的下划线。
文字颜色设置为白色#fff。“砌城墙”外边框1px的实线。
什么?边框的颜色与背景色一样了?确实是一样了!
但这样不会出问题,下面我们有一个小试验,如果去掉这个边框的设置,
菜单会让你有触发“地震”的感觉,我们这样设置是为了占位。
6、菜单链接的激活HOVER效果,文字颜色变了一点儿,“城墙”即外边框成为白色。
7、菜单的当前页效果。文字颜色火红火红的,“城墙”即外边框成为白色,内部背景一片惨白。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style type="text/css">
* {
font-size:12px;
text-align:center;
}
body {
background:#f0f0f0;
}
#nav {
width:700px;
margin:20px auto 0 auto;
background:#f60;
padding:8px 12px;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
margin-right:8px;
padding:2px 5px;
text-decoration: none;
color:#fff;
}
#nav li a:hover {
color:#ff0;
border:1px solid #fff;
}
#nav li a#current {
color:#c00;
border:1px solid #fff;
background:#fff;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.52css.com/" id="current">52CSS.com 首页</a></li>
<li><a href="http://www.52css.com/">Div+CSS教程</a></li>
<li><a href="http://www.52css.com/">CSS布局实例</a></li>
<li><a href="http://www.52css.com/">CSS2.0教程</a></li>
<li><a href="http://www.52css.com/">CSS酷站欣赏</a></li>
</ul>
</body>
</html>
HTML代码我们就飘过吧,都成了老生常谈了。不清楚大家会不会厌倦。但知道是需要多巩固的,尤其是你认为已经掌握了的知识,在实际操作的时候就很可能在这些小问题上出现问题。而且些微的变化往往形成完全不同的视觉效果,我们除了掌握编码的知识,更应该认识网页制作工作的乐趣,不唠叨了,让我们上路吧,看CSS代码:
Example Source Code [www.52css.com]
* {
font-size:12px;
text-align:center;
}
body {
background:#f0f0f0;
}
#nav {
width:700px;
margin:20px auto 0 auto;
background:#f60;
padding:8px 12px;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
margin-right:8px;
padding:2px 5px;
text-decoration: none;
color:#fff;
border:1px solid #f60;
}
#nav li a:hover {
color:#ff0;
border:1px solid #fff;
}
#nav li a#current {
color:#c00;
border:1px solid #fff;
background:#fff;
}
font-size:12px;
text-align:center;
}
body {
background:#f0f0f0;
}
#nav {
width:700px;
margin:20px auto 0 auto;
background:#f60;
padding:8px 12px;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
margin-right:8px;
padding:2px 5px;
text-decoration: none;
color:#fff;
border:1px solid #f60;
}
#nav li a:hover {
color:#ff0;
border:1px solid #fff;
}
#nav li a#current {
color:#c00;
border:1px solid #fff;
background:#fff;
}
我们今天换个花样,以代码块的形式向大家介绍各区域字母的意义何在:
1、整体布局声明,文字大小及居中。www.52css.com原创,转载请注明出处。
2、声明body的背景色,此例中,好象背景有无颜色并不重要,但我们还是这样设置吧。
3、菜单列表UL的一些设置,宽度为700px,距顶20并左右居中对齐,底部不作声明即设置成零。
背景色为#f60,我们那火红的融炉就是它营造的。设置填充,上下8px、左右12px。
4、菜单列表项LI的设置,内联对象并取消列表项预设标记。
5、设置菜单链接元素、已访问元素的样式。www.52css.com原创,转载请注明出处。
向左浮动,右边距为8px,让各“城”之间有一定的距离,不要“城城相连”。
设置填充上下2px、左右5px。取消链接文字的下划线。
文字颜色设置为白色#fff。“砌城墙”外边框1px的实线。
什么?边框的颜色与背景色一样了?确实是一样了!
但这样不会出问题,下面我们有一个小试验,如果去掉这个边框的设置,
菜单会让你有触发“地震”的感觉,我们这样设置是为了占位。
6、菜单链接的激活HOVER效果,文字颜色变了一点儿,“城墙”即外边框成为白色。
7、菜单的当前页效果。文字颜色火红火红的,“城墙”即外边框成为白色,内部背景一片惨白。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style type="text/css">
* {
font-size:12px;
text-align:center;
}
body {
background:#f0f0f0;
}
#nav {
width:700px;
margin:20px auto 0 auto;
background:#f60;
padding:8px 12px;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
margin-right:8px;
padding:2px 5px;
text-decoration: none;
color:#fff;
}
#nav li a:hover {
color:#ff0;
border:1px solid #fff;
}
#nav li a#current {
color:#c00;
border:1px solid #fff;
background:#fff;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.52css.com/" id="current">52CSS.com 首页</a></li>
<li><a href="http://www.52css.com/">Div+CSS教程</a></li>
<li><a href="http://www.52css.com/">CSS布局实例</a></li>
<li><a href="http://www.52css.com/">CSS2.0教程</a></li>
<li><a href="http://www.52css.com/">CSS酷站欣赏</a></li>
</ul>
</body>
</html>
- CSS布局实例 简洁的效果 火红的围城
- 干净简洁的CSS表单设计实例
- 火红的夕阳刚刚落山
- 纯CSS简洁的TAB切换效果代码
- 纯CSS实现的右侧底部简洁悬浮效果
- CSS布局实例 个非常棒的DIV+CSS导航条效果!
- CSS布局实例 个非常棒的DIV+CSS导航条效果!
- CSS实例(五):简洁的栏目实现方式
- CSS 简洁表单布局
- CSS布局--overflow:hidden的清除效果
- 10条火红的新年祝福短信
- 学会使用css缩写div+css布局代码(使你的代码更加简洁)
- DIV+CSS布局网页的一个实例
- CSS简单的页面布局实例
- IT的围城
- 难以突破的围城
- 程序员的“围城”
- 围城的那些事
- XHTML教程 CSS网页布局中HTML标签的语义(二)
- 关于源级别(Compiler compliance level)
- XHTML教程 CSS网页布局中HTML标签的语义(一)
- c#2.0 工厂方式创建泛型类的实例
- CSS布局实例 个非常棒的DIV+CSS导航条效果!
- CSS布局实例 简洁的效果 火红的围城
- POJ推荐50题
- c++
- POJ各题算法分类和题目推荐
- c++ 用Visual C++打造IE浏览器
- 开发语言和工具最新文章
- ISO C99中的宽字符工具
- 编程是一门艺术
- 通过七个关键编程技巧得益于静态内容