web知識學習

憂鬱，灑脫發表於2019-04-12
Web
  • web前端技術指的不是某一項技術，而是一系列技術集合，主要包括：
  • html--結構標準：負責網頁結構的搭建
  • css--樣式標準/表現標準：負責網頁的美化工作
  • js--行為標準：負責網頁的行為動作

行業詞條

  • Internet-->網際網路
  • www-->全球資訊網（資料空間）world wide web 全球資訊網，簡稱www或3w
  • URL-->統一資源定位器（網路地址）
  • HTTP-->超文字傳輸協議
  • w3c-->全球資訊網聯盟（他是一個組織不是某一個公司）
  • 網站-->多個頁面的集合（首頁，內容頁，列表頁）
  • 網頁-->網頁檔案就是字尾名以html或者.html結尾的檔案，文字，圖片，超連結；
  • 瀏覽器：觀看網頁最終效果的平臺

瀏覽器（五大瀏覽器廠商）

  • IE
  • 谷歌（谷歌和蘋果的核心是一樣的）
  • 火狐
  • 蘋果
  • 歐朋 注：其他瀏覽器就是用的是別人的瀏覽器的技術。

Html

  • 定義：超文字標記語言
  • html分為四個階段
    • html2.0-->1995年由RFC組織釋出
    • html3.0-->w3c（官方的組織）制定一系列規範
    • html4.0.1-->XHTML1.0(目前常用版本)-->XHTML相當於html的嚴謹版
    • html5.0-->發展趨勢2008年起稿，2012年推廣
  • html語法規範
    • 標籤、標記符號--<>又稱尖括號
    • html語言必須寫在標籤符號裡面
    • html中的標籤大多數都是成對出現
    • 關閉符號---/又稱反斜槓
    • （HBuilder）

html頁面

<!DOCTYPE html>描述當前檔案的版本資訊，如果沒有詳細說明4.0還是X1.0那就是5版本
<html lang="en">html檔案
<head>網頁的頭部
    <meta charset="UTF-8">   ---巢狀  （UTF-8國際編碼的意思）如果不寫，或者寫成其它都會有問題
    <title>Title</title>   --網頁的標題
</head>
<body>
所有自己寫的html程式碼都放在body中
</body>
</html>

複製程式碼
  • 注意：html文件不能正常識別回車和換行，只能使用特定程式碼實現；標籤、標記、節點、元素都是尖括號
  • 程式碼工具推薦：dw、sublime、HBuilder、WebStorm、notepad++、editplus、
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我是h1標籤</h1>>
<h2>我是h2標籤</h2>>
<h3>我是h3標籤</h3>>
<h4>我是h4標籤</h4>>
<h5>我是h5標籤</h5>>
<h6>我是h6標籤</h6>
<p>我是p代表這裡是文章段落</p>
</body>
</html>
複製程式碼
  • 瀏覽器只認識標籤，想表達的東西自能用相應的標籤來表示
  • 標籤語義化的好處：語義化做的好，可以讓搜尋引擎把你的網站排名靠前
  • h和p標籤
    • h有六個標籤，從1-6依次變小
    • p發文章內容

bui標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bui標籤</title>
</head>
<body>
<b>我是b代表加粗</b>
<br>-----代表換行，br按tab鍵
<strong>我也是加粗  可以代表強調語義化</strong>
<br>-----代表換行，br按tab鍵
<u>我是u代表下劃線</u>
<br>   -----代表換行，br按tab鍵
<i>我是i代表傾斜</i>
<em>我是em  也是傾斜多了強調的語義</em>
<s>我是s  代表刪除線  這種寫法被漸漸淘汰</s>
<del>我是del 也代表刪除線  這種寫法是主流</del>
</body>
</html>
複製程式碼

