<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>期末成绩单</title>
<body>
<img src="1632496918093.jpeg"style="width:500px";>
<img src="DSCF0338.JPG"style="width:500px";>
<table border="1px solid red">
<caption>考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小云</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>小婷</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>小浩</td>
<td>60</td>
<td>60</td>
<td>30</td>
</tr>
<tr>
<td>小远</td>
<td>60</td>
<td>30</td>
<td>60</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>80</td>
<td>72.5</td>
<td>72.5</td>
</tr>
</tfoot>
</table>
</body>
</html>
11.10
11.12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="https://blog.csdn.net/wyhwust/article/details/133910068" width="1000px" height="800px"
frameborder="0"></iframe>
</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>
</head>
<body>
<iframe src="11.html" name="iframe_a"></iframe>
<p><a href="https://blog.csdn.net/m0_74417939?spm=1011.2415.3001.5343" target="iframe_a">yaoyaoling</a></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>
#para1 {
text-align: center;
color: brown;
}
/*id属性不要以数字开头*/
.center {
text-align: center;
}
/*class可以在多个元素中使用 用. 调用*/
.ccc {
text-align: center;
}
.color {
color: red;
}
</style>
</head>
<body>
<p id="para1">hello world</p>
<p>这个段落不受该样式的影响</p>
<h1 class="center">标题居中</h1>
<p class="center">段落居中</p>
<h2 class="ccc">标题居中</h2>
<p class="ccc color">段落居中 颜色为红</p>
</body>
</html> 
11.13
<!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>
body {
background-color: blue;
}
</style>
</head>
<body>
<h1>我的css web页！</h1>
<p>你好！这是来自boogie的王子异</p>
</body>
</html>
11.14
<!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>
h1 {
background-color: antiquewhite;
}
p {
background-color: aqua;
}
div {
background-color: brown;
}
</style>
</head>
<body>
<h1>我的css web页！</h1>
<div>该文本插入在div元素中
<p>该段落有自己的背景颜色</p>
我们仍在一个div中
</div>
</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>
body {
background-image: url('高中照片\1632496918093.jpeg');
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景图片不重复 设置position实例</p>
<p>背景图片只显示一次 并与文本分开</p>
<p>实例中还添加了margin-right属性用于让文本与图片间隔开</p>
</body>
</html> 
这个背景照片为什么显示不出
来啊——11
11.15
<!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>
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
</head>
<body>
<h1>哈哈哈哈今天开心吗</h1>
<p class="date">2023/11/15</p>
<p class="main">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</p>
<p><b>注意：</b>重置浏览器窗口大小查看justify是如何工作的</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>
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>链接到：<a
href="http://59.68.177.183/srun_portal_success?ac_id=7&theme=pro&url=http%3A%2F%2Fwww.msftconnecttest.com%2Fredirect">wust.com</a>
</p>
</body>
</html>
11.17
<!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>
body {
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: rgb(93, 166, 226);
text-align: left;
}
.button {
background-color: rgb(93, 166, 226);
width: 100px;
height: 40px;
}
.button1 {
background-color: rgb(93, 166, 226);
width: 100px;
height: 40px;
}
.button2 {
background-color: rgb(93, 166, 226);
width: 100px;
height: 40px;
}
.button3 {
color: gold;
border: none;
background-color: white;
font-size: larger;
font-weight: 1000;
}
.button4 {
color: gold;
border: none;
background-color: white;
font-size: larger;
font-weight: 1000;
}
table {
width: 1200px;
height: 500px;
}
#first {
background-color: rgba(241, 237, 237, 0.883);
}
</style>
</head>
<body>
<h2>员工管理</h2>
<br>
<form>
姓名 <input type="text"
placeholder="请输入员工姓名">
性别
<form action="sex" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="男">
<option value="女">
</datalist>
入职时间 从 <input type="date"
name="starttime"> 到 <input type="date" name="endtype">
<button class="button">查询</button>
</form>
<br>
<br>
<form id="button0">
<button class="button1">+新增员工</button>
<button class="button2">-批量删除</button>
</form>
<br>
<br>
<form>
<table>
<tr id="first">
<th>
<input type="checkbox">
</th>
<th>姓名</th>
<th>图像</th>
<th>性别</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>李紫云</th>
<th>
<img src="素材/img/QQ图片20231117160902.png" width="50px">
</th>
<th>女</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2015-12-14 12:14:56</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>李紫云</th>
<th>
<img src="素材/img/QQ图片20231117160902.png" width="50px">
</th>
<th>女</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2015-12-14 12:14:56</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>李紫云</th>
<th>
<img src="素材/img/QQ图片20231117160902.png" width="50px">
</th>
<th>女</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2015-12-14 12:14:56</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>李紫云</th>
<th>
<img src="素材/img/QQ图片20231117160902.png" width="50px">
</th>
<th>女</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2015-12-14 12:14:56</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>李紫云</th>
<th>
<img src="素材/img/QQ图片20231117160902.png" width="50px">
</th>
<th>女</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2015-12-14 12:14:56</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>李紫云</th>
<th>
<img src="素材/img/QQ图片20231117160902.png" width="50px">
</th>
<th>女</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2015-12-14 12:14:56</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>李紫云</th>
<th>
<img src="素材/img/QQ图片20231117160902.png" width="50px">
</th>
<th>女</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2015-12-14 12:14:56</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>李紫云</th>
<th>
<img src="素材/img/QQ图片20231117160902.png" width="50px">
</th>
<th>女</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2015-12-14 12:14:56</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>李紫云</th>
<th>
<img src="素材/img/QQ图片20231117160902.png" width="50px">
</th>
<th>女</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2015-12-14 12:14:56</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>李紫云</th>
<th>
<img src="素材/img/QQ图片20231117160902.png" width="50px">
</th>
<th>女</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2015-12-14 12:14:56</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
</table>
</form>
</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>Document</title>
<style>
body {
font-size: 55px;
margin-left: 150px;
}
#name {
font-family: Arial, Helvetica, sans-serif;
color: rgb(120, 31, 60);
}
#text {
text-align: left;
text-decoration: underline;
line-height: normal;
text-indent: 110px;
}
#text1 {
width: 500px;
height: 500px;
border-color: black;
border-width: 5px;
background-color: blue;
border-style: dashed;
border-left: solid;
}
ol {
list-style-type: circle;
width: 200px;
}
ol li {
border: 3px solid green;
}
</style>
</head>
<body>
<input type="date">
<div id="name">武汉科技大学</div>
<div id="text">
<p>你提供接口进入交通肌肉关节i今日我说了寂寞i孙悟空哦上课加密如果即通过</p>
<p>境界看i困难节能降耗内容发布不会让你就服你ui纪念日激怒纪念日缴纳罚款</p>
</div>
<div id="text1">没看过空日寇吧可靠么快了喀麦隆公开喀麦隆公开麦考瑞了客人模块吗</div>
<h3>有序列表</h3>
<ol>
<li>李紫云</li>
<li>邹婷</li>
<li>周述浩</li>
<li>冯仲远</li>
</ol>
</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>
a:link {
color: aquamarine;
text-decoration: none;
background-color: black;
}
/*未访问链接*/
a:visited {
color: aqua;
}
/*已访问链接*/
a:hover {
color: blue;
}
/*鼠标移动到链接上*/
a:active {
color: blueviolet;
}
/*鼠标点击时*/
</style>
</head>
<body>
<p><b><a href="/18.html" target="_blank">hbcffrhfik</a></b></p>
<p><b>注意：</b>a:hover必须在a:visited之后 需要严格按照顺序才能看到效果</p>
<p><b>注意：</b>a:active必须在a:hover之后</p>
<div id="mm"></div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</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>
ul.a {
list-style-type: circle;/*列表项标志的类型*/
list-style-position: outside; /*列表中列表项的位置*/
list-style-image: url('素材/img/1.jpg'); /*将图像设为列表项标志*/
}
ul.b {
list-style-type: square;
}
ul.c {
list-style-type: upper-roman;
}
ul.d {
list-style-type: lower-alpha;
}
ul.e {
list-style-image: url('高中照片/16247841334.jpeg');
}
</style>
</head>
<body>
<p>无序列表实例</p>
<ul class="a">
<li>coffee</li>
<li>tea</li>
<li>coca cola</li>
</ul>
<ul class="b">
<li>coffee</li>
<li>tea</li>
<li>coca cola</li>
<ul class="e">
<li>coffee</li>
<li>tea</li>
<li>coca cola</li>
</ul>
</ul>
<p>有序列表实例</p>
<ul class="c">
<li>coffee</li>
<li>tea</li>
<li>coca cola</li>
</ul>
<ul class="d">
<li>coffee</li>
<li>tea</li>
<li>coca cola</li>
</ul>
</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>
#abc,
th,
td {
border: 1px solid black;
}
#de {
border-collapse: collapse;
}
#de,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<table id="abc">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>peter</td>
<td>bhvf</td>
</tr>
<tr>
<td>nvjf</td>
<td>kjvnf</td>
</tr>
</table>
<br>
<table id="de">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>peter</td>
<td>bhvf</td>
</tr>
<tr>
<td>nvjf</td>
<td>kjvnf</td>
</tr>
</table>
</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>
#abc,
td,
th {
border: 1px solid black;
}
td {
text-align: right;
}
#de,
td,
th {
border: 1px solid black;
}
td {
background-color: aquamarine;
color: blue;
}
</style>
</head>
<body>
<table id="abc">
<caption>哈哈哈123</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>peter</td>
<td>bhvf</td>
<td>100</td>
</tr>
<tr>
<td>nvjf</td>
<td>kjvnf</td>
<td>100</td>
</tr>
<tr>
<td>nvjf</td>
<td>kjvnf</td>
<td>100</td>
</tr>
</table>
<table id="de">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>peter</td>
<td>bhvf</td>
<td>100</td>
</tr>
<tr>
<td>nvjf</td>
<td>kjvnf</td>
<td>100</td>
</tr>
<tr>
<td>nvjf</td>
<td>kjvnf</td>
<td>100</td>
</tr>
</table>
</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>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的html元素，他包括：边距，边框，填充，和实际内容</p>
<div>这里是盒子内的实际内容</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
