Java學習總結（二十四）——前端：CSS樣式設計（CSS引入，選擇器，盒子模型，浮動元素）
阿新 • • 發佈：2018-06-21
引入 itl AI dropdown 正常的 type ID 總結 網頁 一．CSS引入方式
1.CSS簡介：
（1）CSS(Cascading style Sheets):層疊樣式表。用來給html網頁設置樣式;
（2）當多個選擇器對同一個元素進行樣式設計時，則該元素的樣式為多個選擇器疊加的效果（當有沖突時，按照優先級設置）;
2.引入方式：
（1）方式一：行內樣式（在html元素的style屬性上設置樣式）
（2）方式二：頁面內嵌樣式（在head標簽內部嵌入樣式）
（3）方式三：引入外部樣式文件
例1（演示CSS三種引入方式）：
Html代碼：
1.CSS簡介：
（1）CSS(Cascading style Sheets):層疊樣式表。用來給html網頁設置樣式;
（2）當多個選擇器對同一個元素進行樣式設計時，則該元素的樣式為多個選擇器疊加的效果（當有沖突時，按照優先級設置）;
2.引入方式：
（1）方式一：行內樣式（在html元素的style屬性上設置樣式）
（2）方式二：頁面內嵌樣式（在head標簽內部嵌入樣式）
（3）方式三：引入外部樣式文件
例1（演示CSS三種引入方式）：
Html代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS引入</title> <!--方式二：頁面內嵌樣式--> <style type="text/css"> #hehe{ width: 200px; height: 200px; background-color: yellow; } </style> <!--方式三：引入外部樣式文件--> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <!--方式一：行內樣式：--> <div style="background-color: green; width: 400px;height: 400px;"> <div id="haha"> <div id="hehe"> <div style="background-color: red; width: 120px;height: 120px;"></div> </div> </div> </div> </body> </html>
CSS代碼：
#haha{
width: 300px;
height: 300px;
background-color: blue;
}
運行結果：
二．CSS選擇器：
1.標簽選擇器
2.類選擇器
3.ID選擇器：
4.復合選擇器：
5.子選擇器(選擇父選擇器的直接子元素)：
6.後代選擇器：
7.偽類選擇器(用來設置元素在不同狀態下的樣式)
例2（選擇器的使用）：
代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #daohang{ width: 100%; height: 73px; border: 0px solid #EAEAEA; } #logo1{ width: 332px; height: 72px; border: 0px solid #EAEAEA; float: left; } #logotu{ width: 180px; height: 37px; margin-left: 78px; margin-top: 16px; background-image: url(一鍵殺毒_盜號保護_垃圾清理_軟件管理-騰訊電腦管家官網_files/logo_2.png); background-repeat: no-repeat; background-size: 100% 100%; } #shouye{ height: 72px; border: 0.25px solid #EAEAEA; float: left; width:70px ; font-family: "微軟雅黑"; font-size: 20px; text-align: center; line-height: 72px; color: #9D9D9D; border-top-style:none ; border-right-style:none ; } .dropdown { width: 121px; height: 72px; border: 0.25px solid #EAEAEA; float: left; position: relative; display: inline-block; text-align: center; line-height: 72px; border-top-style:none ; border-right-style:none ; } .dropdown-content{ display: none; position: absolute; background-color: #FFFFFF; width: 120px; line-height: 27px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .banben{ width: 70px; height: 72px; float: left; } #login{ width: 80px; height: 60px; float: left; margin-left: 60px; margin-top: 7px; } a{ text-decoration: none; font-size: 17px; color: #333333; font-family: "微軟雅黑"; font-size: 20px; } a:hover{ color: #2871D5; } #xialaxiang{ font-size: 14px; } #tu{ width: 50px; height: 50px; margin-left: 10px; margin-top: 10px; background: url(一鍵殺毒_盜號保護_垃圾清理_軟件管理-騰訊電腦管家官網_files/09ec6123b95bae5a3d11c507bc84910e.png);% background-repeat: no-repeat; background-size: 100% 100%; } #maintu{ width: 100%; height: 442px; background: url(一鍵殺毒_盜號保護_垃圾清理_軟件管理-騰訊電腦管家官網_files/9fc5cc01281fdf183798ea0239533980.jpg); background-repeat: no-repeat; background-size: 100% 100%; } </style> </head> <body> <div id="daohang"> <div id="logo1"> <div id="logotu"></div> </div> <div id="shouye" ><a href="index.html" style="text-decoration: none;">首頁</a></div> <div class="dropdown"> <span class="dropbtn"style="line-height: 70px;"><a href="#" target="_blank">產品介紹</a></span> <div class="dropdown-content"> <a href="#" id="xialaxiang">安全防護</a><br /> <a href="#" id="xialaxiang">管理效率</a><br /> <a href="#" id="xialaxiang">電腦加速</a><br /> <a href="#" id="xialaxiang">遊戲加速</a><br /> <a href="#" id="xialaxiang">等級加速</a><br /> <a href="#" id="xialaxiang">電腦加速</a><br /> <a href="#" id="xialaxiang">賬號保護</a><br /> <a href="#" id="xialaxiang">手遊助手</a><br /> <a href="#" id="xialaxiang">桌面管理</a><br /> <a href="#" id="xialaxiang">最近文檔</a><br /> </div> </div> <div class="dropdown"> <span class="dropbtn"style="line-height: 70px;"><a href="#" target="_blank">安全咨詢</a></span> <div class="dropdown-content"> <a href="#" id="xialaxiang">安全專題</a><br /> <a href="#" id="xialaxiang">管家大事記</a><br /> <a href="#" id="xialaxiang">聯合實驗室</a><br /> </div> </div> <div class="dropdown"> <span class="dropbtn"style="line-height: 70px;"><a href="#" target="_blank">在線安全</a></span> <div class="dropdown-content"> <a href="#" id="xialaxiang">電腦診所</a><br /> <a href="#" id="xialaxiang">申訴舉報</a><br /> <a href="#" id="xialaxiang">詐騙信息查詢</a><br /> <a href="#" id="xialaxiang">網站安全檢測</a><br /> <a href="#" id="xialaxiang">密碼安全檢測</a><br /> <a href="#" id="xialaxiang">賬號安全查詢</a><br /> </div> </div> <div class="dropdown" style="border-right:0.25px solid #EAEAEA"> <span class="dropbtn"style="line-height: 70px;"><a href="#" target="_blank">活動中心</a></span> <div class="dropdown-content"> <a href="#" id="xialaxiang">兌換禮包</a><br /> <a href="#" id="xialaxiang">賺安全金幣</a><br /> <a href="#" id="xialaxiang">專題活動</a><br /> </div> </div> <div class="banben" style="margin-left: 50px;"><div id="tu"></div></div> <div class="banben"><div id="tu"></div></div> <div class="banben"><div id="tu"></div></div> <div id="login" style="line-height: 60px; text-align: center;"><a href="ligin.html" target="_blank" style="font-size: 15px;color: #2771FA;">登錄</a></div> <div style="clear: both;"> <!--清除上面的浮動--> </div> <div id="maintu"> </div> </div> </body> </html>
運行結果：
試用下拉菜單：
三．CSS盒子模型（BOX模型）
1.基本組成
（1）border(邊框)?
（2）padding(內邊距,也叫填充)：元素中的內容與邊框(border)之間的距離。
（3）margin(外邊距)：與相鄰元素或父元素之間的距離。
（4）content(內容)：盒子包含的內容(皇宮)。
2.圖例：
例3（盒子模型舉例）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #div1{width: 400px; height: 400px;background-color: aqua;} #div2{width: 200px;height: 200px; background-color: blueviolet;margin-left: 98px;margin-top: 98px;} #div3{width: 120px;height: 120px; background-color:coral;margin-left: 38px;margin-top: 28px;} </style> </head> <body> <div id="div1">皇城 <div id="div2">皇宮 <div id="div3">皇帝</div> </div> </div> </body> </html>
運行結果：
例4（盒子模型屬性的使用）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#wai{
width: 400px;
height: 400px;
border: 20px solid yellowgreen;
/*設置外層為一個盒子*/
display: flex;
/*盒子裏面元素的排列順
flex-direction:
row row-reverse
column column-reverse
* */
flex-direction: row;
/*justify-content:
* flex-start | 靠左端
* flex-end | 靠右端
* center;按方向居開始 中間 末尾 */
/*
* 盒子裏面元素的對齊方式
*/
justify-content: center;
/*flex-flow: row wrap;*/
flex-wrap: wrap;
}
#wai>div{
/*讓盒子內的元素 均勻排列 把 margin: auto;*/
margin: auto auto;
/*margin-left: 10px;*/
width: 50px;
height: 50px;
border: 5px yellow solid;
}
</style>
<body>
<div id="wai">
<div style="order: 1;">1</div>
<div style="order: 2;">2</div>
<div style="order: 3;">2</div>
<div style="order: 4;">4</div>
<div style="order: 5;">5</div>
<div style="order: 6;">6</div>
<div style="order: 7;">7</div>
<div style="order: 8;">8</div>
<div style="order: 9;">9</div>
</div>
</body>
</html>
運行結果：
四．CSS浮動（float）
1.浮動元素：float:left|right
2.設置了float屬性的元素即為浮動元素，浮動元素脫離了正常的文檔流（標準流），不遵循“從左到右，從上到下，遇塊換行”的標準文檔流的排布方式
3.可以清除浮動：clear:left|right|both
4.規律一：
如果某個元素是浮動元素，那麽有兩種情況：
（1）這個浮動元素的上一個元素是標準流中的元素，則該浮動元素與上一個標準流元素相對垂直位置不變
（2）這個浮動元素的上一個元素也是浮動元素，則這兩個浮動元素在同一水平位置排列(除非兩個浮動元素的寬度和超過水平位置總寬度，這種情況下該浮動元素會被“擠”到下一行)。
5.規律二：
（1） 設置了clear屬性的元素，主動負責完成清除浮動(移動自身完成目標)。
例5（CSS浮動的使用）：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float浮動元素</title>
<style type="text/css">
#div1{
width:30%;
height:80px;
background-color:#DDA0DD;
}
#div2{
width:40%;
height:80px;
background-color:#CD853F;
float:left;
}
#div3{
width:50%;
height:100px;
background-color:#2E8B57;
float:left;
}
#div4{
width:50%;
height:120px;
background-color:#FA8072;
}
#div5{
width:50%;
height:130px;
background-color:#FF0000;
}
</style>
</head>
<body>
<div id="div1">這是div1裏面的內容</div>
<div id="div2">這是div2裏面的內容</div>
<div id="div3">這是div3裏面的內容</div>
<div id="div4">這是div4裏面的內容</div>
<div id="div5">這是div5裏面的內容</div>
</body>
</html>運行結果：
【本次總結完】
Java學習總結（二十四）——前端：CSS樣式設計（CSS引入，選擇器，盒子模型，浮動元素）