整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
屬性解釋
background屬性是css中應(yīng)用比較多，且比較重要的一個屬性，它是負責給盒子設(shè)置背景圖片和背景顏色的，background是一個復(fù)合屬性，它可以分解成如下幾個設(shè)置項：
background-color 設(shè)置背景顏色
background-image 設(shè)置背景圖片地址
background-repeat 設(shè)置背景圖片如何重復(fù)平鋪
background-position 設(shè)置背景圖片的位置
background-attachment 設(shè)置背景圖片是固定還是隨著頁面滾動條滾動
實際應(yīng)用中，我們可以用background屬性將上面所有的設(shè)置項放在一起，而且也建議這么做，這樣做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，這里面的“#00ff00”是設(shè)置background-color；“url(bgimage.gif)”是設(shè)置background-image；“no-repeat”是設(shè)置background-repeat；“l(fā)eft center”是設(shè)置background-position；“fixed”是設(shè)置background-attachment，各個設(shè)置項用空格隔開，有的設(shè)置項不寫也是可以的，它會使用默認值。
舉例：
下面這些例子使用下面這張圖片做為背景圖：
1、“background:url(bg.jpg)”，默認設(shè)置一個圖片地址，圖片會從盒子的左上角開始將盒子鋪滿。
2、“background:cyan url(bg.jpg) repeat-x”，橫向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。
3、“background:cyan url(bg.jpg) repeat-y”，縱向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。
4、“background:cyan url(bg.jpg) no-repeat”，背景不重復(fù)，背景和盒子左上角對齊，盒子其他部分顯示背景顏色“cyan”。
5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重復(fù)，背景和盒子左中對齊，盒子其他部分顯示背景顏色“cyan”。
6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重復(fù)，背景和盒子右中對齊，也就是背景圖片的右邊對齊盒子的右邊，盒子其他部分顯示背景顏色“cyan”。
相關(guān)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test background</title>
<style type="text/css">
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg1{background:cyan url(bg.jpg);}
.bg2{background:cyan url(bg.jpg) repeat-x;}
.bg3{background:cyan url(bg.jpg) repeat-y;}
.bg4{background:cyan url(bg.jpg) no-repeat;}
.bg5{background:cyan url(bg.jpg) no-repeat left center;}
.bg6{background:cyan url(bg.jpg) no-repeat right center;}
</style>
</head>
<body>
<div class="backshow bg1"></div>
<div class="backshow bg2"></div>
<div class="backshow bg3"></div>
<div class="backshow bg4"></div>
<div class="backshow bg5"></div>
<div class="backshow bg6"></div>
</body>
</html>
例子說明：
background-position的設(shè)置，可以在水平方向設(shè)置“l(fā)eft”、“center”、“right”，在垂直方向設(shè)置“top”、“center”、“bottom”，除了設(shè)置這些方位詞之外，還可以設(shè)置具體的數(shù)值。
比如說，我們想把下邊的盒子用右邊的圖片作為背景，并且讓背景顯示圖片中靠近底部的那朵花：
用上面中間那張圖片作為左邊那個比它尺寸小的盒子的背景，上面右邊的實現(xiàn)效果設(shè)置為：“background:url(location_bg.jpg) -110px -150px”，第一個數(shù)值表示背景圖相對于自己的左上角向左偏移110px，負值向左，正值向右，第二個數(shù)值表示背景圖相對于自己的左上角向上偏移150px，負值向上，正值向下。
實現(xiàn)原理示意圖：
對應(yīng)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test background</title>
<style type="text/css">
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg{width:94px;
height:94px;
border:3px solid #666;
background:url(location_bg.jpg) -110px -150px;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
理解練習：
通過雪碧圖制作如下布局：
HTML是用來開發(fā)網(wǎng)頁的，它是開發(fā)網(wǎng)頁的語言
全稱HyperText Mark-up Language，超文本標記語言
標記就是標簽
<標簽名稱></標簽名稱> 比如 <html></html> <h1></h1>等，標簽大多數(shù)都是成對出現(xiàn)的。
超文本 兩層含義：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)頁標題</title>
</head>
<body>
網(wǎng)頁顯示內(nèi)容
</body>
</html>第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔
<html>...</html>標簽是開發(fā)人員在告訴瀏覽器
整個網(wǎng)頁是從<html>這里開始的，到</html>結(jié)束
也就是html文檔的開始和結(jié)束標簽
<head>...</head>標簽用于定義文檔的頭部
是負責對網(wǎng)頁進行設(shè)置標題、編碼格式以及引入css和js文件的
<body>...</body>標簽是編寫網(wǎng)頁上顯示的內(nèi)容
網(wǎng)頁文件的后綴是.html, 一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內(nèi)容將文件渲染成網(wǎng)頁
VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費、開源的跨平臺代碼編輯器
目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具
下載網(wǎng)址: https://code.visualstudio.com/Download
選擇對應(yīng)的安裝包進行下載:
安裝一切默認
1 標簽不區(qū)分大小寫，但是推薦使用小寫
2 根據(jù)標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結(jié)束標簽組成的一對標簽，這種標簽允許嵌套和承載內(nèi)容，比如: div標簽 2.2 單標簽是一個標簽組成，沒有標簽內(nèi)容， 比如: img標簽
標簽的使用形式
列表標簽
網(wǎng)頁效果
表格標簽
<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭
屬性設(shè)置
border: 1px solid black:設(shè)置邊框和顏色
border-collapse: collapse:設(shè)置邊框合并
網(wǎng)頁效果
表單標簽
表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器
<form>標簽 表示表單標簽，定義整體的表單區(qū)域
一個表單中有很多信息組成,比如 姓名,愛好,地址等,這些內(nèi)容有很多其他標簽來承載
這些標簽稱為表單元素標簽
網(wǎng)頁效果
表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器
兩種方式的區(qū)別:
表單元素屬性設(shè)置
<!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>Document</title>
</head>
<body>
<!--
姓名 type="text" 定義單行文本輸入框
密碼 type="password" 定義密碼輸入框
性別 type="radio" 定義單選框
愛好 type="checkbox" 定義復(fù)選框
照片 type="file" 定義上傳文件
個人描述 <textarea></textarea> 定義多行文本輸入框
地址 <select></select> 定義下拉列表
提交 type="submit" 定義提交按鈕
重置 type="reset" 定義重置按鈕
按鈕 type="button" 定義一個普通按鈕
-->
<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>
點擊提交：
可以看到服務(wù)器收到了請求報文。
天講下HTML中，CSS樣式里的字體屬性。CSS Fonts(字體)屬性用于定義字體系列、大小、粗細和文字樣式(如斜體)。
字體系列:
CSS中使用font-family 屬性定義文本的字體系列。語法如下:
p {
font-family: "微軟雅黑";
}
<div font-family: Arial,"Microsoft Yahei","微軟雅黑";></div>
我們來看個實例:
可以看到將標題進行了字體設(shè)置，來看下具體的代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性之字體系列</title>
<!--對h2修改下字體-->
<style>
h2 {
font-family: "宋體";
}
</style>
</head>
<body>
<h2>明月幾時有</h2>
<p>明月幾時有，把酒問青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p>我欲乘風歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
</body>
</html>
其中
<style>
h2 {
font-family: "宋體";
}
</style>
就是設(shè)置字體的地方
嘗試修改為另外一種字體，如微軟雅黑，讓我們看看效果
具體對應(yīng)的代碼為:
<style>
h2 {
font-family: "微軟雅黑";
}
</style>
還可以用兩個字體，效果如下:
對應(yīng)的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性之字體系列</title>
<!--對h2修改下字體-->
<style>
h2 {
font-family: "微軟雅黑";
}
p {
font-family: "宋體";
}
</style>
</head>
<body>
<h2>明月幾時有</h2>
<p>明月幾時有，把酒問青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p>我欲乘風歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
</body>
</html>
建議不要直接使用中文，最好使用英文，微軟雅黑對應(yīng)的是 Microsoft YaHei
我們替換后試下:
字體沒變，還是一樣，但是代碼變了
<style>
h2 {
font-family: "Microsoft YaHei";
}
p {
font-family: "宋體";
}
</style>
不僅可以寫一個字體，還可以寫多個字體，之間用空格隔開。各種字體之間必須使用英文的逗號符號。一般情況下，如果有空格隔開的多個單詞組成的字體，需要加引號。盡量使用系統(tǒng)自帶的默認字體，保證在任何用戶的瀏覽器中能夠正常顯示。
寫多個字體的好處就是:
當瀏覽器運行并調(diào)用字體代碼時，會按照順序先查看第一個字體，如果系統(tǒng)中沒有，會自動調(diào)用第二個字體，直到找到匹配的字體。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
