HTML5新属性，不是很懂，求解_html/css_WEB-ITnose
①为什么这样能形成三角形？没看懂原理
<!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;说明设置了左边框和下边框的宽度，而其它边框没有设（不存在）。
左边框和下边框是相交的，而这个交点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样式让它显示在其它地方。
明白了，谢谢
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何用Python编写求解最小公倍数的算法？
Sep 19, 2023 am 11:25 AM
如何用Python编写求解最小公倍数的算法？最小公倍数是指两个数中能够整除这两个数的最小整数。在数学中，求解最小公倍数是一项基本的数学任务，而在计算机编程中，我们可以使用Python来编写一个求解最小公倍数的算法。下面将介绍基本的最小公倍数算法，并给出具体的代码示例。最小公倍数的数学定义是：如果a能被n整除且b能被n整除，则n是a和b的最小公倍数。要求解最小
用C语言编程实现最大公约数求解
Feb 21, 2024 pm 07:30 PM
标题：用C语言编程实现最大公约数求解最大公约数（GreatestCommonDivisor，简称GCD）是指能够同时整除两个或多个整数的最大正整数。求解最大公约数对于一些算法和问题解决非常有帮助。在本文中，将通过C语言编程来实现求解最大公约数的功能，并提供具体的代码示例。在C语言中，可以使用欧几里得算法（EuclideanAlgorithm）来求解最大
快速计算矩阵逆的方法 - Numpy实现
Jan 24, 2024 am 08:47 AM
Numpy是Python中著名的科学计算库，为处理大型多维数组和矩阵提供了丰富的功能和高效的计算方法。在数据科学和机器学习领域，矩阵的逆运算是一项常见的任务。在本文中，我将介绍使用Numpy库快速求解矩阵逆的方法，并提供具体的代码示例。首先，让我们通过安装Numpy库引入它到我们的Python环境中。可以使用以下命令在终端中安装Numpy：pipinsta
如何使用Python实现求解阶乘的算法？
Sep 19, 2023 am 10:30 AM
如何使用Python实现求解阶乘的算法？阶乘是数学中的重要概念，指的是一个数乘上其自身减一，再乘上自身减一减一，以此类推，直到乘到1为止。阶乘通常用符号"!"来表示，例如5的阶乘表示为5!，计算公式为：5!=5×4×3×2×1=120。在Python中，我们可以使用循环来实现一个简单的阶乘算法。下面给出一个示例代码：deffacto
学习C语言如何求解最大公约数
Feb 21, 2024 pm 11:18 PM
学习C语言如何求解最大公约数，需要具体代码示例最大公约数（GreatestCommonDivisor，简称GCD）是指两个或多个整数中能够整除它们的最大正整数。在计算机编程中经常会用到最大公约数，特别是在处理分数、化简分数以及求解最简整数比例等问题时。本篇文章将介绍如何使用C语言来求解最大公约数，并给出具体的代码示例。求解最大公约数的方法有很多种，例如欧
在C/C++中编写求解模方程的程序？
Sep 12, 2023 pm 02:21 PM
在这里，我们将看到一个与模方程相关的有趣问题。假设我们有两个值A和B。我们必须找到变量X可以取的可能值的数量，使得(AmodX)=B成立。假设A为26，B为2。所以X的首选值将是{3,4,6,8,12,24}，因此计数为6。这就是答案。让我们看一下算法以更好地理解。算法possibleWayCount(a,b)−begin ifa=b,thenthereareinfinitesolutions ifa
求第n个斐波那契数的C/C++程序？
Sep 12, 2023 pm 06:01 PM
斐波那契数列是一个数列，其中下一项是前两项之和。斐波那契数列的前两项是0后跟1。在这个问题中，我们会发现斐波那契数列中的第n个数字。为此，我们将计算所有数字并打印n项。Input:8Output:011235813说明0+1=11+1=21+2=32+3=5使用For循环将前两项求和作为下一项示例#include<iostream>usingnamespacestd;intmain(){ intt1=0,t2=1,n,i,nextTerm;&am
PHP中如何求解2的乘方？
Mar 28, 2024 am 11:09 AM
标题：PHP中如何求解2的乘方？具体代码示例分享在PHP编程中，求解数的乘方是一个常见的需求，特别是在一些算法和数学计算中。本文将详细探讨如何在PHP中求解2的乘方，并提供具体的代码示例供大家参考。在PHP中，可以使用幂运算符**来计算乘方。对于2的乘方，即计算$2^n$，其中$n$是乘方的指数。下面我们将通过几种不同的方法来实现这个计算。方法一：使用**运
