<!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. java 多态 向上 向下转型

    向上转型 将子类对象当作父类对象     子类对象------>父类对象 先实例化子类 父类 父类对象 = 子类实例 package test2; class Father{ public vo ...

  2. Java 标记接口

    没有声明或定义方法的接口称为标记接口(Mark Interface).某个类实现该接口时不需要重写方法,表明具有接口标记的功能.Java中常用的3个标记接口如下: 1 Serializable jav ...

  3. 判断点在不在多边形范围内c#

    C# 计算地图上某个坐标点的是否在多边形内   这个方法引用自群友的博客 https://www.xiaofengyu.com/?p=143 使用百度地图的时候,常常会用到判断一个点是否在一个多边形的 ...

  4. 浅谈AngularJS中的指令和指令间的相互通信

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  5. vue学习：安装及创建项目

    1.先安装npm 参考链接:https://www.cnblogs.com/Hao-Killer/p/7235398.html 查看npm版本:在终端输入:npm -v 2.在安装vue # 安装vu ...

  6. BOM 浏览器对象模型_Storage 接口 - window.sessionStorage - window.localStorage

    Storage 接口 用于脚本在浏览器保存数据. 保存的数据都以“键值对”的形式存在.也就是说,每一项数据都有一个键名和对应的值. 所有的数据都是以文本格式保存 受同域限制 ---- 某个网页存入的数 ...

  7. js 设计模式之观察者模式

    观察者模式 又被称为“发布-订阅”模式,目的是解决主题对象和观察者之间功能的耦合性.发布者和订阅者之间是互不干扰的,没有联系的,通过观察者,当做中介,将二者联系起来. 例子:以学生和老师之间的为例 1 ...

  8. 逆向工程-真码保存在系统文件破解QQ游戏对对碰助手

    1)注册栏中输入任意值测试 1.2)记录弹出的关键字对话框 2.1)发送至PEID进行查壳 2.2)发现无壳 2.3)将软件载入OllyDBG程序 2.4)在反汇编栏下右键选择中文搜索引擎->智 ...

  9. 一个FORK的面试题（转）

    https://coolshell.cn/articles/7965.html https://coolshell.cn/articles/945.html

  10. 腾讯云“智能+互联网TechDay”：揭秘智慧出行核心技术与创新实践

    现如今,地面交通出行与大家的生活息息相关.在当前城市道路日益复杂和拥挤的情况下,如何保证交通出行的安全和便捷相信是每个人以及众多专家.科研工作者重点关注的问题. “智慧交通”系统是解决交通发展瓶颈的有 ...