前端篇—css

原創 wolf67 2020-07-04 08:49

文章目錄


CSS

css的四種引入方式

  1. 直接寫在標籤中,用分號隔開
<div style='background-color:red;color:yellow'>這裏的背景是紅色，字是黃色</div>
  1. 寫在head標籤中
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: red;
            color:yellow;
        }
    </style>
</head>
<body>
    <div>這裏的背景是紅色，字是黃色</div>
</body>
  1. 寫在css文件中，用link導入
    建議使用方法
<!--css文件：style.css-->
div{
	background-color: red;
	color:yellow;
	}

<!--html文件style.html-->
<head>
	<link type='text/css' rel='stylesheet' href='style.css'>
</head>
<body>
	<div>這裏的背景是紅色，字是黃色</div>
</body>
  1. import 導入
    不建議用：在頁面全部加載完之後，再整體渲染
<!--css文件：style.css-->
div{
	background-color: red;
	color:yellow;
	}

<!--html文件style.html-->
<head>
	<style>
		@import'style.css';
	</style>
</head>
<body>
	<div>這裏的背景是紅色，字是黃色</div>
</body>

4種方法的輸出頁面：
在這裏插入圖片描述

css選擇器(selector)

  1. 基礎選擇器
<style>
	*{
		<!--通配符，選擇全部-->
	}
</style>
  1. 標籤選擇器
<style>
	p{
		<!--選擇所有p標籤-->	
	}
</style>
  1. css選擇器
<style>
	#p1{
		<!--選擇所有id='p1'的標籤-->	
	}
	.p2{
		<!--選擇所有class='p2'的標籤-->
	}
</style>
  1. 多項選擇器
<style>
	p,div,.span1{
		<!--選擇所有p標籤-->	
	}
</style>
  1. 後代選擇器
<style>
	#div1 p{
		<!--選擇id='div1'的後代中的所有p標籤-->
	}
</style>
  1. 子代選擇器
<style>
	#div1>p{
		<!--選擇id='div1'的子代中的所有p標籤-->
	}
</style>
  1. 毗鄰選擇器
<style>
	#div1+p{
		<!--選擇id='div1'後面緊挨着的一個p標籤，如果沒有就沒用-->
	}
</style>
  1. 屬性選擇器
<head>
	<style>
		[class]{
			<!--選擇所有有class屬性的標籤-->
		}
		[class='div1']{
			<!--選擇所有class='div1'的標籤-->
		}
		[class~='div2']{
			<!--選擇所有class='div1 div2'中含有div2的標籤-->
		}
		[class^='div1']{
			<!--選擇所有class='div1 div2'以div1開頭的標籤-->
		}
		[class$='div2']{
			<!--選擇所有class='div1 div2'以div2結尾的標籤-->
		}
		[wolf]{
			<!--可以自己寫一個屬性，選擇所有有wolf屬性的標籤-->
		}
		div[class='p']{
			<!--選擇div標籤中class='p'的標籤-->
		}
	</style>
</head> 

<style>
	p:after{
		content:'add';
		color:red;
	} 
	p:before{
		content:'add';
		color:yellow;
	} 
<!--在p標籤文本前後添加文本和樣式-->
</style>

僞類()

<head>
	<style>
		a:link{
			<!--未選擇樣式-->
			}
		a:hover{
			<!--鼠標懸浮時樣式-->
		}
		.a1:hover .a2{
			// 鼠標懸浮在a1時，a2改變樣式
		} 
		a:visited{
			<!--訪問後樣式-->
		}
		a:active{
			<!--鼠標點擊時樣式-->
		}
	</style>
</head>
<body>
	<a href='https://blog.csdn.net/weixin_42016382/article/details/100873921'></a>
</body>

css的屬性

顏色代碼表

color/font-size/font-weigth/font-family/height/width/line-height/position/display/z-index/opacity/float/clear/overflow/visibility

hover/active/after/before

padding/marign/border/border-radius/
  1. 字體屬性
    <style>
        div{
            /*字體顏色*/
            color:red;
            /*color:#G3c;*/
            /*color:#GG33cc*/
            /*color:rgb(255,255,255)*/
            /*字體大小*/
            font-size:45px;
            /*字體粗細(0,100,200~900,bold,bolder,lighter...)*/
            font-weight:900;
            /*font-style:italic;*/
            /*字體樣式*/
            font-family:'Times New Roman';
            /*字體居中：center、left、right*/
            text-align: center;
            /*背景行高*/
            height: 100px;
            /*文本行高：文本上下居中*/
            line-height: 100px;
            /*單詞間距*/
            word-spacing: 5px;
            /*字母間距*/
            letter-spacing: 2px;
            /*文本轉換格式*/
            text-transform: capitalize;
            /*寬度*/
            width:50%;
        }
    </style>
  1. 背景屬性
