<!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>
ul li a{
color: blue;
}
ul li a:hover{
color: red;
}
ul li a:active{
color:green;
}
ul li:nth-child(1) a{
color: blueviolet;
}
</style>
</head>
<body>
<h1>Welcome to Pseudo-class Selector Practice</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</body>
</html>运行网页
作业2
<!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>用户注册</title>
<!--
<style>
div h1{
color: pink;
}
div ul li:nth-child(1){
background-color: red;
}
div ul li{
color: lawngreen;
}
div ul li:last-child{
background-color: green;
}
div div:first-child{
color: rgb(212, 35, 35);
}
div>[class="text"]{
color: blue;
}
</style>
-->
</head>
<body>
<div class="container">
<h1>用户注册</h1>
<ul class="list">
<li >
用户名<label><input type="text" name="admin" value="zhangsan" autocapitalize="on"></label>
</li>
<li >
密码<label><input type="password" name="pass" value=""></label>
</li>
<li>
性别<input type="radio" name="sex" value="女" checked>女
<input type="radio" name="sex" value="男">男
</li>
</ul>
<p class="text">
爱好<input type="checkbox" name="love" value="唱" checked>唱
<input type="checkbox" name="love" value="跳" >跳
<input type="checkbox" name="love" value="Rap" >Rap
<input type="checkbox" name="love" value="打篮球" >打篮球
<br>
邮箱
<select>
<option value="">--邮箱类型--</option>
<option value="">网易邮箱</option>
<option value="">QQ邮箱</option>
<option value="">outlook邮箱</option>
</select>
<br>
用户头像<button>选择文件</button>未选择文件
</p>
<div class="box">
家庭住址
<select>
<option value="">请输入你的住址</option>
<option value=""></option>
</select>
</div>
<div class="box">
收货地址
<select name="地址" id="121" multiple="1" >
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="重庆">重庆</option>
<option value="南京">南京</option>
</select>
<br>
建议或意见
<textarea name="idea" id="123" cols="20" rows="2" placeholder="你的建议和意见"></textarea>
<br>
选择你喜欢的颜色<input type="color" name="color" id="14">
注册时间<input type="date" name="date" id="12">
</div>
</div>
<p class="text">
<button>注册</button>
<button>重置</button>
<hr>
</p>
</form>
</body>
</html>外部样式（不知道为什么实行不了）
内部样式运行结果（粗成）
589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
