HTML+CSSを使用してTG-visionホームページを作成する方法

HTML+CSSを使用してTG-visionホームページを作成する方法

今回はHTML+CSSレイアウトを使用して、TG-vision Shuanghui Mediaのホームページの予備構築を行います。

1. トップロゴとナビゲーションバー

1. HTMLコード

<!-- 上から始めましょう -->
<div class="トップヘッダー">
    <!--双匯ロゴ-->
    <div class="logo">
        <img src="images/logo.jpg" alt="">
    </div>
    <!--トップナビゲーションバー-->
    <div class="navheader" id="タップバー">
        <div class="nav">
            <a href="#">ホーム</a>
        </div>
        <div class="nav">
            <a href="#porfolio">事例</a>
        </div>
        <div class="nav">
            <a href="#services">サービス</a>
        </div>
        <div class="nav">
            <a href="#about us">当社について</a>
        </div>
        <div class="nav">
            <a href="#contact us">お問い合わせ</a>
        </div>
    </div>
</div>

2.cssコード

.トップヘッダー{
    高さ: 65px;
    幅: 99%;
    /*上部の背景色*/
    背景画像: url(images/top_header_bg.gif);
    背景繰り返し:繰り返し;
    /*上部の領域は上部に固定され、スクロールバーとともに移動します*/
    位置: 固定;
    上: 0;
    z-index: 9999; /*最上位レイヤーに調整*/
}
/*ロゴ画像のレイアウト*/
。ロゴ{
    高さ: 62px;
    幅: 220ピクセル;
    フロート: 左;
    左マージン: 250px;
}
/*ナビゲーションバーのレイアウト*/
.navheader{
    幅: 600ピクセル;
    高さ: 65px;
    フロート: 右;
    右マージン: 130px;
    上マージン: 15px;
}
/*ナビゲーションバーのレイアウト*/
.nav{
    幅: 80ピクセル;
    高さ: 40px;
    フロート: 左;
    右マージン: 10px;
    テキスト配置:中央;
    行の高さ: 40px;

}
/*aタグを調整し、下線を削除します*/
.navheader a{
    テキスト装飾: なし;
    font:18px "新しい歌";
    色: 白;
}
/*ホバー機能により、マウスをナビゲーション領域上に移動すると、ナビゲーション領域の色が設定された色に変わります*/
.nav:hover{
    背景色: #ff6666;
    border-radius: 5px; /*半径を追加する*/
}

2. 中央エリアに写真を表示

1. HTMLコード

<div class="focusBar">
    <div class="フォーカスアウト">
       <!--中央画像を挿入-->
        <div class="focus">
            <img src="images/focus/11.jpg" alt="">
        </div>
          <!--中央画像を挿入-->
        <div class="focus">
            <img src="images/focus/12.jpg" alt="">
        </div>
    </div>
      <!--画像の下部-->
    <div class="focusbuttom"></div>
</div>

2.cssコード

/*中央エリアレイアウト*/
.フォーカスバー{
    高さ: 500px;
    幅: 100%;
    背景色: #141414;
    パディング上部: 130px;
}
 /* 中央画像領域のレイアウト */
.フォーカスアウト{
    幅: 1000ピクセル;
    高さ: 400px;
    margin:0 auto; /* 中央の画像領域を水平方向に中央揃えする*/
}
。集中{
    幅: 1000ピクセル;
    高さ: 500px;
    フロート: 左;
    位置: 絶対;

}
.フォーカスボタン{
    高さ: 100px;
    幅: 100%;
    背景色: #e8e8e8;
}

3. ウェブページ後のレイアウトスタイル

画像ソース: Motian888

3. ポートフォリオ部分

1. HTMLコード

<div class="titleBar1"id="ポートフォリオ"></div>
      <!--ポートフォリオの下に画像を表示-->
