<!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类

简单的网页布局效果html5+CSS3的更多相关文章

  1. HTML实例之简单的网页布局

    需求: <html> <head> <title>简单的表格网页布局</title> <meta charset="UTF-8" ...

  2. CSS简单的网页布局

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  3. 8.html表格相关的标记9.html表格实战《简单的网页布局》

    <html> <head> <title>第八课标题表格</title> <meta charset="utf-8"> ...

  4. 利用DIV，实现简单的网页布局

    <html lang="en"><head> <meta charset="UTF-8"> <title>GIS ...

  5. 一个简单的网页布局HTML+CSS

    <!doctype html> <html> <head> <meta charset="utf-8"/> <title> ...

  6. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  7. 12款非常精致的免费 HTML5 & CSS3 网站模板

    01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示  下载 02. Folder ...

  8. 2019.4.25 表格表单与HTML5 && CSS3

    目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...

  9. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

随机推荐

  1. case，cast

    UPDATE dbo.Dat_Camera SET Cam_Config='<xml><cam><type>2</type>'+CASE WHEN Ca ...

  2. js实现过滤重复字符和重复数组-javascript技巧

    js实现过滤重复字符 <script type="text/javascript"> <!-- String.prototype.noRepeatStr=func ...

  3. HTML5 乱记

    HTML5 的文档类型声明可以触发所有具备标准模式的浏览器的标准模式,包括那些对 HTML5 一无所知的浏览器,也就是说,可以在任何网页中都使用 HTML5 文档类型声明 <!DOCTYPE h ...

  4. h2database源码浅析：事务、两阶段提交

    Transaction Isolation Transaction isolation is provided for all data manipulation language (DML) sta ...

  5. C#学习笔记5:数据类型与进制转换

    1.C#: 8种整形类型.2种用于科学计算的二进制浮点类型.1种用于金融计算的十进制浮点类型. 2.Decimal是一种特殊的浮点类型,能够存储大数字而无表示错误. 常用于货币计算.在表示的所有十进制 ...

  6. C#学习笔记2：Iframe框架、MD5加密

    1.static void Main()的问题. static void Main(){……//代码}static void Main(string[] args){……//代码}两者的不同点?str ...

  7. [转]如何学好windows c++编程 学习精髓(收集,整理)

    以下是很多VC爱好者的学习经历,希望对大家有所帮助: 我记得我在网上是这么说的:先学win32的SDK,也就是API, 再学MFC,这么一来呢,就先有个基础,MFC是API的封装, 如果API用的熟了 ...

  8. Aix命令大全

    AIX服务器系统命令简介 在AIX操作系统上有很多的命令.这里介绍一些系统级的命令,它将有助于回答一些常见问题.大家以此做参考,并补充修改. 以下命令在AIX 5.1上测试通过. 正文 以下命令在AI ...

  9. java Springmvc ajax上传

    ajax上传方式相对于普通的form上传方式要便捷,在更多的时候都会使用ajax (简单的小示例) 1.要先去下载一个 jquery.ajaxfileupload.js(基于jquery.js上的js ...

  10. CruiseControl.NET : Configuration Preprocessor

    Original link: http://build.sharpdevelop.net/ccnet/doc/CCNET/Configuration%20Preprocessor.html http: ...