css最終章之浮動、定位、溢出屬性處理、z-index屬性、透明度
上期內容回顧
# 主要就是給HTML標籤添加樣式
# 固定語法結構
選擇器 {屬性名1:屬性值;屬性名2:屬性值}
1.link標籤引入外部css文件(最正規)
2.HTML文檔結構中的head標籤內通過style標籤內部直接編寫(一般用於學習時期)
3.直接在標籤內部通過style屬性編寫(不常用)
# 一個頁面上有很多相同的標籤 但是需要有不同的樣式
1.基本選擇器
id選擇器 類選擇器 標籤選擇器 通用選擇器
2.重要選擇器
兒子選擇器 後代選擇器 毗鄰選擇器 弟弟選擇器
3.偽類選擇器
p:first-letter
a:hover
...
color font-size ...
border border-radius ...
background-color -image -position...
'''類比成快遞盒'''
外邊距 margin # 標籤與標籤之間的距離
邊框 border
內邊距 padding # 內部數據與邊框的距離
內容 content
今日內容概要
- 浮動
- 定位
- 兩者是否脫離文檔流
- 其他樣式補充
- 部落格園頁面搭建
- 前端程式語言之javascript
內容詳細
1.浮動
# 浮動(float) 主要就是用於頁面布局的!!!
"""html程式碼時沒有規定縮進 全部寫在一行也可以"""
# HTML文件內容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這個網站很牛逼</title>
<style>
body {
margin: 0;
}
#d1 {
width: 100px;
height: 200px;
background-color: red;
/*display: inline-block; 也可以讓塊兒級標籤轉為行內標籤 但是不推薦使用*/
float: left;
}
#d2 {
width: 100px;
height: 200px;
background-color: green;
/*display: inline-block; 也可以讓塊兒級標籤轉為行內標籤 但是不推薦使用*/
float: left;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
2.浮動的負面影響
# 會造成父標籤塌陷!!!
# 解決：
1.再寫一個div撐場面(不可取)
2.關鍵字clear(可以使用)
3.通用解決策略(推薦使用):只要父標籤塌陷就使用
.clearfix:after {
content: '';
clear: both;
display: block;
}
"""誰塌陷 就給誰加class屬性"""
"""
瀏覽器默認都是文本優先展示
如果浮動的標籤下面還覆蓋有帶有文本內容的標籤 則文本優先展示
"""
# HTML文件內容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這個網站很牛逼</title>
<style>
body {
margin: 0;
}
#d1 {
width: 100px;
height: 100px;
background-color: red;
/*display: inline-block; 也可以讓塊兒級標籤轉為行內標籤 但是不推薦使用*/
float: left;
}
#d2 {
width: 100px;
height: 100px;
background-color: green;
/*display: inline-block; 也可以讓塊兒級標籤轉為行內標籤 但是不推薦使用*/
float: left;
}
#d3 {
border: 5px solid black;
}
.clearfix:after {
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div id="d3" class="clearfix">
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
</html>
3.定位
# 1.靜態定位 static
所有的標籤默認都是靜態定位即不能改變位置
# 2.相對定位 relative
相對標籤原來的位置做定位
# 3.絕對定位 absolute
相對已經定位過的父標籤做定位(沒有則參考body標籤)
eg:小米官網導航條內購物車
# 4.固定定位 fixed
相對瀏覽器窗口做定位
eg:小米官網右邊回到頂部
# 如何使用css完成定位
定位關鍵字:position
位置關鍵字left、right、top、bottom
# 絕對定位:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這個網站很牛逼</title>
<style>
body {
margin: 0;
}
#d1 {
width: 100px;
height: 100px;
background-color: red;
position: relative; /*修改標籤的定位方式*/
left:100px;
top:100px;
}
#d2 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left:100px;
top:100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
</html>
# 固定定位:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這個網站很牛逼</title>
<style>
body {
margin: 0;
}
#d3 {
border: 3px solid black;
position: fixed;
right:100px;
bottom:100px;
}
</style>
</head>
<body>
<div style="height: 1000px;background-color: red"></div>
<div style="height: 1000px;background-color: yellow"></div>
<div style="height: 1000px;background-color: orchid"></div>
<div id="d3">回到頂部</div>
</body>
</html>
4.是否脫離文檔流
"""
標籤位置改變之後 原來的位置是否會空出來
如果空出來了被其他標籤自動佔有 那麼表示脫離
否則不脫離
"""
# 浮動、定位
脫離文檔流:
浮動、絕對定位、固定定位
不脫離文檔流:
相對定位
# html文件內容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這個網站很牛逼</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<div id="d1" style="width: 100px;height: 100px;background-color: orchid"></div>
<div id="d2" style="width: 100px;height: 100px;background-color: red;float: right"></div>
<div id="d3" style="width: 100px;height: 100px;background-color: green"></div>
</body>
</html>
5.溢出屬性
# 內容被裁剪後摺疊顯示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這個網站很牛逼</title>
<style>
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
border: 3px solid black;
overflow: auto;
}
</style>
</head>
<body>
<div>
1、年少是夕陽，張揚的瀰漫天邊，青春是黃昏，落幕中還有希望。
2、世事如書，我偏愛你這一句，願做個逗號，待在你腳邊。但你有自己的朗讀者，而我只是個擺渡人。
3、願我們長大，偶爾可愛，始終被愛！
4、海上月是天上月， 眼前人是心上人。向來心是看客心 ，奈何人是劇中人。
5、總有人會幼稚到陪你吃跳跳糖，浪漫到陪你看夕陽。
</div>
</body>
</html>
# 圓形頭像示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圓形的頭像示例</title>
<style>
* {
margin: 0;
padding: 0;
background-color: #eeeeee;
}
.header-img {
width: 150px;
height: 150px;
border: 3px solid white;
border-radius: 50%;
overflow: hidden;
}
.header-img>img {
width: 100%;
}
</style>
</head>
<body>
<div class="header-img">
<img src="//pic.cnblogs.com/avatar/1342004/20180304191536.png" alt="">
</div>
</body>
</html>
圓形頭像示例
6.z-index屬性
# 自定義模態框示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這個網站很牛逼</title>
<style>
.cover {
background-color: rgba(0,0,0,0.65);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;
}
.modal {
background-color: white;
position: fixed;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
margin: -200px 0 0 -300px;
z-index: 1000;
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="modal"></div>
</body>
</html>
7.透明度
# opacity
用來定義透明效果
取值範圍是0~1，0是完全透明，1是完全不透明
# rgba(124,124,124,0.5)
隻影響背景顏色
# opacity:0.5
影響背景顏色和字體
# html文件內容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這個網站很牛逼</title>
<style>
div {
background-color: rgba(124,124,124,0.5);
}
p {
background-color: rgb(124,124,124);
opacity: 0.5;
}
</style>
</head>
<body>
<div>
快要吃飯了 好激動
</div>
<p>
人生的意義和價值在哪裡
</p>
</body>
</html>
8.JavaScript了解
# JavaScript簡稱JS 與Java一點關係都沒有!!!
完全是為了蹭Java的熱度
# JS也是一門程式語言
IT行業鄙視鏈>>>前端意淫著想擺脫後端的約束
寫出了使用JS編寫後端程式碼的方案>>>NodeJs
# JS雖然是一門程式語言但是邏輯非常的不嚴謹
據傳該語言最初的版本是由一個程式設計師花了七天時間寫出來的
# JavaScript 是腳本語言
# JavaScript 是一種輕量級的程式語言
# JavaScript 是可插入 HTML 頁面的編程程式碼
# JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行
9.JavaScript補充
# 類中引入方式
1.script標籤內部直接編寫(學習的時候使用)
<head>
<script>
// 在這裡寫你的JS程式碼
</script>
</head>
2.script標籤src屬性導入外部js文件(最正規)
<head>
<script src="myscript.js"></script>
</head>
# 注釋語法
html:<!--注釋語法-->
css:/**/
JS://單行注釋 /*多行注釋*/
# 模板語法注釋 {##}
# 結束符號
分號作為結束符號(;) 但是不用寫問題也不大
