HTML5の新しい属性、よくわかりません、solve_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 { コンテンツ: " "; 幅: 0px; 境界線の幅: 0px 0 22px; 境界線の色: 左: 230px; /* 三角形 */
使用: 前 なぜ三角形がまだ後ろにあるのですか?
ディスカッションに返信（解決策）
助けてください
CSSで制御されており、HTML5に関連するタグは見当たりません。 。 。 ,
①なぜこのように三角形ができるのでしょうか？原理が分かりません
三角形は実際には左端の角です。
border-width: 0px 0 20px 22px; 左ボーダーと下ボーダーの幅は設定されていますが、他のボーダーは設定されていない（存在しない）ことを意味します。
左枠と下枠が交差しており、この交点のhtmlを2つの枠の半分（三角形）として処理し、長方形に結合します。 (2本の線の交点は点ですが、線が太いと交点が大きくなり、点は長方形になります)
border-color: 透明 透明 透明 #000; 以外の境界線が存在することを示します。左の境界線は黒く、すべて透明（非表示）です。
残っているのは左側の境界線 (交差する三角形を含む) だけです。
width: 0px; height: 0px; これは、ボックスが空である (スペースを取らない) ことを意味し、交差する三角形のみが残ります。
② 写真に縦線が表示されるのはなぜですか
あなたが投稿したコードを使用すると、縦線が見つかりません
③ :before を使用した後も三角形がまだ後ろにあるのはなぜですか?
Before はコンテンツの前に追加するのが正しいですが、前に書かれた要素を必ず前に表示しなければならないというルールはありません。
位置: 絶対; 左: 730 ピクセル; 上: 23 ピクセル;
①なぜこのように三角形ができるのでしょうか？原理が分かりません
三角形は実際には左端の角です。
border-width: 0px 0 20px 22px; 左ボーダーと下ボーダーの幅は設定されていますが、他のボーダーは設定されていない（存在しない）ことを意味します。
左枠と下枠が交差しており、この交点のhtmlを2つの枠の半分（三角形）として処理し、長方形に結合します。 (2本の線の交点は点ですが、線が太いと交点が大きくなり、点は長方形になります)
border-color: 透明 透明 透明 #000; 以外の境界線が存在することを示します。左の境界線は黒く、すべて透明（非表示）です。
残っているのは左側の境界線 (交差する三角形を含む) だけです。
width: 0px; height: 0px; は、ボックスが空である (スペースを取らない) ことを示し、交差する三角形のみが残ります。
② 写真に縦線が表示されるのはなぜですか
あなたが投稿したコードを使用すると、縦線が見つかりません
③ :before を使用した後も三角形がまだ後ろにあるのはなぜですか?
Before はコンテンツの前に追加するのが正しいですが、前に書かれた要素を必ず前に表示しなければならないというルールはありません。
位置: 絶対; 左: 730 ピクセル; 上: 23 ピクセル;
border-width: 0px 0 20px 22px;
その交点は、各境界線が対角線の半分を占める場所ですよね？
幅の違いにはどのような意味がありますか?
③使用:前 なぜ三角形がまだ後ろにあるのですか?
Before はコンテンツの前に追加するのが正しいですが、前に書かれた要素を必ず前に表示しなければならないというルールはありません。
位置: 絶対; 左: 730 ピクセル; 上: 23 ピクセル;
before というのは、ある要素が別の要素の前に指定されるという意味ではないでしょうか?
その交点は、各境界線が対角線の半分を占める場所ですよね?
の幅の違いにはどのような意味がありますか?
幅が同じなら二等辺三角形
前というのはある要素の前に指定するという意味ではないでしょうか？
:before セレクターは、選択した要素のコンテンツの前にコンテンツを挿入します。
は、指定された要素内のすべてのコンテンツの前に挿入されます。
この挿入はコードの一部を挿入することとして理解できます。つまり、コードは前面にありますが、CSS スタイルを記述して他の場所に表示できるようにすることができます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7470
15
1377
52
77
11
19
29
Python で最小公倍数を見つけるアルゴリズムを作成するにはどうすればよいですか?
Sep 19, 2023 am 11:25 AM
Python で最小公倍数を見つけるアルゴリズムを作成するにはどうすればよいですか?最小公倍数は、2 つの数値を割り算できる最小の整数です。数学では、最小公倍数を解くことは基本的な数学的タスクであり、コンピューター プログラミングでは、Python を使用して最小公倍数を解くアルゴリズムを作成できます。以下では、基本的な最小公倍数アルゴリズムを紹介し、具体的なコード例を示します。最小公倍数の数学的定義は次のとおりです。 a が n で割り切れ、b が n で割り切れる場合、n は a と b の最小公倍数です。最低限のことを解決するには
逆行列を計算する簡単な方法 - Numpy の実装
Jan 24, 2024 am 08:47 AM
Numpy は Python のよく知られた科学計算ライブラリであり、大規模な多次元配列と行列を処理するための豊富な関数と効率的な計算方法を提供します。データ サイエンスと機械学習の世界では、逆行列は一般的なタスクです。この記事では、Numpy ライブラリを使用して逆行列をすばやく解く方法と、具体的なコード例を紹介します。まず、Numpy ライブラリをインストールして Python 環境に導入しましょう。 Numpy は、次のコマンドを使用してターミナルにインストールできます: pipinsta
C言語プログラミングを使用して最大公約数を解く
Feb 21, 2024 pm 07:30 PM
タイトル: C 言語プログラミングを使用して最大公約数ソリューションを実装する 最大公約数 (Greatest Common Divisor、略して GCD) とは、2 つ以上の整数を同時に除算できる最大の正の整数を指します。最大公約数を解くことは、一部のアルゴリズムや問題解決に非常に役立ちます。この記事では、最大公約数を求める機能をC言語プログラミングで実装し、具体的なコード例を紹介します。 C 言語では、ユークリッド アルゴリズムを使用して最大値を解くことができます。
Python を使用して階乗を解くアルゴリズムを実装するにはどうすればよいですか?
Sep 19, 2023 am 10:30 AM
Python を使用して階乗を解くアルゴリズムを実装するにはどうすればよいですか?階乗は数学における重要な概念です。数値が 1 になるまで、数値そのものを乗算してから 1 を引いたものを乗算し、次にそれ自体を乗算してから 1 を引いた値を乗算することを意味します。階乗は通常「!」という記号で表され、例えば5の階乗は5!と表され、計算式は5!=5×4×3×2×1=120となります。 Python では、ループを使用して単純な階乗アルゴリズムを実装できます。サンプルコードを以下に示します。
C言語で最大公約数を求める方法を学びましょう
Feb 21, 2024 pm 11:18 PM
C 言語で最大公約数を見つける方法を学ぶには、具体的なコード例が必要です。最大公約数 (Greatest Common Divisor、略して GCD) は、それらを割り切れる 2 つ以上の整数のうち最大の正の整数を指します。最大公約数は、コンピューター プログラミングで、特に分数の処理、分数の簡略化、整数の最も単純な比などの問題を解くときによく使用されます。この記事では、C言語を使って最大公約数を求める方法と具体的なコード例を紹介します。ユークリッドなどの最大公約数を解く方法はたくさんあります。
C/C++ でモジュラー方程式を解くプログラムを作成しますか?
Sep 12, 2023 pm 02:21 PM
ここではモジュラー方程式に関連した興味深い問題を見てみましょう。 A と B という 2 つの値があるとします。 (AmodX)=B が成り立つような、変数 X が取り得る値の数を見つけなければなりません。 A が 26 で B が 2 だとします。したがって、X の推奨値は {3,4,6,8,12,24} となり、カウントは 6 になります。これが答えです。よりよく理解するためにアルゴリズムを見てみましょう。アルゴリズム possibleWayCount(a,b) - 開始 ifa=b、その後無限の解がある ifa
PHPで2の累乗を解く方法は?
Mar 28, 2024 am 11:09 AM
タイトル: PHP で 2 のべき乗を解くには? PHP プログラミングでは特定のコード例が共有されており、数値のべき乗を解くことは、特に一部のアルゴリズムや数学的計算において共通の要件です。この記事では、PHP で 2 のべき乗を解く方法について詳しく説明し、参考として具体的なコード例を示します。 PHP では、べき乗演算子 ** を使用してべき乗を計算できます。 2 のべき乗の場合、$2^n$ を計算します。$n$ はべき乗の指数です。以下では、この計算をいくつかの異なる方法で実装します。方法 1: ** 運を利用する
n番目のフィボナッチ数を見つけるためのC/C++プログラム?
Sep 12, 2023 pm 06:01 PM
フィボナッチ数列は、次の項が前の 2 つの項の合計である数列です。フィボナッチ数列の最初の 2 つの項は 0 で、その後に 1 が続きます。この問題では、フィボナッチ数列の n 番目の数値を求めます。これを行うには、すべての数値を数えて n 個の項目を出力します。入力:8出力:011235813 説明 0+1=11+1=21+2=32+3=5 For ループを使用して、最初の 2 つの項目を次の項目として合計します。 例 #include<iostream>usingnamespacestd;intmain(){ intt1 = 0,t2=1,n,i,nextTerm;&am