<style>
	/*background-color: #cc3399;*/
    /*background-image: url('ico.png');*/
    /*!*平鋪方式：repeat/no-repeat*!*/
    /*background-repeat: no-repeat;*/
    /*位置*/
    background-position: center center;
    background: url('ico.jpg') no-repeat 100px 50px red;
</style>
  1. 邊框屬性
<style>
	/*3種邊距都可以設置4個方向*/
    /*盒子之間的間距/居中*/
    margin:0 auto;
    /*margin-bottom: 1px;*/
    /*margin-left: 1px;*/
    /*margin-right: 1px;*/
    /*margin-top:1px;*/
    /*盒子邊框：粗細/顏色/樣式*/
    border:1px red groove;
    padding:1px;
</style>
  1. 列表屬性
ul,ol{
	list-style:decimal-leading-zero;
	list-style:none;<br>	list-style:circle;
	list-style:upper-alpha;
	list-style:disc;
}
  1. display屬性
    塊級標籤內聯標籤轉換
<style>
	div{
		display:block;/*none;inline;inline-block;*/
	}
</style>
  1. a標籤屬性
a{
	text-decoration: none;	/*設置超鏈接下劃線格式*/
}

文檔流

正常文檔流：
脫離文檔流：

1. float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height:50px;
            width:50px;
            background-color: blue;
        }
        .div2{
            height:50px;
            width:50px;
            background-color: green;
        }
        .div3{
            height:100px;
            width:100px;
            background-color: purple;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

在這裏插入圖片描述

設置左float：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height:50px;
            width:50px;
            background-color: blue;
        }
        .div2{
            height:50px;
            width:50px;
            background-color: green;
            /*設置左浮動設置左浮動設置左浮動設置左浮動*/
            float:left;
        }
        .div3{
            height:100px;
            width:100px;
            background-color: purple;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

在這裏插入圖片描述

<style>
	.div2{
            height:50px;
            width:50px;
            background-color: green;
            /*設置右浮動設置右浮動設置右浮動設置右浮動*/
            float:right;
        }
</style>

在這裏插入圖片描述

在這裏背景會浮動覆蓋，但是文本不會被覆蓋

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color:gold;
        }
        .div1{
            height:50px;
            width:50px;
            background-color: blue;
        }
        .div2{
            height:50px;
            width:50px;
            background-color: green;
            float:left;
        }
        .div3{
            height:100px;
            width:100px;
            background-color: purple;
        }

    </style>
</head>
<body>
    <div class="div1">111</div>
    <div class="div2">222</div>
    <div class="div3">333</div>
</body>
</html>

在這裏插入圖片描述

2. clear

    <style>
        div{
            color:gold;
        }
        .div1{
            height:50px;
            width:50px;
            background-color: blue;
        }
        .div2{
            height:50px;
            width:50px;
            background-color: green;
            float:right;
        }
        .div3{
            height:100px;
            width:100px;
            background-color: purple;
            /*clear:right;*/
        }
    </style>

在這裏插入圖片描述

    <style>
        div{
            color:gold;
        }
        .div1{
            height:50px;
            width:50px;
            background-color: blue;
        }
        .div2{
            height:50px;
            width:50px;
            background-color: green;
            float:right;
        }
        .div3{
            height:100px;
            width:100px;
            background-color: purple;
            /*右邊清除，右邊有浮動時自動向下移*/
            clear:right;
        }
    </style>

在這裏插入圖片描述

