中国体彩网唯一官网

知識點包括背景、邊框、表格與無序列表、表單四項內容。(每一個知識點都包括一張頁面案例,附在文章的最后)

一、背景控制

背景控制包括背景色與背景圖兩種。

1.背景色

background-color屬性,可以寫成background,可以使用英文單詞,16進制顏色,rgb顏色,rgba顏色。

例如:

background:red;

background:#f5f5f5;

background:rgb(129,44,44);

background:rgba(129,44,44,0.2);

rgba寫法中最后一個參數為背景色透明度,透明度的取值范圍是0~1之間,值越小越透明

背景色的線性漸變可以通過linear-gradient()進行設置,其參數為方向,起始顏色,終止顏色。

例如:

background:linear-gradient(to right,red,blue);

2.背景圖

background-image:url()屬性,可以寫成background:url()。

例如:

background:url(static/images/p1.jpg);

背景圖不平鋪可以寫成background:url(static/images/p1.jpg) no-repeat;這是一種屬性的復合寫法。其中no-repeat表示不平鋪。

background-size:100%;背景圖比例大小。

精靈圖是背景圖的一種使用方式,主要用于選取圖片中的圖標。可以將多個圖標設計在一張圖片上,頁面在加載時只需要加載該張圖片,而圖片上的不同圖標可以被頁面的任何地方引用。使用background-position進行操作,background-position:背景圖片定位x y坐標

例如:

background:url(static/images/p2.jpg) -100px 0px;復合寫法,引入背景圖,再定位圖標

圖標在圖片中的位置可以使用小工具FastStone Capture的標尺測量,該工具可以截圖,拾取顏色,位置測量等。需要注意的是定位圖標值均為負值,因為坐標原點在左上角。

二、邊框

border屬性:border:寬度 樣式 顏色。

樣式有四種,分別是dotted點線邊框,dashed虛線邊框,solid實線邊框,double雙邊框。其中solid使用最為廣泛。

例如:

border:1px solid #ccc;

也可以單個控制邊框線 border-top:1px solid #ccc

邊框陰影可以使用 box-shadow:x y 陰影寬度 陰影顏色

例如:

box-shadow:2px 2px 20px #ccc;

邊框圓角可以使用 border-radius

例如:

border-radius:10px;

如果做一個圓形,可以使用border-radius:50%;當然也可以使用像素作為參數,輸入的是半徑值

圓角的單個控制 border-top-left-radius:10px;border-top-right-radius:10px;

三、表格與無序列表

1.表格由<table>標簽來定義,每個表格均有若干行(由<tr>標簽定義),每行被分割為若干個單元格(由<td>標簽定義)。

例如:

<table>

<tr>

<td>一行一列表格</td>

</tr>

</table>

表格如果設置邊框,單元格也設置邊框,顯示效果會出現雙邊框,使用屬性border-collapse:collapse;將邊框折疊(合并)

合并列:<td colspan="4">蘋果</td>

合并行:<td rowspan="3">商品</td>

做表格合并時注意觀察實際效果,將多余的單元格刪除。表頭<th>標簽已經很少使用。

2.無序列表

無序列表由<ul>標簽來定義,沒個列表均有若干個表項(由<li>標簽定義)。其經常被用于導航條的制作,二級下拉菜單框的嵌套會很清晰。

例如:

<ul>

<li>html</li>

<li>css</li>

<li>javascript</li>

</ul>

通常情況下需要清除無序列表樣式,例如:

li{

list-style:none;

}

四、表單

表單用于收集不同類型的用戶輸入,使用<form>標簽,位于<form>標簽內部的是一個包含表單元素的區域。

<form>標簽兩個屬性,action的參數是url地址,即表單提交的地址,method的參數在get與post中選擇,均表示傳值的方式。

例如:

<form action="apply.html" method="post">

1.<input>元素是表單中最重要的元素,該元素根據不同的type屬性,可以變化為多種形態。

type可以使用的屬性值有:text,password,radio,checkbox,submit,button

text定義提供文本的單行輸入

password定義密碼的輸入

radio定義單選框

checkbox定義多選框

submit定義提交表單數據處理程序的按鈕

button定義一個按鈕(使用<button>標簽定義按鈕比使用type屬性為button更常用,因為容易控制樣式)

例如:

<input type="button" name="" value="搜索">

<button>搜索</button>

注意:<input>與<button>自帶邊框樣式,通常使用border:none;取消其自帶樣式

placeholder屬性用于提示用戶輸入的信息

例如:

<input type="text" name="" placeholder="請輸入用戶名..."

2.<textarea>元素為多行文本域,可以用于填寫多行文字,例如用于發表說說,微博等,但其被<div>取代。 

實例一

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景</title>
	<link rel="icon" type="image/x-icon" href="">
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		/*1.背景控制*/
		/*background(背景圖 背景色)*/
		/*背景色(英文單詞 16進制顏色 rgb顏色)*/
		body{
			/*background: red;*/
			/*background: #f5f5f5;*/
			/*background: rgb(129,44,44);*/
			/*background: rgba(129,44,44,0.2);*//*背景色透明度,透明度取值0~1*/
			/*background: url(static/images/p1.jpg ) no-repeat;*/
			/*背景圖,background-image:url(),no-repeat不平鋪*/
			/*background-size: 100%;*/
		}
		hr{
			height: 10px;
			background: linear-gradient(to right,red,blue);/*背景色的線性漸變:方向,起始顏色,終止顏色*/
		}
		/*精靈圖
		(background-position:背景圖片定位x y 坐標)
		*/
		/**/
		div{
			width: 80px;
			height: 80px;
		}
		.pic1{
			background:url(static/images/p2.jpg) -100px 0px; /*復合寫法*/
		}
		.pic2{
			background:url(static/images/p2.jpg) -310px -365px; 
		}
		p{
			width: 20px;
			height: 20px;
			background:url(static/images/p1.jpg) -10px -30px;
		}

	</style>
