★为文本添加样式

本段落设置了各种常用的文本样式。本段落设置了各种常用的文本样式。本段落设置了各种常用的文本样式。本段落设置了各种常用的文本样式。本段落设置了各种常用的文本样式。本段落设置了各种常用的文本样式。

.text{ /*文本样式*/
	font-family:"Courier New","楷体_gb2312","黑体","宋体"; /*字体列表（字体家族）*/
	font-style:italic; /*字体样式：斜体，正常用normal*/
	font-weight:bold; /*字体加粗，正常用normal*/
	font-size:20px; /*字体大小：20像素*/
	line-height:2; /*2倍行高*/
	color:blue; /*字体颜色：蓝色*/
	background-color:yellow; /*背景颜色：黄色*/
	text-indent:2em; /*首行缩进：2个字*/
	text-align:left; /*文本左对齐*/
	text-decoration:underline; /*文本修饰：下划线，取消用none*/
}

★文本超出部分显示为省略号

本段落只在一行显示（不自动换行），超出宽度部分隐藏，并且文本超出部分显示为省略号。本段落只在一行显示（不自动换行），超出宽度部分隐藏，并且文本超出部分显示为省略号。

.ellipsis{ /*显示省略号*/
	display:block; /*显示为块级元素*/
	white-space:nowrap; /*文字间的空白距离：不换行*/
	overflow:hidden; /*超出部分：隐藏*/
	text-overflow:ellipsis; /*文本超出部分：省略号*/
}

★链接元素的五种状态（伪类选择符的使用）

百度 集美大学 理学院 未访问的空链接

.pseudo a{ /*pseudo类名下的所有a子孙元素*/
	display:inline-block; /*显示：行内块级元素*/
	padding:0.5em; /*内边距：0.5个字*/
	margin:0 1em; /*外边距：上（下）0，右（左）1个字*/
}
.pseudo a:link{ /*未访问的超链接*/
	color:red;
	text-decoration:none; /*文本修饰：无【清除默认的下划线】*/
}
.pseudo a:visited{/*已访问的超链接*/
	color:#f0f;
	text-decoration:line-through; /*文本修饰：删除线【由于浏览器安全性考虑，这条规则不起作用】*/
}
.pseudo a:focus, .pseudo a:hover{ /*获得焦点的超链接，鼠标悬停的超链接*/
	color:blue;
	text-decoration:overline; /*文本修饰：上划线*/
	outline:1px dashed blue;  /*轮廓：1像素 虚线 蓝色*/
}
.pseudo a:active{ /*激活的超链接*/
	color:yellow;
	background-color:blue;
}
注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后。可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括。

★无序列表项的浮动布局（产品广告布局方法）

【HTML部分】：
<div class="product-list"><ul>
<li><a href="##">产品1</a></li>
<li><a href="##">产品2</a></li>
<li><a href="##">产品3</a></li>
<li><a href="##">产品4</a></li>
<li><a href="##">产品5</a></li>
<li><a href="##">产品6</a></li>
</ul></div>

【CSS部分】：
.product-list{ /*产品列表类名*/
	width:600px;
	padding:10px;
	border:5px dotted gray; /*边框：5像素 点线 灰色*/
	background:#ccc;
	margin:0.5em auto; /*左右外边距设为auto，可使块级元素相对于其父元素水平居中*/
}
.product-list>ul{ /*product-list类名下的ul子元素*/
	list-style:none; /*清除默认的列表样式*/
	padding:0; /*消除其默认的内边距*/
	margin:0 -10px -10px 0; /*右、下外边距为负值，相当于宽、高分别向右、下扩展*/
	overflow:hidden; /*超出：隐藏【防止出现因其子元素浮动而导致高度为零的情况】*/
}
.product-list>ul>li{ /*product-list类名下的ul子元素的所有li子元素*/
	float:left; /*浮动：向左*/
	width:33.333333%; /*宽度：占父元素总宽度的1/3【即一行有3个li紧密并排】*/
}
.product-list>ul>li:first-child{ /*作为第一个孩子的li子元素*/
	width:100%; /*宽度：占满父元素的总宽度【即一行只有1个li】*/
}
.product-list>ul>li:nth-child(n+2):nth-child(-n+3){ /*作为第二、三个孩子的li子元素，相当于：.product-list>ul>li:nth-child(2), .product-list>ul>li:nth-child(3)*/
	width:50%; /*宽度：占父元素总宽度的1/2【即一行有2个li紧密并排】*/
}
.product-list>ul>li>a{ /*li子元素下的a子元素*/
	/*布局样式*/
	display:block; /*显示：块级元素*/
	margin:0 10px 10px 0; /*右、下外边距为10像素【这里要注意与上面ul元素的外边距相对应】*/
	/*外观样式，可根据需要做调整*/
	background-color:hsl(180,100%,50%); /*背景色：色相180（青色），饱和度100%，明度50%【相当于纯青色#0ff】*/
	border-radius:5px; /*边框半径：5像素*/
	height:150px;
	line-height:150px; /*行高与高度一致，可以使文本垂直居中*/
	text-align:center;
	text-decoration:none;
}
参考网页：CSS样式----浮动（图文详解）　　百度百科：HSL

