バックエンド開発
PHPチュートリアル
ハン・シュンピン_PHPの入門から習熟まで_ビデオチュートリアル_講義19_ウェブサイトの推奨_ポジショニング_学習ノート_ソースコードの図解_PPT文書の構成
ハン・シュンピン_PHPの入門から習熟まで_ビデオチュートリアル_講義19_ウェブサイトの推奨_ポジショニング_学習ノート_ソースコードの図解_PPT文書の構成
ハン・シュンピン_PHPの入門から熟練まで_ビデオチュートリアル_講義19_ウェブサイトの推奨事項_ポジショニング_学習ノート_ソースコードの図解_PPT文書の構成
本やビデオが何冊あっても、 自分でプロジェクトを1つ作成する方が良いです。 経験を積むことができます。
オープンソース プロジェクトの場合は、実行し、理解して、2 回変更します。模倣 -------->革新、核心を掴む。
CSS コアコンテンツ - 配置
ポジショニング - 基本的な考え方
CSS 配置プロパティを使用すると、要素を配置できます。位置決め属性値:
static (デフォルト値): 要素ボックスは通常どおり生成されます。ブロックレベル要素はドキュメント フロー/標準フローの一部として長方形のボックスを作成し、インライン要素は親要素内に配置される 1 つ以上のライン ボックスを作成します。
relative: 要素ボックスは特定の距離だけオフセットされます。この観点からは、要素は事前に配置された形状を保持しており、元のスペースも保持されているため、要素がまだドキュメント フロー/標準フロー内にあるように見えます。
absolute: 要素ボックスはドキュメント フローから完全に削除され、そのボックスを含むブロックに対して相対的に配置されます。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスのタイプに関係なく、配置後にブロック レベルのボックスを生成します。
修正: 要素ボックスは位置を絶対に設定するように動作しますが、そのボックスを含むブロックはウィンドウ自体です。
これらの位置付けを理解するのは特に簡単ではないため、ケースを使用して理解することができます。
一般的な配置は 4 つあります
1.静的位置決め (デフォルト値)
2.relative 相対位置 (誰との相対)
3.絶対的な絶対位置（誰を基準とするか）
4.固定固定位置
(1) 静的測位についてはこれ以上説明しません。前に話したのは静的測位です。
(2) 位置決め - 相対位置決め:相対
コンテンツ 2 は元のドキュメント フローから分離されていますが、その位置が他のものによって占められることは期待されていません。私は去ってしまいましたが、その地位はまだ私のものです、 私は無給休暇中です。
コンテンツ 2 の位置を変更
誰に対して相対的ですか? 元の位置を基準にして再配置されます。
ここで、いわゆる相対配置とは、要素が表示されるべき左上隅を基準にして再配置することを指しますが、そのスペースを占有することはできません。
relative.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="relative.css" /> <title>relative 相对定位</title> </head> <body> <div class="div1">内容1</div> <div class="div1" id="spe">内容2</div> <div class="div1">内容3</div> <div class="div1">内容4</div> </body> </html>
相対.css
.div1{
width: 70px;
height: 30px;
background: silver;
float: left;
margin-left: 5px;
}
#spe{
position: relative;
left: 40px;
top: 100px;
}(3) 位置決め - 絶対位置決め 絶対
===
上の図から、 のいわゆる絶対配置は、親要素がない場合 (または親要素がある場合)、 が標準フローから離脱した要素に最も近い要素を配置することを意味します。ただし、親要素は標準フローから離脱していません)。本文の左上隅を基準にして配置されます。
絶対位置、どの点が配置されるか。
absolute.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="absolute.css" /> <title>绝对定位</title> </head> <body> <div class="div1">内容1</div> <div class="div1" id="spe">内容2</div> <div class="div1">内容3</div> <div class="div1">内容4</div> </body> </html>
絶対.css
*{
margin: 0px;
padding: 0px;
}
.div1{
width: 70px;
height: 30px;
background: silver;
float: left;
margin-left: 5px;
}
#spe{
position: absolute; /*绝对定位(究竟对谁)*/
left: 40px; /*left为正，则向右移动*/
top: 100px; /*top为正，则向下移动*/
}「標準的なフローから外れた要素に最も近い要素の配置」を中心にコンテンツ2をdivで囲みます
absolute2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="absolute2.css" /> <title>绝对定位2</title> </head> <body> <div class="div1">内容1</div> <div class="div1">内容3</div> <div class="div1">内容4</div> <div class="div2">测试 <div class="div1" id="spe">内容2</div> </div> </body> </html>
絶対2.css
*{
margin: 0px;
padding: 0px;
}
.div1{
width: 70px;
height: 30px;
background: silver;
float: left;
margin-left: 5px;
}
#spe{
position: absolute;/*绝对定位(究竟对谁)*/
left: 40px; /*left为正，则向右移动*/
top: 100px; /*top为正，则向下移动*/
}
.div2{
width: 200px;
height: 150px;
background: pink;
float: left;
}
(1) 以下の図に示すように、コンテンツ 2 を div2 でラップし、元のコンテンツ 2 を削除します。コードは上記のとおりです。 div2 は依然として標準フローであるため、コンテンツ 2 は依然として本文の左上隅を基準にして配置されます。
(2) div2 を標準フローから外すと、下図のように表示されます。次に、コンテンツ 2 は本文ではなく、それを含む div2 に従って配置されます。これは、div2 が標準フロー外のコンテンツ 2 に最も近い要素であるためです。 「標準の流れから外れた要素に最も近い要素の配置」
div2 の対応する CSS 属性は次のように変更されます
.div2{
position: relative;
left: 100px;
top: 100px;
width: 200px;
height: 150px;
background: pink;
float: left;
}
（4）定位――fixed定位（绝绝对对）
把内容2修改为绝对定位，则显示如下图所示。不管谁包我还是不包我，我永远对视窗的左上角，body的左上角定位，绝绝对对。
相应的内容2的css属性修改如下
#spe{
/*position: absolute;*/ /*绝对定位(究竟对谁)*/
position: fixed;
left: 40px; /*left为正，则向右移动*/
top: 100px; /*top为正，则向下移动*/
}所谓fixed定位就是不管怎样，总是以视窗的左上角定位。
注意：left和top对static没有效果的，★★★static静态定位的左右移动用的margin★★★
z-index
设置对象的层叠顺序
z-index的值越小，越在下面
用于设置对象（div）显示时候，层叠的属性，z-index值越小，则越在下层显示。
韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录
ホット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）
ホットトピック
7322
9
1625
14
1350
46
1262
25
1209
29
Huawei GT3 ProとGT4の違いは何ですか?
Dec 29, 2023 pm 02:27 PM
多くのユーザーはスマートウォッチを選ぶときにファーウェイブランドを選択しますが、その中でもファーウェイ GT3pro と GT4 は非常に人気のある選択肢であり、多くのユーザーはファーウェイ GT3pro と GT4 の違いに興味を持っています。 Huawei GT3pro と GT4 の違いは何ですか? 1. 外観 GT4: 46mm と 41mm、材質はガラスミラー + ステンレススチールボディ + 高解像度ファイバーバックシェルです。 GT3pro: 46.6mm および 42.9mm、材質はサファイアガラス + チタンボディ/セラミックボディ + セラミックバックシェルです。 2. 健全な GT4: 最新の Huawei Truseen5.5+ アルゴリズムを使用すると、結果はより正確になります。 GT3pro: ECG 心電図と血管と安全性を追加
修正: Windows 11 で Snipping ツールが機能しない
Aug 24, 2023 am 09:48 AM
Windows 11 で Snipping Tool が機能しない理由 問題の根本原因を理解すると、適切な解決策を見つけるのに役立ちます。 Snipping Tool が正しく動作しない主な理由は次のとおりです。 フォーカス アシスタントがオンになっている: これにより、Snipping Tool が開かなくなります。破損したアプリケーション: 起動時にスニッピング ツールがクラッシュする場合は、破損している可能性があります。古いグラフィック ドライバー: 互換性のないドライバーは、スニッピング ツールに干渉する可能性があります。他のアプリケーションからの干渉: 実行中の他のアプリケーションが Snipping Tool と競合する可能性があります。証明書の有効期限が切れています: アップグレード プロセス中のエラーにより、この問題が発生する可能性があります。これらの簡単な解決策は、ほとんどのユーザーに適しており、特別な技術知識は必要ありません。 1. Windows および Microsoft Store アプリを更新する
iPhoneでApp Storeに接続できないエラーを修正する方法
Jul 29, 2023 am 08:22 AM
パート 1: 最初のトラブルシューティング手順 Apple のシステムステータスを確認する: 複雑な解決策を掘り下げる前に、基本から始めましょう。問題はデバイスにあるのではなく、Apple のサーバーがダウンしている可能性があります。 Apple のシステム ステータス ページにアクセスして、AppStore が適切に動作しているかどうかを確認してください。問題があれば、Apple が修正してくれるのを待つしかありません。インターネット接続を確認します。「AppStore に接続できません」問題は接続不良が原因である場合があるため、安定したインターネット接続があることを確認してください。 Wi-Fi とモバイル データを切り替えるか、ネットワーク設定をリセットしてみてください ([一般] > [リセット] > [ネットワーク設定のリセット] > [設定])。 iOS バージョンを更新します。
CSSを使用してdivの角が欠けていることを認識する方法
Jan 30, 2023 am 09:23 AM
div の角が欠けていることを認識するための CSS メソッド: 1. HTML サンプル ファイルを作成し、div を定義します; 2. div の幅と高さの背景色を設定します; 3. 削除する必要がある div に疑似クラスを追加します隅に配置し、擬似クラスを背景色と同じ色を使用するように設定し、45 度回転して、削除する必要がある隅に配置します。
ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装
May 01, 2023 pm 03:28 PM
はじめに 最近 GitHub に ChatGPTAPI をベースにしたブラウザスクリプト openai-translator が登場しました 短期間でスターが 12k に達しました 翻訳だけでなく磨きや要約機能もサポートしています ブラウザプラグに加えて-ins, tauri パッケージも使用します。デスクトップ クライアントをお持ちの場合は、tauri が Rust 部分を使用するという事実を除けば、ブラウザ部分の実装はまだ比較的簡単です。今日は手動で実装します。 openAI によって提供されるインターフェイス。たとえば、次のコードをコピーし、ブラウザ コンソールでリクエストを開始して変換を完了できます。 //Example constOPENAI_API_KEY="s
php提交表单通过后,弹出的对话框怎样在当前页弹出,该如何解决
Jun 13, 2016 am 10:23 AM
php提交表单通过后,弹出的对话框怎样在当前页弹出php提交表单通过后,弹出的对话框怎样在当前页弹出而不是在空白页弹出？想实现这样的效果：而不是空白页弹出:------解决方案--------------------如果你的验证用PHP在后端，那么就用Ajax；仅供参考：HTML code
divとspanの違いは何ですか?
Nov 02, 2023 pm 02:29 PM
違いは次のとおりです: 1. div はブロックレベル要素であり、span はインライン要素です。2. div は自動的に行を占有しますが、span は自動的に折り返されません。3. div はより大きな構造とレイアウトを折り返すために使用されます。テキストまたは他のインライン要素をラップするために、span が使用されます。4. div には他のブロックレベル要素とインライン要素を含めることができ、span には他のインライン要素を含めることができます。
divボックスモデルとは何ですか
Oct 09, 2023 pm 05:15 PM
div ボックス モデルは、Web ページのレイアウトに使用されるモデルです。Web ページ内の要素を長方形のボックスとして扱います。このモデルには、コンテンツ領域、パディング、ボーダー、マージンの 4 つの部分が含まれています。 div ボックス モデルの利点は、Web ページのレイアウトと要素間の間隔を簡単に制御できることであり、コンテンツ領域、内側の余白、境界線、外側の余白のサイズを調整することで、さまざまなレイアウト効果を実現できます。ボックス モデルには、CSS と JavaScript を通じてボックスのスタイルと動作を動的に変更できるいくつかのプロパティとメソッドも用意されています。
