DWボタンの設定方法は? DW にバナー ボタン インスタンスを追加する

php中世界最好的语言
リリース: 2019-05-21 09:41:46
オリジナル
13398 人が閲覧しました

今回は、DWにバナーボタンを追加する方法と、DWにバナーボタンを追加する際の注意点を説明します。以下は実際のケースです。

DWボタンの設定方法は? DW にバナー ボタン インスタンスを追加する

1. 写真のようにバナー素材を準備し、img画像ライブラリに置きます

2. Dreamweaverソフトウェアを開き、ctrl+n新しいhtmlファイルを作成して保存します

3.本文内 コンテンツボックスにコンテンツを作成し、クラス名を設定します

<p class="banner">
<img src="img/banner.jpg" >
<input type="button" value="左"  class="bt_left">
    <input type="button" value="右" class="bt_right">
</p>
ログイン後にコピー

大きなボックスに画像と2方向キーを入れて、最後に左右を左右の位置に配置します

4. ヘッドの下にstyleタグを追加してバナーを調整します。幅と高さの属性値を設定します:

<style>
.banner{width:1200px;height:300px;margin:0 auto;overflow:hidden;}
.banner img{width:100%;}
</style>
ログイン後にコピー

5. 大きなフレームのバナーを相対配置に設定し、左ボタンを絶対配置に設定し、位置を設定します

.bt_left{position:absolute;top:50%;left:20px; }

6. 右ボタンの絶対位置を設定し、位置を設定します

.bt_right{position:absolute;top: 50%;right:20px;}

この事例を読んだことがあるかと思いますが、この方法をマスターした後は、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

フロントエンドの実践的なプロジェクトで CSS コードを使用する際に注意すべき 20 の事項

文字列をインターセプトするには純粋な CSS3 を使用してください

以上がDWボタンの設定方法は? DW にバナー ボタン インスタンスを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート