CSS屬性相關

時間  2019-11-18
標籤 css 屬性 相關 欄目 CSS 简体版
原文   原文鏈接

寬和高

width屬性能夠爲元素設置寬度。
height屬性能夠爲元素設置高度。
塊級標籤才能設置寬度，內聯標籤的寬度由內容來決定。

字體屬性

文字字體

font-family能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。css

簡單實例：html

body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}

字體大小

p {
  font-size: 14px;
}

若是設置成inherit表示繼承父元素的字體大小值。前端

字重（粗細）

font-weight用來設置字體的字重（粗細）。git

值           描述
normal     默認值，標準粗細
bold           粗體
bolder     更粗
lighter    更細
100~900    設置具體粗細，400等同於normal，而700等同於bold
inherit    繼承父元素字體的粗細值

 

文本顏色

顏色屬性被用來設置文字的顏色。github

顏色是經過CSS最常常的指定：後端

1.十六進制值 - 如: ＃FF0000 #前兩位是表示紅，中間兩位表示綠，後面兩位表示藍，F是最高級別，0表示最低級別（無色）瀏覽器

2.一個RGB值 - 如: RGB(255,0,0) #紅綠藍就是RGB的意思，第一個參數是紅，最高255，最低0前端工程師

3.顏色的名稱 - 如: redapp

還有rgba(255,0,0,0.3)，第四個值爲alpha, 指定了色彩的透明度/不透明度，它的範圍爲0.0到1.0之間。編輯器

文字屬性

文字對齊

text-align 屬性規定元素中的文本的水平對齊方式。（letter-spacing）

值    描述
left    左邊對齊 默認值
right    右對齊
center    居中對齊
justify    兩端對齊

文字裝飾

text-decoration 屬性用來給文字添加特殊效果。

值    描述
none    默認。定義標準的文本。
underline    定義文本下的一條線。
overline    定義文本上的一條線。
line-through    定義穿過文本下的一條線。
inherit    繼承父元素的text-decoration屬性的值。

經常使用的爲去掉a標籤默認的自劃線：

a {
  text-decoration: none;
}

首行縮進

將段落的第一行縮進 32像素：

p {
  text-indent: 32px; #首行縮進兩個字符，由於我記得一個字在頁面上的默認大小爲16px
}

背景屬性

/*背景顏色*/background-color: red;
/*背景圖片*/
background-image: url('1.jpg');  #url裏面是圖片路徑，若是和html文件在一個目錄下，使用這種相對路徑就好了，
background-repeat: no-repeat; 
/* 背景重複 repeat(默認):背景圖片沿着x軸和y軸重複平鋪，鋪滿整個包裹它的標籤 repeat-x：背景圖片只在水平方向上平鋪 repeat-y：背景圖片只在垂直方向上平鋪 no-repeat：背景圖片不平鋪*/

/*背景位置*/
background-position: right top;/*background-position: 200px 200px;*/ #200px 200px 是距離父級標籤的左邊和上邊的距離，之前你們都用雪碧圖，就是將不少的網頁上須要的小圖片組合成一個大圖，用這個圖中哪一個位置的小圖片，就經過這個參數來調整，看下面的示例操做，如今不多用這個了

　　注意，qq截圖的時候能夠給你顯示像素，這個是200px*200px

　　　　

 

　　　　下面是瀏覽器的座標系：

　　　　

no-repeat 和 right top：

　　　　

效果：

　　　　

　　　　

 

background-position：200px 200px；這種參數的示例：

在抽屜上還能夠找到這個圖片：

　　　　

　　　　而後：

　　　　

　　　　你就會看到它：好多個小圖片組成的

　　　　

　　　　

　　　　

其實頁面在加載到img標籤以後，會單獨的日後端發請求，來請求這個圖，若是小圖不少的話，頁面要發好多個請求，那麼頁面加載的就慢，因此放到一個大圖上，每一個用這個大圖上面的小圖的地方，img裏面的url都指向這個一個圖片的url，這樣加載就很快了，由於只須要請求一次，你的網頁就拿到了這個圖片，其餘的請求均可以直接用這個圖，而不須要屢次請求這個圖了，而後經過這個background-position的值來調整。

　　　　

