菜鸟教程-css学习笔记
生活随笔
收集整理的這篇文章主要介紹了
菜鸟教程-css学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS實例中有很多CSS的例子，可以學習。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> body {background-color:#d0e4fe; } h1 {color:orange;text-align:center; } p {font-family:"Times New Roman";font-size:20px; } </style> </head><body><h1>CSS 實例!</h1> <p>這是一個段落。</p></body> </html>代碼大意是:
兩行字所用的標簽分別使用了css中的定義(就是style里面的)，
CSS的結構是選擇器和聲明
?
########################################################################
CSS?Id?和?Class
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> p.center {text-align:center; } </style> </head><body> <h1 class="center">這個標題不受影響</h1> <p class="center">這個段落居中對齊。</p> </body> </html>########################################################################
CSS?創建
提到了樣式表（.css文件），但是教程里面沒有給出具體的完整案例
########################################################################
CSS背景
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> body {background:#ffffff url('img_tree.png') no-repeat right top;margin-right:200px; } </style></head><body> <h1>Hello World!</h1> <p>背景圖片只顯示一次,但它位置離文本比較遠。</p> <p>在這個例子中我們添加了一個右邊距,所以背景圖像不會打擾到文本。</p> </body></html>效果如下:
########################################################################
css文本格式:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> a {text-decoration:none;} </style> </head><body> <p>鏈接到: <a href="//www.runoob.com/">runoob.com</a></p> </body></html>效果如下:
########################################################################
CSS Fonts(字體)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;} </style> </head> <body><h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>在所有瀏覽器中，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。</p></body>########################################################################
CSS?鏈接
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> a:link {color:#000000;} /* 未訪問鏈接*/ a:visited {color:#00FF00;} /* 已訪問鏈接 */ a:hover {color:#FF00FF;} /* 鼠標移動到鏈接上 */ a:active {color:#0000FF;} /* 鼠標點擊時 */ </style> </head> <body> <p><b><a href="/css/" target="_blank">這是一個鏈接</a></b></p> <p><b>注意：</b> a:hover 必須在 a:link 和 a:visited 之后，需要嚴格按順序才能看到效果。</p> <p><b>注意：</b> a:active 必須在 a:hover 之后。</p> </body> </html>這個代碼的意思是:
鼠標點擊和覆蓋文字時，會有不同的顏色。
########################################################################
列表樣式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> ul {list-style-type:none;padding:0px;margin:0px; } ul li {background-image:url(sqpurple.gif);background-repeat:no-repeat;background-position:0px 5px; padding-left:14px; } </style> </head><body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body></html>效果如下:
代碼大意是，代碼下方的文字調用了上面定義好的li
########################################################################
CSS?表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> table, td, th {border:1px solid black; } td {padding:15px; } </style> </head><body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html>CSS?表格
代碼大意是:
tr是一行
td是一列
########################################################################
CSS?盒子模型
盒子模型(Box Model)：
例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } </style> </head><body><img src="250x250px.gif" width="250" height="250" /><div class="ex">上面的圖片是250 px寬。 這個元素的總寬度也是250 px。</div></body> </html>效果如下
代碼中的class就是C++中的例化(舉個例子)。
代碼大意對于上面效果圖中的下方使用盒子模型，
盒子模型的樣式被定義在div.ex中
###################################################################################
CSS?邊框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> p.one {border-style:solid;border-width:5px; } p.two {border-style:solid;border-width:medium; } p.three {border-style:solid;border-width:1px; } </style> </head><body> <p class="one">一些文本。</p> <p class="two">一些文本。</p> <p class="three">一些文本。</p> <p><b>注意:</b> "border-width" 屬性 如果單獨使用則不起作用。要先使用 "border-style" 屬性來設置邊框。</p> </body></html>###################################################################################
CSS?輪廓（outline）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> p {border:1px solid red;} p.dotted {outline-style:dotted;} p.dashed {outline-style:dashed;} p.solid {outline-style:solid;} p.double {outline-style:double;} p.groove {outline-style:groove;} p.ridge {outline-style:ridge;} p.inset {outline-style:inset;} p.outset {outline-style:outset;} </style> </head> <body><p class="dotted">點線輪廓</p> <p class="dashed">虛線輪廓</p> <p class="solid">實線輪廓</p> <p class="double">雙線輪廓</p> <p class="groove">凹槽輪廓</p> <p class="ridge">壟狀輪廓</p> <p class="inset">嵌入輪廓</p> <p class="outset">外凸輪廓</p> <p><b>注意:</b> 如果只有一個 !DOCTYPE 指定 IE 8 支持 outline 屬性。</p> </body> </html>代碼用法和上面的"CSS邊框類似"
?
###################################################################################
CSS?margin(外邊距)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> p {background-color:yellow; } p.margin {margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px; } </style> </head><body> <p>這是一個沒有指定邊距大小的段落。</p> <p class="margin">這是一個指定邊距大小的段落。</p> </body></html>用法和上面的差不多。
###################################################################################
CSS?padding（填充）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> p {background-color:yellow; } p.padding {padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px; } </style> </head><body> <p>這是一個沒有指定填充邊距的段落。</p> <p class="padding">這是一個指定填充邊距的段落。</p> </body></html>?
###################################################################################
CSS?分組?和?嵌套?選擇器
分組代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> h1,h2,p {color:green; } </style> </head><body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body> </html>?
嵌套代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> p {color:blue;text-align:center; } .marked {background-color:red; } .marked p {color:white; } p.marked{text-decoration:underline; } </style> </head><body> <p>這個段落是藍色文本，居中對齊。</p> <div class="marked"> <p>這個段落不是藍色文本。</p> </div><p>所有 class="marked"元素內的 p 元素指定一個樣式，但有不同的文本顏色。</p><p class="marked">帶下劃線的 p 段落。</p> </body> </html>所謂的嵌套的意思就是，這個<p>是在<body>內部還是<div>內部亦或是帶class的。
和外層的標簽組合起來就有了嵌套的味道。
###################################################################################
CSS尺寸
使用百分比來設置元素的最大寬度-代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> html {height:100%;} body {height:100%;} img.normal {height:auto;} img.big {height:50%;} img.small {height:10%;} </style> </head><body> <img class="normal" src="logocss.gif" width="95" height="84" /><br> <img class="big" src="logocss.gif" width="95" height="84" /><br> <img class="small" src="logocss.gif" width="95" height="84" /> </body> </html>###################################################################################
CSS?Display(顯示)?與?Visibility（可見性）
這一節提到了塊和內聯元素
內聯元素可以理解為不能直接設置寬度和高度元素，比如span，你為他設置寬度和高度沒有效果，除非你把它設置成塊級元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> li{display:inline;} </style> </head> <body><p>鏈接列表水平顯示：</p><ul> <li><a href="/html/" target="_blank">HTML</a></li> <li><a href="/css/" target="_blank">CSS</a></li> <li><a href="/js/" target="_blank">JavaScript</a></li> <li><a href="/xml/" target="_blank">XML</a></li> </ul></body> </html>效果如下:
?
然后是塊元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> span {display:block; } </style> </head> <body><h2>Nirvana</h2> <span>Record: MTV Unplugged in New York</span> <span>Year: 1993</span> <h2>Radiohead</h2> <span>Record: OK Computer</span> <span>Year: 1997</span></body> </html>上面的兩份代碼中，內聯還是塊取決于display后面的是block還是inline
然后下面的<span><\span>調用了上面的<body><\body>中定義的span
###################################################################################
CSS?Position(定位)
所謂的定位其實就是元素在頁面中的坐標。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> h2 {position:absolute;left:100px;top:150px; } </style> </head><body> <h2>這是一個絕對定位了的標題</h2> <p>用絕對定位,一個元素可以放在頁面上的任何位置。標題下面放置距離左邊的頁面100 px和距離頁面的頂部150 px的元素。.</p> </body></html>###################################################################################
CSS 布局 - Overflow
注意:overflow 屬性只工作于指定高度的塊元素上。
注意:?在 OS X Lion ( Mac 系統) 系統上，滾動條默認是隱藏的，使用的時候才會顯示 (設置 "overflow:scroll" 也是一樣的)。
這個東西的作用就是文本太長的情況下，怎么顯示"太長"的那一部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div {background-color: #eee;width: 200px;height: 200px;border: 1px dotted black;overflow:scroll; } </style> </head> <body><div id="overflowTest"> <p>這里的文本內容會溢出元素框。</p> <p>這里的文本內容會溢出元素框。</p> <p>這里的文本內容會溢出元素框。</p> </div></body> </html>?
其實就是修改下scroll的部分，然后就可以有“滾動條”“隱藏”之類的效果。
###################################################################################
CSS?Float(浮動)
浮動的意思講人話就是靠左還是靠右
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> .thumbnail {float:left;width:150px;height:90px;margin:5px; } </style> </head><body> <h3>圖片庫</h3> <p>試著調整窗口,看看當圖片沒有足夠的空間會發生什么。</p> <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"> <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"> <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"> <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"> <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"> <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"> </body> </html>###################################################################################
CSS 布局 - 水平 & 垂直對齊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> img {display: block;margin: 0 auto; } </style> </head> <body><h2>圖片居中對齊</h2> <p>要讓圖片居中對齊, 可以使用 margin: auto; 并將它放到塊元素中：</p><img src="//static.runoob.com/images/mix/paris.jpg" alt="Paris" style="width:40%"></body> </html>###################################################################################
CSS?組合選擇符
后續選擇器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div~p {background-color:yellow; } </style> </head> <body><p>之前段落，不會添加背景顏色。</p> <div> <p>段落 1。 在 div 中。</p> <p>段落 2。 在 div 中。</p> </div><p>段落 3。不在 div 中。</p> <p>段落 4。不在 div 中。</p></body> </html>意思是讓<div></div>作為邊界，然后邊界之外的染成yellow色彩。
###################################################################################
CSS?偽類(Pseudo-classes)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> p:first-child i {color:blue; } </style> </head><body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p><b>注意:</b> 當:first-child 作用于 IE8 及更早版本的瀏覽器, DOCTYPE 必須已經定義.</p> </body> </html>?
使用的時候沒用涉及class
##################################################################################
CSS偽元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> p:first-letter {color:#ff0000;font-size:xx-large; } p:first-line {color:#0000ff;font-variant:small-caps; } </style> </head><body> <p>你可以結合使用"first-line"和"first-letter"偽元素向文本的首行和首字母 設置特殊樣式。</p> </body> </html>##################################################################################
CSS 導航欄
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <ul> <li><a href="#home">主頁</a></li> <li><a href="#news">新聞</a></li> <li><a href="#contact">聯系</a></li> <li><a href="#about">關于</a></li> </ul><p>注意：這里我們用 href="#"作為測試連接。但在一個真正的 web 站點上需要真實的 url。</p></body> </html>其實就是一堆鏈接
##################################################################################
下拉菜單
<!DOCTYPE html> <html> <head> <title>下拉菜單實例|菜鳥教程(runoob.com)</title> <meta charset="utf-8"> <style> .dropdown {position: relative;display: inline-block; } .dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);padding: 12px 16px; } .dropdown:hover .dropdown-content {display: block; } </style> </head> <body><h2>鼠標移動后出現下拉菜單</h2> <p>將鼠標移動到指定元素上就能看到下拉菜單。</p><div class="dropdown"><span>鼠標移動到我這！</span><div class="dropdown-content"><p>菜鳥教程</p><p>www.runoob.com</p></div> </div></body> </html>效果是：
上面的最下方的兩個<p></p>指的是下拉菜單的具體內容
下半部分代碼調用了上面定義的dropdown-content
##################################################################################
CSS 提示工具(Tooltip)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <style> .tooltip {position: relative;display: inline-block;border-bottom: 10px dotted green; }.tooltip .tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;top: -5px;left: 110%; }.tooltip .tooltiptext::after {content: "";position: absolute;top: 50%;right: 100%;margin-top: -5px;border-width: 5px;border-style: solid;border-color: transparent red transparent transparent; }.tooltip:hover .tooltiptext {visibility: visible; } </style> <body style="text-align:center;"><h2>右側提示框/左側箭頭</h2><div class="tooltip">鼠標移動到我這<span class="tooltiptext">提示文本</span> </div></body> </html>代碼中有4處tooltip，下面來分別解釋。
.tooltip開關，如果這個刪除，那么提示功能消失,同時設置下劃線顏色(綠色)
.tooltip .tooltiptext 設置提示文本，里面的如果改為visible,那么就會直接出現提示文本，不會隱藏
.tooltip .tooltiptext::after設置箭頭的顏色和位置
.tooltip:hover .tooltiptext定義如何觸發顯示"提示文本"
?
效果如下:
###################################################################################
CSS圖片廊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div.img {margin: 5px;border: 1px solid #ccc;float: left;width: 180px; }div.img:hover {border: 10px solid #777; }div.img img {width: 100%;height: auto; }div.desc {padding: 15px;text-align: center; } </style> </head> <body><div class="responsive"><div class="img"><a target="_blank" href="//static.runoob.com/images/demo/demo1.jpg"><img src="//static.runoob.com/images/demo/demo1.jpg" alt="圖片文本描述" width="300" height="200"></a><div class="desc">1</div></div> </div><div class="responsive"><div class="img"><a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg"><img src="//static.runoob.com/images/demo/demo2.jpg" alt="圖片文本描述" width="300" height="200"></a><div class="desc">2</div></div> </div><div class="responsive"><div class="img"><a target="_blank" href="//static.runoob.com/images/demo/demo3.jpg"><img src="//static.runoob.com/images/demo/demo3.jpg" alt="圖片文本描述" width="300" height="200"></a><div class="desc">3</div></div> </div><div class="responsive"><div class="img"><a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg"><img src="//static.runoob.com/images/demo/demo4.jpg" alt="圖片文本描述" width="300" height="200"></a><div class="desc">4</div></div> </div></body> </html>?
div.img:hover 鼠標移動到圖片上面的時候的灰色邊框厚度
?
div.desc文字邊框的長度
div.img和div.img img到底啥區別？
這里注意，因為div是塊屬性，所以默認div顯示圖片的話一行只能顯示一張圖片。
為了讓一行能顯示多張圖片，關鍵代碼是:
float:?left;?
width:?180px;
然后，為了文字綁定圖片，需要<div class="img">將他們打包
所以總的代碼思路是:
<div class="img">把文字和圖片打包，由于其中的div是塊屬性的，一行只能放一張圖片(占據所有行寬)，所以需要float屬性來修補。這里面<div class="img">對應的是div.img，div.img img對應的是
<img src="//static.runoob.com/images/demo/demo1.jpg" alt="圖片文本描述" width="300" height="200">div.img和div.img img中都有width，他們是相乘的關系
div.img是把"文字和圖片"打包后的整體"看作"一張圖片。
div.img img是設定這個"圖片"里面的圖片。
搞這么復雜的目的就是為了。。。頁面的一行能顯示多張"圖片"(=圖片+文字 打包)。。。。
效果如下:
###################################################################################
CSS圖像透明/不透明
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> img {opacity:0.4;filter:alpha(opacity=40); /* 適用 IE8 及其更早版本 */ } img:hover {opacity:1.0;filter:alpha(opacity=100); /* 適用 IE8 及其更早版本 */ } </style> </head> <body><h1>圖片透明度</h1> <p>opacity 屬性通常與 :hover 選擇器一起使用，在鼠標移動到圖片上后改變圖片的透明度：</p> <img src="klematis.jpg" width="150" height="113" alt="klematis"> <img src="/images/klematis2.jpg" width="150" height="113" alt="klematis"><p><b>注意:</b>在 IE 中必須聲明 <!DOCTYPE> 才能保證 :hover 選擇器能夠有效。</p> </body> </html>下面是效果圖，鼠標移動上去才會完全透明。
###################################################################################
CSS媒體類型
這節的例子舉得不是特別好
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> @media screen {p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print {p.test {font-family:times,serif;font-size:10px;} } @media screen,print {p.test {font-weight:bold;} } </style> </head><body> <p class="test">菜鳥教程 -- 學的不僅是技術，更是夢想！！！</p> </body> </html>效果如下:
###################################################################################
屬性和值的選擇器 - 多值
下面是包含指定值的title屬性的元素樣式的例子，使用（~）分隔屬性和值:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> [title~=hello] {color:blue; } </style> </head><body> <h2>將適用:</h2> <h1 title="hello world">Hello world</h1> <p title="student hello">Hello CSS students!</p> <hr> <h2>將不適用:</h2> <p title="student">Hi CSS students!</p> </body> </html>代碼大意是：
包含hello的就染成藍色。
?
************************
接下來是表單的例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> input[type="text"] {width:150px;display:block;margin-bottom:10px;background-color:yellow; } input[type="button"] {width:120px;margin-left:35px;display:block; } </style> </head> <body><form name="input" action="demo-form.php" method="get"> Firstname:<input type="text" name="fname" value="Peter" size="20"> Lastname:<input type="text" name="lname" value="Griffin" size="20"> <input type="button" value="Example Button"></form> </body> </html>?
###################################################################################
CSS 表單（這里重點學習其中幾個重要的例子）
帶動畫的搜索框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> input[type=text] {width: 130px;box-sizing: border-box;border: 4px solid #ccc;border-radius: 4px;font-size: 16px;background-color: white;background-image: url('https://static.runoob.com/images/mix/searchicon.png');background-position: 10px 10px; background-repeat: no-repeat;padding: 12px 20px 12px 40px;-webkit-transition: width 0.4s ease-in-out;transition: width 0.4s ease-in-out; }input[type=text]:focus {width: 100%; } </style> </head> <body><p>搜索輸入框帶動畫:</p><form><input type="text" name="search" placeholder="搜索.."> </form></body> </html>?
下拉菜單（select）樣式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> select {width: 100%;padding: 16px 20px;border: none;border-radius: 4px;background-color: #f1f1f1; } </style> </head> <body><p>下拉菜單</p><form><select id="country" name="country"><option value="au">Australia</option><option value="ca">Canada</option><option value="usa">USA</option></select> </form></body> </html>?
響應式表單
<!DOCTYPE html> <html> <head><style> * {box-sizing: border-box; }input[type=text], select, textarea {width: 100%;padding: 20px;border: 1px solid #ccc;border-radius: 4px;resize: vertical; } /*設置輸入框的尺寸*/label {padding: 12px 12px 12px 0;display: inline-block; } /*這個label就是指代First Name的右側、下側等等之類的距離*/input[type=submit] {background-color: #4CAF50;color: white;padding: 12px 20px;border: none;border-radius: 4px;cursor: pointer;float: right; } /*submit按鈕顏色*/input[type=submit]:hover {background-color: #45a049; } /*這里是鼠標移動到submit按鈕上的時候，會變顏色*/.container {border-radius: 5px;background-color: #f2f2f2;padding: 20px; } /*整個表格的屬性設置*/.col-25 {float: left;width: 25%;margin-top: 6px; }.col-75 {float: left;width: 75%;margin-top: 6px; } /*col-25設定輸入框左側的文字*/ /*col-75設定輸入框*/ /* 清除浮動 */ .row:after {content: "";display: table;clear: both; } /*讓submit按鈕包含在背景范圍內*//*下面這個代碼的意思是，如果屏幕被放大，那么First Name和輸入框就會是"上下布局"，不再是"左右布局"*/ /* 響應式布局 layout - 在屏幕寬度小于 600px 時， 設置為上下堆疊元素 */ @media screen and (max-width: 600px) {.col-25, .col-75, input[type=submit] {width: 100%;margin-top: 0;} } </style> </head> <body><h2>響應式表單</h2> <p>響應式表帶可以根據瀏覽器窗口的大小重新布局各個元素，我們可以通過重置瀏覽器窗口大小來查看效果：</p><div class="container"><form action="/action_page.php"><div class="row"><div class="col-25"><label for="fname">First Name</label></div><div class="col-75"><input type="text" id="fname" name="firstname" placeholder="Your name.."></div></div><div class="row"><div class="col-25"><label for="lname">Last Name</label></div><div class="col-75"><input type="text" id="lname" name="lastname" placeholder="Your last name.."></div></div><div class="row"><div class="col-25"><label for="country">Country</label></div><div class="col-75"><select id="country" name="country"><option value="australia">Australia</option><option value="canada">Canada</option><option value="usa">USA</option></select></div></div><div class="row"><div class="col-25"><label for="subject">Subject</label></div><div class="col-75"><textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea></div></div><div class="row"><input type="submit" value="Submit"></div></form> </div></body> </html>其中
@media screen and (max-width: 600px) {.col-25, .col-75, input[type=submit] {width: 100%;margin-top: 0;} }的意思是，First Name和下面的輸入框是上下排列的，而原先是左右排列的
###################################################################################
CSS計數器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> ol {counter-reset: section;list-style-type: none; }li::before {counter-increment: section;content: counters(section,".") " "; } </style> </head> <body> ---------------------------------------------------- <ol><li>item1</li><li>item2 <ol><li>item3</li><li>item4</li><li>item5<ol><li>item6</li><li>item7</li><li>item8</li></ol></li><li>item9</li></ol></li><li>item10</li><li>item11</li> </ol><ol><li>item12</li><li>item13</li> </ol><p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持該屬性。</p></body> </html>效果如下:
所謂的計數器是針對文章標題左側的序號的。
技巧是</li>替換為<ol>，然后就可以產生二級、三級小標題的序號。
###################################################################################
CSS網頁布局-響應式網頁布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> * {box-sizing: border-box; }body {font-family: Arial;padding: 10px;background: #f1f1f1; }/* 頭部標題 */ .header {padding: 30px;text-align: center;background: white; }.header h1 {font-size: 50px; }/* 導航條 */ .topnav {overflow: hidden;background-color: #333; }/* 導航條鏈接 */ .topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none; }/* 鏈接顏色修改 */ .topnav a:hover {background-color: #ddd;color: black; }/* 創建兩列 */ /* Left column */ .leftcolumn { float: left;width: 75%; }/* 右側欄 */ .rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px; }/* 圖像部分 */ .fakeimg {background-color: #aaa;width: 100%;padding: 20px; }/* 文章卡片效果 */ .card {background-color: white;padding: 20px;margin-top: 20px; }/* 列后面清除浮動 */ .row:after {content: "";display: table;clear: both; }/* 底部 */ .footer {padding: 20px;text-align: center;background: #ddd;margin-top: 20px; }/* 響應式布局 - 屏幕尺寸小于 800px 時，兩列布局改為上下布局 */ @media screen and (max-width: 800px) {.leftcolumn, .rightcolumn { width: 100%;padding: 0;} }/* 響應式布局 -屏幕尺寸小于 400px 時，導航等布局改為上下布局 */ @media screen and (max-width: 400px) {.topnav a {float: none;width: 100%;} } </style> </head> <body><div class="header"><h1>我的網頁</h1><p>重置瀏覽器大小查看效果。</p> </div><div class="topnav"><a href="#">鏈接</a><a href="#">鏈接</a><a href="#">鏈接</a><a href="#" style="float:right">鏈接</a> </div><div class="row"><div class="leftcolumn"><div class="card"><h2>文章標題</h2><h5>2019 年 4 月 17日</h5><div class="fakeimg" style="height:200px;">圖片</div><p>一些文本...</p><p>菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！</p></div><div class="card"><h2>文章標題</h2><h5>2019 年 4 月 17日</h5><div class="fakeimg" style="height:200px;">圖片</div><p>一些文本...</p><p>菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！</p></div></div><div class="rightcolumn"><div class="card"><h2>關于我</h2><div class="fakeimg" style="height:100px;">圖片</div><p>關于我的一些信息..</p></div><div class="card"><h3>熱門文章</h3><div class="fakeimg"><p>圖片</p></div><div class="fakeimg"><p>圖片</p></div><div class="fakeimg"><p>圖片</p></div></div><div class="card"><h3>關注我</h3><p>一些文本...</p></div></div> </div><div class="footer"><h2>底部區域</h2> </div></body> </html>對于這種響應式布局，都會有@之類的語句，為的是響應用戶的放大縮小操作時，對頁面上顯示的內容做適當的調整。
?
?
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的菜鸟教程-css学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 菜鸟教程-HTML 教程学习笔记
- 下一篇： 菜鸟教程-css3学习笔记