HTML5设计基本网页-basic frameset

最新推荐文章于 2022-02-24 14:17:10 发布

weixin_33915554

最新推荐文章于 2022-02-24 14:17:10 发布

阅读量139

点赞数

原文链接：http://www.cnblogs.com/JoannaQ/archive/2012/08/28/2659481.html

版权

效果如图

其中HTML部分代码如下：

<!doctype html>
<html lang="en">
   <header>
      <meta charset="utf-8"/>
      <title>Html5 test website!</title>
      <link rel="stylesheet" href="main.css">
   </header>
 
   <body> 
     <div id="big_wrapper">
        <header id="top_header">
            <h1> Welcome to the new HTML5 web site!</h1>
        </header>
        <nav id="top_menu" >
          <ul>
            <li>Home</li>
            <li>Tutorials</li>
            <li>Podcast</li>
          </ul>
        </nav>     
     
       <section id="main_section">
         <article>
            <header>
                <hgroup>
                <h1>Title of Article 1!</h1>
                <h2>Subtitle for Article!</h2>
                </hgroup>
            </header>
                <p>This is the best article eva!</p>
            <footer>
                <p>-written by Joanna Qian-</p>
            </footer>
         </article>
         <article>
            <header>
                <hgroup>
                <h1>Title of Article 2!</h1>
                <h2>Subtitle for Article!</h2>
                </hgroup>
            </header>
                <p>This is the best article eva!</p>
            <footer>
                <p>-written by Joanna Qian-</p>
            </footer>
         </article>
      </section>    
      
     <aside id="side_news">
        <h4>News</h4>
        Bucky has a new dog!
     </aside>
     
     <footer id="the_footer">
        Copyright thenewbostons 2012!
     </footer>   
    </div> 
   </body>
</html>

其中CSS部分如下

*{
    margin:0px;
    padding:0px;
}
header,section,footer,aside,nav,article,hgroup{
    display:block;
}

h1{
    font: bolid 20px Tahoma;
}
h2{
    font: bolid 14px Tahoma;
}
body{
    text-align:center;
}

#big_wrapper{
    border:1px solid black;
    width:1000px;
    margin:20px auto;
    text-align:left;
}
#top_header{
    background:yellow;
    border:1px solid blue;
    padding:20px;
}
#top_menu{
    background:blue;
    color:white;
}
#top_menu li{
    display:inline-block;
    list-style:none;
    padding:5px;
    font:bold 14px Tahoma;
}
#main_section{
    float:left;
    width:660px;
    margin:30px;  /*720px, 280px left */
}
#side_news{
    float:left;
    width:220px;
    margin:20px 0px;
    padding:30px;
    background:#66CCCC;
}
#the_footer{
    clear:both;
    text-align:center;
    padding:20px;
    border-top:2px solid green;
}
article{
    background:#FFFBCC;
    border: 1px solid red;
    padding:20px;
    margin-bottom:15px;
}
article footer{
    text-align:right;
}

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/08/28/2659481.html

weixin_33915554

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5设计基本网页-basic frameset

效果如图其中HTML部分代码如下：<!doctype html><html lang="en"> <header> <meta charset="utf-8"/> <title>Html5 test website!</title> <link rel...
复制链接

扫一扫