HTML5 CSS3能让我们可快速更方便的定位

2024-09-03 17:32

本文主要是介绍HTML5 CSS3能让我们可快速更方便的定位,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  曾经,设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey ZeldmanEric Meyer这样的思想革新者,聪明的设计师们慢慢的接受了相对更语义化的布局替代了table布局,并且开始调用外部样式表。但不幸的是,复杂的网页设计需要大量不同的标签结构代码,我们把它叫做“-soup” 综合症。也许你很熟悉下面的代码:

  <div id="news">

  <div class="section">

  <div class="article">

  <div class="header">

  <h1>Div Soup Demonstration

 

  <p>Posted on July 11th, 2009

  </div>

  <div class="content">

  <p>Lorem ipsum text blah blah blah.

  <p>Lorem ipsum text blah blah blah.

  <p>Lorem ipsum text blah blah blah.

  </div>

  <div class="footer">

  <p>Tags: HMTL, code, demo

  </div>

  </div>

  <div class="aside">

  <div class="header">

  <h1>Tangential Information

 

  </div>

  <div class="content">

  <p>Lorem ipsum text blah blah blah.

  <p>Lorem ipsum text blah blah blah.

  <p>Lorem ipsum text blah blah blah.

  </div>

  <div class="footer">

  <p>Tags: HMTL, code, demo

  </div>

  </div>

  </div>

  </div>

  尽管这有些勉强,但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是,HTML5 CSS3解决“-soup” 综合症并带给我们一套新的结构化元素。这些新的HTML5 CSS3元素富有更细致的语义从而代替了那些毫无语义的标签,并同时为CSS的调用提供了自然CSS钩子。下面是HTML5 CSS3的解决方案实例:

  <section>

  <section>

  <article>

  <header>

  <h1>Div Soup Demonstration

 

  <p>Posted on July 11th, 2009

  </header>

  <section>

  <p>Lorem ipsum text blah blah blah.

  <p>Lorem ipsum text blah blah blah.

  <p>Lorem ipsum text blah blah blah.

  </section>

  <footer>

  <p>Tags: HMTL, code, demo

  </footer>

  </article>

  <aside>

  <header>

  <h1>Tangential Information

 

  </header>

  <section>

  <p>Lorem ipsum text blah blah blah.

  <p>Lorem ipsum text blah blah blah.

  <p>Lorem ipsum text blah blah blah.

  </section>

  <footer>

  <p>Tags: HMTL, code, demo

  </footer>

  </aside>

  </section>

  </section>

  正如我们所见,HTML5 CSS3可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的标签。这种语义化的特性不仅提升了我们网页的质量和语义,并且大量减少了曾经代码中用于CSS必须调用的classid属性。事实上,CSS3也是可以然通过我们忽略掉所有classid的。

  跟class属性说再见,欢迎整洁的标签

  结合了富有新的语义化标记的HTML5 CSS3web设计师们的网页提供了神一般的力量。有了HTML5的能量,我们将得到更多的对文档代码的控制权,有了CSS3的能量,我们的控制权将趋于无穷大!

  即使没有那些高级的CSS选择器,我们仍然可以通过强大的HTML5条调用不同的容器而不劳驾classid这类属性。像以往的DIV布局,我们在css中可能要这样调用:

  div#news {}

  div.section {}

  div.article {}

  div.header {}

  div.content {}

  div.footer {}

  div.aside {}

  我们再来看看基于HTML5的实例:

  section {}

  article {}

  header {}

  footer {}

  aside {}

  这是个进步,但仍有一些问题需要解决。在实例中,我们需要通过classid属性来调用页面中的元素。这种逻辑将允许我们将样式应用到文档中的任何一个元素上,无论是整体还是个体。例如在实例中,.section 和 .content元素很容易定位。但是在HTML5实例中,实际文档中会有很多个section元素。其实我们可以添加一些特定的属性选择器来调用那些不同的section元素,不过谢天谢地,我没现在可以用少量的高级CSS选择器来定位不同的section元素。

  不使用classid定位HTML-5元素

  下面让我们来看看如何在不使用classid的情况下定位HTML5页面元素的一个实例,我们可以使用三种CSS选择器来定位和辨别实例中的元素。如下:

  后代选择器:[CSS 2.1]: E F

  兄弟选择器:[CSS 2.1]: E + F

  子元素选择器:[CSS 2.1]: E > F

  下面让我们来看看如何不使用classid而完成对文档中的那些section元素的定位吧:

  定位最外层的元素

  考虑到我们的例子并不是一套完整的HTML5代码,所以我们假定在元素下有个元素与元素是兄弟元素。这样的话,我们就可以向下面代码那样定位最外层的了:

  body nav+section {}

  定位下一个元素

  作为最外层元素下的唯一直属子集元素,这个元素也许可以这样定位:

  section>section {}

  定位元素

  可以定位元素的方法有很多,不过最简单的方法当然就是后代选择器了:

  section section article {}

  定位、和元素

  这三个元素分别在两个地方都出现过,一是在元素中出现,另一是在元素中出现。这种差别能让我们轻松定位每个元素。

  article header {}

  article section {}

  article footer {}

  或者一起定义:

  section section header {}

  section section section {}

  section section footer {}

  到目前为止,我们已经使用CSS2.1选择器排除掉了所有的classid。那么我们为什么还需要使用CSS3?我很高兴你能这么问

  使用CSS3HTML5元素进行高级定位

  虽然我们已经使用CSS2.1选择器排除掉了所有的classid,显然还会有很多更复杂的情况需要CSS3的高级选择器来解决。让我们通过完成一下的实例来了解一下如何在不使用无用的classid属性的情况下利用CSS3定位页面元素。

  使用一个唯一的日志(post)ID定位所有日志

  wordpress提供给我们一种包含了ID的每篇日志的源代码输出。这种信息通常用于导航和/或了解资料的意图,不过CSS3可以利用这些唯一的ID来定义这些日志的样式。当然,你还可以像往常那样为每篇日志添加class=”post”这样的属性,但这就与我们练习的意图相冲突了(再加上它没有一点乐趣所在)。使用子字符串匹配选择器,我们就可以像下面这样定位所有日志和它们的不同元素了。

  article[id*=post-] {} /* 定位所有日志 */

  article[id*=post-] header h1 {} /* 定位所有日志中的h1标签 */

  article[id*=post-] section p {} /* 定位所有日志中的p标签 */

  我没仍然可以使用同样的方式定位评论的元素和它们的子元素。

  article[id*=comment-] {} /* 定位所有评论 */

  article[id*=comment-] header h1 {} /* 定位所有评论中的h1标签 */

  article[id*=comment-] section p {} /* 定位所有评论中的p标签 */

  定位一些指定的区域(section)或文章(article)

  有很多博客的日志量和评论量都相当大,HTML 5 会将它们由或元素组成。为了定位哪些指定的或元素,我们就要转而使用强大的“:nth-child”选择器了:

  1

  2

  3

  4

  5

  section:nth-child(1) {} /* 选择第一个 */

  article:nth-child(1) {} /* 选择第一个 */

  section:nth-child(2) {} /* 选择第二个 */

  article:nth-child(2) {} /* 选择第二个 */

  同样,我们可以使用“:nth-last-child”选择器定位反序的一些元素。

  section:nth-last-child(1) {} /* 选择最后一个 */

  article:nth-last-child(1) {} /* 选择最后一个 */

  section:nth-last-child(2) {} /* 选择倒数第二个 */

  article:nth-last-child(2) {} /* 选择倒数第二个 */

  使用更多的方式选择指定元素

  另一种选择HTML5中指定元素(headersectionfooter)的方法就是利用”:only-of-type”选择器的优势。由于这些HTML5元素通常会在很多地方出现不止一次,所以当我们想定位那种在父元素下仅出现过一次的标签时这种方法很方便。例如,我们要选择的是在某元素中有切仅有的唯一一个元素,如以下代码:

  <section>

  <section>

 

  <section>

  <section>定位这个section元素

 

  </section>

  <section>

  <section>定位这个section元素

 

  </section>

  <section>

  <section>但不定位这个section元素

 

  <section>和这个section元素

 

  </section>

  <section>

 

  </section>

  我们可以仅使用以下一行选择器:

  1

  section>section:only-of-type {}

  再次唠叨,你可以固执的为每个元素添加ID属性,但你会失去代码的可扩展性、维护性和绝对简洁的结构与表现相分离。CSS3的确能让我们可快速更方便的定位几乎所有没有IDclass属性的页面元素。

