23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍...
生活随笔
收集整理的這篇文章主要介紹了
23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
01 復習內容
?????復習之前的知識點
02演示VS創建元素
???
?
03div和span區別
???
通過display屬性進行DIV與Span之間的轉換。div->span 設置display:inline ? ?span->div 設置display:block
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> </head> <body><div style="border:red solid 1px;height:200px;"><input type="button" name="name" value="我是按鈕，我驕傲"/></div><span>我也驕傲！<input type="button" name="name" value="我更驕傲"/></span>如果發現我邪惡了,請記住,我曾純潔過.傳智播客<div style=" width: 300px; height: 200px; background-color: Yellow; display: inline; ">官網</div>http://www.itcast.cn<br />傳智播客<span style=" width: 300px; height: 200px; background-color: Yellow; display: block; ">官網</span>http://www.itcast.cn</body> </html> View Code04 CSS中常用的幾個屬性
??? ?
05常見的幾個CSS屬性
??
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> </head> <body><div style="width: 500px; height: 300px; background-color: white; border: 1px solid red; color: black; cursor: pointer;"> 另外一種方法cursor: url(dinosaru.ani);<input type="button" name="name" value="我是老馬，點我，狠點" />如果我邪惡了，請記住，我曾經純潔過。<ul style="list-style-type:none;padding:0"><li>靠，又變帥了</li><li>靠，又變帥了</li><li>靠，又變帥了</li><li>靠，又變帥了</li><li>靠，又變帥了</li></ul><table style="border:1px red solid">區分border="1"， 只有外邊框，沒有單元格的邊框<tr><td>123456</td><td>123456</td><td>123456</td><td>123456</td></tr><tr><td>123456</td><td>123456</td><td>123456</td><td>123456</td></tr><tr><td>123456</td><td>123456</td><td>123456</td><td>123456</td></tr><tr><td>123456</td><td>123456</td><td>123456</td><td>123456</td></tr></table></div> </body> </html> View Code?
06.三個選擇器
?
?
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><!--第二種情況：寫CSS代碼，在本頁面上寫--><style type="text/css">#dv /*id選擇器*/{width: 300px;height: 200px;background-color:orange;border:1px solid red;}/*運用于全部的DIV控件層，但是如果同時存在ID選擇器及DIV層，則存在優先級設置樣式*/div /*標簽選擇器*/ {cursor: pointer;font-family: 全新硬筆行書簡;color: blue;}.cls /*類選擇器*/ {width: 300px;height: 200px;background-color: orange; /*當同時存在同一個屬性的時候，以排序后面的為準。*/}.cls1 /*同一個標簽，可以使用多個類選擇器*/{color: red;background-color: yellow; /*當同時存在同一個屬性的時候，以排序后面的為準。*/}/*#dv--表示的是ID選擇器，通常用在特定或者指定的某個元素上使用div--表示的是標簽選擇器，通常用在很多相同標簽上，希望這些標簽都是用一個標簽.cls--表示的是類選擇器，通常用在不同標簽上，一般是幾個標簽（不同）應用同一個樣式優先級別：第一種情況中的就近原則 >> ID選擇器最高 >> 類選擇器 >>標簽選擇器例子：第一步，如果div標簽，則一定會先設置了div標簽樣式，然后再覆蓋其它選擇器的樣式。*/</style></head> <body><!--第一種情況：寫CSS代碼，直接在HTML標簽里面填寫，--><div style="width:300px;height:200px;"><!--id選擇器-->老馬有才：文能提筆控蘿莉</div><!--第二種情況：寫CSS代碼，在本頁面上寫,使用ID選擇器，則樣式的優先級屬于ID選擇器--><div id="dv" ><!--id選擇器-->老馬有才：文能提筆控蘿莉</div><div class="cls cls1" > <!--/*同一個標簽，可以使用多個類選擇器*/-->老馬看到了老蘇洗澡/*當同時存在同一個屬性的時候，以排序后面的為準。*/</div><div>老馬看到了老蘇洗澡</div><div>老馬看到了老蘇洗澡</div><input class="cls" type="button" name="name" value="我是按鈕"/><input type="text" name="name" value="我是文本框"/><a href="http://www.xuanjics.com">玄機論壇</a> </body></html> View Code?
07其它選擇器
<!DOCTYPE html> <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">/*類名相同，但是不同標簽就應用不同的樣式，標簽+類選擇器*/input.cls {background-color: black;width: 200px;height: 100px;}div.cls {background-color: yellow;width: 500px;height: 300px;}/*類名相同，但是不同標簽就應用不同的樣式*/div p span /*包含選擇器（層次選擇器）,寫死了。*/{background-color: blue;}</style> </head> <body><input class="cls" type="button" name="name" value="我是按鈕。" /><div class="cls">我是層。</div><div><p><span>我是Span</span></p></div> </body> </html> View Code?
?
<!DOCTYPE html> <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">/*偽選擇器，不常用*/a:link{text-decoration:none;color:black;}a:hover {text-decoration:underline;color:red;}a:active {color:yellow;text-decoration:none;}a:visited {color:blue;text-decoration:underline;}</style> </head> <body><a href="http://www.xuanjics.com">玄機論壇，技術高手論壇</a> </body> </html> View Code?08幾種使用CSS樣式的方法
?
<!DOCTYPE html> <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">/*偽選擇器，不常用，第二種（頁面嵌入）使用CSS的方式*/a:link{text-decoration:none;color:black;}a:hover {text-decoration:underline;color:red;}a:active {color:yellow;text-decoration:none;}a:visited {color:blue;text-decoration:underline;}/*第二種（頁面嵌入）使用CSS的方式*/div {background-color: blue;width: 100px;height: 300px;} </style><!--/*第三種：使用CSS方式，外部引用*/--><link href="01.css" rel="stylesheet" /> ><!--/*當同時使用多個CSS文件的時候，則會合并到一個ALL.css中*/--><link href="All.css" rel="stylesheet" /> </head> <body><a href="http://www.xuanjics.com">玄機論壇，技術高手論壇</a><div style=" width:200px;height:500px;" > <!--第一種（元素內聯）使用CSS的方式，直接在標簽里面寫CSS樣式-->玄機論壇，技術高手論壇</div><div > 玄機論壇，技術高手論壇</div> </body> </html>01.cssdiv {background-color: yellow;width: 500px;height: 300px;}02.cssdiv {border:1px solid red;} all.cs@import url(01.css); @import url(02.css); View Code?
09 脫離文檔流
?
<!DOCTYPE html> <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">#dv1 {background-color: red;width: 300px;height: 150px;position: relative; /*脫離文檔流，相當于之前的位置，相對定位*/left: 100px; /*雖然已經脫離，但是后面的元素不會占了位置*/top: 50px;}#dv2 {background-color: green;width: 300px;height: 150px;position: absolute; /*脫離文檔流，絕對定位,相對于body*/left: 500px; /*已經脫離，則后面的元素會占了位置*/top: 50px;z-index: 1001;/*值越大就越上面*/}#dv3 {background-color: blue;width: 300px;height: 150px;position:fixed;/*脫離文檔流，固定定位，相對于瀏覽器平面*/}#dv4 {background-color: green;width: 300px;height: 150px;position: absolute; /*脫離文檔流，絕對定位,相對于body*/left: 500px; /*已經脫離，則后面的元素會占了位置*/top: 50px;z-index: 1000; /*值越大就越上面*/}</style> </head> <body><div id="dv1"></div><div id="dv2"></div><div id="dv3"></div> </body> </html> View Code?
11 div和CSS布局
?
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><!--<script type="text/javascript">window.onload = function() {document.onclick = function () {alert('我的范圍');};document.body.onclick = function () {alert('Body的范圍');};};</script>--></head> <body><div style="width: 90%; border: 1px solid red; margin: 0 auto; margin-bottom: 10px; "><!--margin: 0 auto; 設置居中顯示。margin-bottom:10px;設置倆個DIV距離--><img src="imgs/01.png" /></div><div><img src="imgs/02.png" /></div><div><img src="imgs/03.png" /></div><div><img src="imgs/04.png" /></div><div id="dvbig"style="border:1px solid red;"><div style="float:left;"><!--浮動向左邊靠--><img src="imgs/05.png" /></div><div style="float:left; margin-left:20px;"><!--浮動向左邊靠--><img src="imgs/06.png" /></div></div><div><img src="imgs/07.png" /></div> </body> </html> View Code12 浮動的問題
?
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> </head> <body>大家好，你們好，你好，我也好。下面的倆個DIV沒有內容，則會導致第三個DIV會出現混亂排序，需要清除浮動的效果。<div style="background:red;width:500px;height:200px;float:left;"></div><div style="background:green;width:500px;height:200px;float:right;"></div><div style="background:blue;width:500px;height:200px;clear:both;"><!--clear:both; 清除浮動，對于有時使用float會導致排序混亂的時候，則需要清除浮動。--></div> </body> </html> View Code?13. 盒子模型
?
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> </head> <body><div style="width:300px;height:200px;border:10px solid red "><input type="button" name="name" value="按鈕" style="width:100px;height:50px; border:5px solid blue; margin:50px;"/></div><!--div層，設置的大小，不包括邊框大小，只算空白部分。--><!--input，設置的大小，包括邊框大小。--> </body> </html> View Code?14.框架
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> </head> <!--frameset rows="30%,*">根據此例子，可以對頁面進行分塊。<frameset cols="30%,*"><frame src="08偽選擇器.html" /><frame src="13盒子模型.html" /></frameset><frameset cols="30%,30%,*"><frame src="13盒子模型.html" /><frame src="08偽選擇器.html" /><frame src="13盒子模型.html" /></frameset> </frameset>--><frameset rows="30%,70%" cols="50%,50%"><frame src="13盒子模型.html" noresize/><!--noresize,設置不可以拉動窗口。--><frameset cols="30%,*"><frame src="08偽選擇器.html" noresize /><frame src="13盒子模型.html" noresize /></frameset><noframes><body>當瀏覽器不支持框架時，則顯示這個body中內容。</body></noframes> </frameset></html> View Code?
15 介紹JavaScript
? ? 1.JavaScript基本語法
? ? 2.JavaScript Dom(JavaScript操作html頁面)
16 JS基本代碼
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><!--<script type="text/javascript"> 如果放在前面，則會卡住頁面加載信息。var newDate = new Date();alert(newDate.toLocaleDateString());alert(newDate.toLocaleTimeString());</script>--></head> <body></body> </html><!--script放在后面再加載，有利于客戶體驗。讓網頁頁面先加載，再加載JS代碼。--> <script type="text/javascript">var newDate = new Date();alert(newDate.toLocaleDateString());alert(newDate.toLocaleTimeString()); </script> <script type="text/javascript">alert('哈哈，我今天又變帥了。');alert('我今天學習了<' + '/script>'); </script><!--如果包含了字符"</script>"，則會出錯，使用字符串拼接的方法--> View Code?
轉載于:https://www.cnblogs.com/Time_1990/p/4049174.html
總結
以上是生活随笔為你收集整理的23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android appwidget桌面插
- 下一篇： Thinkpad X201i笔记本电脑开