HTML练习(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.22</title>
    <style>

    </style>
</head>
<body>
    <header>
         <h1>头部</h1>
    </header> 
    <nav>
        <ul>
            <li id="home"><a href="#">主页</a></li>
            <li id="about"><a href="#">关于</a></li>
            <li id="contact"><a href="#">联系我们</a></li>
        </ul>
    </nav>
    <section>
        <h2>我的文章</h2>
        <article>
            <p>这是第一篇文章</p>
            <p>这是第二篇文章</p>
            <p>这是第三篇文章</p>
            <p>这是第四篇文章</p>
        </article>
    </section>
    <aside>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JAVASCRIPT</a></li>
        </ul>
    </aside>
    <footer>
        <ul>
            <li><a href="#">版权信息</a></li>
            <li><a href="#">站点地图</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </footer>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.22</title>
    <style>
    body,ul,li,h1,h2{
        margin:0;
        padding:0;
    }
    li{
        list-style-type:none;
    }
    a{
        text-decoration:none;
        color:#fff;
    }
    body{
        margin: 0 auto;
        width:900px;
        background-color: #fff;
    }
    header{
        background:#ccc;
        padding:20px;
    }
    nav{
        float:left;
        width: 900px;
        height: 50px;
        background-color:#999;
        line-height:50px;
    }
    section{
        float:left;
        width: 660px;
        height:260px;
        background-color:#ccc;
    }
    article{
        float:left;
        width: 240px;
        margin:0 0 0 30px;
        padding:30px 0;
    }
    aside{
        float:right;
        width: 240px;
        height: 260px;
        background-color: #aaa;
    }
    </style>
</head>
<body>
    <header>
         <h1>头部</h1>
    </header> 
    <nav>
        <ul>
            <li id="home"><a href="#">主页</a></li>
            <li id="about"><a href="#">关于</a></li>
            <li id="contact"><a href="#">联系我们</a></li>
        </ul>
    </nav>
    <section>
        <h2>我的文章</h2>
        <article>
            <p>这是第一篇文章</p>
            <p>这是第二篇文章</p>
            <p>这是第三篇文章</p>
            <p>这是第四篇文章</p>
        </article>
    </section>
    <aside>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JAVASCRIPT</a></li>
        </ul>
    </aside>
    <footer>
        <ul>
            <li><a href="#">版权信息</a></li>
            <li><a href="#">站点地图</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </footer>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.22</title>
    <style>
    body,ul,li,h1,h2{
        margin:0;
        padding:0;
    }
    li{
        list-style-type:none;
    }
    a{
        text-decoration:none;
        color:#fff;
    }
    body{
        margin: 0 auto;
        width:900px;
        background-color: #fff;
    }
    header{
        background:#ccc;
        padding:20px;
    }
    nav{
        float:left;
        width: 900px;
        height: 50px;
        background-color:#999;
        line-height:50px;
    }
    section{
        float:left;
        width: 660px;
        height:260px;
        background-color:#ccc;
    }
    article{
        float:left;
        width: 240px;
        margin:0 0 0 30px;
        padding:30px 0;
    }
    aside{
        float:right;
        width: 240px;
        height: 260px;
        background-color: #aaa;
    }
    aside a{
        display:block;
        height: 30px;
        line-height:30px;
        margin-left:50px;
        padding:20px;
    }
    footer{
        clear:both;
        background:#999;
        text-align:center;
        padding:20px;
        height:1%;
    }
    footer ul li{
        display:inline;
        margin:0 15px;
    }
    </style>
</head>
<body>
    <header>
         <h1>头部</h1>
    </header> 
    <nav>
        <ul>
            <li id="home"><a href="#">主页</a></li>
            <li id="about"><a href="#">关于</a></li>
            <li id="contact"><a href="#">联系我们</a></li>
        </ul>
    </nav>
    <section>
        <h2>我的文章</h2>
        <article>
            <p>这是第一篇文章</p>
            <p>这是第二篇文章</p>
            <p>这是第三篇文章</p>
            <p>这是第四篇文章</p>
        </article>
    </section>
    <aside>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JAVASCRIPT</a></li>
        </ul>
    </aside>
    <footer>
        <ul>
            <li><a href="#">版权信息</a></li>
            <li><a href="#">站点地图</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </footer>
</body>
</html>
<!DOCTYPE html> <!-- 声明文档类型和版本 -->  
<html lang="en"> <!-- 定义HTML文档的语言为英文 -->  
<head>  
    <meta charset="UTF-8"> <!-- 设置文档字符编码为UTF-8 -->  
    <title>6.22</title> <!-- 设置网页标题 -->  
    <style>  
    /* 重置元素的默认边距和内边距 */  
    body,ul,li,h1,h2{  
        margin:0;  
        padding:0;  
    }  
    /* 去掉列表项前的标记 */  
    li{  
        list-style-type:none;  
    }  
    /* 设置超链接的样式:无下划线,字体颜色为白色 */  
    a{  
        text-decoration:none;  
        color:#fff;  
    }  
    /* 设置body的样式:居中显示,宽度900px,背景色为白色 */  
    body{  
        margin: 0 auto;  
        width:900px;  
        background-color: #fff;  
    }  
    /* 设置header的样式:背景色为灰色,内边距20px */  
    header{  
        background:#ccc;  
        padding:20px;  
    }  
    /* 设置导航栏的样式 */  
    nav{  
        float:left; /* 浮动在左侧 */  
        width: 900px; /* 宽度900px */  
        height: 50px; /* 高度50px */  
        background-color:#999; /* 背景色为深灰色 */  
        line-height:50px; /* 行高50px,使文本垂直居中 */  
    }  
    /* 设置section的样式 */  
    section{  
        float:left; /* 浮动在左侧 */  
        width: 660px; /* 宽度660px */  
        height:260px; /* 高度260px */  
        background-color:#ccc; /* 背景色为灰色 */  
    }  
    /* 设置article的样式 */  
    article{  
        float:left; /* 浮动在左侧 */  
        width: 240px; /* 宽度240px */  
        margin:0 0 0 30px; /* 外边距设置 */  
        padding:30px 0; /* 内边距设置 */  
    }  
    /* 设置aside的样式 */  
    aside{  
        float:right; /* 浮动在右侧 */  
        width: 240px; /* 宽度240px */  
        height: 260px; /* 高度260px */  
        background-color: #aaa; /* 背景色为深灰色 */  
    }  
    /* 设置aside中的超链接样式 */  
    aside a{  
        display:block; /* 以块级元素显示 */  
        height: 30px; /* 高度30px */  
        line-height:30px; /* 行高30px,使文本垂直居中 */  
        margin-left:50px; /* 外边距设置 */  
        padding:20px; /* 内边距设置 */  
    }  
    /* 设置footer的样式 */  
    footer{  
        clear:both; /* 清除浮动 */  
        background:#999; /* 背景色为深灰色 */  
        text-align:center; /* 文本居中 */  
        padding:20px; /* 内边距设置 */  
        height:1%; /* 为了解决IE6下的浮动问题 */  
    }  
    /* 设置footer中的列表项样式 */  
    footer ul li{  
        display:inline; /* 以行内元素显示 */  
        margin:0 15px; /* 外边距设置 */  
    }  
    </style>  
</head>  
<body>  
    <!-- 头部区域 -->  
    <header>  
         <h1>头部</h1> <!-- 头部标题 -->  
    </header>   
    <!-- 导航栏区域 -->  
    <nav>  
        <ul> <!-- 导航链接列表 -->  
            <li id="home"><a href="#">主页</a></li> <!-- 主页链接 -->  
            <li id="about"><a href="#">关于</a></li> <!-- 关于链接 -->  
            <li id="contact"><a href="#">联系我们</a></li> <!-- 联系我们链接 -->  
        </ul>  
    </nav>  
    <!-- 主要内容区域 -->  
    <section>  
        <h2>我的文章</h2> <!-- 文章标题 -->

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值