XML/HTML コードコンテンツをクリップボードにコピー
- >
-
<html lang="en" >
- <頭>
-
<メタ charset="UTF- 8">
- <タイトル>锯齿图タイトル>
-
<script type="text/ javascript">
- window.addEventListener("load", eventWindowLoaded, false);
- 関数 eventWindowLoaded(){
- var x,y;
-
var theCanvas = document.getElementById("canvas");
-
var context = theCanvas.getContext("2d");
-
context.ストロークスタイル = '#CB9A61';
-
context.lineWidth=10;
- context.ストロークRect(10, 10, theCanvas.width-20, theCanvas.height-20);
-
context.fillStyle = "#FFFFFF";
-
for(x=5;x<=canvas.width;xx=x 10){
- context.beginPath();
- context.arc(x,5,5,0,Math.PI*2,true);
- context.arc(x,canvas.height-5,5,0,Math.PI*2,true);
- context.closePath();
- context.fill();
- }
- for(y=5;y<=canvas.height;yy=y 10){
- context.beginPath();
- context.arc(5,y,5,0,Math.PI*2,true);
- context.arc(canvas.width-5,y,5,0,Math.PI*2,true);
- context.closePath();
- context.fill();
- }
- }
- スクリプト>
-
頭>
-
<ボディ>
-
<div style=" 位置:絶対; 上: 100ピクセル; 左: 100ピクセル;
- <キャンバス id="キャンバス" 幅="400" 高さ="170" トップ=50px; 左=50px;>
-
div>
-
ボディ>
-
html>
このような図形の書き方は、長方形を 2 つの部分に分け、対角線で区切って、2 色を描きます。写真に示すように:
最初は div を使用して中央にスラッシュを描き、2 つの色で 2 つの部分に分割するというアイデアがありましたが、フロントデスクが弱く、機能が限られていたため、別の解決策として実装されませんでした。と考えられました。
左右に 2 つの div を使用して、幅と高さを設定します。この部分は実際に重要な役割を果たします。
実際には、長方形を 2 つの三角形に分割し、最終的に上記の効果が得られます。言い換えれば、実装は非常に簡単であり、木に吊るすことはできません。
コードは次のとおりです:
XML/HTML コードコンテンツをクリップボードにコピー
- >
-
<html lang="en" >
-
- <ボディ スタイル="マージン: 0 0 0 0;">
- <div id="1" スタイル="background-color:#727171;width:50px;height:20px;float:left" >div>
- <div id="2" スタイル=" float:left;border-width:10px;border-color:#727171 #9fa0a0 #9fa0a0 #727171; border-style:solid">div>
-
<div id="3" スタイル="background-color:#9fa0a0;width:50px;height:20px;float:left" >div>
- ボディ>
-
html>
引き続き、HTMLとCSSに関する知識をまとめていきます。フロントの知識は簡単そうに見えて、実は根気のいる細かい仕事です。簡単なものから複雑なものまで、初心者から奥深いものまで、少しずつ上達してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