點擊小燈泡的第一個，就看到效果了，自動幫你優化寫法，這個小燈泡就是pycharm幫你提供的一些幫助

　　　　

 

支持簡寫：

background:#ffffff url('1.png') no-repeat right top;

使用背景圖片的一個常見案例就是不少網站會把不少小圖標放在一張圖片上，而後根據位置去顯示圖片。減小頻繁的圖片請求，就是剛纔說的雪碧圖。

一個有趣的例子：鼠標滾動可是背景不動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滾動背景圖示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;  #凡是這種使用百分比的，都是按照父標籤的寬度的百分之多少來顯示
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center; #這個圖片好像沒有了，本身找一個網上的圖片，把這個url路徑換一下，能夠到攝圖網去看看，國內免費的一個圖片網站
            background-attachment: fixed;  #就是這個屬性，讓你的背景圖片固定住的意思，attachment是附屬、依附的意思
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>
View Code

邊框

邊框屬性

　　　　　　1.border-width 寬度

　　　　　　2.border-style 樣式

　　　　　　3.border-color 顏色
#i1 {
  border-width: 2px;  
  border-style: solid;
  border-color: red;
}

一般使用簡寫方式：

#i1 {
  border: 2px solid red;
}

邊框樣式

值    描述
none    無邊框。
dotted    點狀虛線邊框。
dashed    矩形虛線邊框。
solid    實線邊框。

除了能夠統一設置邊框外還能夠單獨爲某一個邊框設置樣式，以下所示：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius

　　　　用這個屬性能實現圓角邊框的效果。

　　　　將border-radius設置爲長或高的一半便可獲得一個圓形。

　　　　

　　　　

　　　　效果：

　　　　

　　　　

　　　　

　　　　還可在調試窗口調整顏色來測試（調試窗口：頁面上右鍵--檢查，或者f12）

　　　　

　　　　調整好以後，把調整後的值複製到css屬性裏面就好了

　　　　還能夠經過hover來設置鼠標移動上去變顏色：

　　　　

　　　　

　　　　　　

　　　　　　你會看到以前的background-color有了一個橫線，這是不生效的效果，由於你查看的hover的樣式

　　　　　　還能夠看到class

　　　　　　

　　　　　　

　　　　　　把對勾去了，這個class的樣式就不顯示了

　　　　　　經過調試窗口還能夠玩一個神奇的東西：document.body.contentEditable=true

　　　　　　

　　　　　　不用ps就可以改了：注意昂，只能改當前頁面的顯示內容，改不了真實的值，而且頁面一刷新，這個指令就失效了，須要從新輸入

display屬性

用於控制HTML元素的顯示效果。

值    意義
display:"none"    HTML文檔中元素存在，可是在瀏覽器中不顯示。通常用於配合JavaScript代碼使用。
display:"block"    默認佔滿整個頁面寬度，若是設置了指定寬度，則會用margin填充剩下的部分。
display:"inline"    按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什麼影響。
display:"inline-block"    使元素同時具備行內元素和塊級元素的特色。

display:"none"與visibility:hidden的區別：

　　　visibility:hidden: 能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

　　　display:none: 能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。

　　　建立標籤時的簡寫方法：

　　　　

　　　　看效果：

　　　　

　　　　

　　　　或者簡寫：

　　　　

　　　　而後按一下tab鍵：

　　　　

　　　　而後看div裏面套一個a標籤

　　　　

　　　　而後一回車

　　　　

　　　　

　　　　

　　　　這些都是編輯器提供的快捷方式。

　　　　

　　　　

　　　　在加一個$符號：

　　　　

　　　　

　　　　

　　　　按delete刪除：

　　　　一下就刪除了三個了：

　　　　

 

　　注意一點：塊級標籤無論設置的寬度是多少，都會佔用你整個頁面寬度的空間，看下面

　　　　

　　　　

 

　　　　

