web前端–Css練習

所用軟件：Hbuilder X

1.div塊Css設置各種樣式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		div{
			/*設置寬高屬性，用到的像素單位 px*/
			width:100px;
			height:200px;
			background: red;
			/*設置字體顏色，值有三種表示法：英文顏色名、16進制、*/
		    /*color:red*/
			/*color:#ffffff*/
			color:rgb(0,255,255);
			/*設置字體大小 默認像素：16px,最小像素：12px*/
			font-size: 10px;
			/* 設置字形  谷歌默認：微軟雅黑*/
			/* IE默認爲宋體 */
			font-family: "宋體";
			/* 行高設置 */
			line-height:200px;
			/* 文本加粗 */
			font-weight:600;
			/* 單行文本左右對齊方式：左 中 由右 */
			text-align: center;
			
			}
			p{
				/* 默認字體大小：16px，最小像素：12px */
				line-height: 20px;
				font-weight: normal;
				/* 設置文本線條： 上劃線，上劃線，刪除線*/
				text-decoration:none;
				/* 設置字體形態 */
				font-style:inherit;
				/* 設置首行縮進 */
				text-indent: 2rem;
				/* 設置每個文字之間的距離 */
				letter-spacing: 1px;
			}
		  a{
		  	  /*去掉下劃線（a標籤默認是有下滑線）*/
			  text-decoration: none;
			  font-size: 16px;
			  /*設置a標籤的顏色*/
			  color: black;
		  }
	</style>
	<body>
		<div>我是DIV</div>
		<p>千百萬年前，人類在勞動的過程中將自身從猿的處境中解放出來;一萬年前，人類在勞動的過程完成了農業革命從而走向定居生活;兩百年前，人類在勞動的過程中完成了工業革命從而步入現代社會。正是因爲勞動在人類歷史上發揮了極爲重要的作用，因此我的演講主題乃是熱愛勞動。但我要進一步強調，熱愛勞動，是要熱愛自由勞動! 
與自由勞動相對的，是僱傭勞動。由於機器的推廣和分工理念的深入人心，僱傭勞動本身，在現代社會已經失去了任何獨立的性質，故而才失去了對人們的任何吸引力。所以一些同學的意見：勞動太苦太累，不如花錢請別人來做。這樣的想法，與其說不理解勞動、倒不如說一語道破了現代社會的本質：現代社會的所有上層建築，都是矗立在僱傭勞動爲基礎的經濟結構之上的。</p>
		<a href="">點擊進入</a>
	</body>
</html>

#文本類樣式：
	font-size  			設置字體大小，瀏覽器默認字體大小爲16px;可最小設置爲12px
	font-weight 		設置字體的樣式加粗  或者消除加粗
	font-family 		設置字體的字型  一般設置爲微軟雅黑
	font-style 			可設置字體爲斜體
	line-height 		設置行高,一般還可用來設置單行文本的垂直居中
	text-align  		設置單行文本的左右對齊方式
	color  				設置文本的顏色，值有三種表示方法
	text-decoration 	設置線條  下劃線   上劃線  刪除線
	text-indent			設置段落的首行縮進
	letter-spacing 		設置文字之間的間隙

網頁顯示效果：

2.盒模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型</title>
	</head>
	<style>
		*{
            /*外邊距*/
			margin: 0px;
            /*內邊距*/
			padding: 0px;
		}
		div{
			width: 100px;
			height: 100px;
            /*左浮動*/
			float: left;
		}
		.box1{
			background-color: red;
		}
		.box2{
			background-color: green;
			/* 設置外邊距 複合屬性可以接不同的幾個值 */
			/* 值的用法：接一個值：四周都被隔開 */
			/* 兩個值 第一個值控制上下 第二個值控制左右*/
			/* 三個值 第一個值控制上，第二個值控制左右，第三個值控制下*/
			/* 四個值分別控制上右下左 */
			margin:0px;
		}
		.box3{
			background-color: yellow;
			/* 設置內邊距 符合屬性 */
			/* 值的用法同外邊距同 */
			padding: 30px;
			width: 40px;
			height: 40px;
		}
		.box4{
			/* background-color: blue; */
			border-left: 2px red dashed;
		}
		.box5{
			background-color: violet;
			width: 1200px;
		}
	</style>
	<body>
		<div class="box1">div1</div>
		<div class="box2">div2</div>
		<div class="box3">div3</div>
		<div class="box4">div4</div>
		<div class="box5">div5</div>
	</body>
</html>

#盒模型():
組成部份：內容大小(width、height)、內邊距(padding)、邊框(border)、外邊距(margin);

