<!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. 命令行界面下的用户和组管理之useradd和passwd命令的使用

    命令行界面下的用户和组的管理之useradd和passwd命令的使用 useradd [-c comment] [-d dir] [-e expire] [-g group] [-G group1,g ...

  2. Struts2的工作流程

    Struts2如何实现MVC Struts2的参数封装: Struts2的运行原理图:

  3. Java序列化接口的作用总结

    一个对象有对应的一些属性,把这个对象保存在硬盘上的过程叫做”持久化”. 把堆内存中的对象的生命周期延长,存入硬盘,做持久化操作.当下次再需要这个对象的时候,我们不用new了,直接从硬盘中读取就可以了. ...

  4. 简单学JAVA之---接口的定义与实现

    为了巩固自己学习的知识,可能会对自己以后所学的知识做一个小结,今天就来一篇接口的定义与实现. 在java中,我们可以通过继承得到另一个类中的方法,但是这个仅仅满足继承一个方法,那有办法可以多个继承不, ...

  5. Linux - 查看系统的版本信息

    在 Linux 中,有多种方法可以查看系统的版本信息. uname 命令 huey@huey-K42JE:~$ uname -a Linux huey-K42JE 3.5.0-43-generic # ...

  6. 创建image对象

    Image是一个抽象列,BufferedImage是Image的实现. Image和BufferedImage的主要作用就是将一副图片加载到内存中. Java将一副图片加载到内存中的方法是: Stri ...

  7. ios Swift 资源池

    Swift入门教程: http://www.cocoachina.com/applenews/devnews/2014/0604/8661.html Swift视频教程: http://www.coc ...

  8. JAVA笛卡尔曲线

    效果图如下: import java.applet.*; import java.awt.*; public class Descartes extends Applet { int AppletWi ...

  9. Poj 1054 The Troublesome Frog / OpenJudge 2812 恼人的青蛙

    1.链接地址: http://poj.org/problem?id=1054 http://bailian.openjudge.cn/practice/2812 2.题目: 总时间限制: 10000m ...

  10. OpenJudge / Poj 1044 Date bugs C++

    链接地址: Poj:http://poj.org/problem?id=1044 OpenJudge:http://bailian.openjudge.cn/practice/1044/ 题目: 总时 ...