HTML练习（1）

最新推荐文章于 2024-07-25 11:26:35 发布

超越～and me

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量214

点赞数 3

分类专栏： html基础文章标签： html 前端

本文链接：https://blog.csdn.net/2301_78986604/article/details/139886339

版权

html基础专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!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> <!-- 文章标题 -->