<div class="ポートフォリオ">
    <div class="ポートフォリオボックス">
        <div class="porfolioobox1">
            <img src="images/portfolio/p1.jpg" width="330px" alt="">
        </div>
        <div class="porfolioobox1 ボックスマージン">
            <img src="images/portfolio/p2.jpg" width="330px"alt="">
        </div>
        <div class="porfolioobox1">
            <img src="images/portfolio/p3.jpg"width="330px" alt="">
        </div>
    </div>
    <div class="ポートフォリオボックス">
        <div class="porfolioobox2">
            <img src="images/portfolio/p4.jpg" width="330px" alt="">
        </div>
        <div class="porfolioobox2 ボックスマージン">
            <img src="images/portfolio/p5.jpg" width="330px" alt="">
        </div>
        <div class="porfolioobox2">
            <img src="images/portfolio/p6.jpg" width="330px" alt="">
        </div>
    </div>
    <div class="ポートフォリオボックス">
        <div class="porfolioobox3">
            <img src="images/portfolio/p7.jpg" width="330px" alt="">
        </div>
        <div class="porfolioobox3 ボックスマージン">
            <img src="images/portfolio/p8.jpg" width="330px" alt="">
        </div>
        <div class="porfolioobox3">
            <img src="images/portfolio/p9.jpg" width="330px" alt="">
        </div>
    </div>

2.css

/*ポートフォリオタイトルレイアウト*/
.titleBar1{
    幅: 100%;
    高さ: 70px;
    背景画像: url(images/col_tit.gif);
    背景繰り返し:繰り返しなし;
    背景位置: 中央 0;
    背景色: #f3f3f3;
    マージン: 10px 0;
}
/*ポートフォリオ表示エリアレイアウト*/
.ポートフォリオ{
    幅: 100%;
    高さ: 615px;
}
.ポートフォリオボックス{
    高さ: 206px;
    幅: 1000ピクセル;
    マージン: 0 自動;

}
/*画像レイアウトを表示*/
.porfolioobox1、.porfolioobox2、.porfolioobox3{
    高さ: 195px;
    幅: 330ピクセル;
    フロート: 左;
}
.ボックスマージン{
    マージン: 0 5px;
}

3. ウェブページ後のレイアウトスタイル

画像ソース: Motian888

4. サービスセクション

1. HTMLコード

<!--サービスタイトル-->
<div class="titleBar2" id="サービス">
</div>
     <!-サービス本体-->
<div class="サービス">
    <div class="サービスボックス">
        <div class="servicesbox1">
            <img src="images/ser_box1.jpg" alt="">
            <P>モバイル製品ソリューション</P>
            <span>iOS/Android/WeChat パブリックプラットフォーム APP インタラクション設計、ビジュアルデザイン、HTML5 開発、機能カスタマイズ開発</span>
            </div>
        <div class="サービスボックス1 サービスボックス2">
            <img src="images/ser_box2.jpg" alt="">
            <p>アプリケーション ソフトウェア ソリューション</p>
            <span> マルチオペレーティングシステムおよびマルチプラットフォームアプリケーションソフトウェアのインタラクションデザイン、ビジュアルデザイン、およびアプリケーション側開発サービス</span>
        </div>
        <div class="servicesbox1">
            <img src="images/ser_box3.jpg" alt="">
            <p>ネットワークおよびインターネット製品ソリューション</p>
            <span> ユーザーニーズ、市場状況、企業状況などを踏まえ、Webソリューションの可用性を総合的に分析します。</span>
        </div>
        <!--クライアントエリアでは ul レイアウト画像を使用します-->
        <div class="クライアント">
           <ul>
               <li><img src="images/clients/tg_clients_1.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_2.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_3.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_4.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_5.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_6.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_7.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_8.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_9.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_10.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_11.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_12.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_13.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_14.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_15.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_16.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_17.gif" alt=""></li>
               <li><img src="images/clients/tg_clients_18.gif" alt=""></li>
           </ul>
        </div>
    </div>
</div>

2.css

