抄写的同学，把注释什么的都抄上
html
<!DOCTYPE html>
<!--根标记-->
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<!-- 设置字符编码-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<!-- 链入CSS-->
<title>主页</title>
<style>
/* 标签选择器*/
h2{
color:red;
/* 字体颜色*/
}
/* 类选择器*/
.red{
color: red;
}
/* id选择器*/
#red{
color: red;
}
</style>
</head>
<body>
<a href="#red">超链接</a>
<h1 style="color:red;">一级标题利用行内式设置样式</h1>
<h2>二级标题</h2>
<h3 class="red">三级标题利用类选择器添加样式</h3>
<h4 id="red">四级标题利用id选择器添加样式</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落标记<strong>加粗</strong><em>倾斜</em><del>删除线</del>
<ins>下划线</ins>
</p>
<ul>
<li>one无序列表
<ul>
<li>1嵌套</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>two</li>
<li>three</li>
</ul>
<ol>
<li>one有序列表
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
</ol>
</li>
<li>two</li>
<li>three</li>
</ol>
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>
<div class="box">
<p>字体样式<span>删除线</span></p>
</div>
<div class="box1">盒子内容</div>
<div class="box2"></div>
<!-- 表单-->
<form action="#">
帐号：<input type="text"><br>
密码：<input type="password"><br>
<input type="radio" name="radio1">
<input type="radio" name="radio1">
<input type="submit" value="登录">
</form>
<div style="clear:both;"></div>
<br>
<!-- 表格-->
<table>
<tr>
<td>1,1</td>
<td colspan="2">1,2</td>
<!-- 横跨合并-->
<!-- <td>1,3</td>-->
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td rowspan="2">2,3</td>
<!-- 竖跨合并-->
</tr>
<tr>
<td>3,1</td>
<td >3,2</td>
<!-- <td>3,3</td>-->
</tr>
</table>
</body>
</html>
css
*{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
/* 列表样式,复合属性，后面一次为样式类型 位置 图片*/
/* list-style-image: */
/* list-style-position: */
list-style-type: none;
/* 列表样式类型设置为空*/
}
p{
font-size: 40px;
/* 字号大小*/
color: red;
/* 字体颜色*/
font-weight: bold;
/* 字体粗细*/
font-family: 宋体;
/* 字体*/
text-align: center;
/* 字体的对齐方式*/
text-indent: 80px;
/* 文本前空格*/
}
.box p{
font-weight: bold;
font-style: italic;
/* 字体样式*/
text-decoration: underline;
/* 文本样式*/
}
.box p span{
text-decoration: line-through;
}
.box1{
width: 290px;
/* 宽*/
height: 190px;
/* 高*/
background-color: red;
/* 背景颜色*/
float: left;
/* 浮动*/
padding-left: 10px;
/* 左内边距*/
padding-top: 10px;
}
.box2{
width: 300px;
height: 200px;
background-color: blue;
float: left;
}
a{
clear: both;
/* 清除浮动影响*/
display: block;
/* 元素转换*/
width: 200px;
height: 200px;
background-color: orangered;
text-decoration: none;
line-height: 200px;
/* 行高*/
text-align: center;
/* 对齐方式*/
}
/*伪类*/
a:link{
color: orange;
}
a:visited{
color: orange;
}
a:hover{
color: orange;
}
a:active{
color: orange;
}
table{
width: 500px;
border: 1px solid black;
border-collapse: collapse;
/* 将边框合并*/
}
table tr td
{
border: 1px solid black;
}
table tr td:nth-child(1){
background-color: red;
}
网友评论