Heim >Web-Frontend >HTML-Tutorial >HTML5新属性，不是很懂，求解_html/css_WEB-ITnose

HTML5新属性，不是很懂，求解_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:43:211089Durchsuche

①为什么这样能形成三角形？没看懂原理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><style type="text/css">.arrow_box { background: #f8f8f8; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(214, 214, 214, 0.7); width: 730px; border-radius: 6px; position: relative; padding: 20px 0; margin: 20px 0;padding-left:180px;}.arrow_box::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #000; position: absolute; left: 730px; top: 23px; }/* 三角形 */</style> <ul class="arrow_box">                  <div class="sy">       <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。</p>      </div>           <span class="dateview">2014-1-1</span>              </ul></body></html>

②为什么能出现图中的那个竖线

<!doctype html><html><head><meta charset="gb2312"><title>协议</title><link href="css/base.css" rel="stylesheet"><link href="css/mood.css" rel="stylesheet"></head><body><header>          </header><div class="moodlist">  <div class="bloglist">    <ul class="arrow_box">     <div class="sy">       <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。</p>      </div>      <span class="dateview">2014-1-1</span>    </ul>    <ul class="arrow_box">         <div class="sy">      <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。</p>        </div>      <span class="dateview">2014-1-1</span>    </ul>    <ul class="arrow_box">         <div class="sy">      <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。</p>      <span class="dateview">2014-1-1</span>        </div>    </ul>  </div></div><footer>  </footer></body></html>

@charset "gb2312";/* CSS Document */* { margin: 0; padding: 0 }body { font: 12px "宋体", Arial, Helvetica, sans-serif; color: #756F71 }img { border: 0; display: block }ul { list-style: none; }a:link, a:visited {text-decoration: none; color: #333;}.left { float: left; }.right { float: right; }.blank { height: 5px; overflow: hidden; width: 100%; margin: auto; clear: both }.box{ width:1000px; margin:auto; overflow:hidden}header { width: 1000px; margin: auto; height: 80px; position: relative; overflow: hidden }#logo a { width: 260px; height: 60px; margin: 10px 0 0 0; position: absolute; background: url(../images/logo.jpg) no-repeat; display: block }nav { float: right; width: 100%; margin: 30px 0 0 0; text-align: right }nav a { position: relative; display: inline-block; font-size: 18px; font-family: "微软雅黑", Arial, Helvetica, sans-serif; }nav a:hover { text-decoration: none }.topnav a { margin: 0 5px; padding: 0 8px; }.topnav a span:first-child { z-index: 2; display: block; }.topnav a span:last-child { z-index: 1; display: block; color: #999; font: 12px Georgia, serif; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); text-align: center }.topnav a:hover span:last-child, .topnav a:focus span:last-child { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%); }#topnav_current { color: #e15782; }.en { color: #999; font-size: 12px; z-index: 1; display: block; }/* ie */article { width: 1000px; margin: 20px auto; overflow: hidden }aside { width: 250px; }footer { text-align: center; line-height: 40px; border-top: #E8E8E8 1px solid ; width:1000px; margin:auto}

@charset "gb2312";/* CSS Document */.moodlist { margin: auto; width: 100%; overflow: hidden }/* --------------------博客列表-------------------- */h1.t_nav span{ float:right; color:#999}h1.t_nav { border-bottom: #F1F1F1 1px solid; font-size: 12px; font-weight: normal; line-height: 40px; height: 40px;margin:20px auto;width:1000px }h1.t_nav a { width: 100px; display: block; text-align: center; color: #fff; float: left }.n1 { background: #5EA51B; }.n2 { background: #8BBF5D; }.bloglist { width: 1000px; margin: 0 auto; background: url(../images/r_title_bg.jpg) repeat-y 764px 0;overflow: hidden; }.arrow_box { background: #f8f8f8; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(214, 214, 214, 0.7); width: 730px; border-radius: 6px; position: relative; padding: 20px 0; margin: 20px 0; }.arrow_box img { width: 150px; float: left; margin: 0 20px 0 20px; }.arrow_box p { line-height: 24px; padding: 0 20px 20px }.arrow_box::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #fff; position: absolute; left: 730px; top: 23px; }/* 三角形 */.arrow_box::after { content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 758px; top: 16px; background: #CCCCCE; border: 2px solid #fff; transition: all 0.5s; }/* 圆形 */.arrow_box:hover::before { border-color: transparent transparent transparent #CECCCD }/* 三角形 */.arrow_box:hover::after { border: #fff 2px solid; background: #5EA51B }/* 圆形 */.arrow_box:hover { background: #f4f2f2; color: #333; text-shadow: #f7f7f7 1px 1px 1px }.dateview { position: absolute; left: 788px; top: 20px; width: 125px; line-height: 30px; background: #5EA51B; border-radius: 0px 40px; text-align: center; color: #fff }.page { margin: 20px 0; text-align: center; width: 100%; overflow: hidden; }.page a b { color: #999; }.page>b, .page a { margin: 0 2px; height: 26px; line-height: 26px; border-radius: 50%; width: 26px; text-align: center; display: inline-block }.page a { margin: 0 2px; height: 26px; line-height: 26px; border-radius: 50%; width: 26px; text-align: center; display: inline-block }/* 针对IE6 */.page>b, .page a:hover { background: #333; color: #FFF; }.page a { color: #F33; border: #999 1px solid; }.sy{ overflow:hidden}

③
.arrow_box::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #fff; position: absolute; left: 730px; top: 23px; }/* 三角形 */

用了:before为什么三角形还在后面呢？

回复讨论(解决方案)

求助啊

css控制的吧，没看到跟html5相关的标签。。。、

①为什么这样能形成三角形？没看懂原理
三角形其实是左边框的拐角。
border-width: 0px 0 20px 22px;说明设置了左边框和下边框的宽度，而其它边框没有设（不存在）。
左边框和下边框是相交的，而这个交点html就处理为两个边框各占一半（三角形），然后拼成一个矩形。（注，两条线的交点是一个点，但如果线比较粗，那么交点就大，从而点就成看矩形）
border-color: transparent transparent transparent #000;说明除左边框为黑色外其它边框都是透明的（看不见）。
所有就值剩下了左边框（包括那个交点三角）。
width: 0px; height: 0px;说明盒子是空的（不占位置），所以就只剩下了那个交点三角。

②为什么能出现图中的那个竖线
用你贴的代码，我没发现那个竖线

③用了:before为什么三角形还在后面呢？
before是加在内容之前没错，可没规定在写在前面的元素就一定要显示在前面吧。
position: absolute; left: 730px; top: 23px;被重新定位了。

border-width: 0px 0 20px 22px;

那个交点是每个边框各占据对角线的一半，对吗？

宽度不同有什么意义？

③用了:before为什么三角形还在后面呢？
before是加在内容之前没错，可没规定在写在前面的元素就一定要显示在前面吧。
position: absolute; left: 730px; top: 23px;被重新定位了。

before不就是在一个元素指定在另外一个元素的前头吗？

那个交点是每个边框各占据对角线的一半，对吗？
对

宽度不同有什么意义？
宽度相同就等腰三角形，不同就不等腰了

before不就是在一个元素指定在另外一个元素的前头吗？
:before 选择器在被选元素的内容前面插入内容。
是在指定元素的里面的所有内容之前插入。
这个插入可以理解为插入一段代码，也就是说代码中是在前面的，但是可以写css样式让它显示在其它地方。

明白了，谢谢

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：纯CSS3实现彩色缎带效果_html/css_WEB-ITnoseNächster Artikel：移动端重构重置样式_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen