前端：CSS的知識點拾遺
clearfix:
先看下面這段代碼：javascript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c{ background-color: red; } .c .item{ float: left; width: 40px; } </style> </head> <body> <div class="c"> <div class="item">123</div> <div class="item">456</div> </div> </body> </html>
效果演示圖：css
發現儘管咱們給父級標籤設置了背景色，可是沒有出現背景色。這是由於咱們將兩個子標籤float：left以後，父級標籤的標準流裏面就沒有內容了，天然高度變爲了零，而後背景色就沒辦法給提現出來。html
>>>>>>解決辦法（1）：java
先說一個low的方法：在子級設置一個div，這個div按理來講是緊挨着456右邊，可是咱們給這個div設置clear：both，這是清除兩邊的浮動，發現這個div就沒有緊挨在456右邊了，而是在下一行。瀏覽器
解決以下：ide
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c{ background-color: red; } .c .item{ float: left; width: 40px; } </style> </head> <body> <div class="c"> <div class="item">123</div> <div class="item">456</div> <div style="clear: both"></div> </div> </body> </html>
在之後的工做中會出現不少這種狀況，若是在每一個子級寫上clear，就費勁了，可是又必須加上clear。這時咱們就能夠運用其餘的知識點一塊兒來簡便地解決這個問題。函數
>>>>>>解決辦法（2）：佈局
高級的解決辦法：這裏咱們要運用到after:both、display:block（將內聯標籤變成塊級標籤）、visibility:hidden。學習
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix:after{ content: "666"; display: block;/*內聯變塊標籤*/ clear: both; visibility: hidden;/*隱藏，且有高度*/ height: 0px; } .c{ background-color: red; } .c .item{ float: left; } </style> </head> <body> <div class="c clearfix"> <div class="item">123</div> <div class="item">456</div> </div> </body> </html>
效果演示圖：字體
這樣一來咱們就解決了寫不少次clear：both的問題。之後須要這樣的效果就能夠直接在class裏面添加上clearfix就能夠啦。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix:after{ content: "666"; display: block;/*內聯變塊標籤*/ clear: both; visibility: hidden;/*隱藏，且有高度*/ height: 0px; } .c,.d{ background-color: red; } .c .item,.d .item{ float: left; width: 40px; } </style> </head> <body> <div class="c clearfix"> <div class="item">123</div> <div class="item">456</div> </div> <div class="d clearfix"> <div class="item">123</div> <div class="item">456</div> </div> </body> </html>
效果演示圖：
hover:
（一）
咱們常常在網頁上遇到鼠標移動到圖片上就會出現一個邊框，鼠標移開以後就沒有了，這裏咱們就要用到hover，而且設置邊框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .ele{ background-color: darkgray; border: 2px solid transparent; } .ele:hover{ border: 2px solid red; } .ele:hover .ele-item{ color: red; background-color: rebeccapurple; } </style> </head> <body> <div class="ele"> <div>123</div> <div class="ele-item">123</div> </div> </body> </html>
這段代碼就實現了上述的效果，而且將裏面的一個div也設置了鼠標移動過去後字體和背景顏色的改變。本身動手試試，會更加理解這段代碼的效果喔~
（二）
上面第一種只是設置了圖片邊框，接下來學習一個更有美感的效果。有些網頁鼠標移動過去會出現一層陰影，而且還會出現一些文字。看起來文藝感十足。這也是用hover寫的。
圖片原本的樣子：
鼠標移動到圖片上的樣子：
有沒有很高級的感受！！！
下面就來學習一下這種炫酷的效果的代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .touch{ width: 400px; height: 400px; overflow: hidden;/*超出大小範圍的圖片設置爲隱藏*/ position: relative; } .touch .content{ position: absolute;/*找父級，若是父級沒有設置relative，就找到body*/ top: 0; left: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6;/*背景色透明度*/ /*background: rgba(0,0,0,.8);!*透明度*!*/ color: white; text-align: center; visibility: hidden;/*隱藏*/ } .touch:hover .content{ visibility: visible;/*顯示隱藏的內容*/ } .touch .content .content-01{ font-size: 32px; padding: 80px 0; } </style> </head> <body> <div class="touch"> <div><img src="1.jpg" style="width: 450px;height: 450px"></div> <div class="content"> <div class="content-01">香港</div> <div class="content-02">2015-2-22</div> </div> </div> </body> </html>
這種效果必定要多練練，來小小地提高一下big，哈哈哈~
position：
fixed
是固定在整個屏幕的某個位置，就好比網頁的「返回頂部」的設置，實現起來超級簡單。
<div style="position: fixed;right: 10px;bottom: 10px;background-color: brown;width: 40px;height: 40px"></div>
right：距離屏幕右邊的距離
bottom：距離屏幕下面的距離
relative、absolute
若是absolute的父級沒有relative（父級沒有relative，那只有以body作爲父級），此時的功能和fixed是同樣的，但有個缺點就是，在屏幕不固定！
若是要在一個大div裏面固定一個小div，就要在大div裏面設置relative，在小div裏面設置absolute。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } </style> </head> <body> <div style="background-color: plum;height: 1024px;"> <div style="position:relative;margin: 0 auto;background-color: peachpuff;width: 600px;height: 200px"> <div style="position: absolute;left: 0;bottom: 0;width: 30px;height: 30px;background-color: palevioletred"></div> </div> </div> </body> </html>
效果演示圖：
能夠結合fixed一塊兒練習一下，可看出其中的差異。
尖角：
網頁中有些圖片頗有立體感，這種立體感是能夠由畫一個小圖片來實現。好比：
實現過程：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .up{ border-top: 60px solid bisque; border-right: 60px solid plum; border-bottom: 60px solid palevioletred; border-left: 60px solid pink; display: inline-block; } </style> </head> <body> <div class="up"></div> </body> </html>
只用邊框設置上下左右的屬性再將塊級標籤設置爲內聯標籤（display：inline-block）就能夠實現了。
那咱們只想畫出一個尖角符號就很容易實現了：
transparent：設置爲透明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .up{ border-top: 60px solid pink; border-right: 60px solid transparent; border-left: 60px solid transparent; display: inline-block; } .down{ border-top: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 60px solid plum; border-left: 60px solid transparent; display: inline-block; } </style> </head> <body> <div class="up"></div> <div class="down"></div> </body> </html>
效果演示圖：
還能夠設置一個向下的尖角當鼠標放上去就變成尖角往上，而且要設置在一樣的位置進行變化。這就須要設置一個父級標籤了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ border: 30px solid transparent; border-top: 30px solid pink; display: inline-block; margin-top: 40px; } .c1:hover{ border: 30px solid transparent; border-bottom: 30px solid pink; margin-top: 10px; } </style> </head> <body> <div style="height: 100px;background-color: deeppink"> <div class="c1"></div> </div> </body> </html>
效果演示圖：
鼠標沒有放上去以前：
鼠標放上去以後：
圖標：
網頁上有不少圖標均可以畫出來，好比郵箱的圖標，可是很費勁很複雜。這裏推薦一個插件能夠解決這些複雜的圖標。
網站：http://fontawesome.io/3.2.1/icons/。
下載以後，在運用的時候將文件放在html一塊兒的工程裏面，導入以後要使用哪一個圖片就在網站裏面查找該圖標的源碼進行使用就能夠了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>font</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> </head> <body> <span class="icon-anchor"></span> <span class="icon-rocket"></span> </body> </html>
效演示圖：
<a>標籤包含<img>標籤：
平時咱們把<img>放在<a>標籤裏面，是默認有個藍色邊框，經過IE瀏覽器就能夠明顯看到。
直接設置圖片的邊框爲0就能夠了：
<style> img{ border: 0; } </style> <body> <a href="http://www.baidu.com"><img src="1.jpg" >123</a> </body>
important：
HTML若是加上CSS的樣式，樣式的優先級是就近原則，哪一個樣式離標籤近就用哪一個。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ font-size: 40px; background-color: plum; color: white; } .c2{ color: gold; } </style> </head> <body> <div class="c1 c2">important</div> </body> </html>
此時字體顏色是使用的c2設置的顏色-金色。效果演示圖：
若是想使用c1裏面的字體顏色-白色。那就要在c1字體顏色後面用上！important。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ font-size: 40px; background-color: plum; color: white !important; } .c2{ color: gold; } </style> </head> <body> <div class="c1 c2">important</div> </body> </html>
效果演示圖（字體變爲了白色）：
後臺管理佈局：
下圖是固定了最頂部的一欄和左邊的列表欄，右邊實現了一個滾輪能夠翻動右邊的內容。發現左邊和右邊是緊靠頁面的，能夠設置列表欄離左邊頁面距離爲零，內容欄設置離左邊頁面距離也能夠是相同的距離，這樣能夠緊貼着，或者想有一點空隙就能夠在這基礎上多加一點。這時咱們還要用上position：absolute來固定。
實現代碼：
overflow: auto（設置滾動條）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow</title> <style> body{ margin: 0; } .top{ height: 48px; background-color: plum; } .pg-body .body-menu{ position: absolute; left: 0; width: 180px; background-color: pink; } .pg-body .body-content{ position: absolute; left: 185px; right: 0; top: 48px; bottom: 0; background-color: palevioletred; overflow: auto;/*設置滾動條*/ } </style> </head> <body> <div class="top"></div> <div class="pg-body"> <div class="body-menu"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div class="body-content"> <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1> <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1> </div> </div> </body> </html>
邊緣提示框：
如圖：
這裏也要用到relative和absolute
實現代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table> <tr> <td>第一列</td> <td>第二列</td> <td> <div style="position: relative"> <a>刪除</a> <div style="position: absolute;left: 38px;top: -2px;"> <input type="button" value="肯定"> <input type="button" value="刪除"> </div> </div> </td> </tr> <tr> <td>第一列</td> <td>第二列</td> </tr> <tr> <td>第一列</td> <td>第二列</td> </tr> </table> </body> </html>
登陸（<input>標籤和圖標）：
如圖：
咱們能夠簡單來分析一下，這就是一個input文本框，看起來裏面還放了一張小人兒的圖片。這裏要注意的是當用戶輸入很長的一串字符的時候，是不會超過圖片的位置，如圖：
能夠看到在小圖以前有一段距離。下面代碼就能夠實現這些功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .user{ position: relative; width: 250px; } .user input{ height: 40px; width: 200px; padding-right: 30px; } .user .people{ position: absolute; top: 30px; left: 210px; } </style> </head> <body> <div class="user"> <p>Name：<input type="text"></p> <span class="people">P</span> </div> </body> </html>
這只是很簡單地實現了一下，效果演示圖：
模態對話框：
如圖：
這張圖片看起來應該有三層，咱們先來分析一下。底層很容易實現，直接就是body層；黑色層，直接設置上下左右距離爲0和顏色透明度就能夠佔滿整個屏幕了，而且還要設置fixed來固定它！！！而後再在這層基礎上來設置一個框就ok了。這裏還涉及到z-index指定層級的知識點（在以前的CSS那篇博客中已經有介紹過）。
實現代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .model{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.5); z-index: 2; } .content{ height: 300px; width: 400px; background-color: pink; position: fixed; top: 50%; left: 50%; margin-top: -200px; margin-left: -200px; z-index: 3; } </style> </head> <body> <div style="height: 2000px;background-color: palevioletred"> <h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1> </div> <div class="model">2</div> <div class="content">3</div> </body> </html>
效果演示圖：
咱們發現第一層最上面有一點白色空隙，這是由於咱們在第一層的div裏面設置的是<h1>標籤。若是不想有白色空隙，有兩種設置方法：
第一種：
h1{
margin: 0;
}
第二種（這是設置全部的標籤）：
*{
margin: 0;
}
加減框：
購物網頁中在購買商品是有選擇商品數量的選擇，好比：
實現代碼：
這裏補充一個小知識點：
鼠標放在加減位置變成一個小手圖案：cursor: pointer
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .left{ float: left; } .wrap{ height: 22px; width: 150px; border: 1px solid gray; } .wrap .minus{ height: 22px; width: 22px; line-height: 22px; text-align: center; cursor: pointer;/*鼠標放到加減號上面變成小手*/ } .wrap input{ border: 0; border-left: 1px solid gray; border-right: 1px solid gray; width: 104px; /*height: 20px;*/ height: 22px; padding: 0; } .wrap .plus{ height: 22px; width: 22px; line-height: 22px; text-align: center; cursor: pointer; } </style> </head> <body> <div class="wrap"> <div class="minus left" onclick="Minus();">-</div> <div class="count left"> <input id="num"type="text" value="1"> </div> <div class="plus left" onclick="Plus();">+</div> </div> </body> </html>
加減框（JavaScript實現加減）：
經過JS能夠只用按加減框自動加減，實現代碼以下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .left{ float: left; } .wrap{ height: 22px; width: 150px; border: 1px solid gray; } .wrap .minus{ height: 22px; width: 22px; line-height: 22px; text-align: center; cursor: pointer;/*鼠標放到加減號上面變成小手*/ } .wrap input{ border: 0; border-left: 1px solid gray; border-right: 1px solid gray; width: 104px; /*height: 20px;*/ height: 22px; padding: 0; } .wrap .plus{ height: 22px; width: 22px; line-height: 22px; text-align: center; cursor: pointer; } </style> </head> <body> <div class="wrap"> <div class="minus left" onclick="Minus();">-</div> <div class="count left"> <input id="num"type="text" value="1"> </div> <div class="plus left" onclick="Plus();">+</div> </div> <script type="text/javascript"> //定義加減函數 function Minus() { var old_str = document.getElementById("num").value;//獲取value值，值是字符串 var old_int = parseInt(old_str);//將字符串轉成數字 var new_int = old_int - 1;//進行計算 document.getElementById("num").value = new_int;//計算後從新賦值給value } function Plus() { var old_str = document.getElementById("num").value; var old_int = parseInt(old_str); var new_int = old_int + 1; document.getElementById("num").value = new_int; } </script> </body> </html>
相關文章
- 1. 網絡知識點拾遺
- 2. javascript 知識點拾遺
- 3. C＃知識拾遺
- 4. MySQL知識拾遺
- 5. Java線程知識拾遺
- 6. javascript基礎知識拾遺
- 7. 基礎知識拾遺
- 8. Spark核心知識拾遺
- 9. 入門知識拾遺
- 10. 前端技能拾遺
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 網絡知識點拾遺
- 2. javascript 知識點拾遺
- 3. C＃知識拾遺
- 4. MySQL知識拾遺
- 5. Java線程知識拾遺
- 6. javascript基礎知識拾遺
- 7. 基礎知識拾遺
- 8. Spark核心知識拾遺
- 9. 入門知識拾遺
- 10. 前端技能拾遺