/*サービスタイトルのレイアウト*/
.titleBar2{
    幅: 100%;
    高さ: 70px;
    背景画像: url(images/col_tit.gif);
    背景繰り返し:繰り返しなし;
    背景の位置: 中央 -70px;
    背景色: #f3f3f3;
    マージン: 10px 0;
}
/*サービスメインレイアウト*/
.サービス{
    幅: 1000ピクセル;
    高さ:570px;
    マージン: 0 自動;
}
.サービスボックス{
    幅: 1000ピクセル;
    高さ:270px;
}
.サービスボックス1{
    幅: 320ピクセル;
    高さ: 270px;
    背景色: #f3f3f3;
    フロート: 左;
    テキスト配置: 中央;
}
.サービスボックス2{
    マージン: 0 20px
}
.servicesbox1 p{
    font:20px "中国の歌";
    パディング下部: 5px;
}
.servicesbox1 スパン{
    font:15px "中国の歌";
}
/*サービス下のウェブサイト画像レイアウト*/
.クライアント{
    幅:1000ピクセル;
    高さ: 265px;
    フロート: 左;
    オーバーフロー: 非表示;
}
/*ulレイアウト設定*/
.クライアント ul{
    幅:1000ピクセル;
    高さ: 246px;
    padding-inline-start: 0px; /*liの前のシンボルが占めるスペースを削除します*/
}
ul、li、dl、dt、dd {
    リストスタイルタイプ: なし;
}
/*li レイアウト構成*/
.clients li {
    幅: 165ピクセル;
    高さ: 80px;
    overflow: hidden; /*非表示*/
    フロート: 左;
    表示: リスト項目;
    テキストの配置: -webkit-match-parent;
    境界線: 0.5px 実線 #f3f3f3;
}

3. ウェブページ後のレイアウトスタイル

モティアン888より

5. 会社概要

1. HTML

<!--会社概要タイトル-->
<div class="titleBar3" id="会社概要"></div>
<!--私たちについてセンターエリア-->
<div class="about">
<!--about usトップ画像表示-->
    <div class="aboutshow">
        <div class="show">
            <img src="images/shshow/ss12.jpg" alt="">
        </div>
        <div class="show 表示マージン">
            <img src="images/shshow/ss22.jpg" alt="">
        </div>
        <div class="show">
            <img src="images/shshow/ss32.jpg" alt="">
        </div>
    </div>
    <!--会社概要 中段紹介欄-->
    <div class="aboutshow2">
        <div class="auoutlogo">
            <img src="images/about_logo.jpg" alt="">
        </div>
        <p>TGVISIONは2006年に設立されました。インタラクション、イノベーション、ビジュアルデザイン、製品開発を統合したプロのブランド企画・制作チームです。国内外の有名企業にオールラウンドなマルチプラットフォーム製品サービスソリューションを提供することを目指しています。当社は、プロフェッショナルなインタラクティブデザイン、革新的なコンセプト、ビジュアルプレゼンテーションにより、国内外の 100 社以上の企業にサービスを提供しており、300 件を超える成功事例があります。 IT、自動車、教育、不動産、金融など様々な業界をカバーしており、中国移動、中国電信、百度、新浪、淘宝、ソニー、レノボ、人民日報、中国日報などの企業での成功事例があり、中国国内で高い評価を得ています。 </p>
    </div>
    <!--会社概要 下部紹介-->
    <div class="aboutshow3">
        <div class="showtime">
            <img src="images/about_num1.gif" width="332px">
            <p>当社は、ユーザーの思考、行動、目標を研究・理解し、製品使用に対する潜在的なニーズを探ります。さまざまな業界のお客様にサービスを提供してきた豊富な経験とブランドの強みを組み合わせて、ユーザーが製品のイノベーションを感情的および行動的に認識し、完璧な体験を体験できるように分析を行います。ブランドの価値を超えて。 </p>
        </div>
        <div class="showtime ショータイムマージン">
            <img src="images/about_num2.gif" width="332px">
            <p>私たちは情熱と革新性を持ったチームです。私たちはデザインを通じて、感情表現を通じてユーザーと商品を自然に結びつけ、ユーザーが商品を使う喜びを味わえるようにすることで、商品やブランドに対する体験と認知を強化します。自然なインタラクションと鮮やかなデザインで表現し、感情に訴えるデザインでユーザーを感動させましょう。 </p>
        </div>
        <div class="showtime">
            <img src="images/about_num3.gif" width="332px">
            <p>
                ブランド化されたワンストップソリューションを顧客に提供します。サービスには、インターネット、ハンドヘルド モバイル デバイス、デスクトップ プラットフォーム、民生用電子機器が含まれます。ブランドデザイン、コンセプトデザイン、インタラクションデザイン、ビジュアルデザイン、機能研究開発から最終製品実現まで、あらゆるサービスをお客様に提供します。真に革新的な製品体験を顧客に提供します。
            </p>
        </div>
    </div>
