Android 程序员搞 Web 之进阶（七）

mac2024-05-08 39

Android 程序员搞 Web 之 CSS（六）

一、HTML 5 新加标签

header ：头部 nav：导航链接部分 footer：页脚、底部 article：文章 section：文章内的节区域也就是某一块 aside：内容之外的内容；边栏使用；等，了解更多需要去 w3c 看。

二、HTML 5 新增属性

1、下拉框效果

上层 input 标签内的 list 属性必须为下层 datalist 标签的 id；内层 option 标签必须包含 value 属性。

代码：

2、无法形容的效果

看着挺好的效果代码：

3、新增表单 type 属性值

input 内的 type 属性的新增 email ：输入电子邮箱； tel ：输入手机号手机使用会主动弹出数字键盘 url：输入 url 格式 number：输入数字格式 search：搜索框 range：自由拖动模块相当于可拖动的进度条 time：小时分钟 data：年月日 datetime：时间 month：月年 week ：星期年

4、新增表单属性熟悉

placeholder：提示文字相当于 Android 的 hint 属性 autofocus：自动获取焦点也就是自动获取输入光标 multiple：多文件上传可以文件多选 required：内容不能为空 accesskey：规定激活某个元素的快捷键

5、插入音视频

1）、音频标签：属性：src 资源引入 autoplay 自动播放 controls 显示播放相关的控制开关 loop 循环播放

代码：

效果： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akvVfQLV-1572505404156)(https://upload-images.jianshu.io/upload_images/6433394-e09c1b8acf2e5e2a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

2）、视频标签：属性：src 资源引入 autoplay 自动播放 controls 显示播放相关的控制开关 loop 循环播放代码：

三、CSS 新增内容

1、新增伪类选择器

:first-child : 属于其父类元素下第一个子元素； :last-child : 属于其父类元素下最后一个子元素； :nth-child(n) :从第一个开始数，第 n 个子元素；括号内 even 表示所有偶数的子条目，odd 表示所有奇数的子条目，n 表示全选，2n 表示偶数，2n+1 表示奇数；

代码：

<head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ width: 200px; } ul li:first-child { background-color: red; } ul li:last-child { background-color: green; } ul li:nth-child(3) { background-color: cornflowerblue; } ul li:nth-child(even){ background-color: darkorange; } </style> </head> <body> <ul> <li>中国</li> <li>美国</li> <li>俄罗斯</li> <li>英国</li> <li>法国</li> </ul> </body>

2、属性选择器

标签带有某个属性的都可以被选择；代码：

<head> <meta charset="UTF-8"> <title>Title</title> <style> ul { width: 200px; } li[class] { background-color: cornflowerblue; } </style> </head> <body> <ul> <li >中国</li> <li class="demo">美国</li> <li>俄罗斯</li> <li>英国</li> <li class="fg">法国</li> </ul> </body>

效果：

以某一个属性值开头的属性^=属性值，以某个属性值结尾的属性$=属性值，代码

<head> <meta charset="UTF-8"> <title>Title</title> <style> ul { width: 200px; } li[class^=demo] { background-color: cornflowerblue; } li[class$=demo]{ background-color: green; } </style> </head> <body> <ul> <li>中国</li> <li class="demo2333">美国</li> <li>俄罗斯</li> <li>英国</li> <li class="2333demo">法国</li> </ul> </body>

效果：

3、伪元素

一个点类名，两个点是伪选择器，四个点是伪元素选择器属性：：first-letter ：选择第一个字：：first-line ：选择第一行：：selection ：选中的数据代码：

<head> <meta charset="UTF-8"> <title>Title</title> <style> p::first-letter { font-size: 40px; color: green; } p::first-line { color: red; } p::selection { font-size: 10px; color: darkorange; background-color: cornflowerblue; } </style> </head> <body> <p> 记忆在时间中尘封，往事如流水匆匆逝去，生命花瓣在冬夜飘零，犹如停留叶面的晨露。人们都在追寻一片乐土，可以远离战火和纷争，享受上苍给予的快乐与宁静，背负着坎坷命运的大地上，这样的梦想似乎遥不可及。曾经有这样一个人，他的梦就是要把虚无的遥远变成触手可及的真实，即便是去白日的阳光，永远行走在黑夜的暗影。岁月不断沧桑残酷，破晓分割黑夜白昼，当天边的北斗星再一次升起，这个梦将被无尽的延续.. </p> </body>

4、伪元素清除浮动

属性和值：：：before ：在某个元素之前：：after ：在某个元素之后

这两个伪元素都将数据内容插入到了其它标签的内部；这两个伪元素被指为行内元素。

代码：

<head> <meta charset="UTF-8"> <title>Title</title> <style> div::before { content: "我在"; width: 200px; height: 200px; display: block; background-color: cornflowerblue; color: white; } div::after { content: "上班"; width: 200px; height: 200px; color: white; background-color: green; } </style> </head> <body> <div> 望京 </div> </body>

四、Css 3 盒子模型

Css 2 的盒子模型：盒子尺寸=盒子原有尺寸+padding +border Css 3的盒子模型：盒子尺寸=原有盒子尺寸=内容尺寸+padding+border

将 Css 2的盒子模型转换为 Css 3 盒子模型步骤在原有的样式内添加：box-sizing：border-box；

实现向内的边框代码：

<head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 500px; height: 500px; background-color: cornflowerblue; position: relative; } div:hover::after { content: ""; width: 100%; height: 100%; border: 5px solid red; box-sizing: border-box; position: absolute; left: 0; top: 0; } </style> </head> <body> <div></div> </body>

Android 程序员搞 Web 之进阶（八）

最新回复(0)

Android 程序员搞 Web 之 进阶（七）