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

2018-06-22 05:05:53来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折


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

  

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:对于表单的一些想法

下一篇:MongoDB常用操作--数据库