1.html部分练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单设计</title>
</head>
<body>
<form name="form1" mathod="post">
昵称：<input type="text" value="请输入正确的格式" maxlength="10"/></br>
密码：<input type="password" maxlength="5"/><br>
邮箱：<input type="text" maxlength="10"/>
<select>
<option selected>qq.com</option>
<option>gmail.com</option>
<option>yahoo.com</option>
<option>msn.com</option>
</select><br>
性别：<input type="radio" name="gender" value="boy" checked/>男
<input type="radio" name="gender" value="girl"/>女<br>
爱好：<input type="checkbox" name="hobit" value="旅游" />旅游
<input type="checkbox" name="hobit" value="摄影"/>摄影
<input type="checkbox" name="hobit" value="运动"/>运动<br>
个人简介：<br>
<textarea rows="10" cols="40"></textarea><br>
上传个人照片：<br>
<input type="file" />
<hr>
<input type="button" value="立即注册"
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉列表</title>
</head>
<body>
<form method="post" name="select">
<select size="5">
<option>沃尔玛</option>
<option>中国石化</option>
<option>国家电网</option>
<option>中国石油</option>
<option>壳牌石油</opton>
<option selected>中国移动</option>
</select>
</form>
</body>
</html>
iframe标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe</title>
</head>
<body>
<iframe src="https://www.csdn.net/" width="300" height="200"></iframe>
<iframe src="https://tb.alicdn.com/snapshot/index.html" width="500" height="500"></iframe>
</body>
</html>
2.CSS部分练习
选择器练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
div{
color:crimson;
}
#xx{
color:blue;
}
.yy{
color:blueviolet;
}
</style>
<title>CSS练习</title>
</head>
<body>
<div>我喜欢做网页</div>
<p>我喜欢html</p>
<span>我喜欢css</span><br>
<span id="xx">我喜欢学习</span><br>
<span class="yy">我喜欢敲代码</span><br>
<span class="yy">我喜欢写作业</span>
</body>
</html>
字体样式练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体设置</title>
<style type="text/css">
#a{
font-family: 微软雅黑;
font-size: 20px;
font-weight: bold;
font-style: oblique;
color:chocolate;
}
#b{
font-family: 楷体;
font-size: 10px;
font-weight: lighter;
font-style: italic;
color:rgb(34, 183, 34);
}
</style>
</head>
<body>
<p id="a">在看电影《活着》之前，我的内心是忐忑的。虽然没有读过原著，但余华的这部小说是著名的悲剧。然而，刚刚看完电影，除了感慨以外，我也感受到了一种温情。</p>
<p id="b">感慨的是时代的变化对人民大众生活的影响，而温情则是人性中的善良的光辉，是人们彼此间的帮助，是对美好生活的期盼。</p>
<p id="c">电影刚开始，四十年代时，福贵还是个烂泥扶不上墙的大少爷。他嗜赌成性，不管不顾怀着胎儿的妻子家珍的劝阻，结果把房产输光了，自己的父亲也被气死，妻子回了娘家。于是他带着母亲，卖家里的家具碗碟维持生计，他在路边摆摊，电影的几个场景变化，风吹雨打，在下着雪的路上缩成一团，这也正是他改过自新的时候，是他的思想彻底由一个富家少爷转变为贫苦底层人民的过程。之后，妻子带着儿女回来见他，他决定为了一家人“能过安生日子”去找龙二，借来了一箱皮影，组了一个戏班。</p>
</body>
</html>
课后编程题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
p{
font-family: 微软雅黑，楷体;
font-size: 14px;
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<p>"有规划的人生叫蓝图，没规划的人生叫拼图"</p>
</body>
</html>
文本样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
p{
font-size:14px;
text-indent: 28px;
text-align: center;
text-decoration: line-through;
line-height: 15px;
}
#a{
text-align:right;
text-decoration: underline;
}
a{
text-decoration: none;
}
#p1{
text-transform: uppercase;
line-height: 30px;
}
#p2{
text-transform: lowercase;
letter-spacing: 3px;
}
#p3{
text-transform: capitalize;
}
</style>
</head>
<body>
<p>日本进口缝隙收纳架厨房置物架冰箱夹缝车可移动多层落地超窄柜</p>
<p>北美红雀冬青浆果欧式陶瓷餐具汤锅汤碗汤盆手绘浮雕彩绘带盖耐热</p>
<div id="a">结婚酒盅婚庆用品 大红色双喜 喜庆敬酒杯 交杯酒杯 陶瓷小号杯</div>
<a href="https://zhuanlan.zhihu.com/p/159188143" target="_blank">知乎</a>
<p id="p1">hello world</p>
<p id="p2">hello world</p>
<p id="p3">hello world</p>
</body>
</html> 
表格界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
<style type="text/css">
form{
line-height:50px;
}
p{
color:rgb(0,164,247);
}
table,tr,td{
border-width:1px;
border-style:solid;
border-color:rgb(176, 167, 167);
}
table{
border-collapse: collapse;
}
td{
width:110px;
height:40px;
text-align: center;
vertical-align: middle;
}
.last{
width:180px;
}
#first{
background-color: rgb(228, 222, 222);
}
.no-border {
border: none;
color:orange;
background-color: #fff;
}
.b{
background-color: rgb(0,164,247);
color:#fff;
height:30px;
}
.c{
width:80px;
}
</style>
</head>
<body>
<p>员工管理</p>
<form method="post">
姓名<input type="text" value="请输入员工姓名"/>
性别<select>
<option>男</option>
<option>女</option>
<option selected>请选择</option>
</select>
入职时间从<input type="month"/>
<input type="submit" value="查询"/><br>
</form>
<form>
<input type="submit" class="b"value="+新增员工"/>
<input type="submit" class="b"value="-批量删除"/>
</form>
</body>
<table>
<tr id="first">
<td><input type="checkbox" name="赵敏"/></td>
<td>姓名</td>
<td>图像</td>
<td>性别</td>
<td>职位</td>
<td>入职日期</td>
<td>最后操作时间</td>
<td>操作</td>
</tr>
<tr>
<td class="c"><input type="checkbox" name="赵敏"/></td>
<td>赵敏</td>
<td><img src="../img/on.gif" width="30px" height="20px"/></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td class="last">2022-07-22 12:05:20</td>
<td><input type="submit" class="no-border" value="编辑"/><input type="submit" class="no-border" value="删除"/></div></td>
</tr>
<tr>
<td class="c"><input type="checkbox" name="赵敏"/></td>
<td>风清扬</td>
<td><img src="../img/on.gif" width="30px" height="20px"/></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-07-21 15:00:00</td>
<td><input type="submit" class="no-border" value="编辑"/><input type="submit" class="no-border" value="删除"/></td>
</tr>
<tr>
<td class="c" ><input type="checkbox" name="赵敏"/></td>
<td>风清扬</td>
<td><img src="../img/on.gif" width="30px" height="20px"/></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-07-21 15:00:00</td>
<td><input type="submit"class="no-border" value="编辑"/><input type="submit"class="no-border" value="删除"/></td>
</tr>
<tr>
<td class="c" ><input type="checkbox" name="赵敏"/></td>
<td>风清扬</td>
<td><img src="../img/on.gif" width="30px" height="20px"/></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-07-21 15:00:00</td>
<td><input type="submit" class="no-border" value="编辑"/><input type="submit" class="no-border" value="删除"/></td>
</tr>
<tr>
<td class="c"><input type="checkbox" name="赵敏"/></td>
<td>风清扬</td>
<td><img src="../img/on.gif" width="30px" height="20px"/></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-07-21 15:00:00</td>
<td><input type="submit"class="no-border" value="编辑"/><input type="submit"class="no-border" value="删除"/></td>
</tr>
<tr>
<td class="c" ><input type="checkbox" name="赵敏"/></td>
<td>风清扬</td>
<td><img src="../img/on.gif" width="30px" height="20px"/></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-07-21 15:00:00</td>
<td><input type="submit" class="no-border"value="编辑"/><input type="submit"class="no-border" value="删除"/></td>
</tr>
<tr>
<td class="c"><input type="checkbox" name="赵敏"/></td>
<td>风清扬</td>
<td><img src="../img/on.gif" width="30px" height="20px"/></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-07-21 15:00:00</td>
<td><input type="submit" class="no-border"value="编辑"/><input type="submit"class="no-border" value="删除"/></td>
</tr>
<tr>
<td class="c"><input type="checkbox" name="赵敏"/></td>
<td>风清扬</td>
<td><img src="../img/on.gif" width="30px" height="20px"/></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-07-21 15:00:00</td>
<td><input type="submit"class="no-border" value="编辑"/><input type="submit"class="no-border" value="删除"/></td>
</tr>
</table>
</body>
</html>
3624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