img圖片標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
正常的圖
<br />
<img src="1.jpg" />
<br />
設定了寬高的圖
<br />
<img src="1.jpg" width="200" height="200"/><br />
等比例縮放：寬或高設定其中一個 另外一個就等比例縮放了<br />
<img src="1.jpg" width="200" /><br />
有提示文字的---滑鼠懸停的提示文字<br />
<img src="1.jpg" title="我是滑鼠懸停才能看到的文字" /><br />
圖片沒有載入出來的時候才出現的文字2.可以讓網頁讓閱讀器把alt中的文字念出來  為了視使用者名稱的體驗這是一個人<br />
<img src="11.jpg" alt="我是提醒文字（描述這張圖片的內容  這是一張野外的小鳥站立圖）" />
</body>
</html>
複製程式碼
<img src="圖片名字" width="寬度" height="高度" alt="1、圖片未載入的提示文字2、網頁閱讀器可以讀取這裡的文字" title="滑鼠懸停時候的提示文字" />
注意：屬性名="屬性值" 屬性名="屬性值"；
空格不能丟，符號都要使用英文狀態下，屬性設定不分先後；
寬高設定其中一個，另外一個就等比例縮放；
複製程式碼
  • 相對路徑
  • 絕對路勁
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--ctrl+?可以實現註釋使用者看不到-->
<!--這兩個是屬於相對路勁-->
<img src="../../1.jpg" />
<img src="1.jpg" />
<!--以下屬於絕對路勁-->
<img src="file:///C:/Users/11839/Desktop/%E9%97%AE%E9%A2%98%E7%82%B9%E5%8F%8A%E6%80%BB%E7%BB%93/js-css-html/1.jpg />
</body>
</html>
複製程式碼
  • 連結
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--跳轉到百度官網    如果想跳轉到線上網址必須要新增http://-->
<a href="http://www.baidu.com">跳轉到百度官網</a><br />
<!--跳轉檔案alt+? 程式碼提示功能-->
<a href="Img標籤.html">我想跳轉到Img標籤</a><br />
<!--target="blank"可以設定新視窗開啟-->
<a href="html文章標籤.html" target="_blank" >我想在新視窗開啟</a>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p>我是文字</p>
<p id="hahaha">1112233</p>
<!--暫時不知道寫什麼地址的時候要用 並號來代表空連結-->
<a href="###">我不知道點選之後跳轉到哪裡</a><br />
<a href="javascript:">我還不知道點選之後跳轉到哪裡javascript</a><br />
<a href="javascript:void(0);">我不知道點選之後跳轉到哪裡javascript void</a><br />
<!--以上三種寫法都正確，寫一個或兩個才提bug-->
<a href="#hahaha">我是想跳轉到某位置</a>
<!--參照淘寶電梯導航-->
<p>asadds</p>
<p>asadds</p>
<p>asadds</p>
<p>asadds</p>
<p>asadds</p>
<p>asadds</p>
<p>asadds</p>
<p>asadds</p>
<p>asadds</p>
<p>asadds</p>
<p>asadds</p>
<p>asadds</p>
<p>asadds</p>
</body>
</html>
複製程式碼
  • 注意：如果要跳轉到線上地址，必須加http://.本地檔案直接寫路勁；
  • 空連結寫法：1、### 2、javascript; 3、javascript:void(0);這三種都可以
  • 錯點連結：點選之後可以跳轉到頁面的對應位置，給像跳轉到的位置寫一個id屬性，a標籤中的href屬性寫#id的值
  • 表單
    • action：代表要提交給哪一個後臺程式
    • method： 代表傳輸過程中使用那種形式post(加密) get(不加密)