★相对定位与绝对定位（下拉菜单）

【HTML部分】：
<div class="dropdown-menu"><ul>
<li><a href="##">主菜单1</a></li>
<li><a href="##">主菜单2</a><div>子菜单内容2<br><br><br><br><br></div></li>
<li><a href="##">主菜单3</a><div>子菜单内容3<br><br><br></div></li>
<li><a href="##">主菜单4</a></li>
</ul></div>

【CSS部分】：
.dropdown-menu{ /*下拉菜单类名*/
	width:600px;
	margin:0.5em auto;
	background:#ffc;
}
.dropdown-menu *{ /*下拉菜单类名下的所有子孙元素*/
	margin:0;
	padding:0;
}
.dropdown-menu>ul:after{ /*在下拉菜单类名下的ul子元素后面添加伪元素*/
	content:"."; /*内容：可以是任意字符串*/
	display:block;/*显示为块级元素*/
	font-size:0; /*字体大小为0【内容宽高即为0，使伪元素不可见，也不占空间】*/
	clear:both; /*清除两边的浮动【使ul元素的高度足以包围其浮动的子元素】*/
}
.dropdown-menu>ul>li{ /*主菜单项*/
	float:left;
	list-style-type:none; /*清除默认的列表样式*/
	width:25%; /*4个主菜单项等宽紧密并排*/
	position:relative; /*相对定位【为其子菜单div的绝对定位做准备】*/
	z-index:2;
}
.dropdown-menu>ul>li>a{ /*主菜单项里的超链接*/
	display:block;
	padding:5px 10px;
	border:1px solid #333;
	text-decoration:none;
	color:#000;
	position:relative;
	z-index:2; /*层级为第2层*/
}
.dropdown-menu>ul>li>a:hover{
	color:red;
}
.dropdown-menu>ul>li:not(:last-child)>a{ /*不是最后一个孩子的主菜单项里的超链接*/
	border-right:0;
}
.dropdown-menu>ul>li>a:not(:only-child){ /*不是唯一孩子的a元素，即具有子菜单*/
	padding-right:20px; /*给其后面的伪元素腾出空间*/
}
.dropdown-menu>ul>li>a:not(:only-child):after{ /*有子菜单的a元素后面添加伪元素*/
	content:'.';
	display:block;
	font-size:0; /*字体大小为0【即内容宽高为0】*/
	border:5px solid transparent; /*边框：5像素 实线 透明*/
	border-top:9px solid #900; /*上边框：9像素 实线 暗红色【形成一个高为9px，宽为10px的倒三角形】*/
	position:absolute;
	right:5px;
	top:50%;
	margin-top:-4px; /*绝对定位：靠右垂直居中*/
}
.dropdown-menu>ul>li>div{ /*子菜单容器div元素*/
	display:none; /*显示：无【即不可见】*/
	position:absolute; /*绝对定位*/
	left:0;
	top:100%; /*上位置：100%【即div上边缘与li下边缘重合】*/
	margin-top:-1px; /*上外边距取负值【即位置向上移动1px】*/
	z-index:1; /*层级为第1层【比a元素的层级小，则会被a元素部分挡住】*/
	width:200px;
	border:1px solid #333;
	background:#fff;
}
.dropdown-menu>ul>li:hover{ /*鼠标悬停的主菜单项*/
	background:#fff;
}
.dropdown-menu>ul>li:hover>a:not(:only-child){ /*鼠标悬停的主菜单项下的不是唯一孩子a子元素（即有子菜单）*/
	border-bottom-color:#fff; /*下边框颜色：白色【遮住了子菜单容器的部分边框，视觉效果是子菜单与相应的主菜单项融为一体】*/
}
.dropdown-menu>ul>li:hover>div{ /*鼠标悬停的主菜单项下的子菜单容器*/
	display:block; /*显示：块级【即让子菜单可见】*/
}
参考网页：详解CSS的相对定位和绝对定位

