教你如何制作具有立体感效果的我们详细的解释与说明CSS代码，看它是如何控制这个UL LI打造CSS横向菜单的：* {font-size:12px text-align:center}#nav {width:520px border-bottom:1px solid #06f margin:20px auto 0 auto}#nav li {display: inline list-style-type: none}#nav li a:link,#nav li a:visited {float:left margin-right:5px padding:5px 10px 5px 8px text-decoration: none color:#000 background:#ffe67d border-left: 5px solid #fc0}#nav li a:hover {color:#060 border-left: 5px solid #f60}首先我们进行了整体布局声明，声明了文字大小及居中的对齐方式。需要说明的是，在ff中，我们设置margin:0 auto。即可实现容器的居中了，但在IE中，这还不够，还需要在父容器中声明text-align:center。这一点我们要记得，不然容易出错。声明UL无序列表的宽度为520ox，下边框一象素的实现，颜色为#06f。我们设置了nav这个UL，距离顶部为20px、距离底部为零，左右的距离为auto。这就实现了nav在水平方向内是居中的，垂直方面上距离浏览器窗口20px。声明LI列表项为内联（行内）显示，列表预设标记为无。我们重点需要理解#nav li a:link,#nav li a:visited的定义，设置链接的样式。向左浮动，并且右边距为5px。这是设置链接元素从左向右排行，并且元素之间的右部间隔5px。设置填充，顶5px、右10px、下5px、左8px。这一设置可以使我们的链接文字处于合适的位置。取消链接文字的下划线，并设置链接文字的颜色为#000。链接元素的背景色为#ffe67d。左边框五象素的实线，颜色为#fc0。这一句话形成了我们的小竖条。我们通过下面#nav li a:hover形成鼠标激活的样式。链接文字的颜色变为#060。左边框五象素的实线，颜色为#f60。这样我们会动的小竖条菜单就制作完成了。看最终的代码：<!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/htmlcharset=gb2312" /><title>免费模板</title><style type="text/css">* {font-size:12px text-align:center}#nav {width:520px border-bottom:1px solid #06f margin:20px auto 0 auto}#nav li {display: inline list-style-type: none}#nav li a:link,#nav li a:visited {float:left margin-right:5px padding:5px 10px 5px 8px text-decoration: none color:#000 background:#ffe67d border-left: 5px solid #fc0}#nav li a:hover {color:#060 border-left: 5px solid #f60}</style></head><body><ul id="nav"> <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></body></html>
步骤如下：
1、首先打开电脑上自带的记事本程序，然后输入html网页基本结构语句。<html><body></body></html>
2、由于css样式必须在标签<head></head>之间，因此我们点击<html>后面，输入<head></head>标签。
3、在head标签之间输入样式标签<style></style>,然后定义一些属性，例如
<style type="text/css">
body {background-color: yellow} 定义网页背景色为黄色；
h1 {background-color: #00ff00} 定义h1标签背景色为#00ff00；
h2 {background-color: transparent} 定义h2标签背景色为透明；
p {background-color: rgb(250,0,255)} 定义p标签背景色为rgb值；
p.no2 {background-color: graypadding: 20px} 这个定义class属性为no2的p标签背景色为灰色，并且边距为20px；
</style>
4、然后点击body标签后面输入正文标签内容，例如
<h1>这是KING</h1>
<h2>这是KING</h2>
<p>这是KING</p>
<p class="no2">这个KING设置20内边距。</p>
5、点击记事本菜单中的文件，选择另存为，把内容保存为html网页格式。双击打开预览效果。6、我们可以发现代码中两个同样的<p>标签显示的css样式却不同，区别就在于样式中定义的p.no2,这就是正文代码中class="no2"的优势所在，可以定义个性风格。
用CSS设置颜色与背景 颜色设置 背景设置 圆角边框和图像边框 二、用CSS设置图像效果 1.为图片添加边框 2.图片缩放 color属性是用于控制HTML元素内文本的颜色,取值可以使用下面的任意一种方式。 颜色名:直接使用颜色的英文名称作为属性值,例如,blue表示蓝色。 #rrggbb:用一个6位的十六进制数表示颜色,例如,#0000FF表示蓝色。 #rgb:是#rrggbb的一种简写方式,例如,#0000FF可以表示为#00F