这篇关于HTML5 CSS3能让我们可快速更方便的定位的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1133585

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中,我们经常会遇到这样的情况:一不小心,桌面上的某个重要文件被删除了。这时,大多数人可能会感到惊慌失措,不知所措。 其实,不必过于担心,因为有很多方法可以帮助我们找回被删除的桌面文件。下面,就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件,并且还没有进行其他操作,那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

hdu 4565 推倒公式+矩阵快速幂

题意 求下式的值: Sn=⌈ (a+b√)n⌉%m S_n = \lceil\ (a + \sqrt{b}) ^ n \rceil\% m 其中: 0<a,m<215 0< a, m < 2^{15} 0<b,n<231 0 < b, n < 2^{31} (a−1)2<b<a2 (a-1)^2< b < a^2 解析 令: An=(a+b√)n A_n = (a +

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

v0.dev快速开发

探索v0.dev:次世代开发者之利器 今之技艺日新月异,开发者之工具亦随之进步不辍。v0.dev者,新兴之开发者利器也,迅速引起众多开发者之瞩目。本文将引汝探究v0.dev之基本功能与优势,助汝速速上手,提升开发之效率。 何谓v0.dev? v0.dev者,现代化之开发者工具也,旨在简化并加速软件开发之过程。其集多种功能于一体,助开发者高效编写、测试及部署代码。无论汝为前端开发者、后端开发者