搜尋
首頁web前端html教學CSS 巧用 :before和:after_html/css_WEB-ITnose

前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多,主要是针对:before和:after写一些内容,还有几个小样式略微带过的介绍下。
什么是:before和:after? 该如何使用他们?
:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。
下面我们先跑个简单的代码测试下效果:

  <style>    p:before{        content: "H"  /*:before和:after必带技能,重要性为满5颗星*/    }    p:after{        content: "d"  /*:before和:after必带技能,重要性为满5颗星*/    }  </style>  <p>ello Worl</p>

以上的代码将会在页面中展现的是"Hello World"。我们通过浏览器的"审查元素"看到的内容是:

<p>  ::before  "ello Worl"  ::after</p>

p标签内部的内容的前面会被插入一个:before伪元素,该伪元素内包含的内容是"H";而在p标签内的内容后面会被插入一个:after伪元素,该元素包含的内容是"d"。作为一只合格的程序猴子,捍卫"Hello World"的完整存在是必要的。
既然笔记主要针对是:before和:after,那么肯定不会只是仅仅有以上的简单介绍就完事。下面我们看看平常该怎么使用他们。
1.结合border写个对话框的样式。
本兽将上面这句话拆成2部分:结合border,写个对话框的样式。
既然是结合border,那么我们先转个小话题,简单由浅入深的介绍下怎么用border画三角形样式(这个三角形在写对话框样式的时候需要):

  <style>    .triangle{        width: 0;        height: 0;        border-left:50px solid red;        border-bottom:50px solid blue;        border-top:50px solid black;        border-right:50px solid purple    }  </style>  <div class="triangle"></div>

以上代码将会在页面上展示一个正方形,左边是个红色的三角形,右边是紫色的三角形,上面是黑色的三角形,下面是蓝色的三角形。那么有人就会问,我们要的不是三角形么?野兽你画个正方形逗我呢?
我们对上面的样式做些修改:

  .triangle{      width: 0;      height: 0;      border:50px transparent solid; /*这里我们将元素的边框宽度设置为50px,transparent表示边框颜色是透明的,solid表示边框是实线的*/      border-top-color: black;  /*这里我们仅将上边框的颜色设置为黑色,众所周知,css后面的样式代码会覆盖之前的相同的样式代码,至于其他三边的还是透明色*/      /*border-bottom-color: black; /*这里设置底部边框色为黑色*/      border-left-color: black;  /*这里设置左边边框色为黑色*/      border-right-color:black*/ /*这里设置右边边框色为黑色*/  }

然后这时我们就会看到一个在顶部的方向向下的三角形。解释已详细的写在css样式的注释里。
接下来我们加上:before:

  <style>    .test-div{        position: relative;  /*日常相对定位*/        width:150px;        height:36px;        border-radius:5px;        border:black 1px solid;        background: rgba(245,245,245,1)    }    .test-div:before{        content: "";  /*:before和:after必带技能,重要性为满5颗星*/        display: block;        position: absolute;  /*日常绝对定位*/        top:8px;        width: 0;        height: 0;        border:6px transparent solid;        left:-12px;        border-right-color: rgba(245,245,245,1);    }  </style>  <div class="test-div"></div>

通过以上代码,我们将会看见一个类似微信/QQ的对话框样式,但是美中不足的是,在对话框的四周的边框不是完整的,而是在对话框的突出三角形上是木有边框的T_T瞬间冷场有木有,该怎么办呢?让召唤:after穿着棉大衣来救场吧~
完整代码:

  <style>    .test-div{        position: relative;  /*日常相对定位*/        width:150px;        height: 36px;        border:black 1px solid;        border-radius:5px;        background: rgba(245,245,245,1)    }    .test-div:before,.test-div:after{        content: "";  /*:before和:after必带技能,重要性为满5颗星*/        display: block;        position: absolute;  /*日常绝对定位*/        top:8px;        width: 0;        height: 0;        border:6px transparent solid;    }    .test-div:before{        left:-11px;        border-right-color: rgba(245,245,245,1);        z-index:1    }    .test-div:after{        left:-12px;        border-right-color: rgba(0,0,0,1);        z-index: 0    }  </style>  <div class="test-div"></div>

好了,完整的一个对话框样式呈现在眼前了,至于对话框的小三角形的方向,相信大家看了上上段对于border介绍的代码也都知道该怎么做了吧,没错,就是改下position的位置,改下border显示颜色的方位~ (本兽不喜欢贴图片,体谅下额,需要的可以拷贝代码直接运行看效果,造轮子不仅仅是造轮子,也能让人加深印象,更好的理解)
2.作为内容的半透明背景层。
比如我们的需求是做一个半透明的登录框吧(这里也是在代码中通过注释来解释):

  <style>      body{          background: url(img/1.jpg) no-repeat left top /*这里本兽加了个图片背景,用以区分背景的半透明及内容的完全不透明*/      }      .test-div{          position: relative;  /*日常相对定位(重要,下面内容也会介绍)*/          width:300px;          height: 120px;          padding: 20px 10px;          font-weight: bold;      }      .test-div:before{          position: absolute;  /*日常绝对定位(重要,下面内容也会略带介绍)*/          content: "";  /*:before和:after必带技能,重要性为满5颗星*/          top:0;          left: 0;          width: 100%;  /*和内容一样的宽度*/          height: 100%;  /*和内容一样的高度*/          background: rgba(255,255,255,.5); /*给定背景白色,透明度50%*/          z-index:-1 /*日常元素堆叠顺序(重要,下面内容也会略带介绍)*/      }  </style>  <!--这里容兽偷个懒,布局简单写写-->  <div class="test-div">      <table>          <tr>              <td>Name</td>              <td><input placeholder="your name" /></td>          </tr>           <tr>              <td>Password</td>              <td><input placeholder="your password" /></td>          </tr>           <tr>              <td></td>              <td><input type="button" value="login" /></td>          </tr>      </table>  </div>

