码迷,mamicode.com
首页 > Web开发 > 详细

HTML初学(三)

时间:2016-06-15 01:38:05      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

HTML初学(三)

标签:

原文地址:http://www.cnblogs.com/jason-yijun/p/5585892.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!