标签：哈哈哈哈 记录 color 补习 呵呵 寒假 font 选择器 CSS
在这两天的视频和实践练习中，逐步掌握运用HTML和CSS的一些基本技术来实现用户注册页面等类似界面的简单构建，其中所学到的一些知识都已经在下面的代码中用注释标出。当然，还有很多常用的，由于时间、篇幅等原因未能标出，但这些代码在很多的学习网站上都可以很轻易的查阅到，因此便不过多赘述。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</script>
<html>
<head>
<title>注册界面</title>
</head>
<body>
<!-- 提交 ， method为提交方式，get和post-->
<form action = "#" method = "get"></form>
<!-- 字号h1-5 -->
<h2 align="center">请注册</h2>
<!-- 下划线及格式 -->
<hr />
<hr size = "10"/>
<hr size = "10" color = "red"/>
<!-- 字体设置 -->
<center><font color = "蓝色" face = "华文楷体" > 注册界面</font></center>
<!-- 隐藏字段 -->
隐藏 字段：<input type = "hidden" name = "id" /> <br />
<form name="form1" action="register_confirm.jsp" method="post" onsubmit="return isValidate(form1)">
<table align="center">
<tr>
<!--文本输入 text , 密码password ，单选radio, 多选 checkbox, name属性取值唯一-->
<td> 用户 ID：</td>
<td><input type="text" name="userid">6-8 位 </td>
</tr>
<tr>
<td> 用户名：</td>
<td><input type="text" name="username">2-10 位</td>
</tr>
<tr>
<td>头像：</td>
<td> <input type = "file" name = "touxiang"/> </td>
</tr>
<tr>
<td> 口令：</td>
<td><input type="password" name="userpass">6-8 位，不能与用户 ID 相同</td>
</tr>
<tr>
<td> 确认口令：</td>
<td><input type="password" name="userpass2"></td>
</tr>
<tr>
<td>性别：</td>
<!-- 提交的为value中内容 取值任意-->
<td><input type = "radio" name = "sex" value = "男"/ checked = "checked">男</td>
<td><input type = "radio" name = "sex" value = "女"/>女</td>
</tr>
<tr>
<td> 生日：</td>
<td><input type="text" name="birthday">格式为：1988-1-1</td>
</tr>
<tr>
<td> 学历：</td>
<td>
<input type="radio" name="degree" value="专科">专科
<input type="radio" name="degree" value="本科" checked>本科
<input type="radio" name="degree" value="硕士研究生">硕士研究生
<input type="radio" name="degree" value="博士研究生">博士研究生
<input type="radio" name="degree" value="其他">其他
</td>
</tr>
<tr>
<td> 地区：</td>
<td>
<select name="local">
<option value="华东">华东</option>
<option value="华南">华南</option>
<option value="华北">华北</option>
<option value="东北" selected = "selected">东北</option>
<option value="东南">东南</option>
<option value="西南">西南</option>
<option value="西北">西北</option>
<option value="华中">华中</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td> <input type = "checkbox" name = "hobby" value = "钓鱼" />钓鱼</td>
<td> <input type = "checkbox" name = "hobby" value = "打游戏" />打游戏</td>
<td> <input type = "checkbox" name = "hobby" value = "写代码" />写代码</td>
</tr>
<tr>
<td> E-mail:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td> 地址：</td>
<td><input type="text" name="address"></td>
</tr>
<tr>
<td> 电话：</td>
<td><input type="text" name="phone"> 数字和连字符，例如 88223322-123</td>
</tr>
<tr>
<td> 备注：</td>
<td> <textarea rows="8" name="comment" cols="40"></textarea></td>
</tr>
<!-- 提交按钮， 重置按钮，普通按钮 -->
<!-- 按钮不需要name属性 -->
<tr>
<td> <input type="reset" value="重置"></td>
<td> <input type="submit" value="提交"></td>
<td><input type = "button" value = "zhuce" /></td>
</tr>
<table>
</form>
</body>
</html>
</body>
</html>
下面是CSS选择器的应用
一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<!--
CSS语法和规范：
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
-->
<style>
/* 元素选择器 */
div{
font-size:30ps;
color:blue;
}
/* 类选择器 */
.div2{
font-size:30px;
color:pink;
}
/* id选择器 */
#div4{
font-size:40px;
color:gold;
}
/* 属性选择器 */
input[type = 'text']{
background-color:red;
}
input[type = 'password']{
background-color:blue;
}
</style>
</head>
<body>
<div>
哈哈哈哈11
</div>
<div>
呵呵呵呵22
</div>
<div>
哈哈哈哈33
</div>
<div>
呵呵呵呵44
</div>
<div class = "div2">
哈哈哈哈22
</div>
<div class = "div2">
哈哈哈哈33
</div>
<div id = "div4">
哈哈哈哈44
</div>
<div>
呵呵呵呵44
</div>
用户名： <input type = "text" name = "usename"/><br />
密码： <input type = "password" name = "password"/><br />
</body>
</html>
二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style>
/* 层级选择器 */
div p{
font-size:30ps;
color:blue;
}
</style>
</head>
<body>
<div>
<p>
呵呵呵呵22
</p>
</div>
<div>
<p>
哈哈哈哈33
</p>
</body>
</html>
标签：哈哈哈哈,记录,color,补习,呵呵,寒假,font,选择器,CSS 来源： https://www.cnblogs.com/fwk123/p/12256252.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。