前端基礎第十一天和十二天
前端學習所需要的一些html和css的基礎基本已經瞭解完了 ,現在就應該著手做自己的靜態頁面
增加熟練度,便於之後學習js的時候更加順暢
這幾天會陸陸續續的增加一點小的細節,實際開發中會用的很少,但是如果用到也得會
這些都是會遇到,但是用的少,大家理解即可,知道些樣式如何實現
一.雙偽元素清除浮動
偽元素清除浮動升級版,即解決了清除浮動,有解決了塌陷
兩個偽元素合併如下:
清除浮動:
.clearfix::after {
content: '';
display: block;
clear: both;
}
margin塌陷問題:
.clearfix;:before{
content:"";
display:table;
}
合併起來
.clearfix::before,
.clearfix::after{
display:table;
content:"";
}
.clearfix::after{
clear:both;
}
二.精靈圖
把很多小圖片合併成一張大圖片,這張大圖片就是精靈圖.
使用精靈圖的目的,就是減少伺服器傳送圖片的次數,減輕伺服器的壓力,
原本每張小圖片都要傳送好多次,但是如果使用精靈圖,只需要傳送一次;
那麼,如何使用精靈圖呢?
步驟:
1.建立一個盒子
2.通過ps量取小圖片的尺寸,將對應小圖片的寬高直接設定給盒子
3.將精靈圖設定為盒子的背景圖片
4.將小圖片的座標取負值新增給background-position:x y;
*將背景圖片往上移動,y軸座標是負數
*將背景圖片往左移動,x軸座標是負數
注意:1.盒子大小和小圖片大小一致.
2. 精靈圖通過背景定位,讓所有的小圖片都能顯示
3.在ps中,通過切片,量取對應的座標,直接取負值
三.字型圖示(會使用)
在網頁的很多地方，比如下箭頭、照相機圖示、搜尋圖示
字型圖示本質上就是文字，所以可以通過css中文字相關的屬性操作字型圖示。
場景：
頁面中有很多的圖示（左右箭頭、購物車、使用者、等等），怎麼完成頁面的效果？？
-
使用圖片：可以完成效果，但是圖片在放大的時候會失真（邊緣模糊）
-
字型圖示：可以完成效果，並且字型圖示可以通過css設定樣式，而且放大不會失真。
優點：
本質是文字，可以通過css文字相關樣式設定字型圖示的樣式（顏色、大小、加粗），並且不會失真
使用步驟
下載字型圖示（一般UI會給）：
-
登入阿里 iconfont 字型檔，將自己想要的圖示加入購物車
-
點選購物車圖示，選擇下載程式碼
使用字型圖示：
-
在專案目錄新建 fonts 資料夾，將字型圖示檔案內所有檔案拷貝進 fonts 資料夾
-
在專案中通過link標籤引入字型css檔案（iconfont.css）
字型檔案包中的 demo_fontclass.html 為說明書
<link rel="stylesheet" href="fonts/iconfont.css">
-
通過i標籤上面設定對應類名來使用
<i class="iconfont icon-refresh"></i>
注意：
-
設定字型圖示樣式時，注意層疊性問題！！（通過iconfont類名找到i標籤）
-
不能改變字型圖示的font-family，否則樣式不生效
四.滑動門
類似於qq聊天的氣泡,可以根據字數的多少來改變寬度,但是前後的樣式不變
滑動門步驟：
-
三個盒子要在一行中顯示，都需要浮動起來。
-
left：寬高和背景圖片的大小一致
-
center：高度為背景圖片的高度，寬度由內容撐開（浮動之後的元素寬度預設由內容撐開），背景平鋪
-
right：寬高和背景圖片的大小一致
-
五.邊框圓角
可以用css畫個圓:border-radius:圓的半徑
border:邊框
radius:半徑
取值：
-
一個值：左上右上右下左下
-
兩個值：左上右下、右上左下
-
三個值：左上、右上左下、右下
-
四個值：左上、右上、右下、左下
記憶方法： 先從左上開始賦值，順時針賦值，如果沒有賦值的，看對面的。
常見的應用：
-
畫一個圓：
-
盒子必須是一個正方形
-
border-radius：50%
-
-
膠囊按鈕
-
盒子是一個矩形
-
border-radius：盒子高度的一半
-
六.樣式初始化的補充
有時候會需要去除input預設的邊框和textarea的自由縮放
去除邊框：
-
border：none
去除input點選之後的邊框輪廓線：
-
outline-style: none
設定禁止textarea自由縮放：
-
resize：none
七.盒子寬高的百分比設定
如果需要一個父盒子中的四個子盒子，寬度為父盒子的四分之一，高度為父盒子的高度，怎麼去完成？
-
可以直接設定數值（自己計算）
-
可以直接設定百分比（百分比相對於父盒子的寬高，讓瀏覽器去計算）
八.專案搭建
每一個專案開始之前都要有專案的搭建。
對應有很多頁面的大型的專案，因為每個頁面都有自己對應的css檔案，所以css檔案需要單獨放在一個css資料夾中
專案搭建步驟：
-
新建專案資料夾
-
新建images資料夾，把圖片放在images資料夾中
-
新建css資料夾，把所有頁面的css檔案放入
大型專案有多個頁面，每個頁面都有對應的css檔案，為了專案的查閱方便，一般會把所有的css專門放在一個資料夾彙總
-
新建index.css放入資料夾
-
-
新建頁面index.html
樣式的初始化：
-
index.css中進行樣式的初始化（把專案中要用的樣式先寫好）
-
因為樣式的初始化每個專案都是一樣的，所有公司開發的時候會把樣式初始化程式碼寫成一個單獨的base.css檔案，開發的時候直接引入即可
-
頁面ico圖示的使用（瞭解）
較大的網站的title前面會有一個小的圖示，這個小圖示一般使用的就是ico圖示
使用步驟：
-
獲取
ico圖示-
一般是由UI設計師提供.ico圖片
-
可以通過 一些轉換網站 將圖片上傳，獲取ico圖示
-
-
使用
ico圖示-
<link rel="icon" href=" favicon.ico的路徑">一般將ico圖示放到根目錄下面
-
頁面seo三大標籤（瞭解）
頁面中有三個標籤對於seo非常重要！
title：標題標籤
表示網頁的標題，對於網頁的seo權重很高！！
一個大型的網頁，也需要有對應的title標籤的：
<title>38期品優購</title>
Description：描述標籤
是對於網頁內容的描述，可以是對於標題的補充，一般文字不超過120個字。
一個大型的網頁，也需要有對應的description標籤的：
<meta name="description" content="品優購-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" />
Keywords：關鍵字標籤
是頁面內容的關鍵字，對於seo也較為重要。
一個大型的網頁，也需要有對應的Keywords標籤的：
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,儲存卡,品優購" />