<!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. eclipse在线安装svn插件

    原文地址:http://www.cnblogs.com/xdp-gacl/p/4354199.html Eclipse在线安装SVN 一.SVN在线安装 下面为在线安装SVN插件.以下是在线安装步骤: ...

  2. C#播放音乐，调用程序

    一:C# 播放音乐 string sound = Application.StartupPath + "/sound/msg.wav"; //Application.Startup ...

  3. npm更换淘宝镜像

    镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在): 1.通过config命令 npm config set registry https://regist ...

  4. Java学习步骤

    我们为什么选择Java 大多数人选择Java可能只是因为听说Java前景好.Java比较好找工作.Java语言在TIOBE排行榜上一直位于前三等等之类的原因,但是Java具体好在哪里,心里却是没有什么 ...

  5. 点击 a 标签触发事件而不跳转页面

    有时候需要让 a 标签像 button 一样,被点击的时候触发事件而不跳转页面. <html> <body> <a id="a1" href=&quo ...

  6. C#3.0 集合

    实现IEnumerable<T>伴随一个迭代: public class MyGenCollection : IEnumerable<int> { int[] data = { ...

  7. 转：EF调用存储过程、函数

    EF调用存储过程.函数 2014-04-02 09:12:20|  分类: ORM框架|举报|字号 订阅          一.ef4.1 codeFirst 修改表结构 增加字段等 EF code ...

  8. HDU 1087 Super Jumping! Jumping! Jumping!（动态规划）

    Super Jumping! Jumping! Jumping! Problem Description Nowadays, a kind of chess game called “Super Ju ...

  9. Codevs 1684 垃圾陷阱

    1684 垃圾陷阱 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 卡门--农夫约翰极其珍视的一条Holsteins奶牛--已经落了 ...

  10. JSTL之迭代标签库

    JSTL之迭代标签库 JSTL的全称是 Java Server Pages Standard Tag Library,翻译过来就是JSP标准标签库,它包含了在开发JSP页面时经常用到的一组标准标签.这 ...