　　　　而後看一下display的效果inline-block，高度寬度還能夠設置，包含內聯和塊級標籤的屬性

　　　　

　　　　

　　　　還能夠經過display：block將內聯標籤改成塊級標籤的效果

　　　　

 

　　　　看效果：

　　　　

　　　　

　　　　

　　　　看效果　　　　

　　　　

　　　　

　　　　

　　　　不佔用位置，也不顯示

CSS盒子模型

　在css裏面，每一個標籤能夠稱爲一個盒子模型，看下面的圖：
　　　　1.margin:外邊距：用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。

　　　　2.padding:內邊距：用於控制內容與邊框之間的距離；   

　　　　3.Border(邊框):  圍繞在內邊距和內容外的邊框。

　　　　4.Content(內容): 盒子的內容，顯示文本和圖像。

看圖吧：

 

margin外邊距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

　　

　　　　因此在寫css樣式的時候，都會先寫一個

　　　　

　　　 意思是說，body的上下左右的margin都設置爲0.

　　　　在看一個，若是將上下兩個標籤都設置了margin是什麼效果

　　　　

　　　　

　　　　

推薦使用簡寫：

.margin-test {
  margin: 5px 10px 15px 20px;
}

順序：上右下左

常見居中：

.mycenter {
  margin: 0 auto;  #上下0像素，左右自適應，居中的效果
}若是你寫的是三個：margin: 10px 20px 10px;意思是上爲10，左右爲20，下爲10

padding內填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推薦使用簡寫：

.padding-test {
  padding: 5px 10px 15px 20px;
}

　順序：上右下左

　　　　補充padding的經常使用簡寫方式：

  • 提供一個，用於四邊；

  • 提供兩個，第一個用於上－下，第二個用於左－右；

  • 若是提供三個，第一個用於上，第二個用於左－右，第三個用於下；

  • 提供四個參數值，將按上－右－下－左的順序做用於四邊；

float浮動

在 CSS 中，任何元素均可以浮動。最開始出現浮動這個東西是爲了什麼呢，記不記得一個word文檔裏面，插入圖片的時候，有一個文字環繞的效果啊：

　　　　

　　　　最開始浮動這個東西是想要作上面這種效果用的，如今多數用來作網頁佈局的。不少的網站都是左邊一個菜單欄，右邊一堆的其餘內容。

　　　　img

　　　　

　　　　看效果：

　　　　

　　　　那怎麼讓綠色的這個跑到紅色的左邊呢？

　　　　

　　　　

　　　　

　　　　上面是浮動的一個最簡單的用法，可是浮動有一個反作用，看：

　　　　從新建立一個htnl文件，寫上下面的內容

　　　　

　　　　css樣式：

　　　　

 

　　　　效果是這樣的：

　　　　

　　　　怎麼讓下面這個粉色的跑到右邊去啊

　　　　

 

　　　　刷新看看效果：

　　　　

兩個紅色的設置了一個往左浮動一個往右浮動，c3那個標籤沒有設置浮動以後，發現紅色的兩個雖然浮動了，可是粉色的這個跑上去了，兩個紅色的壓在這個粉色的標籤上了。

先看這個問題昂：在給c2的div標籤加上浮動以前是下面這樣的效果：

　　　　

　　　　並無給c1那個div標籤設置高度，可是發現c1這個div標籤是有高度的，這是由於裏面兩個c2div設置了高度了，這兩個div將c1這個div標籤撐起來了

　　　　當加上浮動以後，再看這個c1的div標籤的高度：發現c1這個div的高度沒有了，顯示的高度是1.99，是由於給它設置了邊框，上下邊框加起來正好2px，這裏顯示了個約等的值

　　　　

　　　　這就看到了浮動的反作用，浮動起來之後脫離了整個頁面文檔，而後兩個c1的div標籤，一個往左靠，一個往右靠，沒法撐起本身的父級標籤了，也就是那個c1的div標籤，那麼粉色的c3那個標籤就上去了。影響了頁面的整個佈局。