clear解決浮動混亂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0 auto;
        }
        div{
            color:gold;
            font-weight: 900;
        }
        .top{
            background-color: blue;
        }
        .div1{
            width: 200px;
            color:black;
            float: left;
        }
        .div2{
            width: 200px;
            float: left;
        }
        .bottom{
            background-color: #cc3399;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="div1">111111111</div>
        <div class="div2">222222222</div>
    </div>
    <div class="bottom">3333333</div>
</body>
</html>

在這裏插入圖片描述
這裏並不能得到我們想要的浮動結果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0 auto;
        }
        div{
            color:gold;
            font-weight: 900;
        }
        .top{
            background-color: blue;
        }
        .div1{
            width: 200px;
            color:black;
            float: left;
        }
        .div2{
            width: 200px;
            float: left;
        }
        .div3{
            clear:both;
        }
        .bottom{
            background-color: #cc3399;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="div1">111111111</div>
        <div class="div2">222222222</div>
        <div class="div3"></div>
    </div>
    <div class="bottom">3333333</div>
</body>
</html>

在浮動標籤下面添加一個空標籤，設定樣式 clear:both; 隔離下面的標籤，解決浮動混亂
在這裏插入圖片描述

清除浮動的主流方法：

<style>
	// 寫這樣一個樣式：
	.clearfix:after{		// 在浮動的盒子父級最後添加以下盒子
		content:'...';		// 盒子內容(隨意，但不能爲空)
		display:block;		// 使盒子爲塊級元素，佔整行
		clear:both;			// 隔離上面的浮動元素
		visibility:hidden;	// 隱藏盒子文本內容content
		height:0;			// 使盒子高度爲0，不佔頁面位置
	}
</style>
// 用這樣一個空標籤來隔離浮動

3. overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0 auto;
        }
        div{
            color:gold;
            font-weight: 900;
        }
        .top{
            background-color: blue;
            overflow: hidden;
        }
        .div1{
            width: 200px;
            color:black;
            float: left;
        }
        .div2{
            width: 200px;
            float: left;
        }
        .bottom{
            background-color: #cc3399;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="div1">111111111</div>
        <div class="div2">222222222</div>
    </div>
    <div class="bottom">3333333</div>
</body>
</html>

在外層class='top’的樣式加入 overflow:hidden; 也能實現正確的需求。隱藏超出部分

4.position

  1. fixed
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0 auto;
        }
        .div1{
            height: 1000px;
            background-color: aqua;
        }
        .div2{
            height: 1000px;
            background-color: aquamarine;
        }
        .a{
            position: fixed;/*固定標籤*/
            bottom:10px;
            right:10px;
        }
    </style>
</head>
<body>
    <div class="div1" id="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <a class="a" href="#div1">回到頂部</a>
</body>
</html>

在滾動條的滾動中，標籤有position:fixed的標籤位置固定
在這裏插入圖片描述

2.position:relative; 改變盒子位置，不脫離文檔流，以原位置爲基礎移動。
2. position:absolute; 改變盒子位置，脫離文檔流，後面的盒子前移，該標籤會向上找有position:releative; 的前輩標籤爲基礎移動，找不到時以html爲基礎移動。
對於脫離文檔流的，即 position:absolute; 使用 text-align:center; 時，必須加入寬度 width:100%; 脫離文檔流後，不指定寬度，盒子不知道瀏覽器寬度，無法居中

懸浮示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wolf</title>
    <style>
        *{
            margin:0;
        }
        .left{
            float:left;	// 左飄
        }
        .right{
            float:right;	// 右飄
        }
        .pg-head{		// 上部分背景，基本樣式
            height:48px;
            background-color: deepskyblue;
            line-height: 48px;
        }
        .pg-head .logo{		// logo樣式，background
            width:200px;
            height:48px;
            text-align: center;
        }
        .pg-head .info{		// 右側頭像部分樣式及position定位前提relative
            width: 100px;
            height:48px;
            position:relative;
            right:200px;
            text-align: center;
        }
        .pg-head .info:hover{		// 頭像懸浮樣式
            background-color: darkgray;
        }
        .pg-head .info:hover .accessory{		// 鼠標懸浮到頭像時，展示額外內容
            display: block;
        }
        .pg-head .info .a img{		// 頭像樣式
            width:40px;
            height:40px;
            border-radius: 50%;
            margin: 4px;
        }
        .body-left{		// 下部分左邊菜單基本樣式
            width:200px;
            position: absolute;
            top:50px;
            bottom:0;
            left:0;
            border:1px red solid;
        }
        .body-right{		// 下部分右邊主要內容樣式
            z-index: 9;		// 與頭像額外內容分層
            position: absolute;
            left: 210px;
            right:0;
            bottom:0;
            overflow: auto;
            top:50px;
            border:1px red solid;
        }
        .pg-head .info .opr{		// 額外內容標籤樣式
            display: block;
            background-color: deepskyblue;

        }
        .pg-head .info .accessory{		// 額外內容整體樣式及position定位
            display: none;
            text-align: center;
            line-height:48px;
            width: 100px;
            height: 48px;
            position: absolute;
            top:48px;
            z-index: 10;
        }
        .pg-head .info .accessory a:hover{		// 額外內容鼠標懸浮樣式
            background-color: darkgray;
        }
    </style>

</head>
<body>
    <div class="pg-head">
        <div class="left logo">Python</div>
        <div class="right info">
            <a class="a">
                <img src="09.jpg">
            </a>
            <div class="accessory">
                <a class='opr'>用戶信息</a>
                <a class="opr">註銷用戶</a>
            </div>

        </div>
    </div>
    <div class="pg-body">
        <div class="body-left"></div>
        <div class="body-right">
            <p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
            <p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
            <p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
            <p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
            <p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>

        </div>
    </div>
