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>