<input type="" />     input 代表輸入框標籤（單標籤），type型別決定這個輸入框的型別
Name屬性代表 這個輸入框的名字；
id打包輸入框的id編號
Value代表預設輸入框（不符合使用者體驗、應用換成placeholder）
注意：placeholder屬性ie低版本不相容，但是我們實際工作中還要使用，因為漸進增強（隨著瀏覽器版本的提升，效果越來越好）、優雅降級（在高版本瀏覽器顯示效果好的前提下，保證了低版本瀏覽器不錯亂）
1.type="text" 代表普通輸入框
2.type="password"  代表密碼輸入框
複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--所以的表單要填寫的資料都要放在form標籤中巢狀-->
<!--action代表要提交給哪一個後臺程式-->
<!--method 代表傳輸過程中使用那種形式post(加密) get(不加密)-->
<form action="" method="post"></form>
<!--input 代表文字框標籤type是型別的意思 如果設定text 代表最標準的輸入框-->
<!--name代表此輸入框的名字-->
<!--id代表此輸入框的id編號-->
<!--value代表預設文字，文字框的文字-->
<!--暱稱：<input type="text" name="hha" id="hhee" value="哈哈哈呵呵" />-->
暱稱：<input type="text" name="hha" id="hhee" placeholder="哈哈哈呵呵" /><br>
<!--placeholder屬性屬於html5最新的屬性，它不相容ie低版本瀏覽器（6、7、8、9）
此效果雖然低版本ie不支援，但是不會造成頁面的混亂，我們就認為此屬性沒有問題，
以漸進增強（隨著瀏覽器版本的升高使用者體驗越來越好）優雅降級（高版本瀏覽器效果好，保證低版本瀏覽器不混亂）-->
密碼：<input type="password" />
</body>
</html>
複製程式碼
  • 單選按鈕
  • Type="radio"
  • 注意：如果想讓文字點選能切換，那要加label標籤，並且設定for屬性和對應的單選按鈕的id屬性值一致，必須給這一組單選按鈕新增name值，才可以實現單選效果；設定預設選中狀態，要給單選按鈕新增checked="checked"
<!--性別：<input type="radio" />男<input type="radio" />女<input type="radio" />保密-->
性別：<input type="radio" name="xb" id="nan" /><label for="nan">男</label><input type="radio" name="xb" id="nv"/><label for="nv">女</label><input type="radio" name="xb" id="mi"/><label for="mi">保密</label>

複製程式碼

下拉選單

  • select和option的組合
  • 注意：如果想設定多組下拉選單，需要新增一個optgroup標籤，並設定label屬性做為提示文字；如果想設定預設選中狀態，需要給對應的option新增selected屬性
<select name="" id="">
    <option value="" selected="selected">杭州</option>
    <option value="">上海</option>
    <option value="">北京</option>
    <option value="">武漢</option>
    <option value="">黃岡</option>
    <option value="">浙江</option>
</select>
<select name="" >
    <optgroup label="杭州"></optgroup>
    <option value="">餘杭區</option>
    <option value="">上城區</option>
    <option value="">下城區</option>
    <option value="">江乾區</option>
    <option value="">拱墅區</option>
    <option value="">濱江區</option>
    <option value="">蕭山區</option>
    <option value="">富陽區</option>
    <optgroup label="上海"></optgroup>
    <option value="">濱江</option>
    <option value="">昌平</option>
    <option value="" selected="selected">邯鄲</option>
    <option value="">順義</option>
</select>
複製程式碼

文字域

  • Textarea標籤來設定多行文字（文字域）
  • 注意：不能使用cols、rows來設定寬高，要用width、height來設定，它也可以使用placeholder來設定預設提示文字

多選框（核取方塊）

  • Type=“checkbox”
  • 它的使用方法和細節與單選框一致

按鈕

  • 提交按鈕type=“submit”注意：必須設定vulue屬性，否則瀏覽器之間有相容性問題
  • 重置按鈕type=“reset”注意：必須設定vulue屬性，否則瀏覽器之間有相容性問題；恢復重新整理後的預設狀態
  • 按鈕type=‘“button”或都可以
  • 使用者體驗細節：重新整理後想讓第一個輸入框預設選中狀態，給輸入框設定autofous="autofous"
