PHP7掲示板開発の準備
- coldplay.xixi転載
- 2020-12-24 09:19:381779ブラウズ
PHP7チュートリアルコラムでは用意されている掲示板開発を紹介しています
推奨(無料): PHP7
コースのポイント:
このチュートリアルは、旧友の助けになりたいという願いで、旧友からのリクエストに基づいて作成されました。また、罠に陥る必要がある友人たちに何らかの「動機」を提供できればと思っています（実際にはそれほど難しいことではありません）。
このチュートリアルは、PHP を学び始めている学生に適しています;
ここでは、理解しやすいプロセス指向開発を使用します。プロセス指向は基本的な命令型プログラミングであり、初心者にとっては習得が容易です。その他の概念的なことはここでは詳しく説明しません。;
このレッスンに関連し、習得する必要がある技術的なポイントは次のとおりです:
p CSS、PHP MYSQL
ページ効果:
メッセージ ボード ホーム ページ
メッセージ ボード リスト ページ
開発ツール:
- XAMPP3.2.2 (php7.1.8/MariaDB10.1.26)
公式 Web サイト https://www.apachefriends.org/zh_cn/download.html - visual Studio コード (以下vs code)
公式サイト https://visualstudio.microsoft .com/zh-hans/downloads/
チュートリアル構成:
説明は 3 つのステップに分かれています。簡単なものから奥深いものまで。
- ステップ 1: ページ デザイン、CSS
- ステップ 2: 関数の実装 PHP MYSQL
- ステップ 3: コードの最適化
今日は主にステップ1について説明します。
初めてデザイン案をもらったとき、自分で作ったものであればすぐにその状態になってコードを直接打ち込むと思いますが、見慣れないレイアウトや、より複雑なデザインのドラフト 何かをするとき、急いでいてどこから始めればよいのかわかりません。まあ、そうです、最初はそうやってここに来たのですから。
次に私の方法について話しましょう:
-
1. 足場の構築を開始します
a. 名前が示すように、これは似ています。家は基本的な骨組みから始まり、コンクリートを流し込み、ゆっくりとレンガを積み上げていきます。 CSSの書き方も同様で、まずデザイン案に沿って基本的な枠組みを設計し、その上下左右の構造を明確にしてから、フレームワーク内のセクションを細分化します。 p タグごとに CSS スタイルのコードを記述できるようにすることで、指定した場所を素早く見つけて効率を向上させます。
2. 新しい CSS スタイル ファイルを作成し、レンダリングに従って CSS コードを記述します。
b. たとえば、今書いている掲示板では、まず.container_boxというコンテナ (筐体) を作成し、それを.up と .downに分割します。上下の構造 (ここでは 2 つのフロアとします) を作成し、最後に各レイヤーの詳細なコンテンツを設計します。もちろん、この操作 (細分化された構造) を各レイヤーで繰り返すこともできます。 - a. CSS コードを見てください。
CSS ファイルは HTML 内で参照する必要があることに注意してください。 page
##3. 最終詳細調整a. マウスを追加します。 - :hoverb. 処理コンテンツ モジュール間に行間隔を追加して、ページ全体が明確で明確に見えるようにします
line-height
思考がより明確になれば、知性や知恵を思う存分発揮できるようになり、デザイン案よりもページのデザインがより良く、より美しくなります。この達成感は、実際に味わってみないと味わえません。c. もちろん、 CSS3 アニメーション効果を追加することもできますが、これはここでは焦点ではありません。これ以上書く必要はありません。さらに深く学びたい学生は独学でも構いませんが、PHP 開発者としては、上記 2 点を達成できれば十分です。この一連の設計アイデアは、ページの設計、jquery プラグインの開発など、他のフロントエンド プロジェクトの設計にも実際に適用できます。
コード領域: p CSS ページのデザイン言いすぎた気がするので、直接オナニーを始めましょう！
キーポイント: フォームフォーム (使用するタグには入力テキストエリアが含まれます)
以下は完成した HTML コードです。 :
CSS (フィードバック.css):*{margin:0;padding:0;}
body{font-family: "微软雅黑", "Microsoft Yahei"; font-size: 12px;}
.container_box{width: 100%;max-width: 1170px;margin: 0 auto;text-align: center;}
a{color: #333;}
a:hover{color: #999;}
.fr{float: right}
.fl{float: left}
.container_box .up{padding: 20px 0;}
.container_box .up .title{font-size: 20px;}
.container_box .up .subtitle{color:#f00;margin-bottom: 10px;}
.container_box .down{margin: 0 auto;text-align: center;width: 50%;}
.container_box .down .input{margin-bottom: 10px;overflow: hidden;}
.container_box .down .input input{width: 46%;line-height: 30px;padding:4px;}
.container_box .down .content{width: 98%;display: block;margin-bottom: 10px;padding:4px;}
.container_box .down .sub{width: 100%;display: block;height: 35px;background-color: #63637f;color:#fff;border: 0;cursor: pointer;}
/* 鼠标移到按钮上去更换背景色 */
.container_box .down .sub:hover{background-color: #75849c;}
/* 列表 */
.list ul{padding: 20px 0;width: 100%;margin: 0 auto;text-align: left;}
.list ul li{line-height: 30px;color: #666;}
HTML (ホームページ):
nbsp;html> <meta> <title>留言板_科科分享</title> <!-- 2.新建css样式文件并根据效果图编写css代码 --> <link> <!-- 工作区，呈现给用户看的 --> <!-- 1.开始搭建脚手架 --> <p> </p><p> </p><h3>留言板</h3> <h5>FEEDBACK</h5> <p> </p>
HTML (リスト):
nbsp;html> <meta> <title>列表_留言板_科科分享</title> <!-- 2.新建css样式文件并根据效果图编写css代码 --> <link> <!-- 工作区，呈现给用户看的 --> <!-- 1.开始搭建脚手架 --> <p> </p><p> </p><h3>留言板</h3> <h5>LIST</h5> <p> </p>
- 姓名：xxx 联系方式：13800013800 内容：xxxxxxxxxxx
- 姓名：xxx 联系方式：13800013800 内容：xxxxxxxxxxx
- 姓名：xxx 联系方式：13800013800 内容：xxxxxxxxxxx
- 姓名：xxx 联系方式：13800013800 内容：xxxxxxxxxxx
- 姓名：xxx 联系方式：13800013800 内容：xxxxxxxxxxx
- 姓名：xxx 联系方式：13800013800 内容：xxxxxxxxxxx
この時点で、ステップ 1 p CSSページデザインが完成しました。
練習、練習、練習!大事なことは3回言いましょう。
間違いや理解できない点があれば、遠慮せずにコメント欄に書き込んでください。落書き歓迎です。 ~
以上がPHP7掲示板開発の準備の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。