HTML-CSS的相关内容

junlingshiwo

于 2020-02-19 22:55:26 发布

阅读量88

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_45722135/article/details/104400234

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

用河马牙医网页的制作来介绍下相关内容：

河马牙医可以分为三个部分：

（1）了解下它的中间内容。中间有六个板块，就将其六个板块图片的大小垂直对齐，让它们的宽度都保持100%，

 body section{
  margin:0;
} 

section  img{
width:100%
vertical-align:top
}

此代码就是把中间内容板块连接起来

这个为效果图，可以清晰看见两图片无间隙，并且垂直对齐。

（2）了解下头部内容。头部使用CSS中的浮动'标签居中，外边距达到顶部，

此代码是对头部内容的设计：

#header {
          height:80px；
}

.header-center-left{
          float:left;
          height:56px;
          margin-top:12px;
}

.header-center-right{
         float:right;
         line-height:80px;
         width:450px;
         height:80px;
}

.header-center-right a{
            margin-right:30px ;

            /*删除下划线*/
            text-decoration: none;
            color: skyblue;
            font-size: 18px;
  }

        .header-center-right span{
            vertical-align: middle;
  }

        .header-center-right img {
            vertical-align: middle;
   }

（3）了解尾部内容。用块级标签分了四个内容，也使用了水平居中，文字右对齐，

 #footer .footer-center{
            width: 1200px;
            height: 30px;
            line-height: 30px;
            /*background-color: red;*/
            /*水平居中*/
            margin:0 auto;
        }
        #footer .footer-center p{
            margin-top: 0;
            /*文字右对齐*/
            text-align: right;
        }
        #footer .footer-center span{
            font-size: 12px;
            margin-right: 5px;
            color: aliceblue;
        }

代码看出所采用的CSS中的标签，

河马牙医的三个部分所用都是CSS的基础内容，有浮动元素的使用，也有标签居中，水平居中中块级标签文字居中的方式（text-align:center）。。。。。。。我将以完整版的网页代码来观赏：

<!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: orange;*/
        }
        /*头部版心*/
        #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: darkgoldenrod;*/
            width: 450px;
            height: 80px;
            line-height: 80px;
        }
        .header-center-right a{
            margin-right:30px ;

            /*删除下划线*/
            text-decoration: none;
            color: skyblue;
            font-size: 18px;
        }

        .header-center-right span{
            vertical-align: middle;
        }

        .header-center-right img {
            vertical-align: middle;
        }

        #footer {
            height: 30px;
            background-color: #346699;



        }
        #footer .footer-center{
            width: 1200px;
            height: 30px;
            line-height: 30px;
            /*background-color: red;*/
            /*水平居中*/
            margin:0 auto;
        }
        #footer .footer-center p{
            margin-top: 0;
            /*文字右对齐*/
            text-align: right;
        }
        #footer .footer-center span{
            font-size: 12px;
            margin-right: 5px;
            color: aliceblue;
        }






    </style>

</head>
<body style="margin: 0">
 <!--<头部>-->
<header id="header"  >
    <div class="header-center">
        <!--头部左边-->
        <div class="header-center-left">
            <img src="images/hmlogo.jpg" alt="">
        </div>
        <!--头部右边-->
        <div class="header-center-right">
            <a href="#" >
                <img src="images/home_icon.png">
            <span>首页</span>
            </a>
            <a href="#" >
                <img src="images/about_icon.png">
                <span>关于我们</span>
            </a>
            <a href="#" >
            <img src="images/contact_icon.png">
            <span>联系我们</span>
        </a>
        </div>
    </div>
</header>
<!--<中间内容>-->
<article>
    <section>
        <img src="images/home1.png" alt="">
    </section>
    <section>
        <img src="images/home2.png" alt="" >
    </section>
    <section >
        <img src="images/home3.png" alt="">
    </section>
    <section >
        <img src="images/home4.png" alt="" >
    </section>
    <section>
        <img src="images/home5.png" alt="" >
    </section>
    <section>
        <img src="images/home6.png" alt="">
    </section>


    <!--尾部-->
<footer id="footer">
    <div class="footer-center">
        <p>
            <span>2016</span>
            <span>上海康牙网络有限公司</span>
            <span>15990333号</span>
            <span>服务热线：400-040-0423</span>


        </p>

    </div>

</footer>


</article>






</body>
</html>

junlingshiwo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-CSS的相关内容

用河马牙医网页的制作来介绍下相关内容：河马牙医可以分为三个部分：（1）了解下它的中间内容。中间有六个板块，就将其六个板块图片的大小垂直对齐，让它们的宽度都保持100%， body section{ margin:0;} section img{width:100%vertical-align:top}此代码就是把中间内容板块连接起来这个为效果图，可...
复制链接

扫一扫