超簡単な静的なページを作る：ケース - フロントを学びます

超簡単な静的なページを作る：ケース - フロントを学びます

HTML部分

<！DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < メタのcharset = "UTF-8"  /> 
        < タイトル> </ タイトル> 
        < リンクのrel = "スタイルシート" のhref = "CSS / index.css"  /> 
    </ ヘッド> 
    
    
    < ボディ> 
        
        
        <！ - 网页的上部分- > 
        < divのID = "ヘッダ" > 
            < div要素のid = "ヘッダ-IMG" > 
                <
            </ DIV > 
            < DIV ID = "ヘッダフォント" > 
                < UL > 
                    < 李> < HREF = "＃" >首页</ A > </ 李> < リチウム> < HREF = "＃" >视频< / > </ 李> < 李> < HREF = "＃" >新闻</ A > </ 李> <李> < HREF = "＃"
                    
                    
                    >图集</ A > </ 李> 
                    < リチウム> < HREF = "＃" >球队</ A > </ 李> < リチウム> < HREF = "＃" >球员</ A > </ 李> < 李> < HREF = "＃" >赛程</ A > </ 李> < 李> < HREF = "＃">ランク</ A > </
                    
                    
                    李> 
                    < リチウム> < HREF = "＃" >数据</ A > </ 李> < リチウム> < HREF = "＃" >专题</ A > </ 李> < リチウム> < HREF =」 ＃」>更多</ A > </ 李> </ UL > </ DIV > </ DIV > <！- ページの中間部- > < DIV ID
                    
                                
                
            
        
        
        
        
        
        
        = "コンテンツ" > </ divの> 
        
        
        
        
        <！ - ページの下部- > 
        < DIV ID = "フッタ" > </ DIV > 
        
        
        
        
    </ ボディ> 
    
    
</ HTML >

コードの表示

CSSセクション

本体 { 
    幅：100％ 。
    高さ：2000px ; 
    背景色：赤。
    パディング：0PX。
    マージン：0PX。
} 


＃ヘッダー { 
    高さ：150ピクセル。
    幅：100％ ; 
    背景色：＃006BB7。
} 

＃ヘッダ-IMG { 
    高さ：60％ 。
    幅：70％ ;
    マージン：自動 ; 
} 
＃ヘッダ-IMG IMG { 
    高さ：100％ 。
    幅：100％ ; 
} 



＃ヘッダフォント { 
    高さ：40％ 。
    幅：70％ ; 
    マージン：自動 ; 
} 
＃ヘッダフォントUL { 
    マージン左：-30px。
    マージントップ：20ピクセル ; 
} 


＃ヘッダフォントのULのLi { 
    フォントサイズ：20ピクセル; 
    リストスタイルのタイプ：なし。
    表示：インライン ; 
    マージン右：は50px ; 
} 

＃ヘッダフォント { 
    色：白。
} 

＃ヘッダ・フォントA：リンク { 
    テキスト装飾：なし。
} 


#content { 
    高さ：1350px。
    幅：100％ ; 
    背景色：#DCDCDC。
} 



#footer { 
    高さ：500pxなど ; 
    幅：100％ ; 
    背景色：黒。
}

コードの表示

 

更新....