當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍...

發(fā)布時(shí)間：2023/12/18 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍... 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

01 復(fù)習(xí)內(nèi)容

?????復(fù)習(xí)之前的知識(shí)點(diǎn)

02演示VS創(chuàng)建元素

???

03div和span區(qū)別

???

通過display屬性進(jìn)行DIV與Span之間的轉(zhuǎn)換。div->span 設(shè)置display:inline ? ?span->div 設(shè)置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>如果發(fā)現(xiàn)我邪惡了,請記住,我曾純潔過.傳智播客<div style=" width: 300px; height: 200px; background-color: Yellow; display: inline; ">官網(wǎng)</div>http://www.itcast.cn<br />傳智播客<span style=" width: 300px; height: 200px; background-color: Yellow; display: block; ">官網(wǎng)</span>http://www.itcast.cn</body> </html> View Code

04 CSS中常用的幾個(gè)屬性

??? ?

05常見的幾個(gè)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="我是老馬，點(diǎn)我，狠點(diǎn)" />如果我邪惡了，請記住，我曾經(jīng)純潔過。<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">區(qū)分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.三個(gè)選擇器

<!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">#dv /*id選擇器*/{width: 300px;height: 200px;background-color:orange;border:1px solid red;}/*運(yùn)用于全部的DIV控件層，但是如果同時(shí)存在ID選擇器及DIV層，則存在優(yōu)先級設(shè)置樣式*/div /*標(biāo)簽選擇器*/ {cursor: pointer;font-family: 全新硬筆行書簡;color: blue;}.cls /*類選擇器*/ {width: 300px;height: 200px;background-color: orange; /*當(dāng)同時(shí)存在同一個(gè)屬性的時(shí)候，以排序后面的為準(zhǔn)。*/}.cls1 /*同一個(gè)標(biāo)簽，可以使用多個(gè)類選擇器*/{color: red;background-color: yellow; /*當(dāng)同時(shí)存在同一個(gè)屬性的時(shí)候，以排序后面的為準(zhǔn)。*/}/*#dv--表示的是ID選擇器，通常用在特定或者指定的某個(gè)元素上使用div--表示的是標(biāo)簽選擇器，通常用在很多相同標(biāo)簽上，希望這些標(biāo)簽都是用一個(gè)標(biāo)簽.cls--表示的是類選擇器，通常用在不同標(biāo)簽上，一般是幾個(gè)標(biāo)簽（不同）應(yīng)用同一個(gè)樣式優(yōu)先級別：第一種情況中的就近原則 >> ID選擇器最高 >> 類選擇器 >>標(biāo)簽選擇器例子：第一步，如果div標(biāo)簽，則一定會(huì)先設(shè)置了div標(biāo)簽樣式，然后再覆蓋其它選擇器的樣式。*/</style></head> <body><div style="width:300px;height:200px;">老馬有才：文能提筆控蘿莉</div><div id="dv" >老馬有才：文能提筆控蘿莉</div><div class="cls cls1" > 老馬看到了老蘇洗澡/*當(dāng)同時(shí)存在同一個(gè)屬性的時(shí)候，以排序后面的為準(zhǔn)。*/</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">玄機(jī)論壇</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">/*類名相同，但是不同標(biāo)簽就應(yīng)用不同的樣式，標(biāo)簽+類選擇器*/input.cls {background-color: black;width: 200px;height: 100px;}div.cls {background-color: yellow;width: 500px;height: 300px;}/*類名相同，但是不同標(biāo)簽就應(yīng)用不同的樣式*/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

?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><link href="01.css" rel="stylesheet" /> ><link href="All.css" rel="stylesheet" /> </head> <body><a href="http://www.xuanjics.com">玄機(jī)論壇，技術(shù)高手論壇</a><div style=" width:200px;height:500px;" > 玄機(jī)論壇，技術(shù)高手論壇</div><div > 玄機(jī)論壇，技術(shù)高手論壇</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; /*脫離文檔流，相當(dāng)于之前的位置，相對定位*/left: 100px; /*雖然已經(jīng)脫離，但是后面的元素不會(huì)占了位置*/top: 50px;}#dv2 {background-color: green;width: 300px;height: 150px;position: absolute; /*脫離文檔流，絕對定位,相對于body*/left: 500px; /*已經(jīng)脫離，則后面的元素會(huì)占了位置*/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; /*已經(jīng)脫離，則后面的元素會(huì)占了位置*/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></head> <body><div style="width: 90%; border: 1px solid red; margin: 0 auto; margin-bottom: 10px; "><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 Code

12 浮動(dòng)的問題

<!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>大家好，你們好，你好，我也好。下面的倆個(gè)DIV沒有內(nèi)容，則會(huì)導(dǎo)致第三個(gè)DIV會(huì)出現(xiàn)混亂排序，需要清除浮動(dòng)的效果。<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;"></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> </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%,70%" cols="50%,50%"><frame src="13盒子模型.html" noresize/><frameset cols="30%,*"><frame src="08偽選擇器.html" noresize /><frame src="13盒子模型.html" noresize /></frameset><noframes><body>當(dāng)瀏覽器不支持框架時(shí)，則顯示這個(gè)body中內(nèi)容。</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></head> <body></body> </html> <script type="text/javascript">var newDate = new Date();alert(newDate.toLocaleDateString());alert(newDate.toLocaleTimeString()); </script> <script type="text/javascript">alert('哈哈，我今天又變帥了。');alert('我今天學(xué)習(xí)了<' + '/script>'); </script> View Code

轉(zhuǎn)載于:https://www.cnblogs.com/Time_1990/p/4049174.html

總結(jié)

以上是生活随笔為你收集整理的23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： android appwidget桌面插
下一篇： Thinkpad X201i笔记本电脑开