PHP7掲示板開発の準備

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 スタイルのコードを記述できるようにすることで、指定した場所を素早く見つけて効率を向上させます。
  b. たとえば、今書いている掲示板では、まず .container_box というコンテナ (筐体) を作成し、それを .up と .down に分割します。上下の構造 (ここでは 2 つのフロアとします) を作成し、最後に各レイヤーの詳細なコンテンツを設計します。もちろん、この操作 (細分化された構造) を各レイヤーで繰り返すこともできます。

  2. 新しい CSS スタイル ファイルを作成し、レンダリングに従って CSS コードを記述します。
• a. CSS コードを見てください。

  CSS ファイルは HTML 内で参照する必要があることに注意してください。 page

  
  ##3. 最終詳細調整

a. マウスを追加します。
• :hover
  b. 処理コンテンツ モジュール間に行間隔を追加して、ページ全体が明確で明確に見えるようにします

  line-heightc. もちろん、 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 id="留言板">留言板</h3>
                <h5 id="FEEDBACK">FEEDBACK</h5>
            
            <p>
                </p>

                    

                                                                       

                                                          

                          
HTML (リスト):

nbsp;html>

    
        <meta>
        <title>列表_留言板_科科分享</title>
        <!-- 2.新建css样式文件并根据效果图编写css代码 -->
        <link>
    
    
        <!-- 工作区，呈现给用户看的 -->
        <!-- 1.开始搭建脚手架 -->
        <p>
            </p><p>
                </p><h3 id="留言板">留言板</h3>
                <h5 id="LIST">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 サイトの他の関連記事を参照してください。