注意padding:元素設置內邊距後會自身加大，內容受影響，背景不受影響

內邊距(padding)、外邊距(margin)複合屬性值的用法：
* 接一個值：會控制四個方向.如：margin:0;
* 接二個值：第一個值控制上下，第二個值控制左右.如：margin:0 1;
* 接三個值：第一個值控制上，第二個值控制左右，第三個控制下.如：margin:0 1 0;
* 接四個值：從上開始，順時針控制  上右下左.如：margin:0 1 0 1;
	
內外邊距都可設置單獨某一邊  left top bottom right,如margin-left：控制左邊的外邊距
	
border 給元素設置邊框， 複合屬性接三個值：顏色  大小  線型，例如：border:red 2px solid.
(solid實線,dashed虛線，dotted點線，double 雙線) 

可設置單獨某一邊  left top bottom right,例如border-bottom:red 2px solid.

網頁顯示效果：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-cqXCwBaG-1591716114902)(E:\typoraPic\image-20200609223810545.png)]$

3.overflow的用法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>overflow的用法</title>
	</head>
	<style type="text/css">
		div{
            /*寬和高*/
			width: 200px;
			height: 400px;
            /*邊線*/
			border: 1px solid red;
			margin: 100px;
            /*
             #overflow屬性
            當子級元素大小超出父級元素大小，可以使用此屬性做相應處理：全部隱藏 | 以滾動條形式展示
            overflow-x:hidden;x軸溢出隱藏
            overflow-y:hidden;y軸溢出隱藏
            overflow:hidden;x,y軸溢出隱藏
           	overflow: scroll;以滾動條形式展示
            */
			overflow-y:hidden;
			background: red;
            /*鼠標懸停樣式*/
			cursor:progress;
		}
	</style>
	<body>
		<div>
			勞動是財富的源泉，但僱傭勞動卻不是幸福的源泉。說勞動是財富的源泉，這話不假，可以看到，人類在勞動中不僅實現了自我的解放，還在勞動中創造了所有的物質財富和精神財富，從而在勞動中建立了多姿多彩的現代社會。但僱傭勞動絕對不是幸福的源泉。僱傭勞動的本質，是勞動者作爲商品的勞動力在市場的公開出售，因此，給與勞動者的反饋——也就是工資，幾乎只限於維持勞動者生活和再生產的必需。同時，在僱傭勞動之下，勞動者通過勞動過程製造的勞動產品，並不屬於勞動者自身，這樣的勞動產品附加了勞動者勞動凝固的結晶，卻於勞動者自身毫無裨益。試問：這樣的僱傭勞動除了接受現代社會的層層監視，除了遭受福報的層層奴役，這樣的僱傭勞動有什麼幸福源泉可言呢? ””
		</div>
		<div>點擊</div>
	</body>
</html>

#cursor屬性
	設置鼠標 的形狀:  hand手勢   point可選    wait等待   help幫助....
	每個元素都可設置此屬性

網頁顯示效果：

4.選擇器練習

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>選擇器練習</title>
	</head>
	<style>
		/* 通配符*<類#<id<行間<！important(不常用) */
		div{
			width: 200px;
			height: 200px;
			margin: 0px;
			padding: 10px;
			background-color: aliceblue;
		}
		.div1{
			border: 2px red solid;
			
		}
		.div2{
			line-height: 100px;
			padding: 0px;
			text-align: center;
		}
		/* 後代選擇器 */
		.div3>p{
			background: violet;
		}
		.div4 p{
			color: green;
		}
		/* 交集選擇器 */
		h1.haha{
			color: cyan;
		}
		/* 並集選擇器 */
		.one,.two{
			color: yellow;
		}
	</style>
	<body>
		<div class="div1">我是DIV1</div>
		<div class="div3">
			<p>我是div3的字集p1</p>
			<p>我是div3的字集p2</p>
			<div>
				<p>我是div3的後代集</p>
			</div>
		</div>		
		<div class="div2">我是DIV2</div>
		<div class="div4">
			<p>我是div4下的P</p>
			<div class="div5"> 
				我是div5下的P
			</div>
		</div>
		<h1 class="haha">你好！</h1>
		<p class="haha">p</p>
		<h3 class="one"> one</h3>
		<h3 class="two">two</h3>
	</body>
</html>

