PHP7掲示板開発の準備-PHP7-php.cn

PHP7掲示板開発の準備

coldplay.xixi

リリース： 2023-02-17 18:28:01

転載

1800 人が閲覧しました

PHP7チュートリアルコラムでは用意されている掲示板開発を紹介しています

PHP7掲示板開発の準備

推奨(無料): PHP7

コースのポイント:

このチュートリアルは、旧友の助けになりたいという願いで、旧友からのリクエストに基づいて作成されました。また、罠に陥る必要がある友人たちに何らかの「動機」を提供できればと思っています（実際にはそれほど難しいことではありません）。
このチュートリアルは、PHP を学び始めている学生に適しています;
ここでは、理解しやすいプロセス指向開発を使用します。プロセス指向は基本的な命令型プログラミングであり、初心者にとっては習得が容易です。その他の概念的なことはここでは詳しく説明しません。;
このレッスンに関連し、習得する必要がある技術的なポイントは次のとおりです:
p CSS、PHP MYSQL

ページ効果:

PHP7掲示板開発の準備

メッセージボードホームページ

PHP7掲示板開発の準備

メッセージボードリストページ

開発ツール:

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. 最終詳細調整
:hover
b. 処理コンテンツモジュール間に行間隔を追加して、ページ全体が明確で明確に見えるようにします
line-heightc. もちろん、 CSS3 アニメーション効果を追加することもできますが、これはここでは焦点ではありません。これ以上書く必要はありません。さらに深く学びたい学生は独学でも構いませんが、PHP 開発者としては、上記 2 点を達成できれば十分です。

思考がより明確になれば、知性や知恵を思う存分発揮できるようになり、デザイン案よりもページのデザインがより良く、より美しくなります。この達成感は、実際に味わってみないと味わえません。

言いすぎた気がするので、直接オナニーを始めましょう！

コード領域:

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>

ログイン後にコピー