-
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>邊框</title>
<style type="text/css">
p{border:2px dotted #ccc;}
p{box-shadow:1px 1px 12px;
? padding:8px;}
</style>
</head>
<body>
? ? <h1 >勇氣</h1>
? ? <p>三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
? ? <p>到了三年級下學期時，我們班上了一節(jié)公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。</p>? ?
</body>
</html>
查看全部 -
為標簽設置背景顏色可以使background-color:顏色值來實現(xiàn)。
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>行間距</title>
? ? <style type="text/css">
? ? ? ?p{line-height:2em;}?
? ? </style>
</head>
<body>
? ? <p>菲茨杰拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗挽歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二注解。</p>
</body>
</html>
查看全部 -
開頭空兩格喔 - 使用text-indent為文本添加首行縮進
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>縮進樣式</title>
? ? <style type="text/css">
? ? ? ? p{text-indent:2em;}
? ? </style>
</head>
<body>
? ? <h1>了不起的蓋茨比</h1>
? ? <p>1922年的春天，一個想要成名名叫尼克?卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>
? ? <p>菲茨杰拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗挽歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二注解。</p>
</body>
</html>
查看全部 -
1、text-decoration可以設置添加到文本的修飾。
2、text-decoration默認值為none, 定義標準的文本。
3、text-decoration的值為underline為定義文本下的一條線。
4、text-decoration的值為overline為定義文本上的一條線。
5、text-decoration的值為line-through為定義穿過文本下的一條線，一般用于商品折扣價。
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>color顏色</title>
? ? <style type="text/css">
? ? .one {
? ? ? ? color: red;
? ? }
? ? .two {
? ? ? ? color: #FF0000;
? ? }
? ? .three {
? ? ? ? color: rgb(255, 0, 0);
? ? }
? ? </style>
</head>
<body>
? ? <a href="http://idcbgp.cn/" class="one">慕課網(wǎng)1</a>
? ? <a href="http://idcbgp.cn/" class="two">慕課網(wǎng)2</a>
? ? <a href="http://idcbgp.cn/" class="three">慕課網(wǎng)3</a>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>font-family</title>
? ? <style type="text/css">
? ?
? ? </style>
</head>
<body>
??
? ? <h1>勇氣</h1>
? ? <p>三年級時，我還是一個<span id="stress" style=font-family:"楷體";font-size:40px>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
? ? <p>到了三年級下學期時，我們班上了一節(jié)公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。</p>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>子選擇器</title>
? ? <style type="text/css">
? ? /*添加邊框樣式（粗細為1px， 顏色為紅色的實線）*/
? ? .food>li {
? ? ? ? border: 1px solid red;
? ? }
? ? .first>span{border:1px solid red;}
? ??
? ? </style>
</head>
<body>
? ? <p class="first">三年級時，<span>我還是一個膽小如鼠的小女孩</span></span>，<span>上課從來不敢回答老師提出的問題</span>，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
? ? <h1>食物</h1>
? ? <ul class="food">
? ? ? ? <li>水果
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>香蕉</li>
? ? ? ? ? ? ? ? <li>蘋果</li>
? ? ? ? ? ? ? ? <li>梨</li>
? ? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li>蔬菜
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>白菜</li>
? ? ? ? ? ? ? ? <li>油菜</li>
? ? ? ? ? ? ? ? <li>卷心菜</li>
? ? ? ? ? ? </ul>
? ? ? ? </li>
? ? </ul>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>類和ID選擇器的區(qū)別</title>
? ? <style type="text/css">
? ? .stress {
? ? ? ? color: red;
? ? }
? ? .bigsize {
? ? ? ? font-size: 25px;
? ? }
? ? #stressid {
? ? ? ? color: red;
? ? }
? ? #bigsizeid {
? ? ? ? font-size: 25px;
? ? }
? ? </style>
</head>
<body>
? ? <h1>勇氣</h1>
? ? <p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
? ? <p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節(jié)公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："<span id="stressid">我來，我來</span>。"我環(huán)顧了四周，就我沒有舉手。</p>
? ? <p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節(jié)公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。</p>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>input-url</title>
</head>
<body>
? ? <form method="post" action="save.php">
? ? ? ? 網(wǎng)址：<input type="url">
? ? ? ? <input type="submit" value="搜索">
? ? </form>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>form</title>
</head>
<h1>學生信息登記表</h1>
<hr>
<body>
<h13>學生信息登記表</h3>
<form >
? ? ?<div>
? ? ? ? ?<lable for="username">用戶名</label>
? ? ? ? ?<input id="username"tyep="text" placeholder="請輸入用戶名：" minlength="3" maxlength="10" required >
? ? ? ? ? ?
? ? ? ??
? ? ? ? ?</div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<label for="password"></label>密碼
? ? ? ? ? ? ?<input
? ? ? ? ? ? ?id="password"
? ? ? ? ? ? ?type="password"
? ? ? ? ? ? ?placeholder="請輸入密碼："minlength="3" maxlength="10">
? ? ? ? ? ? ?
? ? ? ? ?</div>
? ? ? ? ? ?<div>
? ? ? ? ? ? ?<label for="email"></label>郵箱
? ? ? ? ? ? ?<input
? ? ? ? ? ? ?id="email"
? ? ? ? ? ? ?type="email"
? ? ? ? ? ? ?placeholder="請輸入郵箱：">
? ? ? ? ? ? ?
? ? ? ? ?</div>
? ? ? ? ? ?<div>
? ? ? ? ? ? ?<label for="phone"></label>手機號碼
? ? ? ? ? ? ?<input
? ? ? ? ? ? ?id="phone"
? ? ? ? ? ? ?type="phone"
? ? ? ? ? ? ?placeholder="手機號碼："required pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">
? ? ? ? ? ? ?
? ? ? ? ?</div>
? ? ? ? ? <div>
? ? ? ? ? ? ?<label for="brithday"></label>出生日期
? ? ? ? ? ? ?<input
? ? ? ? ? ? ?id="brithday"
? ? ? ? ? ? ?type="date"
? ? ? ? ? ? ?>
? ? ? ? ? </div>
? ? ? ? ? <div>
? ? ? ? ? ? ?<label for="age"></label>年齡
? ? ? ? ? ? ?<input
? ? ? ? ? ? ?id="age"
? ? ? ? ? ? ?type="number"
? ? ? ? ? ? ?placeholder="請輸入年齡">
? ? ? ? ?</div>
? ? ? ? ? <div>
? ? ? ? ? ? ? <lable>性別</lable>
? ? ? ? ? ??
? ? ? ? ? ?<label for"man">男</label>
? ? ? ? ? ?<input type="radio"value="man" name="gender">
? ? ? ? ? ? ?<label for"woman">女</label>
? ? ? ? ? ? ?<input type="radio"value="woman"name="gender">
? ? ? ? ? ? ?
? ? ? ? ?</div>
? ? ? ? ? <div>
? ? ? ? ? ? ?<label>你的心情</label>
? ? ? ? ? ? ?<select name="spirits" id="spirits">
? ? ? ? ? ? ? ? <option value="good">好</option>
? ? ? ? ? ? ? ? <option value="great">很好</option>
? ? ? ? ? ? ? ? <option value="wonderful">非常好</option></select>
? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ?</div>
? ? ? ? ? ?<div>
? ? ? ? ? ? ?<label>你的愛好</label>
? ? ? ? ? ? <label for="">打籃球</label>
? ? ? ? ? ? <input type="checkbox"name="basketball">
? ? ? ? ? ?<label for="">摸魚</label>
? ? ? ? ? ? ? <input type="checkbox"name="touchfish">
? ? ? ? ? ? ? ? <label for="">電競</label>
? ? ? ? ? ? ? <input type="checkbox"name="playgame">
? ? ? ? ? ? ? ? <label for="">看書</label>
? ? ? ? ? ? ? <input type="checkbox"name="readbook">
? ? ? ? ?</div>
? ? ? ? ?<div>
? ? ? ? ? ? ?<!--報道文件-->
? ? ? ? ? ? ?<label>報道文件</label>
? ? ? ? ? ? ?<input type="file" accept="exe/png">
? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ?</div>
? ? ? ? ?<div>
? ? ? ? ? ?<label for="remark">備注：你想說的</label>
? ? ? ? ? ?<textarea name="remark" cols="30"rows></textarea>
? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ?</div>
? ? ? ? ?
? ? ? ? ?
? ? ? ? ?
? ? ? ? ?
? ? ? ? ?
? ? ? ? ?
? ? ? ? ?
? ? ? ? ?
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <input type="submit">
? ? ? ? ? ? ? ? <input type="reset">
?
? ? ? ? ? ??
? ? ? ? ? ? ? ? ??
? ? ? ? ? ??
? ? ??
? ? ? ? ?
? ??
? ? </form>
? ??
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>使用thead、tbody、tfoot標簽</title>
</head>
<h2>成績表</h2><hr>
? ? <h3><table border="1"? width="200px" height="200px"? ? ?align="center" bgcolor="orange">
? ??
<body>
? ? <thead>
? ? ? ? <tr>
? ? ? ? ? ? <th>科目</th>
? ? ? ? ? ? <th>分數(shù)</th>
? ? ? ? ? ??
? ? ? ? </tr>
? ? </thead>
? ? <tbody>
? ? ? ? <tr>
? ? ? ? ? ? <td>語文</td>
? ? ? ? ? ? <td>99</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>數(shù)學</td>
? ? ? ? ? ? <td>60</td>
? ? ? ? </tr>
? ? </tbody>
? ? <tfoot>
? ? ? ? <tr>
? ? ? ? ? ? <td>總分</td>
? ? ? ? ? ? <td>159</td>
? ? ? ? </tr>
? ? </tfoot>
</body>
</html>
查看全部 -
table私有屬性
border(邊框)屬性：border="number"
background(背景)屬性:background="背景圖片"
bgcolor(背景顏色)屬性:bgcolor=""
width/height屬性:寬/長:width="30"/height="40'
align="center"? ? ?對齊方式
查看全部 -
header可以理解為導航，h標簽指的是標題
查看全部 -
1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
2、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
3、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
4、<th>…</th>：表格的頭部的一個單元格，表格表頭。
5、表格中列的個數(shù)，取決于一行中數(shù)據(jù)單元格的個數(shù)。
6、border屬性可以為表格添加邊框，屬性值為數(shù)字。
注意：
1、table標簽用來定義整個表格，為雙標簽，必須有結束標簽。
2、table標簽里面可以放caption標簽和tr標簽。
3、caption標簽用來定義表格的標題。
4、tr標簽用來設置表格的行，tr里面只能放th或者td標簽，一組tr標簽代表一行。
5、th用來設置表格的標題，會加粗居中顯示。也就是th標簽中的文本默認為粗體并且居中顯示。
6、td同來設置表格的列，一組td標簽代表一列。
7、table表格在沒有添加border屬性之前, 在瀏覽器中顯示是沒有表格線的
查看全部
舉報