HTML学习笔记 css定位浮动及瀑布流案例 第十三节 （原创） 参考使用表
#fd {
width: 100px;
height: 150px;
background-color: forestgreen;
float: left;
}
#sd {
width: 150px;
height: 100px;
background-color: coral;
float: left;
}
#td {
width: 100px;
height: 100px;
background-color: chartreuse;
float: left;
}
#container {
width: 300px;
height: 500px;
background-color: beige;
}
#text {
clear: both;
/*去掉浮动*/
}
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
#div1 {
width: 100%;
height: auto;
margin: 20px auto;
}
ul{
width: 250px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" href="tzy.css"type="text/css">
</head>
<body>
<div id="container">
<div id="fd">fd</div>
<div id="sd">sd</div>
<div id="td">td</div>
hello word
helloword
<div id="text">text</div>
</div>
<!--瀑布流图片大小要一样-->
<div id="div1">
<ul>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="1"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="2"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="3"></li>
</ul>
<ul>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="4"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="5"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="6"></li>
</ul>
<ul>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="7"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="8"></li>
<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="9"></li>
</ul>
</div>
</body>
</html>
HTML学习笔记 css定位浮动及瀑布流案例 第十三节 （原创） 参考使用表的更多相关文章
- [CSS3] 学习笔记-CSS定位
页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...
- HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- amazeui学习笔记--css（布局相关1）--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css（常用组件6）--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- Windows phone 8 学习笔记(8) 定位地图导航
原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模 ...
- amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css（基本样式2）--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
随机推荐
- ThinkPHP中，display和assign用法详解
thinkphp 模板显示display和assign的用法 $this->assign('name',$value); //在 Action 类里面使用 assign 方法对模板变量赋值,无论 ...
- java集合系列——Map介绍（七）
一.Map概述 0.前言 首先介绍Map集合,因为Set的实现类都是基于Map来实现的(如,HashSet是通过HashMap实现的,TreeSet是通过TreeMap实现的). 1:介绍 将键映射到 ...
- /MD、/MT、/LD（ 使用 多线程版本 运行时库的C runtime library)
/MD./MT./LD(使用运行时库)(微软官网解释) Visual C++ 编译器选项 /MD./ML./MT./LD 区别 指定与你项目连接的运行期库 /MT多线程应用程序 /Mtd多线程应用程序 ...
- TETeLasr Cutting System 开机回零问题
TETeLasr Cutting System 开机回零问题 :打开 "轴信息" :打开 加工参数-->机器参数-->脉冲当量: X轴==4000 Y轴== ...
- [Sdoi2010]星际竞速
个人对山东省选已经十分无语了,做了三道题,都TM是费用流,这山东省选是要干什么,2009--2011连续三年,只要会费用流,然后建个边,跑一跑就过了. 10 年一度的银河系赛车大赛又要开始了.作为全银 ...
- Windows+Apache2.4.10+PHP7.0+MySQL5.6.21安装
一.安装包下载 apache2.4.10 http://www.apachelounge.com/download/win64/ PHP7.0.7 http://windows.php.net/dow ...
- java递归的应用和实例
使用计算机计算组合数: 1.使用组合数公式利用n!来计算 设计思想 (1)首先解决求n!的函数 (2)再结合组合数公式,求组合数 程序流程图 源程序代码 package Zuote; import j ...
- ASP.Net MVC 布局页 模板页 使用方法详细说明
一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合 ...
- HelloWorld改编，仿bilibili手机端（一）——侧滑菜单界面布局
讲解目录: 1.要实现的效果图展示及详细分析HelloWorld项目的xml布局文件(基于navigation drawer activity) 2.简单修改menu及menu相关详解 ...
- 【转】python time模块详解
python 的内嵌time模板翻译及说明 一.简介 time模块提供各种操作时间的函数 说明:一般有两种表示时间的方式: 第一种是时间戳的方式(相对于1970.1.1 00:00:0 ...