制作列表,表格及表单-笔记

最新推荐文章于 2024-09-11 12:42:08 发布

Allen_OI

最新推荐文章于 2024-09-11 12:42:08 发布

阅读量425

点赞数

分类专栏：笔记文章标签：笔记小白 css

本文链接：https://blog.csdn.net/allen_oi/article/details/97387145

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇笔记详细介绍了如何使用CSS设置各种样式，包括文字样式、排版属性、伪类和列表样式，以及背景样式。同时，文章通过有序列表、无序列表和定义列表展示了数据的多种展示方式。此外，内容涵盖了表格的使用，强调了表格在数据展示中的优势，以及表单的语义化制作。最后，讲解了CSS3的高级选择器，如层次选择器和结构伪类选择器，用于增强网页元素的样式。

摘要由CSDN通过智能技术生成

制作列表,表格及表单

使用CSS设置各种样式

CSS 的意义

有效的传递页面信息

使页面漂亮,美观,更加吸引用户

可以更好的突出页面的主题内容,使用户可以第一眼看到页面的主要内容

具有良好的用户体验

< span>标签添加文字样式

font-family   设置字体样式       
font-size    设置字体大小
font-style      设置字体风格
font-weight    设置字体的粗细
font     在一个声明中设置所有的字体属性  
例  font :italic  bold   36px  "宋体";

font-family属性设置
font-family:"楷体";  可以设置中文或者英文的字体类型

font-size属性设置
可以设置属性值的单位:in,cm,mm,pt,pc,px
一般常用的是px
font-size:20px;

font-style 属性设置
normal标准字体,
italic斜体字体,
oblique倾斜字体

font -weight属性设置
normal 默认值,定义标准的字体
bold  粗体字体
bolder   更粗的字体
lighter   更细的字体
100~900 每次增加一百  由细到粗   400等同于normal   700等同于bold

排版网页属性

color     设置文本颜色
text-align  设置文本水平对齐方式
text-indent 设置首行文本的缩进
line-height  设置文本的行高
text-decoration   设置文本的装饰
vertical-align    这只文本垂直对齐方式
text-shadow  设置文本阴影

color属性设置
RGB格式:#FFFFFF
RGBA格式:rgba(0,0,255,0.5);0.5设置透明度

text-align属性设置
left 把文本排列到左边,默认值,由浏览器决定
right  把文本排列到右边
center  把文本排列到中间
justify  实现两端对齐文本效果

text-indent和line-height属性设置
单位为em和px
一般em用的比较多 比如 text-height:2em;

text-decoration属性设置
none默认值,定义的标准本文
underline  设置文本的下划线
overline   设置文本的上划线
line-through  设置文本的删除线

vertical-align属性设置
middle  文本居中对齐

text-shadow属性设置
text-shadow:color 颜色RGB  x-offset:(x轴偏移)     y-offset:(y轴偏移)
	blur-radius:模糊半径

设置伪类和列表样式