</div>

2.css

/*サービスタイトルのレイアウト*/
.titleBar3{
    幅: 100%;
    高さ: 70px;
    背景画像: url(images/col_tit.gif);
    背景繰り返し:繰り返しなし;
    背景位置: 中央 -140px;
    背景色: #f3f3f3;
    マージン: 10px 0;
}
/*サービスセンターエリアのレイアウト*/
。について{
    幅: 100%;
    高さ: 715px;
}
/*サービス最初の部分画像領域のレイアウト*/
.aboutshow{
    幅: 1000ピクセル;
    高さ: 260px;
    マージン: 0 自動;
}
。見せる{
    フロート: 左;
}
.表示マージン{
    マージン: 0 12.5px;
}、
/*サービス中間紹介レイアウト*/
.aboutshow2{
    幅: 1000ピクセル;
    高さ: 120px;
    背景色: #f3f3f3;
    マージン: 0 自動;
    境界線: 0.5px 実線 #141414;

}
.auoutlogo{
    フロート: 左;
    右パディング: 10px;
    パディング上部: 5px;
}
.aboutshow2 p{
    幅: 800ピクセル;
    パディング上部: 5px;
    右マージン: 10px;
    背景色: #f3f3f3;
    フロート: 右;
    フォント: 15px「Huawen Fangsong」;
}
/*サービス下部紹介レイアウト*/
.aboutshow3{
    幅: 1000ピクセル;
    高さ: 300px;
    マージン: 0 自動;
    上マージン: 30px;
}
。ショータイム{
    幅: 332ピクセル;
    高さ:299px;
    上境界線: 1px アウトセット #787676;
    境界線下: 1px アウトセット #787676;
    フロート: 左;
}
.showtimemargin{
    左境界線: 1px アウトセット #787676;
    右境界線: 1px アウトセット #787676;
}
.ショータイムp{
    フォント: 15px "Chinese Song";
    パディング上部: 20px;
}

3. ウェブページ後のレイアウトスタイル

モティアン888より

6. お問い合わせセクション

1. HTML

<!--お問い合わせタイトル-->
<div class="titleBar4" id="お問い合わせ"></div>
<!--お問い合わせ本文-->
<div class="連絡先">
    <div class="contactbox">
        <div class="contactbox1">
            <ul>
                <li class="contact_1"><h3>ご要望をお知らせください</h3></li>
                <li class="contact_2">
                    <input type="text"value="お名前を入力してください" class="clients_3">
                    <input type="text"value="連絡先番号">
                </li>
                <li class="clients_4"><input type="text" value="メール" ></li>
                <li class="clients_4"><input type="text" value="あなたの会社" ></li>
                <li class="clients_5">
                    <textarea cols="80" rows="20">詳細を入力してください</textarea>
                    <入力タイプ="送信">
                </li>
            </ul>

        </div>
        <div class="contactbox2">
            <img src="images/bottomlogo.jpg" width="320px" alt="">
            <div class="contactbox3">
                <img src="images/temp_map.jpg" width="320px" alt="" class="bottom">
            </div>

        </div>
    </div>

2.css

