<!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. Python matplotlib图片转化成矢量图并裁剪

    Python目前可以生成的图的格式是:eps, jpeg, jpg, pdf, pgf, png, ps, raw, rgba, svg, svgz, tif, tiff 在写论文时候我一般生成png ...

  2. 【JAVA基础】一：聊聊笔试常见到的 “==、equal” 比较是否相等的内在差别

    开始本文之前,先让我们记住一个口诀(这个口诀只针对基础的类比如String.Integer等,如果是自定义的类,需要看equal的具体实现): equal比较其值,== 比较地址 这两天在走查代码的时 ...

  3. 【转】Spring总结以及在面试中的一些问题

    [转]Spring总结以及在面试中的一些问题. 1.谈谈你对spring IOC和DI的理解,它们有什么区别? IoC Inverse of Control 反转控制的概念,就是将原本在程序中手动创建 ...

  4. 网易im即时通讯 移动端嵌入web

    近期产品需求要在wapapp 内部嵌入网易im聊天客服功能,内部需求不是很多,不过还是第一次接触,有点抓耳,,, 希望召集更多大神交流878269930 增加用户默认发送自定义消息功能:

  5. Python 之map、filter、reduce

    MAP 1.Python中的map().filter().reduce() 这三个是应用于序列的内置函数,这个序列包括list.tuple.str. 格式: 1>map(func,swq1[,s ...

  6. Gparted Live分区调整

    由于年少无知,在安装ubuntu系统的时候,以为/temp是软件包安装时解压的缓冲,所以给/temp留了10G,而以为/var只是记录一些log而已,因此把仅存的1G分配给了它.随后在安装软件时出现“ ...

  7. Unity进阶----AssetBundle_02(加载依赖关系及网络资源)(2018/10/31)

    网络资源加载: string path ="file://"+ Application.streamingAssetsPath + "\\windows\\123&quo ...

  8. 第三周学习java第四章学习总结及体会！

    第三周java 2第四章的学习总结: 一.主要内容(类与对象): 1.类: 2.构造方法与对象的创建: 3.类与程序的基本结构: 4.参数传值: 5.对象的组合: 6.实例成员与类成员: 7.方法重载 ...

  9. MySql 主从复制 mysql-proxy实现读写分离

    1.安装和配置Docker 服务器版本阿里云CentOS7.4 docker版本18.06.0-ce docker安装步骤https://docs.docker.com/install/linux/d ...

  10. Python3.6 提示 ModuleNotFoundError: No module named '_ssl' 模块问题

    国内 163 yum 源挺好用 (中科大的也不错) http://mirrors.163.com/.help/CentOS6-Base-163.repo yum install openssl-dev ...