#CSS基本選擇器：
	通配符 * <  標籤  <  類class  <  ID < 行間 < !important
	
	通配符：選擇頁面中所有的標籤  用*號表示
	
	標籤選擇：選擇對應所有的標籤進行樣式書寫，權重大於通配符，如：div、p、form...
	
	類名選擇：給標籤元素取名，用class屬性 值就是對應的名字(不能以數字開頭)
			用點號加名字選擇寫樣式
			一個元素上可以取多個類名,中間用空格隔開
			如果權重相同，那麼會以代碼加載順序，後面的覆蓋前面
			多個元素可以取相同類名
			
	id選擇: 給標籤元素通過屬性名id取名字，值具有唯一性, 用#加名字選擇
			自己寫樣式時很少到ID   ID更多會給JS用
			
	行間設置：權重大於ID 類名  標籤  通配符
	
	!important:手動設置最高權重 ,直接樣式後加這句，中間用空格隔開
				真用到這一步了，那麼證明你對權重理解不到位
#CSS高級選擇器:
	後代選擇：父級和後代級用空格隔開
	子代選擇：父級和子級用大於號>
	交集選擇：一般使用標籤加名字  如 ：h1.haha  選擇類名爲haha的h1標籤
	並集選擇：幾個元素共同作用同一或多條樣式, 元素之間用逗號隔開

網頁顯示效果：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9EynMpm8-1591716114920)(E:\typoraPic\image-20200609224611627.png)]$

5.圖文對齊方式

在src下新建一個img文件夾，再到網站上下載一張圖片放到該文件夾下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圖文對齊方式</title>
	</head>
	<style type="text/css">
		div{
			border: 1px red solid;
		}
		img{
            /*
            vertical-align: bottom;以圖片底部爲對齊爲基準線
            vertical-align: baseline;以圖片baseline爲對齊爲基準線
           	vertical-align: middle;以圖片中爲對齊爲基準線
            vertical-align: top;以圖片頂部爲對齊爲基準線
            */
			vertical-align: baseline;
		}
	</style>
	<body>
		<!-- 圖文對齊 -->
		<div id="">
			<span>我是span</span>
			<img src="img/小黃人相冊/1.jpg" >
		</div>
	</body>
</html>

# vertical-align屬性:
	針對於圖片設置的一個屬性
	默認基線對齊  baseline
	基本用法：設置文字和圖片對齊：上 、中、基線、下;
	
	高級用法:可解決圖片下邊有間隙的問題
			img可以看成是一文字類型,具有對齊方式:上 、中、基線、下
			給圖片設置此屬性，除了baseline值以外，都可以解決問題

網頁展示效果：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-95nghTvA-1591716114926)(E:\typoraPic\image-20200609224938738.png)]$

6.浮動屬性練習

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮動屬性練習</title>
	</head>
	<style type="text/css">
		*{
			margin: 0px;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: yellow;
			float: left;
		}
		p{
			width: 130px;
			height: 130px;
			background-color: red;
			float: left;
		}
		span{
			background-color: pink;
			float: left;
			width: 200px;
			height: 200px;
		}
	</style>
	<body>
		<div>我是DIV</div>
		<p>我是P</p>
		<span>我是span</span>
	</body>
</html>

網頁展示效果：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FcltDRfb-1591716114931)(E:\typoraPic\image-20200609231417692.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮動練習</title>
	</head>
	<style>
		#Box1{
			width: 400px;
			background-color: red;
			border: yellow 2px solid;
			/* 解決不能自動高度不能撐高的問題 */
			/* 溢出隱藏，再有些的情況下會將字集元素定位 這種方法就不適用 */
			/* overflow: hidden; */
		}
		/* 最終解決方法:僞類 */
		#Box1:after{
			content:'';display: block;clear:both;
		}
		p{
			width: 50px;
			height: 50px;
			margin: 10px;
			background-color: green;
			float: left;
		}
	</style>
	<body>
		<div id="Box1">
			<p>我是p1</p>
			<p>我是p2</p>
			<p>我是p3</p>
			<p>我是p4</p>
			<p>我是p5</p>
			<p>我是p6</p>
			<p>我是p7</p>
			<p>我是p8</p>
			<p>我是p9</p>
			<p>我是p10</p>
			<p>我是p11</p>
			<p>我是p12</p>
			<p>我是p1</p>
			<p>我是p2</p>
			<p>我是p3</p>
			<p>我是p4</p>
			<p>我是p5</p>
			<p>我是p6</p>
			<p>我是p7</p>
			<p>我是p8</p>
			<p>我是p9</p>
			<p>我是p10</p>
			<p>我是p11</p>
			<p>我是p12</p>
		</div>
	</body>
</html>

網頁展示效果：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CDkCCjoz-1591716114936)(E:\typoraPic\image-20200609231439143.png)]$

