18列表元素表格元素练习
一、补充的一些东西
我感觉还是直接用代码块做笔记算了
<!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>
.box {
background-color:red;
text-align:center;
}
.box span {
background-color:green;
}
.box .container {
background-color:blue;
width:50px;
height:50px;
margin:0 auto;
}
</style>
</head>
<body>
<!-- 今天学习内容:
高级元素的使用:列表元素,常见列表,表格元素,表格合并,表单元素,表单常见属性常见的Emmet语法:认识Emmet,常见Emmet语法,常见的结构伪类,否定伪类的使用
tip:补充一个小东西
讲一个居中的问题!
有一个box盒子,里面有一个span元素:我是span元素,
这个时候style中给盒子一个背景
然后盒子下面的span,给一个背景,能够看到一个效果是div中一个span
当前这里是没有居中的,想要让span居中,怎么居中,首先Text-line是给谁设置的
因为是给box添加的text-align:center;让父元素中的inline-box的盒子居中
-------
假如说现在又有一个span的兄弟container div
背景宽度高度,span居中了,但是div没有居中,text-align只是对行内级元素有效
margin: 0 auto;
div默认在div中独占一行,当前是width+margin=父元素的width,所以当前width为50px,margin=父元素width-自己的width,所以要给子元素这个div居中需要给子元素添加margin: 0 auto;
-->
<div class="box">
<span>我是span元素</span>
<div class="container"></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>
</head>
<body>
<!-- 列表元素,表格元素,表单元素 这是今天重点讲解的元素
1、首先来看列表元素
开发一个网页的过程当中很多数据都是以列表的形式存在的,
比如汽车的排行榜,新闻的排行榜,再比如视频排行榜,
还有商品列表,商品列表也算是一个列表,弄成一个个单元格
水平排布。
总的来说:列表是非常常见的,几乎每个网页都会存在列表。
2、列表的实现方式
如果想要编写列表,首先编写列表结构
常见有两种方案:
每个单元格可以使用一个div包裹,很多网站编写列表的时候并没有真正
使用到列表元素,而是直接采用div,
第二种方案是使用列表元素
事实上对于现在的网站来说,很多网站的维护很多年的,整个网站的体系写的非常好,打一些大公司做前端的是有很大的团队的,一个项目做了很多年了,想要说的是目前,可以单纯的使用列表,但是很多人偏好使用div,但是这样不够语义化,最开始ul和li做列表的时候做的是标准的列表,一看就是一行,两行这种列表,但是现在有商品列表,这种
横向的一个个单元格的,比如像京东,淘宝,目前很多网站对于列表元素并没有强烈性的偏好,喜欢按照自己的风格来做,因为列表里面有一些CSS的样式,比如h1,p元素和
div是没有区别的,但是浏览器默认添加了很多的样式,列表元素也是一样这些东西也是默认添加了一些CSS,这些CSS对于我们某些列表是不需要默认的CSS样式,就需要一些额外的重置操作,就像之前重置a标签,既然要重置,为什么不使用比较自由的div呢。
并且一般来说ul中一般只放li,这个相对的规则就会有一些限制,如果是div就非常自由了,任何地方都能使用,所以因为列表有过多的限制,并且需要重置解决这些问题,就更加喜欢自由的div,这个和vue和react很想,vue的格式是比较固定单一的,一个开发过两年vue开发的和做7年开发者是有区别的,如果两个人都在vue开发上不会有太大的差别,两个人写出来的代码差不多的,本身格式是有限制的,想要定制化就会比较难。
所以有人更加偏向于react,react更加自由,这个的开发模式整个就是js。
react总的来说就是一个all in js。
js是一个动态类型的语言,更加自由,但是没有谁好谁坏这样一说,只不过react上手比较难。
相对的技术来说还是喜欢自由的东西,比如C++和python。但是也是没有绝对的自由,自由也会有一定的缺陷,比如指针。
HTML提供了三组常用的用来展示列表的元素:有序列表 ol li
无序列表:ul li
定义列表: dl dt dd
-->
</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>
ol, li {
padding:0;
margin:0;
list-style:none;
}
</style>
</head>
<body>
<!-- 有序列表使用ol li
ol ordered list ordered是指定顺序的意思
有序列表,直接子元素只能是li
ol中不能放置div也不能放p,只能放li
真的按照规则来放只能放li
然后li 对应的英文是list item是列表里面的某一项
创建一个ol列表有序列表,这里不能放div,但是也可以放div,但是还不如直接使用div
ol中可以放li,比如创建一个自己喜欢的电影排名的一个列表,加上一个标题,这里就可以每个li就是ol列表的每一项,星际穿越,还有大话西游,盗梦空间,喜羊羊和灰太狼,
熊出没,奥特曼;
默认情况下会有一些样式,默认有一些padding有一些内边距padding-inline-start,并且自动会有一个数字序号,这个是有序,有序会添加上一些序号;这个是ol和li结合起来的一个效果。
实际开发中我们不需要这些默认样式,我们的样式可能不需要或者可能更大,并且我们不需要这种数字样式,一般不喜欢使用这种东西,我们喜欢自己添加。
想要去除这些东西需要找到这个的样式可以看到左边有一些padding-inline-start还有一些margin-block-start的东西
首先拿到ol,li做一个padding:0;margin:0;这样来做是比较常见的,这个东西就已经去掉了,但是还有一个点没有去掉,这个是加上了一个list-style-type,所以去掉list-style:none;再回到刚才的位置就没有点了。 -->
<h1>自己喜欢的电影排名</h1>
<ol>
<li>星际穿越</li>
<li>大话西游</li>
<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>
ul, li {
padding:0;
margin:0;
list-style-type:none;
}
</style>
</head>
<body>
<!-- 一般情况下看到网站使用列表的时候都是将这些样式先去除;
无序列表是ul,英文unordered list
无序列表,直接子元素只能是li
li 是list item,列表中的每一项
这里也写一个无序列表
来一个标题h1常见的编程语言
ul li JavaScript,Java,C++,C,Python,Ruby,Go
也会有一些padding,并且还有一些点等默认的样式
他这里其实是设置了一个list-style-type:选中不同的值展示不同的效果
比如设置一个decimal这个之后从无序列表改成一个有序列表了,这个属性还有其他的值
想要尝试可以自己尝试,一般情况下都是设置为none;
然后padding:0;margin:0;一般重置的时候是这样重置的,有的网站不考虑性能直接通过*重置,去掉之后就可以自己调整东西了。
目前我们添加是自己一个个添加,之后学习完成js之后通过for循环来添加这些顺序数字等等。-->
<h1>常见的编程语言</h1>
<ul>
<li>JavaScript</li>
<li>Java</li>
<li>C++</li>
<li>C</li>
<li>Python</li>
<li>Ruby</li>
<li>Go</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>
dl,dt,dd {
padding:0;
margin:0;
}
dt {
font-size:20px;
font-weight:700;
margin:10px 0;
}
dd {
margin:5px;
}
</style>
</head>
<body>
<!-- 定义列表平时比较少见,definition list
定义列表,直接子元素只能是dt,dd
dt 是definition term
term是项的意思,列表中每一项的项目名
dd是definition description
列表中每一项的具体描述是对dt的描述,解释,补充
一个dt后面一般紧跟着1个或者多个dd
比如列出前端开发的各个阶段:
h1前端开发
分每个阶段,然后每个阶段要学习的技术,
这样就可以将整个列表使用dl定义列表
大的阶段的项目名字叫做dt,然后每个阶段中的技术对应dd
dl里面dt,阶段一对应dd,HTML,CSS,JS,JS DOM,JS BOM,JS高级语法
dt阶段二框架实战,dd,Node基础,Webpack基础,GIT源代码管理,VUE,VUE+TS,React框架实战,小程序加云开发,Uniapp+taro
dt阶段三,课程进阶,dd,TypeScript,VUE+TypeScript,React+TypeScript,Node/开发脚手架/Node服务器开发/MySQL,Webpack高级/性能优化,Vite/Rollup/gulp
数据结构和算法
等等,这些就是一个前端体系
最重要的还是阶段一
但是还是有一些样式,还会进行重置,
dl,dt,dd来一个padding:0;margin:0;这些padding是给谁做的样式呢,不管是给谁加上去的样式,不管是加上多少,我们都需要自己添加,这个东西不需要记,当然也可以选中元素然后查看浏览器的默认添加样式
dt增大一些文字大小,weight加粗,添加一些margin等等
dd也来一些margin什么的
dd和dt一般在一些官网在最后会使用,但是有的也会使用其他的列表 -->
<h1>前端开发的各个阶段</h1>
<dl>
<dt>阶段一-前端开发基础</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
<dd>JavaScript DOM</dd>
<dd>JavaScript BOM</dd>
<dd>JavaScript高级语法</dd>
<dt>阶段二-前端框架实战</dt>
<dd>Node基础</dd>
<dd>Webpack基础</dd>
<dd>GIT源代码管理</dd>
<dd>VUE</dd>
<dd>VUE+TS</dd>
<dd>React框架实战</dd>
<dd>小程序加云开发</dd>
<dd>Uniapp+taro</dd>
<dt>阶段三-进阶</dt>
<dd>TypeScript</dd>
<dd>VUE+TypeScript</dd>
<dd>React+TypeScript</dd>
<dd>Node/开发脚手架/Node服务器开发/MySQL</dd>
<dd>Webpack高级/性能优化</dd>
<dd>Vite/Rollup/gulp</dd>
<dd>数据结构与算法</dd>
</dl>
</body>
</html>
六、今日头条-新闻列表练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新闻列表练习</title>
<link rel="stylesheet" href="./css11/reset.css">
<style>
ul > li {
margin-top:10px;
}
ul > li > a {
display:inline-block;
}
ul > li > a:hover {
color: #f04142;
}
/* 局部设置 */
ul > li .ranking {
display:inline-block;
width:16px;
height:16px;
margin-right:2px;
margin-left:2px;
text-align:center;
line-height:16px;
font-weight:700;
color:#999;
}
/* 伪类:结构伪类(后续会详细讲解)找到第x个li下面的ranking */
ul > li:nth-child(2) .ranking{
color:#ff403a;
}
ul > li:nth-child(3) .ranking{
color:#ff9500;
}
ul > li:nth-child(4) .ranking{
color:#fc0;
}
/* 内容相关 */
ul > li .content {
display: inline-block;
}
/* 图标相关 */
ul > li .icon {
/* 做一些微调 */
position:relative;
top:2px;
left:1px;
display: inline-block;
width:16px;
height:16px;
}
ul > li .new {
/* 注意这个地方矢量图在阿里矢量图获取的时候一定在下拉框指定好尺寸,这里指定16才会正常显示 */
background-image:url(./images/new_icon1.svg);
}
ul > li .hot {
background-image:url(./images/hot_icon.svg);
}
ul > li .top {
display: inline-block;
width:20px;
height:20px;
background-image:url(./images/top_icon.svg);
}
</style>
</head>
<body>
<ul>
<li class="item">
<a href="#">
<!-- 如果单独是数字就不好调整数字的样式,需要单独的设置一个span,并且内容也进行包裹-->
<i class="icon top"></i>
<div class="content">庆祝澳门回归祖国25周年文艺晚会</div>
</a>
</li>
<li class="item">
<a href="#">
<!-- 如果单独是数字就不好调整数字的样式,需要单独的设置一个span,并且内容也进行包裹-->
<span class="ranking">1</span>
<div class="content">岑浩辉宣誓就任澳门特区行政长官</div>
</a>
</li>
<li class="item">
<a href="#">
<!-- 如果单独是数字就不好调整数字的样式,需要单独的设置一个span,并且内容也进行包裹-->
<span class="ranking">2</span>
<div class="content">马英九:台民众感受到绝对不能打仗</div>
<i class="icon hot"></i>
</a>
</li>
<li class="item">
<a href="#">
<!-- 如果单独是数字就不好调整数字的样式,需要单独的设置一个span,并且内容也进行包裹-->
<span class="ranking">3</span>
<div class="content">读懂澳门发展的傲娇密码</div>
</a>
</li>
<li class="item">
<a href="#">
<!-- 如果单独是数字就不好调整数字的样式,需要单独的设置一个span,并且内容也进行包裹-->
<span class="ranking">4</span>
<div class="content">法航母打击群40年来首次部署亚太</div>
</a>
</li>
<li class="item">
<a href="#">
<!-- 如果单独是数字就不好调整数字的样式,需要单独的设置一个span,并且内容也进行包裹-->
<span class="ranking">5</span>
<div class="content">小米YU7实车图曝光</div>
<i class="icon new"></i>
</a>
</li>
<li class="item">
<a href="#">
<!-- 如果单独是数字就不好调整数字的样式,需要单独的设置一个span,并且内容也进行包裹-->
<span class="ranking">6</span>
<div class="content">青海警方悬赏通缉在逃人员韩妮娜</div>
</a>
</li>
<li class="item">
<a href="#">
<!-- 如果单独是数字就不好调整数字的样式,需要单独的设置一个span,并且内容也进行包裹-->
<span class="ranking">7</span>
<div class="content">学校食堂疑给学生吃倒进狗食桶的菜</div>
<i class="icon new"></i>
</a>
</li>
<li class="item">
<a href="#">
<!-- 如果单独是数字就不好调整数字的样式,需要单独的设置一个span,并且内容也进行包裹-->
<span class="ranking">8</span>
<div class="content">小米SU7等抢占“34C”市场结果如何</div>
<i class="icon new"></i>
</a>
</li>
<li class="item">
<a href="#">
<!-- 如果单独是数字就不好调整数字的样式,需要单独的设置一个span,并且内容也进行包裹-->
<span class="ranking">9</span>
<div class="content">2024中国“三农”成绩单出炉</div>
</a>
</li>
<li class="item">
<a href="#">
<!-- 如果单独是数字就不好调整数字的样式,需要单独的设置一个span,并且内容也进行包裹-->
<span class="ranking">10</span>
<div class="content">韩国年轻人“特种兵旅游”挤满上海</div>
</a>
</li>
</ul>
<!--
一堆屋里哇啦,哈哈:
目前讲解的都是垂直排列,但是没有讲水平排列,
后面再讲水平排列。
来一个ul,放li,先做一个,之后直接复制粘贴即可。
先做一个头条热榜,随便找一个新闻
列表是可以点击的,所以需要包含一个a元素,然后对应一个href链接
放置内容进去,因为在li中所以不好调整,单独添加一个span做一个序号对应一个class为ranking这个,然后内容使用content的div框起来,然后每个li是一个item
并且还可以添加一个小图标i,icon
然后做一个重置,对body,ul,li,a全部做一个重置,做一个padding:0;margin:0;
ul,li,ol这种还需要list-style:none:
并且a来一个text-decoration:none;,color:#333;
现在我们一个a元素里面嵌套了一个div元素,一般行内非替换元素里面不嵌套块
所以ul > li > a设置一个display:inline-block;
一般单独创建一个reset.css然后link进来,这里只需要留下ul > li > a
现在span和div是不会在同一行的,我们是希望在同一行的
ul > li > .content改成一个inline,每个结构都是用一个东西包裹起来调整的时候会比较方便
现在就能看到这样的一个效果了
搞定之后可以对一个具体的东西进行调整,先整体然后局部
手放上去的时候会有一个特殊的颜色可以找到ul > li > a:hover做出一个文字颜色color:#f04142
另外每一行之间是有一定的间距的,给ul > li一个margin:30px 0;
并不会三十加上三等于60,是因为有一个margin的折叠
然后调整这些序号的样式,
ul > li .ranking给这个span数字设置样式
默认是不能添加宽高的,是行内非替换元素需要
inline-block;然后设置宽度高度,然后文本水平居中,然后line-height:行高
一个加粗font-weight:700;
color:#999;,再调整一些间距margin-right
然后右边添加一个图标
设置图标通过背景设置
i元素也是行内非替换元素也是添加一个inline-block
然后设置宽度高度,然后设置背景background-image然后一个url
然后对位置做一个微调
position:relative;top:2px;left:4px;
最后直接复制,将对应的数字更改
前三个东西颜色不一样,需要将前三个给特殊颜色,第一种是更改第一个特殊颜色加上一个特殊的class,one,two,
然后分别找到这些class,但是这种方法需要单独找到然后添加class
另外一种是使用结构伪类,体验结构伪类,后续会详细讲解,这里需要找到ul下面的li的:nth-child()相当于是一个函数,可以写上一个1找到下面的第一个li下面的.ranking给他设置一个特殊的颜色的
现在的图标是写死的,有些可能是没有图标的,直接删除,有些图标显示的是新,有一些图标显示的是热,
CSS里面的重复代码然后再做一个抽取,
reset.css-----------------------------------------------------
body, ul, li, a {
padding:0;
margin:0;
}
ul, li, ol {
list-style:none;
}
a {
text-decoration:none;
color:#333;
}
-->
</body>
</html>
效果:
补充一个东西:
就算important的权重最高,但是是继承过来的,也会是绿色,就像你继承父母的财产但是不是你赚的。
前面也提到过,如果后代元素自己有色湖之该属性,那么优先使用后代元素自己的属性,不管继承过来的属性权重有多高。
七、认识表格元素
在网页当中,对于某些内容的展示使用表格元素更加合适和方便。
编写表格最常见的元素:
table表格
tr是table row
表格中的行
td是table data
表格中的单元格
另外表格有很多的相关属性可以设置表格的样式,但是已经不再推荐使用了
八、表格元素练习
列表更加常见,表格相对少见
表格是早期布局的一个比较好的方案
但是如果这样单纯的创建一个表格是没有框线的
框线是给td添加的
现在如果给每个格子设置框线然后是一个继承对齐,现在还会遇到一个问题就是格子之间是有空隙的,就算将空隙解决了,也是会有重合的框线
如何解决,这是一个重点。
所以这里我们需要使用到一个非常重要的属性:
border-collapse CSS属性是用来决定表格的边框是分开还是合并的。
table{border-collapse:collapse;}
合并单元格的边框。
但是现在我们的表格头部好像并没有凸显出来是一个头部的效果,并没有像加粗这样的效果
可以设置一个前面用到的这个来解决。
但是现在不够语义化,因为使用的都是tr
如果想要进行一个语义化,又增加了一个元素叫做thead
如果属于头部就放到thead里面
另外还有一个tbody
thead放置表格的头部,tbody放置表格的内容,另外还有一个表格的尾部tfoot
另外放到thead中的tr里面的td变成了th
另外还有一个表格的标题标签caption,但是这个东西使用比较少
另外在给th添加样式,因为之前都是给td添加样式
好,现在就不用使用结构伪类来添加样式了。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战