2023. 1104网页设计课后练习1
今天主要练习了 html文本标签特殊符号和列表
知识点：无序列表的表示, sup, sub, hr标签的使用，特殊符号的使用
2023.11.05今天主要练习了表格的制作
知识点:1.表格最基本的标签是table，tr（表格行），th（表头），td（表格单元格）2.合并行标签rowspan，合并列标签colspan
2023.11.07今天学了图片的插入和超链接
知识点：1.绝对路径和相对路径；2.img标签表示图片，img标签的重要属性为src和alt属性；3.超链接用a标签实现
2023.11.13日 今天主要学习了表单的制作和框架
知识点：1.根据外观进行划分，表单可以分为8种：单行文本框，密码文本框，单选框，复选框，按钮，文件上传，多行文本框，下拉列表
2.表单标签:所有的表单标签都必须放在form标签内部；input标签是来实现大多数表单的，如单行文本框，密码文本框，单选多选框等；3.多行文本框要用textarea来实现4.下拉列表是由select和option标签配合实现的，类似于列表
3.对于同一组的单选框，必须要设置一个相同的name，即把这些选项放进同一组中。
第一次课后练习网页设计如下
以下是css部分
css选择器：
1.id属性的值只能出现一次，class属性的值可以出现多次；2.id选择器用#+属性值调用，class选择器用.号调用；3.后代选择器用"#⃣️father（空格）son"调用4.字体颜色直接用color设置。
字体样式：
1.字体颜色直接用"color：颜色"设置；2.字体大小用font-size设置，取值可以是像素值也可以是关键字3.字体粗细用font-weight设置，可以用像素值也可以用关键字4.字体风格用font-style设置
文本样式：
1.文本样式主要是针对段落来的；2.段落首行缩进用text-indent：像素值 来设置，为了实现缩进两个字的空间，text-indent的值应该是font-size的两倍；2.text-align属性控制文本在水平方向的对齐方式，有3个取值，left左对齐是默认值，center居中对齐，right右对齐；3.用text-decoration定义下划线（underline）中划线（line-through）顶划线（overline），用none去除所有划线效果；
边框样式：
1.几乎所有元素都可以定义边框，比如div，img，span等；2.边框样式有三个属性，border-width设置边框的宽度，取值是像素值；border-style定义边框的外观，常用三个取值：none，dashed（虚线），solid（实线）；border-color定义边框颜色；3.边框的定义一般用简写形式：例如设置div元素的边框div｛border：2px solid red｝；4.边框样式也可以局部设置：border-top，border-bottom，border-left，border-right。
列表样式：
1.list-style-type属性来定义列表项符号，而且是针对ol和ul元素的；2.去掉列表项符号：list-style-type：none；3.自定义列表项符号为图片：list-style-image：url（图片路径）
表格样式:
1.表格标题位置设置：caption-side，取值为top（默认值）和bottom
2.表格边框合并：border-collapse，取值为separate（默认值，边框分开有空隙），collapse（边框合并无空隙）
3.表格边框间距（边框与边框之间的距离）：border-spacing：像素值。
图片样式：
1.改变图片大小:width和height设置
2.图片对齐：text-align：left，center，right
3.垂直方向上对齐：vertical-align：top，middle，baseline（基线对齐）
4.文字环绕：float：left，right
背景样式：
1.背景颜色:background-color：颜色值（注意color加颜色值设置的是文本的颜色）
2.背景图片样式：background-image：url（图片路径），注意设置元素的宽和高不然图片无法显示
3.图片背景重复：background-repeat：取值，有四个取值：repeat（在水平和垂直方向上同时平铺，默认值），repeat-x在水平方向上平铺，repeat-y在垂直方向上平铺，no-repeat不平铺
4.背景图片位置：background-position：像素值或关键字，要同时设置水平方向和垂直方向的数值。
超链接样式：
1.用超链接伪类来定义超链接在鼠标点击的不同时期的样式；
2.a：link定义a元素未访问时的样式（一般情况下直接用a）
eg：a：（link）｛color：red｝则未访问时字体颜色为红色
3.a：visited定义访问后的样式
4.a：hover定义鼠标经过a元素的样子
5.a：active定义鼠标单击激活的样子
6.：hover伪类不止可以用在a元素，它可以定义任何一个元素在鼠标经过时的样式
7.鼠标样式：cursor取值：default（默认值）
pointer text（常用的值）
盒子模型：
1.页面中的所有元素都可以看成一个盒子，并占据一定的页面空间
2.盒子模型有4个组成部分：
①content内容区（可以是文本或图片），有三个属性：width，height，overflow
②内边距padding（内容区和边框之间的空间） ，有五种属性，可以指定内容区与各方向边框之间的距离；padding：像素值1 像素值2 像素值3 像素值4；（上右下左顺时针记忆）
③外边距margin（两个盒子之间的距离，可以是子元素与父元素之间的距离，也可以是兄弟元素之间的距离）；margin与padding简写模式一样
浮动布局：
1.正常文档流：将一个页面从上到下分为一行行，其中块元素单独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满
2.可以用浮动和定位改变正常文档流
3.浮动：float：取值（left和right）设置浮动后元素宽度不再延伸而是由内容决定其宽度；清除浮动：clear：（left，right，both）
定位布局
1.固定定位：fixed。position：fixed；是结合top，bottom，left，right四个属性一起使用的，先让元素成为固定定位元素，接着设置元素相对浏览器的位置
2.相对定位：relative。相对定位是元素相对原始位置而言的，固定定位是相对浏览器而言的
3.绝对定位：absolute，绝对定位也是想对浏览器而言的
<!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(146, 195, 234);
text-align: left;
}
.button {
background-color: rgb(146, 195, 234);
width: 100px;
height: 40px;
}
.button1 {
background-color: rgb(146, 195, 234);
width: 100px;
height: 40px;
}
.button2 {
background-color: rgb(146, 195, 234);
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="微信图片_20230602205824.jpg" width="50px">
</th>
<th>男</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2022-07-22 12:05:20</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>张三</th>
<th>
<img src="微信图片_20230602205824.jpg" width="50px">
</th>
<th>男</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2022-07-22 12:05:20</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>张三</th>
<th>
<img src="微信图片_20230602205824.jpg" width="50px">
</th>
<th>男</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2022-07-22 12:05:20</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>张三</th>
<th>
<img src="微信图片_20230602205824.jpg" width="50px">
</th>
<th>男</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2022-07-22 12:05:20</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>张三</th>
<th>
<img src="微信图片_20230602205824.jpg" width="50px">
</th>
<th>男</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2022-07-22 12:05:20</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>张三</th>
<th>
<img src="微信图片_20230602205824.jpg" width="50px">
</th>
<th>男</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2022-07-22 12:05:20</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>张三</th>
<th>
<img src="微信图片_20230602205824.jpg" width="50px">
</th>
<th>男</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2022-07-22 12:05:20</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>张三</th>
<th>
<img src="微信图片_20230602205824.jpg" width="50px">
</th>
<th>男</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2022-07-22 12:05:20</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>张三</th>
<th>
<img src="微信图片_20230602205824.jpg" width="50px">
</th>
<th>男</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2022-07-22 12:05:20</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
<tr>
<th>
<input type="checkbox">
</th>
<th>张三</th>
<th>
<img src="微信图片_20230602205824.jpg" width="50px">
</th>
<th>男</th>
<th>班主任</th>
<th>2008-12-18</th>
<th>2022-07-22 12:05:20</th>
<th>
<button class="button3">编辑</button>
<button class="button4">删除</button>
</th>
</tr>
</table>
</form>
</form>
</body>
</html>
855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
