一 外部引用 内嵌式 行内式
.begin{
border:1px solid black ;
width: 450px;
border-radius: 8px;
}
<!--外部引用 (创建一个 后缀为css 的文件夹)-->
<link href="div.css" rel="stylesheet" />
<div class="begin">用户名</div>
<!--内嵌式-->
<style>
.tile {
border: 1px solid dodgerblue;
width: 450px;
height: 80px;
background-color: dodgerblue;
font-size: 30px;
color: white;
border-radius: 8px;
text-align: center;
line-height: 80px;
}
</style>
<div class="tile">注册用户</div>
<!--行内式-->
<div style="margin-top:20px;">用户名</div>
二 各种常见样式
<html>
<head>
<style>
.st {
border: 1px solid black;
width: 300px;
border-radius: 8px;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<!-- 样式 style=" " -->
<!-- 边框 border:粗细 实/虚线 颜色 -->
<!-- 宽度 width: 像素 -->
<!-- 角弧度 border-radius: 像素 -->
<!-- 边距 margin-top / bottom / left / right: 像素 居中:auto -->
<!-- 内填充 padding-top / bottom / left / right: 像素 -->
<!-- 文本居中 text-align: center -->
<!--区块-->
<div class="st">
<h1>用户登录</h1>
<form>
<table style="margin-left: auto; margin-right: auto;">
<tr>
<td>用户名:</td>
<td> <input type="text" /> </td>
</tr>
<tr>
<td>密码:</td>
<td> <input type="password" /> </td>
</tr>
<tr>
<td></td>
<td>
<button style="margin-top: 10px; margin-right: 80px;">登录</button>
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
三 有序列表 ol , 无序列表 ul 有序列表 ol :有序号的列表 无序列表 ul:没有序号的列表
<html>
<head></head>
<body>
学生成绩排名---有序列表
<!--有序列表 ol-->
<ol>
<!--列表项 li-->
<li>张三 100分</li>
<li>李四 95分</li>
<li>王二 90分</li>
</ol>
学生成绩排名---无序列表
<!--无序列表 ul-->
<ul>
<!--列表项 li-->
<li>张三 100分</li>
<li>李四 95分</li>
<li>王二 90分</li>
</ul>
</body>
</html>
四 单选按钮 radio
复选框 checkbox
下拉列表 <select> <option>内容</option> </select>
文本域 <textarea cols="列数" rows="行数">...</textarea>
<html>
<head></head>
<body>
<h2>用户注册</h2>
<form> <!--表单-->
用户名:<input type="text" /><br />
手机号:<input type="tel" /><br />
邮箱:<input type="email" /><br />
密码:<input type="password" /><br>
确认密码:<input type="password" /><br />
<!--单选按钮 radio-->
性别:<input type="radio" name="sex" />男
<input type="radio" name="sex" checked="true" />女
<!--checked默认值为true-->
<br />
<!-- 复选框 checkbox-->
爱好:<input type="checkbox" name="hobby" />登山
<input type="checkbox" name="hobby" checked />露营
<input type="checkbox" name="hobby" />旅游
<br />
<!--下拉列表 <select> <option>内容</option> </select>-->
课程:
<select>
<option>语文</option>
<option>数学</option>
<option>英语</option>
</select>
<br />
<!--文本域 <textarea cols="列数" rows="行数">...</textarea> -->
备注:
<textarea cols="30" rows="20">
</textarea>
<br/>
<!-- <input type="button" value="注册"/> -->
<button>注册</button>
<input type="reset" value="重置" />
</form>
</body>
</html>