</head>
<body>
	<hr>
	<div class="pic1"></div>
	<div class="pic2"></div>
	<p></p>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例二

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>邊框</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		/*邊框屬性:border:寬度 樣式 顏色;(樣式:dotted點線邊框,dashed:虛線邊框,solid:實線邊框,double:雙邊框)*/
		div{
			width: 200px;
			height: 200px;
			margin: 20px auto;
			border: 1px solid #ccc; /*復合寫法*/
			/*border-top: 1px solid #ccc; 邊框線單個控制*/
		}
		/*邊框陰影:box-shadow:x y 陰影寬度 陰影顏色;*/
		/*邊框圓角:border-radius;*/
		p{
			width: 200px;
			height: 200px;
			margin: 20px auto;
			box-shadow: 2px 2px 20px #ccc;
			/*border-radius: 100px; *//*使用百分比表示半徑50%,圓形*/
			border-top-left-radius: 20px;
			border-top-right-radius: 20px; /*單邊控制*/
		}
	</style>
</head>
<body>
	<div></div>
	<p></p>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例三

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表格與列表</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		table{
			width: 300px;
			margin: 20px auto;
			border: 1px solid #ccc;
			border-collapse: collapse; /*邊框折疊,或者說表格邊框與單元格邊框合并*/
		}
		td{
			border: 1px solid #ccc;
			text-align: center;
		}
		li{
			list-style: none; /*將無序列表樣式去掉*/
		}
	</style>
</head>
<body>
<!-- 表格 -->
<!-- 表格由<table>標簽來定義,每個表格均有若干行(由<tr>標簽定義),每行被分割為若干個單元格(由<td>標簽定義) -->
	<table>
		<tr>
			<td>一行一列表格</td>
		</tr>
	</table>
	<table>
		<tr>
			<!-- 合并列 -->
			<!-- <th>表頭標簽已經很少使用 -->
			<td colspan="4">蘋果</td>
			<!-- <td>蘋果</td>
			<td>蘋果</td>
			<td>蘋果</td> -->
		</tr>
		<tr>
			<!-- 合并行 -->
			<td rowspan="3">商品</td>
		</tr>
		<tr>
			<td>蘋果</td>
			<td>蘋果</td>
			<td>蘋果</td>
			<!-- <td>蘋果</td> -->
		</tr>
		<tr>
			<td>蘋果</td>
			<td>蘋果</td>
			<td>蘋果</td>
			<!-- <td>蘋果</td> -->
		</tr>
	</table>
	<!-- 無序列表,主要用于導航條的制作,二級下拉菜單框的嵌套會很清晰 -->
	<!-- 無序列表由<ul>標簽來定義,沒個列表均有若干個表項(由<li>標簽定義) -->
	<ul>
		<li>html</li>
		<li>css</li>
		<li>javascript</li>
	</ul>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例四(一)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表單</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
	</style>
</head>
<body>
	<!-- 表單用于收集不同類型的用戶輸入。<form>表單是一個包含表單元素的區域 -->
	<!-- action的參數是url地址,表單提交的地址。method的參數在get與post中選擇,傳值的方式。 -->
	<form action="" method="">
		<!-- <input>元素是表單中最重要的元素,該元素根據不同的type屬性,可以變化為多種形態。 -->
		<!-- type="text",定義提供文本的單行輸入,type="password",定義密碼的輸入,type="radio",定義單選框,type="checkbox",定義多選框,type="submit",定義提交表單數據處理程序的按鈕,type="button",定義一個按鈕 -->
		用戶名:<input type="text" name="">
		<br>
		密碼:<input type="password" name="">
		<br>
		<input type="radio" name="">男
		<input type="radio" name="">女
		<br>
		<input type="checkbox" name="">php
		<input type="checkbox" name="">html
		<input type="checkbox" name="">sql
		<br>
		<!--文本域,用于發說說,微博等等,會被div取代  -->
		<textarea></textarea>
		<br>
		<!-- 定義提交表單數據至表單處理程序的按鈕 -->
		<input type="submit" name="" value="提交">
		<br>
		<input type="button" name="" value="搜索">
		<br>
		<!-- 定義按鈕,最常用,容易控制樣式 -->
		<button>提交</button>

	</form>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例四(二)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>登陸頁面</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		body{
			background:#151517; 
		}
		div{
			width: 400px;
			height: 350px;
			margin: 200px auto;
			background: rgba(188,185,198,0.4);
			border-radius: 10px;
			text-align: center;
		}
		img{
			width: 80px;
			border-radius: 50%;
			margin: 50px;
		}
		input{
			width: 300px;
			height: 30px;
			margin-top: 15px;
			border-radius: 6px;
			border: none;
			padding-left: 10px;
		}
		button{
			border:none;
			width: 200px;
			height: 35px;
			border-radius: 6px;
			background: #151517;
			color:#fff;
			margin-top: 30px;
		}
	</style>
</head>
<body>
	<div>
		<img src="">
		<form action="" method="">
			<input type="text" name="" placeholder="請輸入用戶名..."><br>
			<input type="password" name="" placeholder="請輸入密碼..."><br>
			<button>登陸</button>
		</form>
	</div>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例





0/300
全部評價
感謝樓主 HTML雖然不是很難 但是有太多無關緊要的代碼,你所指出的這些正是我最需要的
2個月前
完成的很好,很認真!
2個月前
中国体彩网唯一官网