137 lines
2.7 KiB
HTML
137 lines
2.7 KiB
HTML
<!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>Document</title>
|
||
|
||
<style>
|
||
|
||
.test, .test2 {
|
||
color: red;
|
||
}
|
||
|
||
.main h1 span{
|
||
color: yellow;
|
||
}
|
||
|
||
.demo p + span {
|
||
color: violet;
|
||
}
|
||
|
||
.demo > p {
|
||
color: tomato;
|
||
}
|
||
|
||
.htest:hover {
|
||
font-size: 40px;
|
||
}
|
||
|
||
.news li:nth-child(5n) {
|
||
color: palevioletred;
|
||
}
|
||
|
||
.news li:last-child {
|
||
color: rgb(4, 247, 17);
|
||
}
|
||
|
||
.news li:first-child {
|
||
color: rgb(247, 32, 4);
|
||
}
|
||
|
||
.username:focus {
|
||
width: 300px;
|
||
background: yellow;
|
||
}
|
||
|
||
.ba::before {
|
||
content: "before的使用";
|
||
}
|
||
|
||
.ba::after {
|
||
content: "after的使用";
|
||
}
|
||
|
||
::selection {
|
||
background: red;
|
||
color: blue;
|
||
}
|
||
|
||
.login input[placeholder="输入手机号"] {
|
||
height: 60px;
|
||
}
|
||
|
||
.login input[type="password"] {
|
||
height: 30px;
|
||
}
|
||
</style>
|
||
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<div class="main">
|
||
<h1>
|
||
<a href="">
|
||
<p>
|
||
<span>你好</span>
|
||
</p>
|
||
</a>
|
||
</h1>
|
||
|
||
<span>dwededes</span>
|
||
</div>
|
||
|
||
<div class="demo">
|
||
<p>哈哈哈1</p>
|
||
<p>哈哈哈4</p>
|
||
<span>哈哈哈2</span>
|
||
<span>
|
||
<p>ccccc</p>
|
||
</span>
|
||
</div>
|
||
|
||
|
||
<p class="test2">qdqwdwq</p>
|
||
|
||
<h2 class="test">wqdwqdqw</h2>
|
||
|
||
|
||
<div class="htest">你好</div>
|
||
|
||
<ul class="news">
|
||
<li>你好测试：1</li>
|
||
<li>你好测试：2</li>
|
||
<li>你好测试：3</li>
|
||
<li>你好测试：4</li>
|
||
<li>你好测试：5</li>
|
||
<li>你好测试：6</li>
|
||
<li>你好测试：7</li>
|
||
<li>你好测试：8</li>
|
||
<li>你好测试：9</li>
|
||
<li>你好测试：8</li>
|
||
<li>你好测试：9</li>
|
||
<li>你好测试：8</li>
|
||
<li>你好测试：9</li>
|
||
<li>你好测试：8</li>
|
||
<li>你好测试：9</li>
|
||
<li>你好测试：8</li>
|
||
<li>你好测试：9</li>
|
||
<li>你好测试：10</li>
|
||
</ul>
|
||
|
||
<div class="login">
|
||
<input class="username" type="text" placeholder="输入用户名">
|
||
<input type="number" placeholder="输入手机号">
|
||
<input type="password" placeholder="输入密码">
|
||
</div>
|
||
|
||
<div class="ba">
|
||
这是测试文字
|
||
</div>
|
||
|
||
</body>
|
||
|
||
|
||
</html> |