#CSS浮動屬性
	
	在標準文檔流中，很多時候需要脫標來進行頁面佈局
	脫標三種方法： 
			float(浮動)   
			absolute(絕對定位)  
			fixed(固定定位)
	脫標特性：元素無行塊之分，可設置寬高，可並排（並排的元素都要設置浮動）
	元素無論左浮還右浮都在父級大小之內
	
	float特性：子級元素設置float屬性後不能撐高自動高度的父級
		解決問題：讓子級浮動了元素也能撐自動高的父級
		解決辦法：僞類
		.big:after{
		    content: ''; display: block; clear: both;
		}
		float屬性可解決空白摺頁問題和圖片左右之間有間隙

7.塊、行、行內元素練習

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>塊、行、行內元素練習</title>
	</head>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background:red;
			display: inline;
			margin: 0px;
		}
		/*標準的文檔流把標籤分爲三類：塊元素、行內元素、行內塊元素
		 塊元素（div p h系列 ul li ol）：獨佔一行，可設置寬高，如果不設置寬，那麼會繼承父級的100%，高由內容撐高 
		 行內元素(span a i)：不獨佔一行，不可設置寬高，大小就是內容大小 
		 行內塊元素(img input)：不獨佔一行，可設置寬高 */
	</style>
	<body>
	<div>我是DIV1</div>
	<div>我是DIV2</div>
	<div>我是DIV3</div>
	<div>我是DIV4</div>
	</body>
</html>

演示效果：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CVibua7t-1591716114940)(E:\typoraPic\image-20200609231803572.png)]$

8.背景元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>背景元素</title>
	</head>
	<style>
		.box{
			width: 700px;
			height: 800px;
			margin: 50px;
			border: 2px solid green;
			/* 以顏色做背景 顏色三種表示法：英文 16進制 rgb() */
			/* background-color: rgb(0,0,0); */
			
			/* 以圖片作爲背景，與直接加一張圖片有區別 */
			/* background-image: url(img/1.jpg);
			 */
			/* 設置圖片不平鋪 */
			/* background-repeat: no-repeat; */
			
			/* 設置背景圖片的大小 接兩個值 第一個值寬 第二個值高*/
			/* cover 等比拉伸或縮放（具體看圖片的大小）到最後一條邊碰到邊爲止 contain相反 */
			/* background-size: contain; */
			
			/* 背景圖片定位 */
			/* background-position:left center; */
			
			/* 設置背景固定 */
			/* background-attachment: fixed; */
			
			/* 符合寫法 */
			background: pink url(img/3.jpg) no-repeat 30px 100px;
			background-size: 500px 500px;
			background-attachment: fixed;
		}
	</style>
	<body>
		<div class="box">我是DIV</div>
	</body>
</html>

網頁展示效果：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-EJ4GDqNk-1591716114945)(E:\typoraPic\image-20200609232121574.png)]$

# CSS背景屬性:
	在一個元素大小內，可以加入背景，這個背景可以是純色，還是一張圖片
	
	可分拆：
		background-color  設置顏色，三種表示法
		background-image  設置圖片爲背景
		background-repeat 設置平鋪方式，默認XY都平鋪   no-repeat repeat-x repeat-y
	
		background-size   設置背景圖片大小，接兩個值，第一個爲寬，第二個爲高
						  還可以拉伸圖片：cover(等比縮放,最後一條邊碰到停止)
						  還可以拉伸圖片：contain(等比縮放,第一條邊碰到停止)
						  
		background-position  接兩個值，第一值爲X軸，第二個爲Y軸
							 默認爲左上角0 0 點
							 值還可以是方位詞  left right top bottom center 
	
	複合寫法：
		background : 顏色  圖片 平鋪方式  定位

web前端--Css練習

web前端–Css練習

所用軟件：Hbuilder X

1.div塊Css設置各種樣式

2.盒模型

3.overflow的用法：

4.選擇器練習

5.圖文對齊方式

6.浮動屬性練習

7.塊、行、行內元素練習

8.背景元素

linux安裝cuda和cudnn

模擬手機設備：使用 Playwright 實現移動端自動化測試

Mellanox網卡開啓SR-IOV

全面系統的AI學習路徑，幫助普通人也能玩轉AI

HTML 00 Tutorial

uni-app實現上拉加載

vue3編譯優化之“靜態提升”

又是一個月-20240513

flask 如何保證返回json有序

linux服務器設置ssh免密

文件系統--java控制檯版

web前端--Html4

ssm第二講--Spring和Mybatis整合

JVM探究

web前端--js、jquery和Ajax練習

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結