html学习总结（2）_2、在html的学习过程中,你学到了哪些东西?-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35566468/article/details/90446555

博客围绕河马牙医网页展开，包含网页练手和布局两部分内容，每部分都展示了效果图并给出了代码，属于前端网页开发相关实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.网页练手--河马牙医

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="牙疼怎么办，智齿怎么办，拔牙多少钱，
    矫正多少钱，九院医生，北大口腔，瑞尔口腔，拜耳口腔">
    <meta name="description" content="有牙齿问题，找河马牙医，儿童口腔，全国儿童口腔在线咨询，
    牙疼怎么办，拔牙多少钱，矫正多少钱，种植牙，有牙齿问题">
    <meta name="renderer" content="webkit"/>
    <title>河马牙医-口腔健康服务平台</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <style>
        body,section{
            margin:0;
        }
        section img{
            width: 100%;
            vertical-align: top;
        }
        /*头部*/
        #header{
            height: 80px;
            /*background-color: yellow;*/
        }
        /*头部版型*/
        #header .header-center{
            width: 1200px;
            height: 80px;
            /*background-color: red;*/
            margin: 0 auto;
        }
        /*头部的左边*/
        .header-center-left{
            float: left;
            /*background-color: purple;*/
            height: 56px;
            margin-top: 12px;
        }
        /*头部的右边*/
        .header-center-right{
            float: right;
            /*background-color: deepskyblue;*/
            width: 450px;
            height: 80px;
            line-height: 80px;
        }
        .header-center-right a{
            margin-right: 30px;
            /*去除下划线*/
            text-decoration: none;
            color: #409ab6;
            font-size: 18px;
        }
        .header-center-right a span{
            vertical-align: middle;
        }
        .header-center-right a img{
            vertical-align: middle;
        }
        #footer{
            height: 30px;
            background-color: #346699;
        }
        #footer .footer-center{
            width: 1260px;
            height: 30px;
            line-height: 30px;
            /*background-color: red;*/
            margin: 0 auto;
        }
        #footer .footer-center p{
              margin-top: 0;
            text-align: right;
          }
        #footer .footer-center p span{
            margin-right: 5px;
            font-size: 12px;
            color: white;
        }
    </style>
</head>
<body>
    <!--头部-->
    <header id="header">
        <div class="header-center">
            <!--头部左边-->
            <div class="header-center-left">
                <img src="images/hmlogo.png" alt="">
            </div>
            <!--头部右边-->
            <div class="header-center-right">
                <a href="http://www.baidu.com">
                    <img src="images/home_icon.png" alt="">
                    <span>首页</span>
                </a>
                <a href="#">
                    <img src="images/about_icon.png" alt="">
                    <span>关于</span>
                </a>
                <a href="#">
                    <img src="images/contact_icon.png" alt="">
                    <span>联系我们</span>
                </a>
            </div>
        </div>
    </header>
    <!--中间内容-->
    <article>
        <section>
            <img src="images/home1.png">
        </section>
        <section >
            <img src="images/home2.png">
        </section>
        <section >
            <img src="images/home3.png">
        </section>
        <section >
            <img src="images/home4.png">
        </section>
        <section>
            <img src="images/home4.png">
        </section>
        <section >
            <img src="images/home5.png">
        </section>
    </article>
    <!--尾部-->
    <footer id="footer">
        <div class="footer-center">
            <p>
                <span>上海康牙网络科技有限公司</span>
                <span>沪ICP备15009258号</span>
            </p>
        </div>
    </footer>
</body>
</html>

2.河马牙医布局

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="牙疼怎么办，智齿怎么办，拔牙多少钱，
    矫正多少钱，九院医生，北大口腔，瑞尔口腔，拜耳口腔">
    <meta name="description" content="有牙齿问题，找河马牙医，儿童口腔，全国儿童口腔在线咨询，
    牙疼怎么办，拔牙多少钱，矫正多少钱，种植牙，有牙齿问题">
    <meta name="renderer" content="webkit"/>
    <title>河马牙医-口腔健康服务平台</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body style="margin:0">
    <!--头部-->
    <header style="height: 80px;background-color: yellow">头部</header>
    <!--中间内容-->
    <article>
        <section style="height: 800px;background-color: purple">内容1</section>
        <section style="height: 604px;background-color: green">内容2</section>
        <section style="height: 604px;background-color: red">内容3</section>
        <section style="height: 597px;background-color: gainsboro">内容4</section>
        <section style="height: 604px;background-color: green">内容5</section>
        <section style="height: 130px;background-color: deepskyblue">内容6</section>
    </article>
    <!--尾部-->
    <footer style="height: 130px;background-color: yellow">尾部</footer>
</body>
</html>