html5 css练习浮动布局
<!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练习浮动布局的更多相关文章
- CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）
css之浮动布局 本人博客:查看文章 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的 ...
- CSS之浮动布局及相关问题
CSS之浮动布局及相关问题 1.什么是浮动: 在我们布局的时候用到的一种技术,能够方便我们进行布局,默认流动布局有不足,让块元素可以并排显示,通过让元素浮动,我们可以使元素在水平上左右 ...
- html5 css练习 定位布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- html5 css多列布局
p{ text-indent: 2em; line-height: 2em;}h4{ -webkit-column-span:all; background: green; ...
- css浮动布局，浮动原理，清除(闭合)浮动方法
css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS浮动布局与菜单栏设计
公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...
- 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
- css浮动布局
上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
随机推荐
- VMware和Centos安装使用
下载centos系统ISO镜像 要安装centos系统,就必须得有centos系统软件安装程序,可以通过浏览器访问centos官网http://www.centos.org,然后找到Downloads ...
- line-height:1.5和line-height:150%的区别
1. 给你个数,孩子自己算吧 line-height:1.5 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height ...
- BZOJ4665: 小w的喜糖 DP
对于这道题,首先每个人的位置并不影响结果 所以我们可以将相同颜色糖果的人放在一块处理 设 $f_{i,j}$ 表示处理到第 $i$ 种糖果至少有 $j$ 人的糖果和原先的类型相同 枚举当前种类中不满足 ...
- (72)Wangdao.com第十二天_JavaScript 错误处理机制
1. Error 实例对象 JavaScript 解析或运行时,一旦发生错误,引擎就会抛出一个错误对象. JavaScript 原生提供Error构造函数,所有抛出的错误都是这个构造函数的实例. va ...
- ECMA Script 6_字符串_扩展_字符 是4字节还是2字节？_模板字符串
ES6 字符串扩展 ES6 加强了对 Unicode 的支持,并且扩展了字符串对象 字符 的 Unicode 表示法 允许采用 \uxxxx 形式表示一个字符, 其中 xxxx 表示字符的 Unico ...
- jdk1.8的环境下打包成jdk1.6
第一步: 选中项目 ------->properties 第二部:(修改java build path和java conpiler) 第三部:需要打包成jdk6的jar包,就改成jre6. 注意 ...
- OO第一单元总结
OO第一单元作业总结 一.前言 开学四周,不知不觉已经做了三次OO作业.事实上,每一次作业对我来说都是很大的挑战,需要花费大量的时间和精力来学习. 虽然学得很艰苦,但最后还是连滚带爬地完成了.(好惨一 ...
- 如何为Windows XP / Windows7-32bit / Windows7-64bit安装capicom.dll
原文: http://164.100.181.16/ssdgsap/RegisterDLL.htm 1.根据操作系统的要求下载相应的文件夹安装capicom.dll for Windows XP的步骤 ...
- python中关于汉诺塔问题和使用turtle库实现其搬运过程
一.汉诺塔问题 汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘从下面开始按 ...
- WangEditor+thinkphp5【真实可用+原创】
今天公司要编辑文章,一开始准备用ueditor,但是到了linux环境下一直不行,所以最终放弃.改用另外一个编辑器WangEditor.更加轻量级. 遇到最大的问题是 一个是图片上传,一个是div中的 ...