廣網站banner先在body中布局一個div

H1標簽寫需要的內容

創建一個style樣式框

先清除頁面的內外邊距

給div起一個名字用于樣式控制

在style中使用css樣式控制div

Class在css中用.作為前綴花括號包裹內容

Width：寬度；控制頁面的寬度

Hight用來控制頁面的高度

Background-image：頁面的背景圖片，放入網址或者本地圖片作為背景

Background-size：控制圖片的大小

Cover：控制圖片填滿所選區域

Background-repeat：no-reoeat；控制圖片不會重復顯示

H1用來控制字體樣式

使用display: flex;、justify-content: center;和align-items: center;來居中顯示背景圖像和文字

設置高度來控制字體高度

總結：“本文詳細寫了推廣網站banner如何控制圖片大小和文字位置在頁面中要確定好圖片的位置使用css控制圖片在頁面中的大小”通過以上的方法和技巧，讓你在實際操作過程中，可以對（網站推廣banner圖樣式的學習更加清晰）。如果您需要更專業的幫助，可以聯系米可網絡，我們專業的網絡推廣代運營團隊將為您提供從建站到運營的一站式服務，幫助你提升網站推廣效果。

讀

經過這段時間的學習，大家都學得怎么樣了？

為了幫助大家梳理內容，我這次將之前的內容梳理一遍，看看大家有沒有遺忘的。

屬性類

<image>組件屬性（圖片）

• src

屬性意思：這個屬性可以調用本地圖片和站外圖片。

• mode

屬性意思：可以對圖片設置不同的縮放格式。

部分合法值介紹

scaleToFill

這個合法值倒不必說了，系統默認的就是這個，他的意思就是讓圖片完全填滿，不是很建議使用的，是比較懶的一種合法值。（用的最少，會壓縮）

aspectFit

這個合法值也是縮放，但是他是有規矩的縮放，保留一定的比例，比方說你是圖片是9X16的，他縮放也是9X16，這個還是可以的。（按照長邊來縮放）

aspectFill

這個合法值類似于上一個，但是不完全一樣，這個合法值是寬為比例，可能保留了寬，你的高也會因而受到限制。（可能會被裁剪）

widthFix

寬度不變，高度自動變化，保證原圖的大小。（比較好的方法之一）

• lazy-load

屬性意思：這個屬性是懶加載，需要借助js來完成，用戶在看圖片的時候需要加載幾張圖片之后才會出現這個圖片。

• show-menu-by-longpress

屬性意思：可長按識別二維碼

<scroll-view>組件屬性（可滾動的導航）

• scroll-x

屬性意思：橫向滾動，橫向滾動條

• scoll-y

屬性意思：豎向滾動，豎向滾動條

• upper-threshold和lower-threshold

屬性意思：拖動時候觸發事件（需要結合外部框架來實現）

• scroll-top和scroll-left

屬性意思：滾動條的初始位置，scroll-top是豎著規范，scroll-left是橫著規范

• scroll-with-animation

屬性意思：滾動條的動畫效果。不會生硬的滾動。

<swiper>組件屬性（輪播圖）

<swiper-item>組件

這兩個組件需要放到一塊使用。

• indicator-dots

我們平常要能看到輪播圖里面有幾張圖片的時候，就需要用到這個屬性

屬性意思：顯示指示點

• indicator-color=“（255,255,255，0.6）"

屬性意思：調整指示點的顏色

• indicator-active-color=“#fff"

屬性意思：調整指示點的顏色

• indicator-active-color=“#fff”

屬性意思：調整被選中的指示點顏色

• autoplay

屬性意思：讓輪播圖自己切換

• interval=“5000”

默認是5000毫秒，我們可以修改的更長或更短，單位是毫秒

屬性意思：設置輪播圖自動切換的時間

• current=“1”

默認的第一張圖片“0”，第二張圖片的“1”，以此類推

屬性意思：設置首圖為哪一張圖片

• duration=“500”

默認是500毫秒，可以修改時間的長短，單位是毫秒

屬性意思：調整切換時間的動畫長短

• circular

屬性意思：到最后一張圖片后，再拖動，會自動銜接到第一張圖

• vertical

屬性意思：縱向拉動，類似于邀請函的上下拉動

• previous-margin=“10”

屬性意思：輪播圖左邊10像素間隙

• next-margin=“10”

屬性意思：輪播圖右邊10像素間隙

• display-multiple-items="2"

屬性意思：設置同時顯示的滑塊數量

• easing-function

屬性：設置輪播圖的動畫效果

這是這個屬性的一些合法值：

1. default：默認緩動函數
2. linear：線性動畫（勻速）
3. easeInCubic：緩入動畫（先慢最后快）
4. easeOutCubic：緩出動畫（先快最后慢）
5. easeInOutCubic：緩入緩出動畫（開頭結尾慢，中間快）

基礎內容組件

<icon>組件屬性

• type="info"

屬性意思：類型，可以有多個圖標進行設置

1. success（勾）
2. success_no_circle（沒有外框的勾）
3. info（感嘆號）
4. warn（警告）
5. waiting（等待）
6. cancel（取消）
7. download（下載）
8. search（搜索）
9. clear（清除）

• size=“90”

屬性意思：尺寸，大小，我們可以根據需要設置大小

• color=“pink”

屬性意思：設置圖標的顏色

<progress>組件屬性

• percent=“90”

屬性意思：設置進度條的落腳點

• show-info

屬性意思：讓進度條的位置以百分比的方式顯示出來

• bord-radius="5"

屬性意思：為進度條設置一個圓角度為5的圓角

• font-size

屬性意思：進度條右邊字體的大小，默認是16

• stroke-width

屬性意思：進度條的粗細

• backgroundColor=“pink”

屬性意思：未讀取部分進度條的顏色

• activeColor="blue"

屬性意思：被選中的進度條顏色

• active

屬性意思：進度條的緩沖動畫效果

• active-mode

屬性意思：接著上次的斷點繼續加載

• duration

屬性意思：調整每1%進度條的時間，單位是毫秒，默認是30

rich-text

• nodes

屬性意思：富文本組件，這里面可以放上HTML代碼，實現HTML代碼的一些效果

• space

屬性意思：實現連續空格

樣式類

.out image{}

這里的out指的是調用out下的圖片屬性，這里可以放一些元素來控制圖片的大小和方位。

.out .box{}

這個意思是調用.out下面的.box屬性，對了，這兩個之間需要空一格。

靠邊樣式

float: left（釋義：幾張圖片放到一排去）

排版樣式

display: inline-block;（釋義：一堆塊文本橫著排，如果排不下換行）

white-space: nowrap;（釋義：有多少排多少，放到一行去，不換行）

圖片加上間隙（左右）

padding: 0 5px;（釋義：5像素大小的間隙，在左邊）

box-sizing:border-box;（釋義：向逆填充，上面的左邊，這里就是右邊）