CSS ケースの実践
1. レイヤー レイアウト: 配置された要素の重複
CSS では、z-index 属性を使用して、配置された要素のスタック レベルを決定できます。以下の点に注意してください:z-index 属性は、要素の位置属性値が相対、絶対、または固定である場合にのみ使用できます。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>定位元素层叠</title> 6 <style type="text/css"> 7 body{ 8 margin: 0; 9 padding: 0;;10 }11 #contain1{12 position: absolute;13 z-index: 10;14 width: 200px;15 height: 200px;16 background-color: #5d63fa;17 }18 #contain2{19 position: absolute;20 z-index: 1;21 width: 200px;22 height: 200px;23 background-color: brown;24 left: 30px;25 top:30px;26 }27 </style>28 </head>29 <body>30 <div id="contain1"></div>31 <div id="contain2"></div>32 </body>33 </html>
効果:
2. レイアウトの実際: 高さ適応型
Web ページのレイアウトでは要素の高さと幅を定義する必要があることがよくありますが、多くの場合、要素のサイズはウィンドウまたは親要素に応じて自動的に調整できることが望まれます。これは適応的です。
1. 幅の適応: 幅の適応は、要素の幅属性のパーセンテージを定義するだけで済みます。
2. 高さ適応: HTML と本文の高さを 100% に定義するだけです。 (IE ブラウザでは、HTML の高さのデフォルト値は 100% で、本文には設定値がありません。IE 以外のブラウザでは、HTML も本文も事前に定義された高さの値がありません)
例: HTML と本文の高さが異なる場合定義:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>高度自适应</title> 6 <style type="text/css"> 7 #contain{ /*定义父元素显示属性*/ 8 width:100%; 9 height: 100%; /*满屏显示*/10 background-color: burlywood;11 }12 #center{13 height: 50%;14 background-color: darkslateblue;15 width: 50%;16 }17 </style>18 </head>19 <body>20 <div id="contain">21 <div id="center">高度自适应</div>22 </div>23 </body>24 </html>
効果:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>高度自适应</title> 6 <style type="text/css"> 7 html,body{ 8 height: 100%; 9 }10 #contain{ /*定义父元素显示属性*/11 width:100%;12 height: 100%; /*满屏显示*/13 background-color: burlywood;14 }15 #center{16 height: 50%;17 background-color: darkslateblue;18 width: 50%;19 }20 </style>21 </head>22 <body>23 <div id="contain">24 <div id="center">高度自适应</div>25 </div>26 </body>27 </html>
効果:
3. リキッド幅で単一列ページをデザインする
リキッド幅: ピクセルではなくパーセンテージで制御
例: HTML 部分:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>单列页面</title> 6 <link href="2.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <div id="banner">10 <h1 id="散文集-sub-朱自清-sub"> 散文集<sub>朱自清</sub></h1> <!--作者朱自清作为下标-->11 <nav>12 <a href="#">作者生平</a>13 <a href="#">故事背景</a>14 <a href="#">词语注释</a>15 <a href="#">作品手法欣赏</a>16 <a href="#">上一篇文章</a>17 <a href="#">下一篇文章</a>18 </nav>19 </div>20 <div id="maincontent">21 <div id="maintext">22 <h4 id="荷塘月色-节选">荷塘月色(节选)</h4>23 <p>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿⑴，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。<br></p>24 <p> 沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁⑵的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。<br></p>25 <p> 路上只我一个人，背着手踱⑶着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现 在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。<br></p>26 <p><span>曲</span>曲折折的荷塘上面，弥望⑷的是田田⑸的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜⑹地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉⑺的流水，遮住了，不能见一些颜色；而叶子却更见风致⑻了。<br></p>27 <p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲⑼上奏着的名曲。<br></p>28 </div>29 <div id="round">30 <img src="/static/imghwm/default1.png" data-src="image/1.png" class="lazy" style="max-width:90%" height="300px"/ alt="CSS の典型的なケースの実践_html/css_WEB-ITnose" >31 <p>朱自清（1898年11月22日—1948年8月12日），原名自华，号秋实，后改名自清，字佩弦。原籍浙江绍兴，出生于江苏省东海县（今连云港市东海县平明镇）。现代杰出的散文家、诗人、学者、民主战士。</p>32 </div>33 </div>34 </body>35 </html>
CSS スタイル:
1 *{ 2 margin: 0; /*清除页边距*/ 3 padding:0; 4 } 5 body{ 6 margin: 0; /*清除页边距*/ 7 padding:0; 8 height: 100%; 9 10 }11 #banner{ /*顶部框架样式*/12 width: 100%;13 height: 180px;14 background-color: #aaac90;15 }16 h1{17 margin-left:10%;18 padding-top: 20px;19 font-family: verdana,sans-serif;20 font-size: 50px;21 color: brown;22 }23 sub{24 font-size: 28px;25 color: black;26 }27 nav{ /*定义导航栏属性*/28 margin-left: 10px;29 padding-top: 55px;30 }31 a{32 text-decoration: none; /*去掉下划线*/33 background-color: cornflowerblue;34 padding:10px 20px 10px 20px;35 float: left;36 border-right: solid 2px snow;37 }38 a:visited,a:link{39 color: snow;40 }41 a:hover,a:active{42 color: slateblue;43 text-decoration: underline; /*设置下划线*/44 }45 /*定义底部*/46 #maincontent{ /*底部框架样式*/47 top:200px;48 width: 80%;49 height: 800px;50 margin: 0 auto;51 }52 #maintext{ /*定义底部文字部分样式*/53 width:65%;54 float: left; /*文字部分向左浮动*/55 margin-top: 20px; /*距离底部边缘10px*/56 margin-right: 20px;57 }58 #round{ /*定义底部图片部分样式*/59 width:30%;60 height: 600px;61 float:right; /*图片部分向右浮动*/62 background-color:black;63 border: solid 2px darkslateblue;64 border-radius: 2em; /*定义圆角边框*/65 margin-top: 20px; /*距离底部边缘10px*/66 }67 #round p{68 color: snow;69 padding: 20px 10px;70 }71 #round img{72 padding: 20px 10px;73 }74 p{75 line-height: 2em; /*文字行高*/76 text-indent: 2em; /*首行缩进*/77 padding-top: 10px;78 }79 span{80 line-height: 100%;81 font-size: 50px;82 background-color: powderblue;83 }
効果:
4番目、マルチレベルメニューの設計: 並列セカンダリメニュー
例: HTML コード:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>平行式二级菜单</title> 6 <link href="mynav.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <div id="menu">10 <ul>11 <li><a href="#">菜单一</a>12 <ul>13 <li><a href="#">子菜单一</a></li>14 <li><a href="#">子菜单二</a></li>15 <li><a href="#">子菜单三</a></li>16 <li><a href="#">子菜单四</a></li>17 </ul>18 </li>19 <li><a href="#">菜单二</a>20 <ul>21 <li><a href="#">子菜单一</a></li>22 <li><a href="#">子菜单二</a></li>23 <li><a href="#">子菜单三</a></li>24 <li><a href="#">子菜单四</a></li>25 </ul>26 </li>27 <li><a href="#">菜单三 </a></li>28 <li><a href="#">菜单四</a></li>29 <li><a href="#">菜单五</a></li>30 </ul>31 </div>32 </body>33 </html>
CSS スタイル:
1 #menu ul{ /*清除所有列表的样式，即去掉前面的圆点*/ 2 list-style-type: none; 3 } 4 #menu li{ 5 float: left; /*向左浮动，使链接横向排列*/ 6 position: relative; /*相对定位，定义包含快*/ 7 } 8 #menu ul ul{ /*定义二级列表属性*/ 9 visibility: hidden; /*先默认隐藏起来*/10 position: absolute; /*绝对定位，根据父元素li精确定位*/11 left: -40px; /*距离父元素li左侧2像素*/12 top: 25px; /*距离顶部23像素，相当于在主菜单底部显示*/13 }14 #menu a{ /*定义超链接属性*/15 text-decoration: none; /*去掉链接下划线*/16 background-color: darkslateblue;17 color: snow; /*定义文字颜色*/18 border: solid 2px burlywood; /*定义边框*/19 padding: 8px 25px; /*定义主菜单列表项的内边距，加宽菜单项显示*/20 margin: 3px 1px; /*定义主菜单列表项的外边距，为每个菜单项增加间隙*/21 }22 #menu ul li:hover ul{ /*定义一级列表的每一列在鼠标经过时，显示隐藏的二级列表*/23 visibility: visible;24 }25 #menu ul ul li{26 clear: both; /*清除两侧的浮动，避免列表项之间的重叠*/27 }28 #menu ul ul li a{29 display: block; /*很重要！使a元素块状显示*/30 width: 70px;31 height: 20px;32 margin: 0; /*清除边界*/33 }34 #menu ul a:hover{35 background-color: burlywood;36 text-decoration: underline;37 }
効果:
5.マルチレベルメニュー: 垂直マルチレベルメニュー
1. HTML コード:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>垂直式多级菜单</title> 6 <link rel="stylesheet" href="mynav2.css" type="text/css"> 7 </head> 8 <body> 9 <div id="menu">10 <ul>11 <li><a href="#">菜单一</a>12 <ul>13 <li><a href="#">菜单一1</a>14 <ul>15 <li><a href="#">菜单一1-1</a>16 <ul>17 <li><a href="#">菜单一1-1-1</a></li>18 <li><a href="#">菜单一1-1-2</a></li>19 <li><a href="#">菜单一1-1-3</a></li>20 <li><a href="#">菜单一1-1-4</a></li>21 </ul>22 </li>23 <li><a href="#">菜单一1-2</a></li>24 <li><a href="#">菜单一1-3</a></li>25 <li><a href="#">菜单一1-4</a></li>26 </ul>27 </li>28 <li><a href="#">菜单一2</a></li>29 <li><a href="#">菜单一3</a></li>30 <li><a href="#">菜单一4</a></li>31 </ul>32 </li>33 <li><a href="#">菜单二</a></li>34 <li><a href="#">菜单三</a></li>35 <li><a href="#">菜单四</a></li>36 <li><a href="#">菜单五</a></li>37 </ul>38 </div>39 </body>40 </html>
2. CSS スタイル:
1 #menu ul{ /*定义一级列表属性*/ 2 list-style: none; /*去掉了所有列表项前面的圆点*/ 3 font-size: 24px; 4 position: absolute; 5 } 6 #menu li{ /*定义一级列表项属性*/ 7 height: 40px; 8 } 9 #menu a{10 text-decoration: none; /*去掉所有超链接的下划线*/11 background-color: slateblue;12 padding: 5px 20px;13 color: snow;14 border: solid 2px cornflowerblue;15 }16 #menu ul ul{17 visibility: hidden; /*隐藏二级菜单*/18 position: relative;19 top:-25px;20 left:78px;21 }22 #menu ul ul ul ul{23 position: relative;24 top: -25px;25 left: 110px;26 }27 #menu :hover>a { /*定义在现代标准浏览器中鼠标经过链接的样式。重要！！！*/28 background-color: burlywood;29 text-decoration: underline;30 }31 #menu ul li:hover ul{ /*鼠标经过一级菜单时显示二级菜单*/32 visibility: visible;33 }34 #menu ul li:hover ul ul{ /*鼠标经过一级菜单时隐藏三级菜单*/35 visibility: hidden;36 }37 #menu ul ul li:hover ul ul{ /*鼠标经过二级菜单时隐藏四级菜单*/38 visibility: hidden;39 }40 #menu ul ul li:hover ul { /*鼠标经过二级菜单时显示三级菜单*/41 visibility: visible;42 }43 #menu ul ul ul li:hover ul { /*鼠标经过三级菜单时显示四级菜单*/44 visibility: visible;
3. レイヤーごとにマウスを置きます。
HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AMブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。
HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AMHTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。
HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AMHTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。
マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AMHTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。
HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AMHTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AMHTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
メモ帳++7.3.1
使いやすく無料のコードエディター
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
ホットトピック
7704
15164014139452128825123129