<script src="jquary-3.4.js"></script>
<script>

</script>
</body>
</html>

效果：鼠標懸浮時，展示額外內容

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

CSS實現button按鈕閃爍效果

最近有個奇葩需求，我們客戶要求按鈕要像星星一樣一閃一閃的！！！.......... <el-button type="success" class="flash animated infinite">按鈕</el-button> .

橘猫猫猫猫丶 2020-07-08 04:09:33

CSS＋JS實現瀏覽器不保存用戶名密碼

因爲信息安全問題，客戶要求在輸入密碼的時候，不讓瀏覽器彈出是否保存用戶名密碼的框框..... 調查發現只要將input的type指定爲password就會提示，所以想了這麼個辦法... 只試過IE11和Chrome，其他瀏覽器不知道好不好

橘猫猫猫猫丶 2020-07-08 04:09:33

HTML 實現排行榜

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>排行榜</title> <style type="text/cs

Joker_PL 2020-07-08 09:11:56

Dom操作延遲問題

//這個循環會導致第一句dom操作延遲1s2s this.draws=false; //顯示一個div for(var i=0;i<9999;i++){ console.log("2") } //解決方法 this.

大表哥6 2020-07-08 09:09:01

1upx border在某些手機機型上某一邊框顯示不出來解決方案

今天在做uni-app項目進行測試時，發現當邊框爲1upx時，某些框的邊顯示不全（無效）。自己某前遇到問題的手機：iPhone XS Max。展示的bug效果如下：     以上區域中，發現邊框的下邊沒有顯示出來。又是兼容問題導致的bu

Syleapn 2020-07-08 07:53:02

ES6中數組複製與合併

ES6擴展符...在數組中的應用 擴展運算符:採用...，將一個數組轉爲用逗號分隔的參數序列。即更直觀的可以稱爲展開符，eg:對let a = [1,2,3],  ...a  結果 1,2,3 將數組裏面的東西直接展開放在此處   一、

Syleapn 2020-07-08 07:15:13

HTML(超鏈接，建立錨點，建立圖像，圖像地圖)

<html> <head>  <title>超鏈接標籤</title> </head> <body>  <a href="http://syt.coolpage.biz" target="_blank">syt的窩</a><br>  <a

sysydesign 2020-07-08 06:12:45

js 彈出層

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

iteye_16047 2020-07-08 04:09:44

我實現了客戶要求的五彩斑斕的黑！！！

五彩斑斕的黑？？？？五彩斑斕？？？還黑？？之前只是笑笑就過去了。。那麼能不能實現呢，，，今天他來了！！！ 效果圖:展示出來的效果顏色和光暈的顏色都是用c3寫成的動畫效果，由於不支持上傳視頻，就截了幾幀的圖片，有想要自己實現這個動畫

SC前端 2020-07-08 10:39:04

CSS預處理器和後處理器

css預處理器 一、什麼是css預處理器？ CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增加了一些編程的特性，將CSS作爲目標生成文件，然後開發者就只要使用這種語言進行編碼工作。通俗的說，CSS

我的绝伦大人 2020-07-08 09:19:30

css剩餘部分

一、link和@import的區別 頁面中引入的方式有三種： 1.在行內定義style屬性 2.頁面頭部內嵌<style>標籤 3.通過link和@import鏈接樣式表 <link rel="styles

我的绝伦大人 2020-07-08 09:19:30

【Python】CSS選擇器語法

常用語法 語法 說明 * 選擇所有節點 #container 選擇id爲container的節點 .container 選擇所有class包含container的節點 div,p 選擇所有 div 元素和

岚清子 2020-07-08 09:13:33

bootstrap側邊導航欄的實現

https://blog.csdn.net/kebi007/article/details/76038251 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

吃鱼的羊 2020-07-08 05:50:47

移動web端css實現文本單行省略及多行省略

單行省略： selector{ text-overflow: ellipsis;/*這就是省略號嘍*/ overflow: hidden;/*設置超過的隱藏*/ white-space: nowrap;/*設置不斷行*/

Tyler-阿信 2020-07-08 04:54:20

CSS hack 整理（更新於20141109）

瀏覽器的兼容性一直是個頭疼的問題，使用“欺騙”技術可使各個瀏覽器效果一致，花了些時間整理了各個瀏覽器的HACK，主要包括IE系列和最新版本的Chrome、Safari、Firefox、 Opera，比較全面的記錄下Hack，內容包括3部分

Tyler-阿信 2020-07-08 04:54:20