<!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. Linux清空内存缓存

    > /proc/sys/vm/drop_caches

  2. 设置apt-get

    1.配置apt-get源 cp /etc/apt/sources.list /etc/apt/sources.listbak #备份原有配置文件 nano /etc/apt/sources.list ...

  3. HTTPS协议学习总结

    目录 一:什么是HTTPS协议?二:客户端与服务端如何建立HTTPS协议连接?三:证书.加密协议.信息摘要.签名算法概念解释与关系梳理四:低版本操作系统作为客户端发送HTTPS失败分析五:参考资料   ...

  4. (转)战斗bug技巧全攻略

    原文地址:http://www.cnblogs.com/manuosex/p/3736077.html 程序员不是有一幅这样的对联吗 上联:一个项目两部电脑三餐盒饭只为四千工资搞得五脏俱损六神无主仍然 ...

  5. hadoop vs spark

    http://www.zhihu.com/question/26568496#answer-12035815 Hadoop首先看一下Hadoop解决了什么问题,Hadoop就是解决了大数据(大到一台计 ...

  6. ASP获取当前页面带参数的网址（URL地址）的方法

    '获取当前Url参数的函数 Function GetUrl() Dim ScriptAddress,Servername,qs ScriptAddress = CStr(Request.ServerV ...

  7. ACM——直接插入法排序

    NOJ——1062 直接插入排序 时间限制(普通/Java):1000MS/3000MS          运行内存限制:65536KByte 总提交:446            测试通过:212 ...

  8. Ext.Net 布局

    Ext.Net 布局 Panel布局类有10种:容器布局,自适应布局,折叠布局,卡片式布局,锚点布局,绝对位置布局,表单布局,列布局,表格布局,边框布局       1,Ext.layout.Cont ...

  9. 06_XML的写入_dom4j添加、删除、修改Xml文件内容

    [工程截图] [person.xml]准备一个xml文件 <?xml version="1.0" encoding="UTF-8"?> <st ...

  10. 桶排序(BucketSort)

    1 桶排序核心思想是 根据数据规模n划分 m个相同大小的区间 (每个区间为一个桶,桶可理解为容器) 2 每个桶存储区间内的元素(区间为半开区间 例如[0,10) 或者 [200,300) ) 3 将n ...