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浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
随机推荐
- OI/ACM 刷题网站 人气OJ简介
SPOJ简介 SPOJ是波兰最为出色的Online Judge之一,界面和谐,题目类型也非常丰富,适合有一定基础的选手练习,对高手而言也是个提高能力的良好平台. SPOJ题目分类:class ...
- 小甲鱼Python第二十讲课后习题---021
笔记: 1.lambda表达式的作用: 1)Python写一些执行脚本时,使用lambda就可以省下定义函数的过程,比如说我们只是需要写一个简单的脚本来管理服务器时间,我们就不需要专门定义一个函数然后 ...
- JS_高程8.BOM window对象（1）
1.全局作用域 var age = 14; window.coloer = "pink"; console.log(delete window.age);//false 使用var ...
- 输入、输出与Mad Libs 游戏
name1=input('请输入一个名字:') name2=input('再输入一个名字:') time1=input('请输入一段时间:') print('{},是傻子,{},{}找不到小栗旬'.f ...
- 19 ArcGIS Server 备份与恢复
一.备份过程 1.找到已经安装的arcgis server安装目录,并找到备份工具: 2.快捷键win + R启动cmd,将备份工具文件拖入cmd窗口,enter 3. 通过backup.py脚本进行 ...
- 更为复杂C程序的运行时结构
运行环境 win 10 企业版 1809 17763.194,MinGW V3.14 32位,Bundled V3.13.2,Bundled GDB V8.2. 在C语言中,栈的方向是从高地址向低地址 ...
- Spring Session event事件分析
1. org.apache.catalina.session.StandardSession 这是servlet-api jar包中的一个类.是session接口的标准实现.当session创建的时候 ...
- Word图片、表格添加题注
1.首先为图片.表格添加题注: 2.通过交叉引用,如图**和图片.表的编号相关联起来:
- LeetCode 171 Excel Sheet Column Number 解题报告
题目要求 Given a column title as appear in an Excel sheet, return its corresponding column number. For e ...
- GRUB 的配置文件解析
原文:http://c.biancheng.net/view/1032.html 本节,我们就来看看 GRUB 的配置文件 /boot/gmb/grub.conf 中到底写了什么.命令如下: [roo ...