上面的代码拷贝过去,加上张图片可测试效果。
当然,:bofore和:after也还有其他更多的巧妙用法,这里也不一一列出来了,这里放上一个用这两个伪元素加上css3动画实现一些比较好看及实用的动态效果的链接:HoverEffectIdeas
说完了:before和:after,我们稍微扯扯一些其他的css样式及布局注意点(可能大家不怎么注意,从而导致一些布局和样式出问题)。
position 定位的问题
position属性规定了元素的定位类型,默认为static。
该属性还可以有下值:
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
relative:生成相对定位的元素,相对于其正常位置进行定位。
inherit:规定应该从父元素继承 position 属性的值。
代码:

<!--position:absolute-->  <style>      body{          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/      }      .test-div{          position:absolute;          left:50px;          top:50px      }  </style>  <div class="test-div">Hello World</div><!--position:fixed-->  <style>      body{          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/      }      .test-div{          position:fixed;          left:50px;          top:50px      }  </style>  <div class="test-div">Hello World</div><!--position:relative + position:absolute-->  <style>      .out-div{          width: 300px;          height: 300px;          background: purple;  /*这里定义个背景,让我们知道这个div在哪*/          margin:50px 0px 0px 50px;          position: relative      }      .in-div{          position:absolute;          left:50px;          top:50px      }  </style>  <div class="out-div">      <div class="in-div">Hello World</div>  </div>

z-index 元素堆叠排序
z-index用于设置或检索对象的堆叠顺序,对应的脚本特性为zIndex。
z-index的数值越大,该元素的堆叠层级越高。
代码:

  <style>      .first-div{          width: 300px;          height: 300px;          background: purple;  /*这里定义个背景,让我们知道这个div在哪*/          position: absolute;          left:50px;          top:50px;          z-index: 1      }      .second-div{          position:absolute;          left:80px;          top:80px;          width:50px;          height: 50px;          background: white;          z-index: 2      }  </style>  <div class="first-div"></div>  <div class="second-div"></div>

这里我们将第一个div和第二个div位置放到一起,方便看z-index的效果。以上代码的样式是紫色的正方形里面有个白色的小正方形。因为小正方形的z-index大于大正方形的z-index,所以能显示出,当我们把.first-div的z-index设置为3,这时候就看不到白色的小正方形了,它被紫色的大正方形无情的挡掉了...
zoom 元素缩放比例
zoom适用于所有元素,用于设置或检索对象的缩放比例,对应的脚本特性为zoom,原比例的值是1。
代码:

  <style>      .first-div{          width: 100px;          height: 100px;          background: purple;          zoom:1.5;          float: left      }      .second-div{          width: 100px;          height: 100px;          background: black;          zoom:1;          float:left      }      .third-div{          width: 100px;          height: 100px;          background: red;          zoom:.5;          float:left      }  </style>  <div class="first-div"></div>  <div class="second-div"></div>  <div class="third-div"></div>

以上代码将会展示的依次是紫色-黑色-红色的div,大小分别是100px的1.5倍,1倍,0.5倍。
em 和 rem 是什么
1em等于当前的字体尺寸,数值的改变意味着字体大小的调整。em 有继承这个特性,也就是说,外部父元素定义了字体的em大小,内部子元素会继承这一属性的样式。
rem = root em 。顾名思义,root即根部的,顶部的。也就是根部的em,这个根部指的是HTML根元素。所以rem的大小是针对HTML根元素的大小做字体的相对大小的调整。
代码:

  <style>      body{        font-size: 12px;        }      /*html{          font-size: 12px;      }*/      .first-div{          width: 200px;          height: 100px;          font-size: 1em;          float: left      }      .second-div{          width: 200px;          height: 100px;          font-size: 2em;          float:left      }      .third-div{          width: 200px;          height: 100px;          font-size: 1rem;          float:left      }      .fourth-div{          width: 200px;          height: 100px;          font-size: 2rem;          float:left      }  </style>  <div class="first-div">Hello World</div>  <div class="second-div">Hello World</div>  <div class="third-div">Hello World</div>  <div class="fourth-div">Hello World</div>

以上代码分别展示了不同大小的字体,em和rem的区别可以通过仅仅注释body字体样式和html字体样式来看看他们之间的差别。
今天暂时写到这里,明天就元旦了,可以好好休息三天了~ 元旦快乐~

这里做个小广告哦! 推荐一本好友破狼和雪狼大叔写的关于Angular的学习书籍《AngularJS深度剖析与最佳实践》已可预定,是一本技术含量想当不错的书籍哦,有兴趣的小伙伴可以上各大商场预定,也可点击以下预售链接:http://item.jd.com/11845736.html#none

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML中的布爾屬性是什麼?舉一些例子。HTML中的布爾屬性是什麼?舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性,不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為,如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性,高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值,正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔,合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼?如何驗證您的HTML代碼?Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript:比較Web技術HTML與CSS和JavaScript:比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML作為標記語言:其功能和目的HTML作為標記語言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容,其目的在於提供一種標準化的方式來展示信息。 1)HTML通過標籤和屬性組織網頁的各個部分,如標題和段落。 2)它支持內容與表現分離,提升維護效率。 3)HTML具有可擴展性,允許自定義標籤增強SEO。

HTML,CSS和JavaScript的未來:網絡開發趨勢HTML,CSS和JavaScript的未來:網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML:結構,CSS:樣式,JavaScript:行為HTML:結構,CSS:樣式,JavaScript:行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來:網絡設計的發展和趨勢HTML的未來:網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述HTML與CSS vs. JavaScript:比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境