简单的网页布局效果html5+CSS3

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <meta charset="UTF-8"> 

    <title>layout</title> 

    <style> 

        *{ 
            margin: 0; 
            padding: 0; } 

        .container{ 
            padding: 15px; 
        } 
        .header{ 
            position: relative; 
            padding: 10px; 
            margin-bottom: 10px; 
            border: solid 2px #4CAF50; 
        } 

        .log{ 
            width: 100px; 
            height: 100px; 
            float: left; 
            border: solid 2px #E91E63; 
        } 

        .user{ 
            line-height: 1.5em; 
            width: 5em; 
            border: solid 2px #E91E63; 
            position: absolute; 
            bottom: 10px; 
            right: 10px; 
        } 

        .asider{ 
            width: 200px; 
            height: 50px; 
            border: solid 2px #E91E63; 
            background-color: #4CAF50; 
            float: right; 
        } 

        .content{ 
            margin-right: 210px; 
            height: 300px; 
            border: solid 2px #E91E63; 
        } 

        .clear:after{ 
            display: block;
            content: "."; 
            height: 0; 
            visibility: hidden;
            clear: both; 
        } 

        .footer{ 
            margin-top: 20px; 
            background-color: #E0E0E0;
            text-align:center;
        } 

    </style> 

</head> 

<body> 

    <div class="container"> 
        <div class="header clear"> 
            <div class="log">logo</div> 
            <div class="user">用户名</div>  
        </div> 
        
        <div> 
            <div class="asider">asider,宽度200px</div>
            <div class="content">content，宽度自适应</div> 
        </div> 
        
        <div class="footer">footer</div> 
    </div> 

</body> 

</html>

效果截图:

尤其注意CSS代码中的clear类

相关阅读:
su和sudo命令详解
JS线程Web worker
Navicat 批处理自动备份数据库
MySql【Error笔记】
vue入门
动态库
环境变量
cmake_learn
自动编译
网络编程

原文地址：https://www.cnblogs.com/audi-car/p/4748109.html