/*お問い合わせタイトルレイアウト*/
.titleBar4{
    幅: 100%;
    高さ: 70px;
    背景画像: url(images/col_tit.gif);
    背景繰り返し:繰り返しなし;
    背景位置: 中央 -210px;
    背景色: #f3f3f3;
    マージン: 10px 0;
}
/*お問い合わせメインレイアウト*/
。接触{
    幅: 100%;
    高さ: 620px;
}
.コンタクトボックス{
    幅: 1000ピクセル;
    高さ: 620px;
    マージン: 0 自動;
}
.contactbox1{
    幅: 640ピクセル;
    高さ: 620px;
    フロート: 左;
    オーバーフロー: 非表示;

}
/*ulレイアウト*/
.お問い合わせ ul{
    幅: 640ピクセル;
    padding-inline-start: 0px; /*li シンボルが占めるスペースを非表示にする*/
}
/*li レイアウト*/
.連絡先li{
    幅: 640ピクセル;
    マージン: 0;
    パディング上部: 10px;
    リストスタイルタイプ:なし;
    オーバーフロー: 非表示;
}
.contact入力[type=text]{
    幅: 300ピクセル;
    高さ: 40px;
    フォント: 15px "Chinese Song";
    背景色: rgba(250,250,250,0.8);
}
.contact入力[type=submit]{
    幅: 150ピクセル;
    高さ: 45px;
    背景色: #ff6666;
}
.clients_3{
   右マージン: 18px;
}
.clients_4 入力[type=text]{
    幅: 630ピクセル;
}
.clients_5 {
    幅: 640ピクセル;
    高さ: 353px;
}
.contactbox2{
    幅: 320ピクセル;
    高さ: 630ピクセル;
    フロート: 右;
    パディング上部: 34px;
}
。底{
    パディング上部: 86px;
}
.contactbox3{
    幅: 320ピクセル;
    高さ: 335ピクセル;
    フロート: 右;
}

3. ウェブページ後のレイアウトスタイル

モティアン888より

7. Webページ構築のソースコードと画像リンク

リンク: https://pan.baidu.com/s/1p-wi4g8rloHotNx4te4r5A

抽出コード: 52hc

初めてのWebサイト制作だったので、Webページの構造がよくわからず、Webページ制作の完成度も特に高くなく、コードも明確に書かれていませんでした。アドバイスをお願いします。

HTML+CSSを使用してTG-visionホームページを作成する方法についての記事はこれで終わりです。CSS TG-visionホームページ作成に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  フォント宝庫 50 種類の素晴らしい無料英語フォントリソース パート 1

>>:  SQL 挿入文の書き方の説明

推薦する

Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...

SSH接続を介してXshellを使用したUbuntu 20.04で報告されたサービス問題の詳細な説明

1. 最近、Ubuntu の新しいバージョンをインストールしました。/etc/ssh/sshd_co...

CSS3でカルーセル画像を作成する方法

スライドショーは Web ページでよく見られます。美しい写真が使われています。こちらは純粋な CSS...

MySQLが大量のデータを処理する際にクエリ速度を最適化するいくつかの方法

実際に参加したプロジェクトでは、MySQL テーブルのデータ量が数百万に達すると、通常の SQL ク...

Linux 圧縮ファイルコマンド zip の使用例

「.zip」形式は、Windows システムでファイルを圧縮するために使用されます。実際、「.zip...

MySQL の条件文で 1 つの情報しか読み取れない問題に対する 2 つの解決策

今日、私の同僚が MYSQL クエリ ステートメントの作成時に非常に奇妙な問題に遭遇しました。MyS...

VirtualBox を使用して Linux クラスターをシミュレートする方法

1. ホストMacbookにHOSTをセットアップする前回のドキュメントでは仮想マシンの静的 IP ...

Linux で txt を mysql にインポートする方法

序文昨日、小さなプロジェクトを書いていたときに、txt ドキュメントのデータを mysql データベ...

Vueはシンプルな計算機能を実装します

この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...

jQueryはマウスドラッグ画像機能を実装します

この例では、jQuery を使用してマウス ドラッグ イメージ機能を実装します。まず、ラッパーを設定...

HTML における iFrame タグの 2 つの使用法

最近、私は「ぶどうコレクション」というプロジェクトに取り組んでいます。簡単に言うと、Budou ペー...

Linux で同じ内容のファイルを識別する方法の詳細な説明

序文ファイルのコピーによってハードドライブのスペースが大量に浪費され、ファイルを更新するときに混乱が...

Vueはスクロールバースタイルを実装します

最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみ...

Linux サーバーで MySQL リモート接続を有効にする方法

序文以前の非MKレコードを再編成するためのMySQLの学習説明する有効になっていない場合、データベー...

Vueデータ双方向バインディング実装方法

目次1. はじめに2. コードの実装2.1 目的分析2.2 実装プロセス2.2.1 エントリーコード...