HTML の左右レイアウトのサンプルコード

HTML の左右レイアウトのサンプルコード
CS: ...

コードをコピー
コードは次のとおりです。

html,body{ margin:0px; padding:0px; height: 100%; } .headbg{ background: black; color: white; height:48px; } .userManagerAll{ height: 100%; width: 100%; } .leftside{ background: #E6E6E6; float: left; height: 100%; width: 200px; margin: 0px; overflow-y:auto; } .rightside{ background: white; height: 100%; width:100%; align:right; }

html

コードをコピー
コードは次のとおりです。

<div class="head"></div>
<div class="すべて">
<div class="left side">1</div>
<div class="右側">2</div>
</div>

テキストボックスをクリックするとテキストが消えます

コードをコピー
コードは次のとおりです。

<input name="textfield" style="color:#CCC;" type="text" value="テキストをクリックすると消えます" size="12" onclick="value='';focus()" onblur="if(value=='') value='テキストをクリックすると消えます;"/>

<<:  JavaScript バブルソートの例

>>:  nginx で仮想ホストを構成するための詳細な手順

推薦する

MySQLデータベース最適化技術の簡単な紹介

成熟したデータベース アーキテクチャは、最初から高可用性、高スケーラビリティなどの機能を備えて設計さ...

Nginx ストリーム構成プロキシ (Nginx TCP/UDP ロード バランシング)

序章nginx が優れたリバース プロキシ サービスであることは誰もが知っています。nginx を使...

docker compose idea CreateProcess error=2 システムは指定されたファイルを見つけることができません

Docker の作成Compose の紹介Compose は、マルチコンテナ Docker アプリケ...

Webデザインチュートリアル(8):Webページの階層と空間デザイン

<br />前回の記事:Webデザイン講座(7):Webページ制作の効率化1:必要な小言...

vue ルーティング ビュー router-view のネストされたジャンプの実装

目次1. app.vueページを修正する2. ログインページを作成する (/views/login/...

WeChatアプレットは記録機能を実装します

この記事では、WeChatアプレットのレコード機能を実装するための具体的なコードを参考までに紹介しま...

Explainキーワードに基づいてMySQLインデックス機能を最適化する方法

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

数ステップでサイバーパンク2077風の視覚効果を実現するCSS

背景記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。サイバーパン...

HTML ページジャンプのパラメータ渡しの問題

効果は以下のとおりです。ページジャンプボタンをクリックした後 対応する値はページ b で取得できます...

動的なセカンダリメニューを実現するためのCSS

シンプルなセカンダリメニューを動的に実装するマウスを第 1 レベルのラベル上に置くと、マウスが小さな...

Dockerを使用してシンプルなJava開発およびコンパイル環境を構築する方法の詳細な説明

Java 言語には多くのバージョンがあります。一般的に使用されている Java 8 に加えて、一部の...

jQueryカルーセル機能を実装する方法

この記事では、jQueryカルーセル機能の実装コードを参考までに共有します。具体的な内容は次のとおり...

Centos7 環境でソースコードから mysql5.7.16 をインストールする方法の詳細な説明

この記事では、centos7 環境でソース コードから mysql5.7.16 をインストールする方...

Dockerサーバーのストレージリソースプール不足問題の解決

目次1. 問題の説明2. 問題分析3. 問題解決1. Dockerのディスク使用量を確認する2. 再...

CentOS7 に Redis をインストールして設定する方法

導入Redis を詳しく説明する必要はありません。インストールと設定を始めましょう。インストールソー...