整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

vue 滚动顶部添加背景色

tml 代码

<template>
  <div class="index-top flex flex-ac flex-jsb" :style="pstyle">
    <van-image :src="logoUrl" />
    <van-icon name="manager-o" @click="onClickUser" />
  </div>
</template>

js 代码

TML 背景

设置背景颜色<body bgcolor="#000000">

设置背景图片<body background="bg.jpg">

设置页面文字颜色<body text="#cccccc">

颜色属性值有三种值的格式

1,英文单词,比如 red , yellow ,green …

<body bgcolor="yellow">

2, 十六进制表示方式,#开头,6个十六进制的字符或数字 组合

比如:#FFFFFF,#000000,#CCCAAA,#22BCAD

十六进制: 0-9 和 a-f

3, RGB模式,红 0-255,绿 0-255,蓝 0-255

比如: RGB(120,33,234)

HTML 表单

表单是一个包含表单元素的区域。

表单能够包含 input 元素,textarea、select、fieldset、legend 和 label 元素。

表单使用标签(<form>)定义。

表单用于向服务器传输数据。

表单的结构

<form name="form1" action="URL" method="get">

用户名:<input type="text" name="uname" />

密 码:<input type="password" name="passwd" />

</form>

属性说明

name表单的名称

action表单提交地址

method表单数据提交的方式 (get ,post)

enctypeMIME类型

target打开方式

input标签

属性说明

typeinput元素类型

nameinput 元素的名称

valueinput 元素的值

sizeinput 元素的宽度

readonly是否只读

maxlength输入字符的最大长度

disabled是否禁用

1.文本框

<input type="text" name="username" value="" />

2.密码框

<input type="password" name="passwd"/>

3.单选按钮

<input type="radio" name="sex"value="1"checked="checked" />男

<input type="radio" name="sex"value="0"/>女

4.复选框

<input type="radio" name="sex"value="1"checked="checked" />男

<input type="radio" name="sex"value="0"/>女

<input type="checkbox"name="love"value="music" checked="checked"/> 听音乐

<input type="checkbox"name="love" value="movie"/> 看电影

<input type="checkbox"name="love" value="game"/> 玩游戏

5.按钮

<input type="button" name="btn" value="确定"/>

<input type="submit" name="comit" value="提交"/>

<input type="reset" name="reset" value="重写"/>

<input type="image" name="img_btn" src="btn.gif"/>

6. 隐藏域

隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。

<input type="hidden" name="uid" value="10"/>

7. 上传文件

<input type="file" name="photo"/>

注:利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

<textarea> 多行文本框

<textarea name="content" rows="5" cols="50"> </textarea>

属性说明

name元素的名称

rows指定文本框的高度

cols指定文本框的宽度

select下拉列表框

<select name="city">

<option value="0">请选择</option

<option value="bj">北京</option>

<option value="gz">广州</option>

</select>

属性说明

name下拉列表框的名称

size下拉列表框的显示行数

multiple是否多选

disabled是否禁用

selected设置默认选中的选项

value选项的值

optgroup标签

optgroup 元素用于组合选项 。

属性说明

label指定组合选项名称

fieldset标签

fieldset 标签作用是把表单中元素组合起来

<fieldset>

<legend></legend> length为字符长度

<form></form>

</fieldset>

label标签

lable 标签的作用是将输入项或选项及其标签文字关联起来。

<input type="radio" name="sex" value="1" id="male" />

<label for="male">男</label>

<input type="radio" name="sex" value="0" id="female" />

<label for="female">女</label>

海无涯,不要沉浸在知识的海洋里,迷失自己。

要知道自己想要什么,抓住重点,不忘初心。

这个世界上百分之20的人,掌握着百分之80的财富。

接下来一系列教程,就带领大家抓住重点,一起做那百分之20的人。

往期知识点回顾:

重点属性-display

重点属性-position

重点属性-float

重点属性-flex

重点属性-overflow

重点属性-media

重点属性background

CSS 背景这里指通过background对对象设置背景属性,如通过CSS设置背景各种样式。

background-color

设置颜色作为对象背景颜色

background-image

设置图片作为背景图片

background-repeat

设置背景平铺重复方向

background-attachment

设置或检索背景图像是随对象内容滚动还是固定的。

background-position

设置或检索对象的背景图像位置。

Background

背景样式的值是复合属性值组合,也就是背景单词的值可以跟多个属性值,值与值之间使用一个空格间隔链接上即可。

background背景作用:

1、设置纯色背景。背景background可以设置对象纯色的背景颜色,

2、设置图为背景。可以设置对象背景为图片,如果背景是图片可以让图片重复平铺横铺,或将图片作为对象背景固定在对象任何位置。

Background分析解析

属性解析

A.设置背景具体颜色值

B.这是背景的具体图片路径

C.设置图片是否平铺

no-repeat:不重复

repeat-x:水平方向(横向)重复平铺

repeat-y:垂直方向(竖向)重复平铺

如果不设置,为全背景平铺

D.具体左右上下的距离

left 图片靠左

right 图片靠右

top 图片靠上

bottom 图片靠下

E.背景图片固定,还是随上下滚动条滚动

fixed 图片固定

scroll 背景图片内容滚动

代码实践

<!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>flex布局css</title>   
   <style>       
       .container{     
            background: #FFF url(https://image.baidu.com/beijing.gif) no-repeat 0 0 fixed    
       }    
   </style>
</head>
<body>  
   <div class="container">     
   背景图    
   </div>
</body>
</html>
复制代码

面试题:

CSS无法显示背景颜色问题分析解决

1、由使用float浮动造成浮动产生无法显示css背景颜色

2、高度不够而产生背景无法显示

3.如果是float造成:解决方法有三种,一个是设置clear清除浮动、设置css高度、设置css overflow样式。

4.如果是高度原因:解决方案如下,设置够高的高度,或取消删除高度样式即可。