HTML初学(三)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>练习</title>
<style>

a:link{text-decoration: none}
a:visited{color: #000000}
a:hover{font-style: oblique}

input[type="text"]{background-color: #ff0f00}
.a01:hover{background-color: #00ffea}
#a01:focus{border-color: #f4ff00;background-color: #00ffea }

:root{background-color: #00ffea}

td:empty{background-color: #ff0f00}
/*table td:empty以及tr td:empty以及table tr td在此处效果相同*/
::selection{background-color: #000000;color: #ffffff}

.a02:first-line{font-size: 12px}
.a02:first-letter{color: #ff0f00}
.a02:before{content: "你猜"}
.a02:after{content: "嘿嘿嘿"}

li:nth-child(2){color: #ff0f00}
li:nth-last-child(2){background-color: #f4ff00}
li:nth-child(odd){font-style: oblique}
li:nth-child(even):after{content: "123"}
li:nth-child(3n+1){font-size: 50px}

#a02 div{border: 5px solid #f4ff00}
#a02>div{border: 5px dashed #2e4cff }

</style>
</head>
<body>

<a href="#">bilibili</a><br/><br/>

用户名:<input type="text" class="a01"/><br/><br/>
密码&nbsp;:<input type="password" class="a01" id="a01"/><br/><br/>

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td></td>
<td>6</td>
</tr>
</table>
<p class="a02">打段<br/>什么<br/>话呢</p><br/><br/>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>

<div id="a02">
<div>saber
<div>尼禄</div>
<div>阿尔托利亚·潘德拉贡</div>
<div>高文</div>
<div>莫得雷德</div>
<div>齐格菲</div>
<div>贞德</div>
<div>冲田总司</div>
</div>
<div>archer</div>
<div>rider</div>
<div>lancer</div>
<div>caster</div>
<div>assassin</div>
<div>berserker</div>
</div>

</body>
</html>

posted @ 2016-06-14 23:35  奕军  阅读(96)  评论(0编辑  收藏  举报