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浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
随机推荐
- 关于ajaxFileUpload图片上传，success和error都触发的情况
最近做到项目使用JQuery的插件ajaxFileUpload~~~ 遇到了非常领人匪夷所思的事情,当图片上传成功之后呢(success),它的error事件也被触发了,情况就是: 后端数据正确返回 ...
- HTML5_提供的 新功能_less 编译_
HTML5_提供的 新功能 class 操作 ele.classList(注意: 高版本的 IE 都不支持) 获取 <div id="ele" class="... ...
- (50)Wangdao.com第七天_JavaScript 发展与简介
一个完整的JavaScript 应该由以下三部分组成: ECMAScript DOM,全称Browser Object Model,即浏览器对象模型,主要处理浏览器窗口和框架 BOM,全称Docume ...
- 黑盒测试实践——day04
一.任务进展情况 通过昨天的选择和搜集资料,目前已成功安装好了testWriter,目前正在选择合适的web系统,进行测试. 二.存在的问题 安装TestWriter之前,需要安装SQLServre2 ...
- Spark 实现wordcount
配置完spark之后,使用spark实现wordcount,这一部分完全参考<深入理解Spark:核心思想与源码分析> 依然使用hadoop wordcountTest的那几个txt文件 ...
- 手写AVL 树（下）
上一篇 手写AVL树上实现了AVL树的插入和查询 上代码: 头文件:AVL.h #include <iostream> template<typename T1,typename T ...
- iOS拼音搜索，拼音首字母搜索
扩展了一下 搜索框,能够实现拼音和首字母模糊搜索 基本搜索 上一篇文章 #import "NSString+utility.h" @interface WJWPinyinSearc ...
- redis加固
一.背景描述 1.漏洞描述 Redis 因配置不当存在未授权访问漏洞,可以被攻击者恶意利用. 在特定条件下,如果 Redis 以 root 身份运行,黑客可以给 root 账号写入 SSH 公钥文件, ...
- 你应当如何学习C++以及编程（细节是必要的，但不是重要的，把时间用在集中精力去解决问题，而不是学习新技术，那样练不成高手。在实践中提高才是最重要的。最最重要的内功还是长期学习所磨练出来的自学能力）good
最近在学习Qt但由于没有C++的基础,感觉学的很吃力.看到pongba的这篇文章感觉不错就弄过来了, 原文地址:http://blog.csdn.net/qter_wd007/article/deta ...
- 洛谷P4456 交错序列[CQOI2018] dp+数论
正解:dp 解题报告: 传送门 首先可以先拆下这个贡献式,为了方便之后设状态什么的,把式子转成和ny有关,就成了 \(\sum \left ( n-i \right )^{a}\cdot i^{b}\ ...