ch15 边框样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小陈爱学习</title>
<style>
body{
width: 400px;height: 120px;
color: aquamarine;
border: 100px solid rgb(108, 122, 204);
}
div{
font-size: 28;
text-align: center;
width: fit-content;
color: rgb(24, 175, 180);
border: 2px solid rgb(81, 113, 113);
}
#div1{
border-bottom: 0px;
background-color: rgb(145, 205, 205);
}
#div2{
border-top: 0px;
background-color: rgb(145, 205, 205);
}
#div3{
background-color: rgb(145, 205, 205);
}
</style>
</head>
<body>
<div id="div1">小陈爱学习</div>
<br><hr><br>
<div id="div2">小陈爱学习</div>
<br><hr><br>
<div id="div3"><img src="./source/pic/2023-11-16_20-39.png" ></div>
</body>
</html>
？？？提问：两段文字后问什么有空白而图片后面没有，这个宽度是哪里控制的、
ch16 列表样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小陈爱学习</title>
<style type="text/css">
ul{
list-style-type: none;
list-style-image: url(./source/pic/2023-11-16_20-39.png);
}
</style>
</head>
<body>
<label for="name">mbti</label>
<ul id="name">
<li>infj</li>
<li>enfp</li>
<li>infp</li>
<li>isfj</li>
</ul>
</body>
</html>
ch16 习题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小陈爱学习</title>
<style>
a{
text-decoration: none;
color: pink;
}
ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<a href="aChaoLianJie.html" target="_blank"><li>Top1:百度</li></a>
<a href="aChaoLianJie.html" target="_blank"> <li>Top2:淘宝</li></a>
<a href="aChaoLianJie.html" target="_blank"><li>Top3：新浪</li></a>
<a href="aChaoLianJie.html" target="_blank"><li>Top4:网易</li></a>
<a href="aChaoLianJie.html" target="_blank"><li>Top5:搜狐</li></a>
</ul>
</body>
</html>
ch17 表格样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小陈爱学习</title>
<style type="text/css">
table,tr,td,th{border:1px solid silver;}
table{
caption-side: bottom;
border-collapse: collapse;
border-spacing: 8px;
}
</style>
</head>
<body>
<table>
<caption>学生成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>250</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>520</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td colspan="2">385</td>
</tr>
</tfoot>
</table>
</body>
</html>
ch18 图片样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小陈爱学习</title>
<style type="text/css">
#div1,#div3{
font-size: 22px;
color: blue;
border: 400px;
}
#div2{
width: 400px;
height: 300px;
border: 3px solid blue;
}
#div4{
width: 400px;
height: 300px;
border: 3px solid blue;
}
img{width: 200px;}
#div2,#div4{
text-align: center;
vertical-align: baseline;
}
#pic{float: left;}
</style>
</head>
<body>
<div id="div1">卓别林的帽子</div>
<div id="div2"><img src="./source/pic/ppp.png"></div>
<hr>
<div id="div3">卓别林的帽子</div>
<div id="div4">ppp<img id="pic" src="./source/pic/ppp.png" ></div>
</body>
</html>
ch19 背景样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小陈爱学习</title>
<style type="text/css">
div{
width: 600px;
height: 100px;
background-color: rgb(149, 179, 206);
}
#div2{background-image: url(./source/pic/2023-11-16_20-39.png);}
#div3{
background-image: url(./source/pic/2023-11-16_20-39.png);
background-repeat: no-repeat;
}
#div4{
background-image: url(./source/pic/2023-11-16_20-39.png);
background-repeat: no-repeat;
background-position: center center;}
</style>
</head>
<body>
<div id="div1">pic</div>
<div id="div2">pic</div>
<div id="div3">pic</div>
<div id="div4">pic</div>
</body>
</html>
ch20 超链接样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小陈爱学习</title>
<style type="text/css">
a{
color: red;
text-decoration: none;
}
a:hover{
color: greenyellow;
text-decoration:underline chartreuse;
}
img:hover{
border: 2px solid red;
}
body{
width: 200px;
border: 2px solid black;
}
#div1{
width: 200px;
height: 200px;
background-color: aquamarine;}
#a1_default{cursor: default;}
/* #a2_pointer{cursor: url(img/cursor/pointer.cur),pointer;}*/
</style>
</head>
<body>
<div id="div1">
<a id="a1" href="./aChaoLianJie.html" target="_blank">这是一个超链接</a> <br>
<a id="a2" href="./aChaoLianJie.html" target="_blank">这是一个超链接</a>
<hr>
<div id="div2"><img src="./source/pic/2023-11-16_20-39.png" alt="pic"></div>
</div>
</body>
</html>
ch20习题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小陈爱学习</title>
<style type="text/css">
a{
text-decoration: none;
color: red;
}
a:hover{
text-decoration: underline;
color: blue;
}
</style>
</head>
<body>
<a href="./aChaoLianJie.html"><p>今天告别就是我的日落，而明天清晨你们就会想起我</p> </a>
</body>
</html>
ch21盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小陈爱学习</title>
<style type="text/css">
body{
width: 600px;
border: 2px solid red;
text-align: center;
}
#div1{
width: 100px;
border: 2px solid blue;
background-color: aliceblue;
padding: 20px;
}
#div2{
width:500px;
border: 2px solid blue;
background-color: aqua;
}
#span1{
width: 500px;
border: 2px solid blue;
}
#span2{
display: inline-block;
width: 500px;
border: 2px solid blue;
}
#father{
width:500px;
border: 2px solid blue;
background-color: aqua;
}
#son{
width: 100px;
border: 2px solid blue;
background-color: aliceblue;
padding: 10px;
margin: 10px 100px 10px 300px;
}
</style>
</head>
<body>
<div id="div1">今天告别就是我的日落，而明天清晨你们就会想起我</div>
<div id="div2">今天告别就是我的日落，而明天清晨你们就会想起我</div>
<span id="span1">今天告别就是我的日落，而明天清晨你们就会想起我</span>
<span id="span2">今天告别就是我的日落，而明天清晨你们就会想起我</span>
<div id="father">
<span class="bro">兔子的本质是流浪</span>
<span class="bro">兔子的本质是流浪</span>
<div id="son">兔子的本质是流浪</div>
<span class="bro">兔子的本质是流浪</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小陈爱学习</title>
<style>
h3{color: blue;}
#s1{width: 100px;}
form{text-align:left;}
table {
border-collapse: collapse;
width:80%;
}
table,th,tr,td{
border: 1px solid grey;
text-align: center;
}
thead{
background-color: rgb(222, 214, 214);
}
a{text-decoration: none}
#编辑{color: rgb(255, 115, 0);}
#删除{color: rgb(255, 115, 0);}
</style>
</head>
<body>
<h3>员工管理</h3>
<div>
<form method="post">
姓名 <input type="text" value="请输入员工姓名">
性别 <select id="s1">
<option value="choose">请选择</option>
<option value="男">男</option>`
<option value="女">女</option>
</select>
入职时间从
<label for="dataInput">开始时间</label>
<input type="date" id="dateInput" name="date">
至<label for="dataInput">结束时间</label>
<input type="date" id="dateInput" name="date">
<span class="button"><button>查询</button></span>
</form>
</div>
<br><br>
<div class="button">
<a href="" target="_blank"><button>+新增员工</button></a>
<a href="" target="_blank"><button>-批量删除</button></a>
</div>
<br>
<div>
<table id="information">
<thead>
<th>口</th>
<th>姓名</th>
<th>图像</th>
<th>性别</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</thead>
<tr>
<td>口</td>
<td>赵敏</td>
<td><img src="./source/pic/2023-11-16_20-39.png" ></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 15:00:00</td>
<td>
<a href="" id="编辑">编辑</a>
<a href="" id="删除">删除</a>
</td>
</tr>
<tr>
<td>口</td>
<td>风清扬</td>
<td><img src="./source/pic/2023-11-16_20-39.png" ></td>
<td>男</td>
<td>讲师</td>
<td>2012-07-22</td>
<td>2022-07-22 15:00:00</td>
<td>
<a href="" id="编辑">编辑</a>
<a href="" id="删除">删除</a>
</td>
</tr>
<tr>
<td>口</td>
<td>风清扬</td>
<td><img src="./source/pic/2023-11-16_20-39.png" ></td>
<td>男</td>
<td>讲师</td>
<td>2012-07-22</td>
<td>2022-07-22 15:00:00</td>
<td>
<a href="" id="编辑">编辑</a>
<a href="" id="删除">删除</a>
</td>
</tr>
<tr>
<td>口</td>
<td>风清扬</td>
<td><img src="./source/pic/2023-11-16_20-39.png" ></td>
<td>男</td>
<td>讲师</td>
<td>2012-07-22</td>
<td>2022-07-22 15:00:00</td>
<td>
<a href="" id="编辑">编辑</a>
<a href="" id="删除">删除</a>
</td>
</tr>
<tr>
<td>口</td>
<td>风清扬</td>
<td><img src="./source/pic/2023-11-16_20-39.png" ></td>
<td>男</td>
<td>讲师</td>
<td>2012-07-22</td>
<td>2022-07-22 15:00:00</td>
<td>
<a href="" id="编辑">编辑</a>
<a href="" id="删除">删除</a>
</td>
</tr>
<tr>
<td>口</td>
<td>风清扬</td>
<td><img src="./source/pic/2023-11-16_20-39.png" ></td>
<td>男</td>
<td>讲师</td>
<td>2012-07-22</td>
<td>2022-07-22 15:00:00</td>
<td>
<a href="" id="编辑">编辑</a>
<a href="" id="删除">删除</a>
</td>
</tr>
</table>
</div>
<span>
<form >
每页显示记录数
<select id="page">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</body>
</html>
扫一扫
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
