深度理解CSS样式表，内有彩蛋....
<!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=utf-8" /> <title>CSS样式表</title> <style type="text/css"> .divclassB{ width:100px; height:100px; border:1px green dotted; background:#0F0 ; margin-top:10px; } *{ font:"黑体"; margin:0px; padding:0px;} div{ background-color:#C00} #DD{ width:100px; height:100px; border:1px green dotted; background:#0F0 ; margin-top:10px; } </style> <link href="Untitled-2.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="divclassA" >内联样式表</div> <div class="divclassB">内嵌样式表</div> <div class="divclassC"></div> <div class="divclassD" ></div> </body> </html>
样式表的几点常用：background-color： 背景颜色
background-image：url 设置图片背景
background-repeat平铺 repeat-x 横向平铺
background-position：center 背景居中
background-position：right top 图片在右上角
font-family 字体
font-weight：bold 加粗
font-style：italic 倾斜
text-decoration：underline下划线
text-align：center 水平居中对齐 left right
vertical-align：middle 垂直居中 top bottom
{margin in：opx auto；}自动居中
hover 鼠标移上去
position与absolute
外层没有position：absolute（或relative），div相对于浏览器定位。有的话，div相对于边框定位
.divclassA :hover{cursor:pointer}有小手
a{ text-decoration：none}有下划线
a：hover{text-decoration：underline}鼠标移上去有下划线
a：active{background：black}点击一瞬间背景变黑
a：visited 所有被访问的链接
导航栏简易制作
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#nav{
width:800px;
height:100px;
border:1px solid black;
margin:0px auto;
}
.nav-banner{
text-align:center;
line-height:100px;
width:20%;
height:100px;
float:left;
position:relative;
}
.nav-banner:hover{
background-color:#0F9;
color:#F00;
cursor:pointer;
}
</style>
</head>
<body>
<div >
<div class="nav-banner">第一导航</div>
<div class="nav-banner">第二导航</div>
<div class="nav-banner">第三导航</div>
<div class="nav-banner">第四导航</div>
<div class="nav-banner">第五导航</div>
</div>
</body>
</html>
- 上一篇 »CSS 学习笔记
- 下一篇 »解析CSS加密技术之“障眼法”