深度理解CSS样式表，内有彩蛋....

时间：2021-12-10 05:21:01
<!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" style="width:100px; height:100px; border:1px red solid;">内联样式表</div>

        <div class="divclassB">内嵌样式表</div>

        <div class="divclassC"></div>

        <div class="divclassD" id="DD" name="dd"></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 id="nav">

    	<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>

　　

相关文章