ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS+DIVのテスト例layout_html/css_WEB-ITnose

CSS+DIVのテスト例layout_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:32:32
オリジナル
1025 人が閲覧しました

最終表示効果如下図:

代码:

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="SammyDiv.aspx.cs" Inherits="Buying_SammyDiv" %>



< html xmlns ="http://www.w3.org/1999/xhtml" >


#rtop{}{
margin:0 auto;
高さ: 30%;
vertical-align:middle; 
text-align:center;
フォントファミリー:Arial; 
font-size:x-large;
背景: #CCCC00;
}

#rbottom{}{
margin:0 auto;
高さ: 70%;
vertical-align:middle; 
text-align:center;
フォントファミリー:Arial; 
font-size:x-large;
背景: #CCee00;
}

#left{}{
float:left;
高さ:100%;
幅: 50%;    
vertical-align:middle; 
text-align:center; 
フォントファミリー:Arial; 
font-size:x-large;   
背景: #CCCCed;
}

#コンテナ{}{
width:600px;  
高さ:300ピクセル;   
vertical-align:middle; 
text-align:center; 
フォントファミリー:Arial; 
font-size:x-large;  
背景色:緑
}

#leftside{}{
幅: 20%;
高さ: 60%;
float:left;
フォントファミリー:Arial; 
font-size:x-large;
vertical-align:middle; 
text-align:center;
背景: グレー;
}

#rightside{}{
        幅:80%;
高さ: 60%;
float:left;
vertical-align:middle; 
text-align:center;
フォントファミリー:Arial; 
font-size:x-large;
背景: #Cdfd00;
}

#foot{}{
高さ:20%;
クリア: 両方;
vertical-align:middle; 
text-align:center;
フォントファミリー:Arial; 
font-size:x-large;
背景色:InactiveBorder;
}
#header{}{
高さ:20%;
クリア: 両方;
vertical-align:middle; 
text-align:center;
フォントファミリー:Arial; 
font-size:x-large;
背景色:赤
}







ヘッダー



左側

         

右上











        






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