　　　　不想讓粉色的這個標籤頂上去怎麼辦，看一下c1這個標籤的子標籤的高度(內邊距+外邊距+邊框寬度+標籤高度)，而後給c1這個父標籤的高度設置成這個值，可是若是兩個子標籤的高度不相等呢，而且未來這樣的標籤要是不少怎麼辦，因此通常不用這種方法來解決浮動的問題，看下面的clear，清除浮動。

浮動元素會生成一個塊級框，而不論它自己是何種元素。

關於浮動的兩個特色：

  • 浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

  • 因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

三種取值

　　　　left：向左浮動

　　　　right：向右浮動

　　　　none：默認值，不浮動

clear

clear屬性規定元素的哪一側不容許其餘浮動元素。

值    描述
left    在左側不容許浮動元素。
right    在右側不容許浮動元素。
both    在左右兩側均不容許浮動元素。
none    默認值。容許浮動元素出如今兩側。
inherit    規定應該從父元素繼承 clear 屬性的值。

注意：clear屬性只會對自身起做用，而不會影響其餘元素。按照上面那個例子的意思就是說，能夠給粉色的那個c3屬性的div標籤設置一個clear：both，意思是說，這個標籤的左右都不能有浮動的標籤，那麼它只能跑到兩個浮動的c2div標籤的下面，可是通常都會再c2和c3的中間加一個別的標籤，給這個標籤設置一個clear屬性，而且高度設置爲0，或者不給高度，由於浮動的標籤是本身c1裏面的，因此要本身解決，才能撐起本身的高度，而且再用其餘的標籤的時候，就不須要再考慮浮動的問題了，直接寫本身的樣式就能夠了，否則每次加其餘的標籤都要去看看上面的標籤有沒有浮動的。

接着看上面這個示例，若是這樣設置：

　　　　

　　　　

　　　　

這樣粉色的這個標籤就上不去了

清除浮動

　　　　浮動的反作用（父標籤塌陷問題），因此要清除浮動

　　　　主要有三種方式：

  • 固定高度 就是剛纔的示例，在父標籤裏面加一個其餘的標籤

  • 僞元素清除法 css來解決

  • overflow:hidden 給塌陷的父級標籤設置這個屬性就能夠清除浮動。

　　僞元素清除法（使用較多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

經過微元素清除法來清除一下浮動：

　　

　　　　

　　　　

　　　　效果是同樣的：

　　　　

　　　　通常業內約定成俗，都把這個清除浮動的class屬性命名爲clearfix，而不是cc，若是在別的網頁看到了這個clearfix，這個必定是用來清除浮動的。

　　　　總結一下：爲何要有浮動，是想作頁面佈局，可是浮動有反作用，父級標籤塌陷，因此要想辦法去掉這個反作用，使用了clear來清除浮動帶來的反作用，固然也能夠經過設置標籤爲inline-block來實現這種佈局效果，可是把一個塊級標籤變成一個相似內斂標籤的感受，很差操控，容易混亂，因此通常都用浮動來進行佈局。

overflow溢出屬性 

值    描述
visible    默認值。內容不會被修剪，會呈如今元素框以外。
hidden    內容會被修剪，而且其他內容是不可見的。
scroll    內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto    若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit    規定應該從父元素繼承 overflow 屬性的值。

  • overflow（水平和垂直均設置）

  • overflow-x（設置水平方向，只出現x軸的滾動條）

  • overflow-y（設置垂直方向，只出現y軸的滾動條）

　　舉個例子：

　　　　好比在一個標籤裏面寫了一堆的文字，而後把標籤的高度和寬度設置的比較小的時候，文字就溢出了：

　　　　

　　　　

　　　　而後就能夠設置一下，若是文字溢出了，溢出的部分怎麼辦，設置一個overflow爲hidden：

　　　　

　　　　再看效果，溢出的文字就不顯示了。

　　　　

　　　　若是設置成overflow爲scroll，就會出現滾動條，改動一個下標籤的高度和寬度昂，要否則很差看出效果：

　　　　

　　　　看效果：

圓形頭像示例

<!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;  #若是這個高度和寬度比圖片的像素小怎麼辦，圖片顯示不全，由於用戶上傳的頭像沒準多大像素的，就須要設置下面哈格.header-mg>img，裏面寫上max-width:100%了
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;  #圓形的邊框
      overflow: hidden;    #溢出的內容隱藏
    }
    .header-img>img {
      max-width: 100%; #至關於將圖片的大小設置爲父級標籤的大小來顯示了，由於用戶上傳的頭像的像素是不知道的，就讓它按照父級標籤的大小來，就能放下整個頭像了，就不會出現頭像顯示不全的問題了#直接寫width:100%就行，上面寫max-width的意思是若是圖片大於設置的標籤高寬的時候，就按照父級標籤的大小來，比父級標籤的高寬小的時候，就不須要按照父級標籤的大小來了，瞭解一下就好了
    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
</div>

</body>
</html>
View Code

　img

　　下面來學習定位：也是用來佈局的，通常用來作一些小的佈局，例如小米商城：

　　　　

　　　　還有網站右上角這個東西：

　　　　

　　　　這些小範圍的佈局通常都是定位作的，大範圍的佈局通常都是用float來作的

　　　　

 

定位（position）

static（無定位）

static 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的。

relative（相對定位）

相對定位是相對於該元素在文檔流中的原始位置，即以本身原始位置左上角爲參照物。即便設定了元素的相對定位以及偏移值，元素還佔有着原來的位置，即佔據文檔流空間。對象遵循正常文檔流，因此不會出現像浮動那種父級標籤塌陷的反作用，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。往上移動🔝-100px（注意是負值）或者bottom：-100px（負值），往左移動：left:-100px（也是負值）或者right：-100px，往下移動:bottom：100px（正值）或者top：100px（正值），往右移動：right:100px（正值）或者left：100px。凡是標籤要進行移動，無論是float仍是relative仍是線面的absolute，都是按照元素本身的左上角進行計算的

注意：position：relative的一個主要用法：方便下面要學的絕對定位元素找到參照物。能夠將元素設置成relative，不設置任何的top、left、right、bottom等，它仍是它原來的位置

absolute（絕對定位）

定義：設置爲絕對定位的元素框從文檔流徹底刪除，也會有父級標籤塌陷的問題，並相對於最近的已定位祖先元素定位，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：若是父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角爲原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級爲自適應的，那子元素就設置position:absolute;父元素設置position:relative;，而後Top、Right、Bottom、Left用百分比寬度表示。

另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。

fixed（固定）無論頁面怎麼動，都在整個屏幕的某個位置

fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。

在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<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;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;  #水平居中
      position: fixed;
      right: 10px;  #距離窗口右邊框的距離
      bottom: 20px; #距離窗口下邊框的距離      /*height：20px；　　　 line-height：20；當line-height等於height的值的時候，就能實現一個文本居中的效果 */
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回頂部</div>
</body>
</html>
View Code

z-index

#i2 {
  z-index: 999;
}

設置對象的層疊順序。通常用在模態對話框上：

　　　　　　

　　　　　那麼誰在上面顯示，誰被壓在下面的呢，就是經過這個z-index來設置的。

  1. z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，

  2. 只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素float不能使用z-index

  3. z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。

  4. 從父現象：父親慫了，兒子再牛逼也沒用

　　#自定義的一個模態對話框示例代碼：

