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
CSS 背景这里指通过background对对象设置背景属性,如通过CSS设置背景各种样式。
设置颜色作为对象背景颜色
设置图片作为背景图片
设置背景平铺重复方向
设置或检索背景图像是随对象内容滚动还是固定的。
设置或检索对象的背景图像位置。
背景样式的值是复合属性值组合,也就是背景单词的值可以跟多个属性值,值与值之间使用一个空格间隔链接上即可。
1、设置纯色背景。背景background可以设置对象纯色的背景颜色,
2、设置图为背景。可以设置对象背景为图片,如果背景是图片可以让图片重复平铺横铺,或将图片作为对象背景固定在对象任何位置。
属性解析
no-repeat:不重复
repeat-x:水平方向(横向)重复平铺
repeat-y:垂直方向(竖向)重复平铺
如果不设置,为全背景平铺
left 图片靠左
right 图片靠右
top 图片靠上
bottom 图片靠下
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>
复制代码
1、由使用float浮动造成浮动产生无法显示css背景颜色
2、高度不够而产生背景无法显示
3.如果是float造成:解决方法有三种,一个是设置clear清除浮动、设置css高度、设置css overflow样式。
4.如果是高度原因:解决方案如下,设置够高的高度,或取消删除高度样式即可。
*请认真填写需求信息,我们会在24小时内与您取得联系。