★固定定位、绝对定位、渐变背景、圆角边框、阴影、生成内容等（弹出提示框）

弹出提示框
X
提示内容
【HTML部分】：
<a href="javascript:void(0);" id="btn">弹出提示框</a>
<div class="alertWin" id="w1">
	<div><b>X</b><div>提示内容</div></div>
</div>

【CSS部分】：
.alertWin{
	position:fixed; /*固定定位*/
	top:0;
	right:0;
	bottom:0;
	left:0; /*占满整个窗口*/
	z-index:1000; /*层级很高，足以覆盖其它元素*/
	background-color:rgba(0,0,0,0.5); /*背景色：半透明黑色*/
	visibility:hidden; /*可见性：隐藏*/
}
.alertWin>div{
	width:400px;
	height:300px;
	background:url('f4.png') no-repeat left 20px bottom 20px/100px ,
		linear-gradient(to left bottom,#0ff,#00f);
		/*多重背景：第一层图像背景，不重复，定位在距离左下角20px处，背景大小设置为宽度100px（高度不设则按比例自动缩放）；第二层设置渐变色背景，方向指向左下角，从青色渐变到蓝色。*/
	border-radius:20px 20px 20px 5px; /*设置边框半径，顺序分别是：左上角、右上角、右下角、左下角*/
	position:absolute; /*绝对定位*/
	top:50%;
	margin-top:-150px;
	left:50%;
	margin-left:-200px; /*定位在其父容器正中央*/
	box-shadow:0 5px 20px 10px #0ff; /*盒阴影：右偏移0，下偏移5px，模糊20px，扩展10px，青色*/
}
.alertWin>div>b{
	display:block; /*显示为块级，这样才能设置其宽高*/
	width:40px;
	height:40px;
	border-radius:50%; /*边框半径为其宽高的一半，即形成一个圆*/
	background:radial-gradient(#009,#0ff); /*背景为放射状渐变，从中心的暗蓝色向四角渐变到青色*/
	color:#0ff;
	line-height:40px;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	font-family:"Arial";
	position:absolute; /*绝对定位*/
	right:10px; /*距离右边缘10px*/
	bottom:100%; /*距离底边缘100%，即定位到父元素的上方*/
	margin-bottom:20px; /*再上移20px*/
	cursor:pointer; /*光标为手型指向形状*/
}
.alertWin>div>b:after{ /*在b后面添加伪元素，画一竖直线*/
	content:'.';
	font-size:0;
	display:block;
	height:20px; /*得到宽度为0，高度为20px的矩形*/
	border-left:2px solid #0ff; /*只画左边框*/
	position:absolute;
	left:50%;
	margin-left:-1px; /*水平居中*/
	top:100%; /*定位在b元素下方*/
}
.alertWin>div>div{
	margin:20px; /*设置内容的外边距，这里也可以改成设置内边距*/
	text-shadow:-2px -2px 5px #ff0; /*文本阴影：右偏移-2px，下偏移-2px【即向左上角偏移2px】，模糊5px，黄色*/
}

【JavaScript部分】：
function $(sel){ return document.querySelector(sel); } //定义获取元素对象的方法
var a=$("#btn"); //获取a元素对象
var w1=$("#w1"); //获取提示框对象w1
var b=$("#w1>div>b"); //获取提示框内的b元素对象（关闭按钮）
a.onclick=function(){ //单击a元素对象时，显示提示框
	w1.style.visibility="visible";
};
b.onclick=function(){ //单击b元素对象时，隐藏提示框
	w1.style.visibility="hidden";
};