<textarea name="" cols="30" rows="10" placeholder="請輸入文字"></textarea><br>
你的愛好是：<input type="checkbox" checked="checked" id="pb" /><label for="pb">跑步</label><input type="checkbox" id="tg"/><label for="tg">跳高</label><input type="checkbox" id="ms"/><label
        for="ms">美食</label><br>
<input type="submit" value="提交" />
<input type="reset" >
    <input type="button" value="按鈕">
    <button>按鈕</button>
複製程式碼

css

  • 樣式表、層疊樣式表（級聯樣式表），主要用於設定HTML頁面中的文字內容（文字、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊框等）以及版本的佈局等外觀顯示樣式。
  • css以HTML為基礎，提供了豐富的功能，如字型、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設定不同的樣式

css基礎語法

  • css程式碼放在style標籤裡面，放在head標籤中；大括號中寫鍵值對語法，例子：屬性名1；屬性名1；屬性名2；屬性名2；
  • color 文字顏色
  • font-famliy字型
  • Font-size字號
  • Text-indent 首行縮排 單位是em 代表一個文字的間距
  • Text-align 文字對齊方式，預設是left,還可以設定center劇中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">p{color: red;font_size:30px; font-family: 黑體; text-align: center; text-indent:2em;  }</style>
</head>
<body>
<p>哈哈哈哈 <br> 哈哈哈</p>
</body>
</html>
複製程式碼
  • background 背景色屬性
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">p{ width: 200px; height: 200px; background:red;}</style>
</head>
<body>
<p></p>
</body>
</html>
複製程式碼
標籤選擇器
  • 直接在css語法中寫標籤的名字就可以選中對應的標籤
  • div 代表大盒子（容器 存放內容的）
  • span 代表小盒子（容器 存放內容的）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{color: red}
        div{color: pink}
        span{color: aqua}
    </style>
</head>
<body>
<p>我是p</p>
<div>我是div標籤 代表大盒子（容器 存放內容的）</div> 
<span>span 代表小盒子（容器 存放內容的）</span>
<p>我是p</p>
</body>
</html>
複製程式碼
  • id選擇器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">#p1{color: aqua}#p2{color: pink}</style>
</head>
<body>
<p id="p1">我是ppppPPppPPPPP</p>
<p id="p2">我愛hipPpPPPPPPPpPPppp</p>
</body>
</html>
複製程式碼
  • 類選擇器class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">.p1{color: aqua}.p2{color: red}.shxs{font-size:30px;}</style>
</head>
<body>
<p class="p1 shxs">11111</p>
<p class="p2">222222</p>
<p class="p1">333333</p>
</body>
</html>
複製程式碼
  • id選擇器語法：#名字 特點：不能重複，也不能一個人擁有多個
  • class類選擇器語法：名字 特點：可以重複使用，一個人可以有多個類名（好像是人的稱號一樣）
  • 總結：今後class選擇器使用頻率高於id選擇器

