HTML&CSS基础-简单布局

顺晟科技

2022-09-13 14:31:33

172

　　　　　　　　　　　　　HTML&CSS基础-简单布局

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

一.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简单布局</title>
        <style type="text/css">
            /*清除默认样式*/
            *{
                margin: 0;
                padding: 0;
            }
        
            /*设置头部div*/
            .header{
                /*设置宽度*/
                width: 1000px;
                /*设置高度*/
                height: 100px;
                /*设置背景颜色*/
                background-color: red;
                /*设置居中*/
                margin: 0 auto;
            }
            
            .content{
                /*设置宽度*/
                width: 1000px;
                /*设置高度*/
                height: 300px;
                /*设置背景颜色*/
                background-color: yellow;
                /*设置居中*/
                margin: 10px auto;
            }
            
            /*设置content中小div的样式*/
            .news{
                width: 200px;
                height: 100%;
                background-color: blue;
                float: left;
            }
            
            .music{
                width: 580px;
                height: 100%;
                background-color: green;
                /*向左浮动*/
                float: left;
                /*设置边距*/
                margin: 0 10px;
            }
            
            .moive{
                width: 200px;
                height: 100%;
                background-color: red;
                float: left;
            }
            
            
            .footer{
                /*设置宽度*/
                width: 1000px;
                /*设置高度*/
                height: 200px;
                /*设置背景颜色*/
                background-color: deeppink;
                /*设置居中*/
                margin: 0 auto;
            }
            
        </style>
    </head>
    <body>
        <!--头部div-->
        <div class="header"></div>
        
        <!--主体内容-->
        <div class="content">
            <div class="news"></div>            
            <div class="music"></div>
            <div class="moive"></div>
        </div>
        
        <!--底部信息div-->
        <div class="footer"></div>
    </body>
</html>

二.浏览器打开以上代码渲染结果

上一篇：精简CSS代码下一篇：html+css一些简单案例：爱心点

网站建设

Css

HTML&CSS基础-简单布局