<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <link rel="stylesheet" type="text/css" href="st1.css">
</head>
<body>
<header>头部内容</header>
<aside>侧栏导航</aside>    
<section>主体内容</section>
<footer>底部</footer>
</body>
</html>

/*浮动布局*/

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
    height: 960px;
}
header{
    height: 5%;
    background: rgba(25,25,25,0.25);
    
}

aside{
    width: 30%;
    height: 90%;
    background: orange;
    float: left;
    border: 1px solid green;
    box-sizing:border-box;
}
section{
    width: 70%;
    height: 90%;
    background: rgba(180,90,45,0.6);
    float: left;
}
footer{
    height: 5%;
    background: rgba(60,60,60,0.6);
    clear: left;
}

html5 css练习浮动布局的更多相关文章

  1. CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）

    css之浮动布局 本人博客:查看文章   1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的 ...

  2. CSS之浮动布局及相关问题

    CSS之浮动布局及相关问题   1.什么是浮动:       在我们布局的时候用到的一种技术,能够方便我们进行布局,默认流动布局有不足,让块元素可以并排显示,通过让元素浮动,我们可以使元素在水平上左右 ...

  3. html5 css练习 定位布局

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. html5 css多列布局

    p{    text-indent: 2em;    line-height: 2em;}h4{    -webkit-column-span:all;    background: green;   ...

  5. css浮动布局，浮动原理，清除(闭合)浮动方法

    css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...

  6. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  7. CSS浮动布局与菜单栏设计

    公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...

  8. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  9. css浮动布局

    上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...

随机推荐

  1. Linux中Buffer和Cache的区别

    1. Cache:缓存区,是高速缓存,是位于CPU和主内存之间的容量较小但速度很快的存储器,因为CPU的速度远远高于主内存的速度,CPU从内存中读取数据需等待很长的时间,而  Cache保存着CPU刚 ...

  2. centos7-- sbt的安装使用

    sbt是一款类似于maven的构建工具 安装sbt curl https://bintray.com/sbt/rpm/rpm > bintray-sbt-rpm.repo mv bintray- ...

  3. 什么是Hash?Hash有哪些特性？

    Hash 把任意长度的输入通过散列算法变换成固定长度的输出 Hash的特性: 输入域无穷,输出域有限.例如:有无穷多个(在工程中可以具体到多少个,例如1000)输入参数经过hash函数映射后得到有限的 ...

  4. [LeetCode] Unique Morse Code Words 独特的摩斯码单词

    International Morse Code defines a standard encoding where each letter is mapped to a series of dots ...

  5. 文献阅读方法 & 如何阅读英文文献 - 施一公（转）

    附: 如何看懂英文文献?(好) 看需求,分层次 如何总结和整理学术文献? Mendeley & Everything 如何在pdf文献上做笔记?福晰阅读器 自己感悟: 一篇专业文献通常会有几页 ...

  6. jQuery插件开发的五种形态小结(转)

    关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课.开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多.这里我把我自己总结出来的东西分享出 ...

  7. 107个JS常用方法（持续更新中）

    1.输出语句:document.write(""); 2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个 ...

  8. spring自动注入是单例还是多例？单例如何注入多例？

       单例和多例的区别 :   单例多例需要搞明白这些问题:      1. 什么是单例多例:      2. 如何产生单例多例:      3. 为什么要用单例多例      4. 什么时候用单例, ...

  9. selenium如何操作HTML5的画布canvas上的元素

    话不多少,上图如下,下图红色框内是一个html5的画布,我们要像操作右上角的保存和数据视图的时候是无法公共selenium的普通定位操作到的,那该怎么办呢? 我们先new一个Selenium的acti ...

  10. cve-2018-4878漏洞复现

    CVE-2018-4878Flash 0day漏洞1.漏洞概述2018年2月1号,Adobe官方发布安全通报(APSA18-01),声明Adobe Flash 28.0.0.137及其之前的版本,存在 ...