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小時內與您取得聯系。