Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 日本系列第一页,亚洲视频1区,性感美女一级片 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          CSS定位屬性用CSS定位屬性精確控制你的網頁布局！
          
        
           
          
	
	
          
		
                        
          這里是云端源想IT，幫你輕松學IT”
          嗨~ 今天的你過得還好嗎？
          有些時候
          為了看到光明
          你必須冒險闖入黑暗之中
          - 2024.03.29 -
          CSS定位屬性是用于控制網頁中元素位置的一種方式，它能夠讓元素在頁面上精準地落在我們想要的位置。
          在CSS中，定位（Positioning）是控制元素在頁面上如何定位和顯示的一種機制。它主要包括四種屬性：靜態定位（static）、相對定位（relative）、絕對定位（absolute）、固定定位（fixed）。
          每種定位方式都有其獨特的特點和使用場景，下面將分別介紹這幾種定位屬性。

          一、Static（靜態定位）
          靜態定位是元素的默認定位方式，元素按照正常的文檔流進行排列。在靜態定位狀態下，不能配合top、bottom、left、right來改變元素的位置。

          • 可以用于取消元素之前的定位設置。

          代碼示例：
          <!DOCTYPE html>
<html>
<head>
<style>
.static {
background-color: lightblue;
padding: 100px;
}
</style>
</head>
<body>

<div>這是一個靜態定位的元素。</div>

</body>
</html>
          二、Fixed（固定定位）
          固定定位使元素相對于瀏覽器窗口進行定位，即使頁面滾動，元素也會保持在固定的位置。
          • 固定定位的元素會脫離正常的文檔流。

          示例代碼：
          <!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.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
