<!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. cgi表单的处理

    在HTML中,当客户填写了表单,并按下了发送(submit)按钮后,表单的内容被发送 到了服务器端,一般的,这时就需要有一个服务器端脚本来对表单的内容进行一些处理, 或者是把它们保存起来,或者是按内容 ...

  2. [问题] PHP接收Request payload传递过来的参数

    在使用Apidoc的时候,有一个配置参数是 @apiSampleRequest http://localhost/api 在测试时,发现发送的参数是Request payload的,而PHP中使用的A ...

  3. 小学英语课文朗读APP开发笔记(一)：创建Win7虚拟机

    1 缘起 以小米盒子为代表的OTT机顶盒.智能电视的快速普及,快速推动了Android技术在机顶盒.智能电视领域的普及.既然都是用的Android操作系统,那么从技术上来说应该是大同小异的,当然和手机 ...

  4. Android IntentService使用

    因为多数启动服务不必同时处理多个请求(在多线程情景下会很危险),所以使用IntentService类实现服务是很好的选择.本经验将通过继承IntentService输出当前时间教大家如何使用Inten ...

  5. Anddoi 将时间转换为指定时区的时间

    import java.text.Format;import java.text.ParseException;import java.text.SimpleDateFormat;import jav ...

  6. C#数据等待

    1 public bool WaitData() 2 { 3 bool states = false; 4 try 5 { 6 DateTime Get_Time = DateTime.Now; 7 ...

  7. ubuntu系统安装flashplayer

    打开浏览器,输入adobe flashplayer 进入官方网站,下载Linux 32-bit, 简体中文, Firefox,下载.tar.gz包. 然后点击立即下载.下载之后找到解压该文件夹,找到 ...

  8. popen pclose 不等待命令执行完毕

    $handle = popen("start D:\\test.bat", "r"); //exec("start D:\\test.bat" ...

  9. ###使用phpmailer自动邮件提醒

    近期的一个小项目中需要用到邮件自动通知功能,搜了搜,发现phpmailer这个东西大家用的挺多的. 首先去sourceforge下载phpmailer,也可去我的网盘下载,我用的是5.1版本的. 看到 ...

  10. How to debug Custom Action DLL

    在MSI工程中,经常会遇到这样的情况: MSI 工程需要调用DLL(C++)中的一个函数实现某些特殊或者复杂的功能,通常的做法是在Custom Action 中调用该DLL . 那么在安装过程中,该C ...