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样式让它显示在其它地方。
明白了，谢谢
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk menulis algoritma untuk mencari gandaan sepunya paling kurang dalam Python?
Sep 19, 2023 am 11:25 AM
Bagaimana untuk menulis algoritma untuk mencari gandaan sepunya paling kurang dalam Python? Gandaan sepunya terkecil ialah integer terkecil antara dua nombor yang boleh membahagi dua nombor. Dalam matematik, menyelesaikan gandaan sepunya terkecil ialah tugas matematik asas, dan dalam pengaturcaraan komputer, kita boleh menggunakan Python untuk menulis algoritma untuk menyelesaikan gandaan sepunya terkecil. Berikut akan memperkenalkan algoritma berbilang asas yang paling tidak sepunya dan memberikan contoh kod khusus. Takrif matematik bagi gandaan sepunya terkecil ialah: Jika a boleh dibahagi dengan n dan b boleh dibahagi dengan n, maka n ialah gandaan sepunya terkecil a dan b. Untuk menyelesaikan minimum
Bagaimana untuk menggunakan Python untuk melaksanakan algoritma untuk menyelesaikan faktorial?
Sep 19, 2023 am 10:30 AM
Bagaimana untuk menggunakan Python untuk melaksanakan algoritma untuk menyelesaikan faktorial? Faktorial adalah konsep penting dalam matematik Ia merujuk kepada nombor yang didarab dengan sendirinya tolak satu, kemudian didarab dengan sendirinya tolak satu, dan seterusnya sehingga ia didarab kepada 1. Faktorial biasanya diwakili oleh simbol "!" Sebagai contoh, faktorial 5 dinyatakan sebagai 5!, dan formula pengiraan ialah: 5!=5×4×3×2×1=120. Dalam Python, kita boleh menggunakan gelung untuk melaksanakan algoritma faktorial mudah. Kod sampel diberikan di bawah: deffacto
Cara cepat untuk mengira songsangan matriks - pelaksanaan Numpy
Jan 24, 2024 am 08:47 AM
Numpy ialah perpustakaan pengkomputeran saintifik yang terkenal dalam Python, yang menyediakan fungsi yang kaya dan kaedah pengkomputeran yang cekap untuk memproses tatasusunan dan matriks berbilang dimensi yang besar. Dalam dunia sains data dan pembelajaran mesin, penyongsangan matriks adalah tugas biasa. Dalam artikel ini, saya akan memperkenalkan cara cepat menyelesaikan songsang matriks menggunakan perpustakaan Numpy dan memberikan contoh kod khusus. Mula-mula, mari kita perkenalkan perpustakaan Numpy ke dalam persekitaran Python kita dengan memasangnya. Numpy boleh dipasang di terminal menggunakan arahan berikut: pipinsta
Menggunakan pengaturcaraan bahasa C untuk menyelesaikan pembahagi sepunya terbesar
Feb 21, 2024 pm 07:30 PM
Tajuk: Gunakan pengaturcaraan bahasa C untuk melaksanakan penyelesaian pembahagi sepunya terhebat Pembahagi sepunya terbesar (pendek kata GCD) merujuk kepada integer positif terbesar yang boleh membahagi dua atau lebih integer pada masa yang sama. Penyelesaian untuk pembahagi sepunya yang paling hebat boleh sangat membantu untuk beberapa algoritma dan penyelesaian masalah. Dalam artikel ini, fungsi mencari pembahagi sepunya terbesar akan dilaksanakan melalui pengaturcaraan bahasa C, dan contoh kod khusus akan disediakan. Dalam bahasa C, anda boleh menggunakan Algoritma Euclidean untuk menyelesaikan maksimum
Ketahui cara mencari pembahagi sepunya terbesar dalam bahasa C
Feb 21, 2024 pm 11:18 PM
Untuk mengetahui cara mencari pembahagi sepunya terbesar dalam bahasa C, anda memerlukan contoh kod khusus Pembahagi sepunya terhebat (pendek kata GCD) merujuk kepada integer positif terbesar antara dua atau lebih integer yang boleh membahagikannya. Penyebut sepunya terbesar sering digunakan dalam pengaturcaraan komputer, terutamanya apabila berurusan dengan pecahan, memudahkan pecahan, dan menyelesaikan masalah seperti nisbah integer termudah. Artikel ini akan memperkenalkan cara menggunakan bahasa C untuk mencari pembahagi sepunya yang paling hebat dan memberikan contoh kod khusus. Terdapat banyak cara untuk menyelesaikan pembahagi sepunya terbesar, seperti Euclidean
Menulis program untuk menyelesaikan persamaan modular dalam C/C++?
Sep 12, 2023 pm 02:21 PM
Di sini kita akan melihat masalah menarik berkaitan persamaan modular. Katakan kita mempunyai dua nilai A dan B. Kita mesti mencari bilangan nilai yang mungkin yang boleh diambil oleh pembolehubah X sedemikian rupa sehingga (AmodX)=B dipegang. Katakan A ialah 26 dan B ialah 2. Jadi nilai pilihan X ialah {3,4,6,8,12,24}, maka kiraan 6. Ini jawapannya. Mari kita lihat algoritma untuk memahami dengan lebih baik. Algoritma mungkinWayCount(a,b)−mulakan ifa=b,maka penyelesaian tidak terhingga jika
Program C/C++ untuk mencari nombor Fibonacci ke-1?
Sep 12, 2023 pm 06:01 PM
Jujukan Fibonacci ialah jujukan nombor di mana sebutan seterusnya ialah hasil tambah dua sebutan sebelumnya. Dua sebutan pertama bagi jujukan Fibonacci ialah 0 diikuti dengan 1. Dalam soalan ini, kita akan mencari nombor ke-n dalam jujukan Fibonacci. Untuk melakukan ini, kami akan mengira semua nombor dan mencetak n item. Input:8Output:011235813 Penerangan 0+1=11+1=21+2=32+3=5 Gunakan gelung For untuk menjumlahkan dua item pertama sebagai item seterusnya Contoh #include<iostream>usingnamespacestd;intmain(){ intt1 = 0,t2=1,n,i,penggal seterusnya;&am
Bagaimana untuk menyelesaikan kuasa 2 dalam PHP?
Mar 28, 2024 am 11:09 AM
Tajuk: Bagaimana untuk menyelesaikan kuasa 2 dalam PHP? Contoh kod khusus dikongsi dalam pengaturcaraan PHP Penyelesaian kuasa nombor adalah keperluan biasa, terutamanya dalam beberapa algoritma dan pengiraan matematik. Artikel ini akan membincangkan secara terperinci cara menyelesaikan kuasa 2 dalam PHP dan memberikan contoh kod khusus untuk rujukan anda. Dalam PHP, anda boleh menggunakan operator eksponen ** untuk mengira kuasa. Untuk kuasa 2, hitung $2^n$, dengan $n$ ialah eksponen kuasa. Di bawah ini kami akan melaksanakan pengiraan ini dalam beberapa cara yang berbeza. Kaedah 1: Gunakan ** nasib
