1. <!DOCTYPE html> 
  2.  
  3. <html lang="en"> 
  4.  
  5. <head> 
  6.  
  7.     <meta charset="UTF-8"> 
  8.  
  9.     <title>layout</title> 
  10.  
  11.     <style> 
  12.  
  13.         *{
  14.             margin: 0;
  15.             padding: 0; } 
  16.  
  17.         .container{
  18.             padding: 15px;
  19.         }
  20.         .header{
  21.             position: relative;
  22.             padding: 10px;
  23.             margin-bottom: 10px;
  24.             border: solid 2px #4CAF50;
  25.         } 
  26.  
  27.         .log{
  28.             width: 100px;
  29.             height: 100px;
  30.             float: left;
  31.             border: solid 2px #E91E63;
  32.         } 
  33.  
  34.         .user{
  35.             line-height: 1.5em;
  36.             width: 5em;
  37.             border: solid 2px #E91E63;
  38.             position: absolute;
  39.             bottom: 10px;
  40.             right: 10px;
  41.         } 
  42.  
  43.         .asider{
  44.             width: 200px;
  45.             height: 50px;
  46.             border: solid 2px #E91E63;
  47.             background-color: #4CAF50;
  48.             float: right;
  49.         } 
  50.  
  51.         .content{
  52.             margin-right: 210px;
  53.             height: 300px;
  54.             border: solid 2px #E91E63;
  55.         } 
  56.  
  57.         .clear:after{
  58.             display: block;
  59.             content: ".";
  60.             height: 0;
  61.             visibility: hidden;
  62.             clear: both;
  63.         } 
  64.  
  65.         .footer{
  66.             margin-top: 20px;
  67.             background-color: #E0E0E0;
  68.             text-align:center;
  69.         } 
  70.  
  71.     </style> 
  72.  
  73. </head> 
  74.  
  75. <body> 
  76.  
  77.     <div class="container">
  78.         <div class="header clear">
  79.             <div class="log">logo</div>
  80.             <div class="user">用户名</div>
  81.         </div> 
  82.  
  83.         <div>
  84.             <div class="asider">asider,宽度200px</div>
  85.             <div class="content">content，宽度自适应</div>
  86.         </div> 
  87.  
  88.         <div class="footer">footer</div>
  89.     </div> 
  90.  
  91. </body> 
  92.  
  93. </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. 介绍一些适用于 Web 开发者的 Atom 编辑器插件

    Atom 的社区很繁荣,有着丰富的扩展/插件(packages).安装 Atom 的 Package 非常简单,可以在编辑器的偏好设置里面安装,也可以在命令行中使用 apm 命令来安装. 在介绍适用于 ...

  2. Servlet原理

    Servlet主要用来处理客户端请求并将其结果发送到客户端,下面我们来详细看一下Servlet. 一.Servlet的生命周期 Servlet的生命周期是由Servlet的容器来控制的(Tomcat ...

  3. MVVM - 基础介绍

    MVVM模式:把页面UI和后台逻辑分开,这样做的好处是能使你的程序更容易测试,维护和改进.

  4. 多个DIV让float:left属性，最后一个DIV填满剩余的部分

    <DIV style="border:1px solid red; overflow:hidden;zoom:1;">      <DIV style='floa ...

  5. hadoop-2.5安装与配置

    安装之前准备4台机器:bluejoe0,bluejoe4,bluejoe5,bluejoe9 bluejoe0作为master,bluejoe4,5,9作为slave bluejoe0作为nameno ...

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

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

  7. java多线程总结四：volatile、synchronized示例

    1.synchronized保证同步 先看一个生成偶数的类 <span style="font-size:16px;">package demo.thread; /** ...

  8. 备份BinLog并压缩 全备份

    Rem Backup Mysql Binlog Rem Backup Yesterday and RAR Rem Backup every day 00:01 begin backup yesterd ...

  9. html-----018----HTML Web Server/HTML URL 字符编码

    HTML Web Server 如果希望向世界发布您的网站,那么您必须把它存放在 web 服务器上. 托管自己的网站 在自己的服务器上托管网站始终是一个选项.有几点需要考虑: 硬件支出 如果要运行“真 ...

  10. ios - objective-c runtime之随笔

    今天身体不舒服,还顶着写这篇博客. 举个例子,我们之前在写objective-c代码时,经常用到id这个关键字.那 id 究竟是什么?在objective-c的运行时,这样描述的,它其实是一个结构体( ...