语法:伪类{  语法  }
设置的顺序a:link  ->   a:visited  ->  a:hover  ->  a:active
a:link 未单机访问时超链接样式
a:link{color:#9ef5f9;}

a:visited 单机访问后超链接样式
a:visited{color:#333;}	

a:hover鼠标悬浮其上的超链接样式
a:hover{color:#ff7300;}

a:active 鼠标单机未释放的超链接样式
a:active{color:#999;}

背景样式

< div>标签可以吧HTML文档分割成独立的 ,不同的部分

background-color 设置背景颜色

background-image   设置背景图像
repeat 沿水平和垂直两个方向平铺
no-repeat不平铺,背景图片只显示一次
repeat-x只沿水平方向平铺
repeat-y只沿垂直方向平铺

background-position 背景定位
(x,y)   (x20%,y30%)   (left  right  top    bottom)

background-size  背景尺寸
auto 默认值
1px,2px

使用有序列表,无序列表,定义列表实现数据展示

列表分为三种:有序列表 ,无序列表 ,自定义列表

无序列表由< ul>标签和< li>标签组成
<ul>
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
</ul>

有序列表由< ol>标签和< li>标签组成
<ol>
	<li>内容</li>
	<li>内容</li>
	<li>内容</li>
</ol>

自定义列表由<dl>标签,<dt>标签和<dd>标签组成
<dl>
	<dt>标题</dt>
	<dd>内容</dd>
</dl>

列表样式
	list-style-type
		none 无标记符号
		disc   实心圆,默认类型
		circle  空心圆
		square  实心正方形
		decimal  数字

使用表格实现数据展示

为什么使用表格,表格简单通用结构稳定

表格的基本语法

< table>
	< table border="2">
    < tr>
        < td>1行1列的标题</td>
        < td>1行2列的标题</td>
        < td>1行3列的标题</td>
    < /tr>
    < tr>
        < td>2行1列的标题</td>
        < td>2行2列的标题</td>
        < td>2行3列的标题</td>
    </tr>
</table>
表格的基本结构
行(tr)
单元格(td)
td属性:colspan="2"跨两列
rowspan="2"跨行数

制作语义化表单

表单元素的语法

method
	告诉浏览器如何将数据发送给服务器,它指定向服务器发送数据的方法,语法为 
	method = (get|post)
action
	指示服务器上处理表输出的程序.一般来说,当用户单击表单上的"提交"按钮后,信息
	发送到web服务器上,由action属性指定的程序处理.语法为action="URL"																																																																																																																																																																																																																																																


属性
	type指定表单元素的类型,可用的类型有
		text  ,password   ,radio   ,checkbox    ,submit   ,   reset     ,
		file   , email     ,url    ,number     ,hidden   ,image    ,button

表单语法

<form method="post" action="test9.html">
    <p>名字:<input name="name" type="text"/></p>
    <p>密码:<input name="pass" type="password"/></p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="reset" value="重置"/>
    </p>
</form>
method:get 默认选择  在地址栏显示信息
post  隐藏地址栏中的信息
action:"test9.html"表示向何处发送表单数据
在实际网页开发中通常采用post方式提交表单数据

<h1>input表单元素格式</h1>
<p>input  type="test input元素类型" name="fname input元素名称"value="text input元素的值"</p>
type:指定元素的类型.
<text文>Q</text文>本框
使用方法:
<input type="text"name="userName"value="用户名"
       size="30"maxlength="20"/>
属性
name="userName"文本框名称
maxlength="20"文本框可输入的最多字符
size="30"文本框长度
value="用户名"文本框初始值
type="text"文本框

password密码框
<input type="password" name="pas"/>
email邮箱框
<p>
    邮箱:
    <input type="email"name="email"/>
</p>
<input type="submit"/>
自动验证邮箱格式

数字
<p>
    请输入数字
    <input type="number" name="num" min="0" max="100" step="10"/>
</p>
<input type="submit">
type="number"数字
min="0"允许最小值
max="10"允许的最大值
step="10"合法的数字间隔

滑块
<p>请输入数字
    <input type="range" name="range1" min="0" max="10" step="2"/>
</p>
type="range"滑块
min="0"允许最小值
max="10"允许的最大值
step="2"合法的数字间隔

搜索框
<p>请输入搜索的关键字:<input type="search"name="sousuo"/>
</p><input type="submit"/>
search搜索
            checkbox复选框
        <form method="get"action="test9.html" >
            爱好:
            <input type="checkbox"name="interest"value="sports" checked/>玩游戏
            <input type="checkbox"name="interest"value="talk"/>聊天
            <input type="checkbox"name="interest"value="play"/>运动
        </form>

    radio单选框
        <input name="gen"type="radio"value="男"checked/>男
        <input name="gen"type="radio"value="女"/>女
        属性:
         checked默认选中状态
         name值必须相同的才能被分为一组

    submit提交按钮
    <input type="submit" name="butsubmit" value="submit按钮"/>
    reset重置按钮
    <input type="reset" name="butresrt" value="reset按钮"/>
    file文件域
        <form action="" method="post">
            <p>
                <input type="file"name="files"/>
                <input type="submit"name="upload"value="上传"/>
            </p>
        </form>

    button普通的按钮
    <input type="button" name="butbutton" value="button按钮"onclick="alert(this.value)"/>
        属性
        onclick="alert(this.value)"点击普通按钮弹出一个对话框对话的内容是this.value这个value
    image按钮图片
    <input type="image" src="图片路径.gif"/>

    文本域
    <form method="post"action="">
        <h4>填写个人评价</h4>
        <p>
            <textarea name="textarea" cols="40" rows="6">
                自信,活泼,善于思考...
                cols="40"显示一行能装多少内容
                rows="6"显示几行内容
            </textarea>
        </p>
    </form>

默认为text
name:指定元素的名称
value:元素的初始值.type为radio时必须指定一个值
size:指定表单元素的初始宽度.当type为text或password时,
   表单元素的大小以字符为单位.对于其他类型,宽度以像素为单位
maxlength:type为text或者password时,输入的最大字符数
checked:type为radio或checkbox时,指定按钮是否是被选中

select列表框
selected默认选中项
option选项
<h1>列表框</h1>
<select name="列表名称"size="行数">
    <option value="选项的值"selected>中国</option>
    <option value="选项的值">华为</option>

</select>

隐藏域主要目的为了后台提交数据

只读
<input name=“name” type=“text” value="张三"readonly/>
禁用

表单元素的标注
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male" />
for="id"表单元素的id
id="male"

使用CSS3高级选择器为网页元素添加CSS样式

层次选择器

E F 后代选择器
    选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内

E>F 子代选择器
    选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素

E+F 相邻兄弟选择器
    选择匹配的F元素,且匹配的F元素仅位于匹配的E元素后面

E~F 通用兄弟选择器
选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

结构伪类选择器

E:first-child
   作为父元素的第一个子元素的元素E
E:last-child
    作为父元素的最后一个子元素的元素E
E F:nth-child(n)
    选择父级元素的E的第n个子元素F,(n可以是1,2,3)关键字为even
    (偶数),odd(奇数)
E:first-of-type
    选择父元素内具有指定类型的第一个E元素
E:last-of-type
    选择父元素具有指定类型的最后一个E元素
E F:nth-of-type(n)
    选择父元素内具有指定类型的第n个元素
    使用 E F:nth-child(n)和E F:nth-of-type(n)的关键点
   E F:nth-child(n)在父级里从第一个元素开始找,不分类型
    E F:nth-of-type(n)在父级里先看类型,再看位置