<!DOCTYPE html>
<html lang="en">
<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>
    .cover {
      background-color: rgba(0,0,0,0.65); #rgba的最後一個參數就是透明度的意思，因此若是咱們這樣寫，就不須要寫下面那個opcity了，可是這個只表示的背景顏色的透明度，opcity是標籤的透明度及標籤的內容(包括裏面的文字)及標籤下面的子標籤的透明度
      position: fixed;
      top: 0;
      right: 0;  top\right\bottom\left都設置爲0，意思就是全屏，這個標籤把全屏都覆蓋了
      bottom: 0;
      left: 0;
      z-index: 998;      #opcity:0.4; #設置元素的透明度
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;  #設置了left：50%和top：50%，你就會發現，你這個標籤的左上角相對於頁面的左面是50%，上面是50%，因此咱們還要移動窗口，往左移動標籤寬度的一半，往上移動高度的一半就好了。就是下面的margin設置
      top: 50%;
      margin: -200px 0 0 -300px; #左下右上，別忘了，往左移動要負值，往上移動要負值，由於它的移動是按照本身標籤的左上角來移動的。
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>
View Code

pycharm的用法，自定義快捷鍵：

　　　　

而後點擊apply和ok：

　　　　　　

在到html頁面中也一個hya：

　　　　　　

就看到了這些文字：

　　　　　　

在pycharm的使用祕籍裏面都有，網上一搜pycharm的使用

opacity

用來定義透明效果。取值範圍是0~1，0是徹底透明，1是徹底不透明。

綜合示例

頂部導航菜單

<!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>li標籤的float示例</title>
  <style>
    /*清除瀏覽器默認外邊距和內填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a標籤默認的下劃線*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*刪除列表默認的圓點樣式*/
      margin: 0; /*刪除列表默認的外邊距*/
      padding: 0; /*刪除列表默認的內填充*/
    }
    /*li元素向左浮動*/
    li {
      float: left;
    }

    li > a {
      display: block; /*讓連接顯示爲塊級標籤*/
      padding: 0 15px; /*設置左右各15像素的填充*/
      color: #b0b0b0; /*設置字體顏色*/
      line-height: 40px; /*設置行高*/
    }
    /*鼠標移上去顏色變白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮動 解決父級塌陷問題*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 頂部導航欄 開始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">雲服務</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">優品</a></li>
  </ul>
</div>
<!-- 頂部導航欄 結束 -->
</body>
</html>
View Code

上面的導航欄的效果：

　　

 

　　在寫一個頁面的時候，首先寫頁面的總體結構，就是佈局，大塊先搞出來，再大塊的基礎上來來寫小塊，而後一級一級的這麼寫。看下面的小米商城的示例，按照紅框--黃框--子框--藍框來看整個佈局：

　　

產品經理需求-->UI（視覺、交互等各類UI）將這些頁面作成圖片（包括裏面的文字大小圖片大小等都給你準備好，標的很清楚）-->前端工程師（經過前端代碼來實現UI的頁面）-->後端工程師（寫提供數據、處理數據的邏輯）-->DBA管理數據

　最後css只作動畫效果的方式：鼠標移動到標籤上的時候，出現動態效果和陰影的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*給標籤加上鼠標移動上去的一些效果*/
        #test{
            height: 200px;
            border: 1px solid black;

        }
        #test:hover{
            box-shadow: 0 5px 10px;  /*給標籤加陰影的效果，參數1是水平方向的陰影，參數2的5px是垂直方向上的陰影，參數3是陰影的範圍*/
            transform: translate3d(3px,-2px,0); /*鼠標移動上去以後有個標籤往上臺的效果，三個參數是：x軸，y軸，z軸，如今的效果是y軸方向往上移動2px,x軸往右移動3px*/
            transition:all,.2s linear; /*這個的意思是全部的新樣式改變，在0.2秒內慢慢的顯示出來*/
        }

    </style>
</head>
<body>

<div id="test"></div>

</body>
</html>
View Code

有一個作網頁的時候的一個圖片示例的網址：https://dummyimage.com/

若是在這個網址後面輸入下面的內容：

　　　　

一回車，你就看到下面的這個圖：

　　　　

 

注意一點：

當寫了新的css樣式的時候，若是本身調試的時候發現頁面上刷新不出來，是由於瀏覽器有可能還在使用以前的樣式，教一個方法，讓你寫的新的css生效的方法：

f12打開瀏覽器調試窗口，找到下面這個設置：

　　　　　　

　　　　

　　　　

而後刷新頁面就能夠了。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程