广网站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;（释义：向逆填充，上面的左边，这里就是右边）