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 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 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 언어 프로그래밍을 사용하여 최대 공약수 솔루션 구현 최대 공약수(Greatest Common Divisor, 줄여서 GCD)는 두 개 이상의 정수를 동시에 나눌 수 있는 가장 큰 양의 정수를 말합니다. 최대 공약수를 구하는 것은 일부 알고리즘 및 문제 해결에 매우 도움이 될 수 있습니다. 본 글에서는 최대공약수를 찾는 기능을 C언어 프로그래밍을 통해 구현하고, 구체적인 코드 예시를 제공하겠습니다. C 언어에서는 유클리드 알고리즘을 사용하여 최대값을 풀 수 있습니다.
역행렬을 계산하는 빠른 방법 - Numpy 구현
Jan 24, 2024 am 08:47 AM
Numpy는 Python의 잘 알려진 과학 컴퓨팅 라이브러리로, 대규모 다차원 배열 및 행렬을 처리하기 위한 풍부한 기능과 효율적인 컴퓨팅 방법을 제공합니다. 데이터 과학 및 기계 학습의 세계에서 행렬 반전은 일반적인 작업입니다. 이번 글에서는 Numpy 라이브러리를 이용하여 역행렬을 빠르게 푸는 방법을 소개하고 구체적인 코드 예시를 제공하겠습니다. 먼저 Numpy 라이브러리를 설치하여 Python 환경에 도입해 보겠습니다. Numpy는 다음 명령을 사용하여 터미널에 설치할 수 있습니다: pipinsta
Python을 사용하여 계승 해결 알고리즘을 구현하는 방법은 무엇입니까?
Sep 19, 2023 am 10:30 AM
Python을 사용하여 계승 해결 알고리즘을 구현하는 방법은 무엇입니까? 팩토리얼(Factorial)은 수학에서 중요한 개념입니다. 즉, 숫자에 자신의 마이너스 1을 곱한 다음 마이너스 1을 곱하고 계속해서 1이 되는 것을 의미합니다. 팩토리얼은 일반적으로 "!" 기호로 표시됩니다. 예를 들어 5의 팩토리얼은 5!로 표시되며 계산식은 5!=5×4×3×2×1=120입니다. Python에서는 루프를 사용하여 간단한 계승 알고리즘을 구현할 수 있습니다. 샘플 코드는 다음과 같습니다.
C 언어에서 최대 공약수를 구하는 방법을 알아보세요.
Feb 21, 2024 pm 11:18 PM
C 언어에서 최대 공약수를 찾는 방법을 배우려면 특정 코드 예제가 필요합니다. 최대 공약수(최대 공약수, 줄여서 GCD)는 이를 나눌 수 있는 두 개 이상의 정수 중에서 가장 큰 양의 정수를 나타냅니다. 최대 공통 분모는 특히 분수를 다루고, 분수를 단순화하고, 가장 간단한 정수 비율과 같은 문제를 해결할 때 컴퓨터 프로그래밍에서 자주 사용됩니다. 이 기사에서는 C 언어를 사용하여 최대 공약수를 찾는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 최대 공약수를 푸는 방법에는 유클리드와 같은 여러 가지 방법이 있습니다.
C/C++로 모듈러 방정식을 푸는 프로그램을 작성하시나요?
Sep 12, 2023 pm 02:21 PM
여기서 우리는 모듈러 방정식과 관련된 흥미로운 문제를 보게 될 것입니다. A와 B라는 두 개의 값이 있다고 가정해 보겠습니다. (AmodX)=B가 유지되도록 변수 X가 취할 수 있는 가능한 값의 개수를 찾아야 합니다. A는 26이고 B는 2라고 가정합니다. 따라서 X의 선호 값은 {3,4,6,8,12,24}이므로 개수는 6입니다. 이것이 답입니다. 더 잘 이해하기 위해 알고리즘을 살펴보겠습니다. 알고리즘 가능WayCount(a,b)−begin ifa=b이면 무한한 해가 있습니다.
n번째 피보나치 수를 찾는 C/C++ 프로그램이요?
Sep 12, 2023 pm 06:01 PM
피보나치 수열은 다음 항이 이전 두 항의 합인 수열입니다. 피보나치 수열의 처음 두 항은 0 다음에 1이 옵니다. 이 문제에서는 피보나치 수열의 n번째 숫자를 구하겠습니다. 이를 위해 우리는 모든 숫자를 세고 n개의 항목을 인쇄합니다. 입력:8출력: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$는 거듭제곱의 지수입니다. 아래에서는 이 계산을 몇 가지 다른 방법으로 구현해 보겠습니다. 방법 1: ** 행운을 이용하세요