ps吸取顏色

  • 按prtsc這個按鈕，截螢幕當前狀態
  • 開啟ps新建，ctrl+v把剛剛擷取放入ps中
  • 找到
    web知識學習
    點選，滑鼠變為吸管，吸取想要的顏色值，複製
    web知識學習
    放在css程式碼中，在前面加#
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span{font-size:100px}
        .logo_blue{ color: blue }
        .logo_juhong{ color: #cc3300}
        .logo_orange{color: orange}
        .logo_green{color: green}
    </style>
</head>
<body>
<span class="logo_blue">G</span>
<span class="logo_juhong">o</span>
<span class="logo_orange">o</span>
<span class="logo_blue">g</span>
<span class="logo_green">l</span>
<span class="logo_juhong">e</span>
</body>
</html>
複製程式碼

css引入方式

  • 內嵌式：
    • style標籤放在head中
    • 優點：方便課上案例的書寫：電商網站的頁面必須使用這種方式，因為電商首頁要求載入速度必須快，內嵌式比外鏈式快一些
    • 缺點：html和css程式碼沒有實現分離，不方便修改
  • 外鏈式：
    • 通過link放在head標籤中，把外部的css檔案引入到html檔案中
    • 優點：實現了程式碼分離，方便修改和管理；
    • 缺點:執行速度比內嵌稍慢
  • 行內式：
    • 這種形式一定不要用，它會上程式碼量變得非常龐大，不方便修改
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    p{color: red;}
    </style>
</head>
<body>
<p>我是外鏈式</p>
</body>
</html>
複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="new.file.css">
</head>
<body>
<p>我是外鏈式</p>
</body>
</html>
p{color: red;}
複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p style="color: red;">我是行內css</p>
<!--非常繁瑣，消耗程式碼量-->
</body>
</html>
複製程式碼
  • 基礎選擇器權重
  • id>class>標籤
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #big{color: green}
        div{color: blue}
        .big_div{color: red}
    </style>
</head>
<body>
<div class="big_div" id="big">大盒子</div>
</body>
</html>
複製程式碼

後代選擇器

  • Div span 用空格來連結，代表的意思是找到後代元素
  • 注意：後代可以是兒子、兒子的兒子

並集、並列選擇器

  • Div，span,h1,span1,#span2
  • 用逗號連結選擇器，代表這些元素同時被選中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*span{color:red;}*/
        div span{color: blue;}
    </style>
</head>
<body>
<div>
    <p>
        <span>我是老p家的span</span>
    </p>
    <div>
        <span>我是老div家的span</span>
    </div>
</div>
</body>
</html>
複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p,div,h3,h4,.span1,#span2{color:red;}
    </style>
</head>
<body>
<p>我是p</p>
<div>我是div</div>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<span class="span1">我是class 的span1</span>
<span id="span2">我是span2 有id</span>
</body>
</html>
複製程式碼

標籤指定式、指定標籤式

  • div.類名
  • 注意：標籤和類名之間沒有空格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div.div1{color:red;}
    </style>
</head>
<body>
<div class="div1">我是div1</div>
<div>我是div2</div>

<p>我是p1</p>
<p class="p2">我是p2</p>
</body>
</html>
複製程式碼

高階權重對比

  • 引入方式對比
    • 外鏈和內嵌權重相同，先寫的會被後寫的覆蓋
    • 內嵌權重最大，如果想要覆蓋它，就只能給樣式中新增！important來把權重提高
  • 複合選擇器
    • id我們認為是100斤 class類名認為10斤 標籤認為1斤
    • 綜合起來大的權重就高，如果權重一樣，先寫的被後寫得覆蓋
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*標籤1斤 類10斤 id100斤*/
        .div1 span{color: darkgoldenrod;}
        span.span1{color: green;}
        .span1{color: pink;}
        p span{color: blue;}
        span{color: red}
    </style>
</head>
<body>
<div>
    <div class="div1"></div>
    <p>
     <span class="span1">呵呵呵呵</span>
    </p>
</div>
</body>
</html>
複製程式碼

高階權重對比

  • 引入方式對比
    • 外鏈式和內嵌權重相同，先寫的會被後寫的覆蓋
    • 內嵌權重最大，如果想覆蓋它，就只能給樣式中新增!important來把權重提高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外鏈與內嵌權重相同 先寫的會被後寫的覆蓋-->
    <link rel="stylesheet" href="my.css">
    <style type="text/css">
        p{color: red;!important}
    </style>
</head>
<body>
<p style="color: green;">呵呵呵和合夥人</p>
</body>
</html>
複製程式碼

css常用屬性

  • font-weight 設定字型粗細的
  • normal 代表不加粗
  • bold 代表加粗
  • font-style 設定字型傾斜
  • italic 代表傾斜
  • normal 代表不傾斜
  • text-decoration 設定線
  • none 沒有線
  • underline 下劃線
  • overline 上劃線
  • line-through 貫穿線（刪除線）
  • word-break:break-all 強制換行
  • :hover 偽類寫法 代表滑鼠懸停狀態的樣式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{ font-weight:normal;}
        p{font-weight:bold;}
        em{font-style:normal;}
        h7{font-style:italic}
        a{text-decoration: none;}
        h5{width:200px;height:300px;background: pink;}
        h5{word-break: break-all;}
        /*:hover 滑鼠懸停狀態的樣式設定*/
        a:hover{color: green}
    </style>
</head>
<body>
<h1>我是h1標籤</h1>
<p>我是p 我也想加粗</p>
<em>我是傾斜</em>
<h7>我是h3 我也想傾斜</h7>
<a href="###">我是預設的a</a>
<h5>yuighjmkhhsjasjklkl;lllkmsdfghtyui;fghjkfghj</h5>
</body>
</html>
複製程式碼

行高屬性

  • 一行文字的結束到上一行文字結束的間距：line-height
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{ width: 200px; height: 500px; background: pink; line-height: 30px;}
    </style>
</head>
<body>
<p>號都是絕對誤差參加哦吳佩慈完成從破產美聯儲麼了vcp是VS嗎v怕速率浪漫旅聯盟v浪費vvvkf;lvmdvmwlcmvlkvmpvl看vvv恐怕v催眠術催眠速率vkvp;vlmsc;盲從模範人物破軟體給人家外婆飛機場觸控屏手機方面我v率每次離開充滿了</p>
</body>
</html>
複製程式碼

邊框屬性

  • border:1px solid red
  •    粗線  實線 顏色
複製程式碼
  • 虛線：dashed 這樣設定是四個方向相同；如果想單獨設定某個方向只需要：border-left(right、top、button)
  • 注意：邊框屬性只有實線和虛線是沒有相容性問題的，其它方式的線都會有不同程度的相容問題，如果程式設計師使用了，一定要報錯！ div{width:200px;height: 200px;background: pink;border: 3px solid red;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{width:200px;height: 200px;background: pink;/*border: 3px solid red;*/border-bottom: 3px solid green;border-top:5px solid blue;
        border-left: 10px dashed orange;border-right:15px dashed olivedrab}
    </style>
</head>
<body>
<div></div>
</body>
</html>
複製程式碼
div{width:200px;height: 200px;background: pink;/*border: 3px solid red;*/border-bottom: 3px solid green;border-top:5px solid blue;
            border-left: 10px dotted orange;border-right:15px double olivedrab;}
複製程式碼

css盒子模型的組成

  • 寬高+邊框+內邊框（內容和邊框的距離padding）+外邊距（盒子和盒子之間的距離margin）+盒子模型的組成
div{width: 200px;height:200px;background: pink;border: 2px solid green}
div{width: 200px;height:200px;background: pink;border: 2px solid green;padding: 20px}
div{width: 200px;height:200px;background: pink;border: 2px solid green;/*padding: 20px;margin: 20px;*/padding: 10px 20px 30px 40px;}
複製程式碼

html5中獨有的標籤

  • header 頭部
  • nav 導航
  • aside 側導航
  • article 文章塊
  • footer 底部
  • 注意：這些html5新標籤只能使用在手機網站的書寫中，可以提升搜尋引擎對網站的優化，不能用在pc(電腦)端網站，因為ie低版本不識別這些新標籤

psd檔案

  • 圖片放大縮小 alt+滑鼠滾輪
  • 按住空格不放，拖拽滑鼠可以改變圖片的位置
  • 英文狀態下按字母t,再點選想要檢視的文字，就可以在選單欄上看到所有屬性（取消選中按esc鍵）
  • 點選檢視間距，w代表寬，h代表高度
  • 注意：間距可以有3畫素左右的誤差
    web知識學習
  • 選擇第一個工具，點選自動按鈕，再點選圖片中的某個區域就可以在右側的選單中設定眼睛的開頭
    web知識學習
  • 注意：要把此處設定為畫素才可以
    web知識學習
    web知識學習
  • text-align:center 居中

相關文章