HTML调用CSS管理、美化div

HTML调用CSS管理、美化div


DATE: 2017-09-21 20:57:14

CSS布局,关键在于HTML文件和CSS文件相对应。在HTML中,对各div的包含关系作层次分明的设计,然后在CSS文件中对样式、字体等式进行设计。
简单的HTML与CSS布局示意

HTML文件

<head>
<title> title </title>
<style type="text/css"> 
<!-- 
@import "./job/xiaoqw_job.css";
--> 
</style>
</head>

<body>
<div class=div_body>
    <div class=div_header> div_header  </div>

    <div class="div_views">
        div_views
        <div class="div_views_post"> div_views_post <?php echo $post ?> </div>
        <div class="div_views_auther"> div_views_auther </div>
        div_views
    </div>

    <div class=div_floot> div_floot <?php echo $copyright ?> </div>
</div>
</body>

CSS文件

    .div_body {
        background-color: darkcyan;
    }

    .div_header    {
        background-color: lightblue;
        font-size: 72px;
        margin-top: 30px;
        padding-left: 30px;
    }

    .div_views {
        background-color: blueviolet;
        margin-top: 10px;
        padding-left: 30px;
        padding-right: 30px;
        font-size: 48;
    }

    .div_views_post {
        background-color: aliceblue;
    }

    .div_views_auther{
        background-color: yellowgreen;
    }

    .div_floot
    {
        font-size:40px;
        background-color: lightblue;
        margin-top: 10px;
        padding-left: 30px;
        padding-right: 30px;
    }
版权声明

弈心博客


本文首发site_name,转载请附上博文链接!