float示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px;
padding:0px;
}
#container{
width:650px;
background-color: gray;
color:black;
}
div{
width:100px;
text-align: center;
float:left;
}
#div1{
height:600px;
background-color: red;
}
#div2{
height:200px;
background-color: aqua; }
#div3{
height:400px;
background-color: #ece023;
}
#div4{
height:300px;
background-color: chartreuse;
}
#div5{
height:100px;
background-color: fuchsia;
}
#div6{
height:50px;
background-color: lightgreen;
}
#div7{
height:150px;
background-color: midnightblue;
}
#div8{
height:450px;
background-color: purple;
}
#div9{
height:300px;
background-color: lightgreen;
}
#div10{
width:200px;
height:50px;
background-color: darkred;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div7">div7</div>
<div id="div8">div8</div>
<div id="div9">div9</div>
<div id="div10">div10</div>
</div> </body>
</html>
float示例的更多相关文章
- CSS 解决Float后塌陷问题
当父级元素没有设定高度时候,而子集元素设定float类型时候,此时父级元素不能靠子集元素撑起来,所以就形成了塌陷: 示例分析 **1.Float之前的效果** <!DOCTYPE html> ...
- sql server中常用方法函数
SQL SERVER常用函数 1.DATEADD在向指定日期加上一段时间的基础上,返回新的 datetime 值. (1)语法: DATEADD ( datepart , number, date ) ...
- C++学习笔记（八）：函数重载、函数指针和函数对象
函数重载 函数重载是指在同一作用域内,可以有一组具有相同函数名,不同参数列表的函数,这组函数被称为重载函数.重载函数通常用来命名一组功能相似的函数,这样做减少了函数名的数量,避免了名字空间的污染,对于 ...
- js实现省市区联动
先来看看效果图吧,嘻嘻~~~~~~~~~~~~~~~~~~~· 代码在下面: 示例一: html: <!DOCTYPE html> <html> <head> &l ...
- 前端之CSS内容
一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二.CSS语法 1 ...
- 前端css
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
- python网络进阶篇
并发编程 进程 操作系统的历史 # 手工操作 —— 穿孔卡片 # 程序员将对应于程序和数据的已穿孔的纸带(或卡片)装入输入机,然后启动输入机把程序和数据输入计算机内存,接着通过控制台开关启动程序针对数 ...
- ruby-操作mysql
ruby操作mysql数据库 以centos7.2为实验环境 Table of Contents 使用DBI访问Mysql 使用Mysql2访问Mysql DBI 安装DBI驱动 很多同学在公司是没有 ...
- python之路--前端CSS
一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义了如何显示HTML元素,给HTML设置样式,让他更加美观. 当浏览器读到这个样式表, 他就会按照这个样式来对文档进行 ...
随机推荐
- hdu5952 Counting Cliques 技巧dfs
题意:一个有N个点M条边的图,球其中由S个点构成的团的个数.一个团是一个完全子图. 没有什么好办法,只有暴力深搜,但是这里有一个神奇的操作:将无向图转为有向图:当两个点编号u<v时才有边u-&g ...
- Python全栈开发：模块
模块,用一砣代码实现了某个功能的代码集合. 参考资源:http://www.cnblogs.com/alex3714/articles/5161349.html 类似于函数式编程和面向过程编程,函数式 ...
- 有关阿里云对SaaS行业的思考，看这一篇就够了
过去二十年,随着改革开放的深化,以及中国的人口红利等因素,中国诞生了大批To C的高市值互联网巨头,2C的领域高速发展,而2B领域一直不温不火.近两年来,在C端流量饱和,B端数字化转型来临的背景下,中 ...
- 第十章 Odoo 12开发之后台视图 - 设计用户界面
本文将学习如何为用户创建图形化界面来与图书应用交互.我们将了解不同视图类型和小组件(widgets)之间的差别,以及如何使用它们来提供更优的用户体验. 本文主要内容有: 菜单项 窗口操作(Window ...
- 纯CSS样式写刘海屏效果
1. 效果: 2. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 服务器重启，自动重启httpd
1. 手动重启 cd http ll cd /etc/httpd/ ll service httpd restart 2. 查看服务器内存使用情况 df -h 3. 自动重启 cat /etc/i ...
- 反编译之paktool工具
1.官网配置mac教程https://ibotpeaches.github.io/Apktool/install/ (1)右键选择:链接储存为(命名:apktool,格式:选择所有文件): (2)下载 ...
- CSS中关于多个class样式设置的不同写法
html中: <div class="containerA"> 这是AAAAAAAAAAAAAAAAAAAAAAA样式 <div class="cont ...
- 05-python 学习第五天-简单验证码
通过python 随机数可以制作简单的验证码. 1.0版本来了,这验证码,只有一个码,功能虽然达不到,逻辑还是准确的,目前还不能算是验证码,但是我们会继续完善的. import random # 导入 ...
- 一个WEB网站高并发量的解决方案
一个小型的网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单.随着互联网业务的不断丰富,网站相关的技术经过 ...