/* 給整個頁面設置高度，出滾動條以便觀察 */
height: 5000px;
}
div{
width: 100px;
height: 100px;
background-color: blue;
/* 固定定位 */
position: fixed;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div></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.0">
<title>Document</title>
<style>
body {
position: relative;
}
.content {
/* 頁面內容樣式 */
}
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body style="height: 5000px;">
<div>
</div>
<button id="backToTop" onclick="scrollToTop()">返回頂部</button>
<script>
function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>
</body>
</html>
          運行結果：
          三、Relative（相對定位）
          相對定位是將元素對于它在標準流中的位置進行定位，通過設置邊移屬性top、bottom、left、right，使指定元素相對于其正常位置進行偏移。如果沒有定位偏移量，對元素本身沒有任何影響。
          • 不使元素脫離文檔流，空間會保留，不影響其他布局。

          代碼示例：
          <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:relative;/*相對定位*/
left:100px;/*向右偏移100px*/
top:-50px;/*向上偏移50px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
          運行結果：
          沒使用相對定位之前是這樣的：
          使用相對定位后：相對于原來的位置向右偏移了100px，向上偏移50px。
          雖然它的位置發生了變化，但它在標準文檔流中的原位置依然保留。

          四、Absolute（絕對定位）
          絕對定位使元素相對于最近的非 static 定位祖先元素進行定位。如果沒有這樣的元素，則相對于初始包含塊（initial containing block）。絕對定位的元素會脫離正常的文檔流。
          • 如果該元素為內聯元素，則會變成塊級元素，可直接設置其寬和高的值（讓內聯具備快特性）；
          • 如果該元素為塊級元素，使其寬度根據內容決定。（讓塊具備內聯的特性）
          <style>
.wrap{
width:500px;
height:400px;
border: 2px solid red;
}
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:absolute;/*絕對定位*/
left:100px;/*向右偏移100px*/
top:30px;/*向下偏移30px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;

}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
          將第二個設置為絕對定位后，它脫離了文檔流可以定位到頁面的任何地方，在標準文檔流中的原有位置會空出來，所以第三個會排到第一個下面。
          第二個相對于它的父元素向右偏移100，向下偏移30。
          想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想
          五、z-index（層級順序的改變）
          層疊順序決定了元素之間的堆疊順序。z-index 屬性用于設置元素的層疊順序。具有較高 z-index 值的元素會覆蓋具有較低 z-index 值的元素。

          注意：
          • 默認值是0
          • 數值越大層越靠上
          • 不帶單位
          • 沒有最大值和最小值
          • 可以給負數

          代碼示例：
          <!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.0">
<title>Document</title>
<style>
div:nth-of-type(1){
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
}
div:nth-of-type(2){
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
div:nth-of-type(3){
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>

</body>
</html>
          運行結果：
          可以看到，最后一個div依然存在，但是看不見了，原因就是我們改變了z-index屬性值。
          以上就是CSS定位屬性的介紹了，通過這些定位屬性，可以靈活地控制網頁中元素的位置和堆疊順序。

          在實際應用中，CSS定位屬性的使用需要考慮到整體布局和用戶體驗。合理運用這些定位技巧，可以讓你的網頁不僅美觀，而且易于使用和維護。記住，好的設計總是細節和功能的完美結合。

          我們下期再見！
          END
          文案編輯|云端學長
          文案配圖|云端學長
          內容由：云端源想分享
          >position 屬性是布局函數的關鍵工具，通過改變元素的位置和大小屬性。了解如何正確設置這個屬性將有助于根據要求對頁面進行最出色的布局。 position 屬性使頁面渲染和布局更加靈活并便于設計更("\\( \ )"精心處理的頁面。
          取一個網頁，我們需要了解一下網頁的結構，如果想要深入學習，建議看一下《網頁設計與制作》，這本書講述較為詳細，推薦閱讀。
          網頁的三大組成部分——HTML、CSS、JavaScript，如果把網頁比作一個人的話，HTML相當于骨架，JavaScript相當于肌肉，而CSS相當于皮膚，三者結合起來形成一個完整的網頁。
          網頁基本結構
          1.HTML
          HTML（Hyter Markup Language 超文本標記語言），主要是通過HTML標記對網頁中的文本、圖片、聲音等內容進行描述。HTML提供了很多種標記，如段落標記（p標簽）、圖片標記（img標簽）、視頻標記（video標簽）等，網頁中需要定義什么內容，就可以用相應的標記描述。
          首頁源代碼
          從圖可見，網頁內容是通過HTML標記（圖中帶有“<>”的符號）描述的，整個網頁由各種標簽嵌套而成。
          2.CSS
          HTML其實是一個純文本文件，只是網頁的一個骨架，只有HTML的網頁其實并不美觀，為了讓網頁看起來更好看，我們需要借助CSS。
          CSS（Cascading Style Sheets 層疊樣式表），“層疊”指的當HTML中引用了數個樣式文件，并且樣式發生沖突時，瀏覽器能依據層疊順序處理，“樣式”指的是網頁文字、圖片等的大小、顏色、排列等格式。
          body {
    font: 12px/1.14 SF Pro Display,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #333;
    outline: 0;
}
font、color、outline即樣式設置
          CSS的位置很靈活，即可以嵌入在HTML文檔中，也可以時一個單獨的外部文件，如果是獨立的文件，則必須以.css為擴展名，使用link標簽引入文件。上圖CSS顯示為內嵌方式，一般集中放在HTML文檔頭部（<head>標簽內）。
          3.JavaScript
          JavaScript，簡稱JS，是一種腳本語言，可使網頁具有交互性（HTML和CSS制作的網頁是靜態網頁），js腳本語言使得用戶與信息是一種實時、動態、交互的頁面功能，如頁面效果切換、動畫效果、頁面游戲等，它還可以控制cookies，包括創建和修改等。
          JavaScript通常也是以單獨文件形式加載，后綴為js，在HTML中通過script標簽引入，如<scrip src="jquery-2.1.0.js" type="text/javascript"></script>。
          4.爬蟲的基本原理
          我們可以把互聯網看作一張大網，而爬蟲（即網絡爬蟲）就是在網上爬行的蜘蛛，把網的節點比作一個個網頁，爬蟲爬到一個節點就相當于訪問了該頁面，獲取了其信息，節點之間的線就像與網頁與網頁之間的鏈接關系，蜘蛛可順著節點連接繼續爬行到下一個節點，即通過一個網頁爬取另一個網頁，這樣整個網的節點都可以被爬取到了。
          那么爬蟲的基本過程可以簡單概述為：獲取網頁——提取信息——保存數據。
          靜態網頁與動態網頁
          靜態網頁：用HTML代碼編寫的頁面，每個網頁都有一個固定的URL，加載速度快，編寫簡單，但可維護性差、交互性差，不能根據URL靈活多變地顯示內容。
          動態網頁：以數據庫技術為基礎，可以大大降低網站維護的工作量，它可以動態解析URL參數的變化，關聯數據庫并動態呈現不同的頁面內容，可以實現用戶登錄與注冊功能。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲视频一区二区三区|
日韩免费无码视频一区二区三区|
精品少妇一区二区三区在线|
无码精品人妻一区二区三区中|
成人精品视频一区二区|
一区二区三区国产精品|
一区二区视频在线免费观看|
亚洲av色香蕉一区二区三区|
无码精品黑人一区二区三区|
国产成人精品a视频一区|
少妇无码一区二区二三区|
狠狠爱无码一区二区三区|
亚洲av综合av一区二区三区|
国模少妇一区二区三区|
www.亚洲一区|
波多野结衣av高清一区二区三区|
久久精品无码一区二区三区免费
|
久久99国产精品一区二区|
精品在线视频一区|
韩国一区二区三区|
精品国产一区二区三区久久狼|
亚洲熟妇无码一区二区三区|
无码人妻精品一区二区三区蜜桃|
日本免费一区二区三区
|
影院成人区精品一区二区婷婷丽春院影视
|
亚洲AV无码一区二区三区久久精品|
国产午夜精品免费一区二区三区|
丰满少妇内射一区|
久久国产免费一区二区三区
|
大香伊蕉日本一区二区|
麻豆va一区二区三区久久浪|
国产一区高清视频|
亚洲一区二区高清|
免费一区二区无码东京热|
国产一区二区三区久久|
亚洲一区二区三区高清视频|
国产精品第一区揄拍|
八戒久久精品一区二区三区
|
麻豆天美国产一区在线播放|
亚洲综合一区二区精品导航|
97精品国产一区二区三区|