经过两天的H5学习之后，做了一下ｆｌｏａｔ属性的练习，要做出来的效果为：

下面为代码部分，所用到的知识不多，不过才现在刚开始，以后要学的东西还有很多，大家继续加油！

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>float练习</title>

	<style>

	.all{

		width: 620px;

		text-align: center;

		border:1px solid black;

		overflow: hidden;

	}

	.all .head{

		border:1px solid red;

		width: 122px;

		height: 120px;

		float: left;

	}

	.clear{

		clear: both;height: 0px;overflow: hidden;

	}

	.all .six{

		float: left;

		width: 404px;

		height: 182px;

		border:1px solid black;

	}

	.all .seven{

		width: 212px;

		height: 222px;

		float: right;

		border:1px solid black;

	}

	.all .ba{

		width: 257px;

		height: 187px;

		float: left;

		border:1px solid black;

	}

	.all .jiu{

		width: 145px;

		height: 187px;

		float: left;

		border:1px solid black;

	}

	.all .d10{

		width: 212px;

		height: 246px;

		float: right;

		border:1px solid black;

	}

	.all .d11{

		width: 404px;

		height: 97px;

		float: left;

		border:1px solid black;

	}

	.all .d12{

		float: left;

		width: 618px;

		height: 72px;

		border:1px solid black;

	}

	</style>

</head>

<body>

	<div class="all">

		<div class="head">1</div>

		<div class="head">2</div>

		<div class="head">3</div>

		<div class="head">4</div>

		<div class="head">5</div>

		<div class="clear"></div>

		<div class="six">6</div>

		<div class="seven">7</div>

		<div class="ba">8</div>

		<div class="jiu">9</div>

		<div class="d10">10</div>

		<div class="d11">11</div>

		<div class="d12">12footer</div>

	</div>

</body>

</html>

html5学习小结，float练习。的更多相关文章

  1. HTML5学习小结

    HTML5是用于取代1999年所制定的 HTML4.01和XHTML1.0标准的HTML标准版本.HTML5的第一份正式草案已于2008年1月公布:2012年12月,规范已经正式定稿.W3C计划在20 ...

  2. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  3. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  4. flex学习小结

    接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...

  5. objective-c基础教程——学习小结

    objective-c基础教程——学习小结   提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...

  6. Html5学习导航

    给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持我们,让我们利用大家的力量收集更多的HTML5学习资料, ...

  7. 本周JavaScript学习小结

    应组长杨老师号召,写个js阶段性学习小结. emmm这周学了Linux进程通讯,学正则表达式尝试完成第一次编程作业,中秋还去平潭露营(所以...js学得很少hhh). 现在还处于感性认识阶段,浏览了一 ...

  8. HTML5学习第四天

    HTML5学习第四天 一.HTML列表 HTML列表,有无序表,有序表以及自定义表,列表于列表之间可以实现嵌套 列表相关操作 <ul> <li>(多选)谁世界第二可爱?< ...

  9. Python 学习小结

    python 学习小结 python 简明教程 1.python 文件 #!/etc/bin/python #coding=utf-8 2.main()函数 if __name__ == '__mai ...

随机推荐

  1. Java学习随笔2：Java复合赋值表达式的小问题

    问题:i += j只是i = i + j的简写么? 答案:非也!看下面的程序: int i = 5; long j = 8; i += j; // 可以通过编译且结果正确 i = i + j; // ...

  2. vs2015 MFC工程添加消息响应函数

    真不知道这PPT怎么描述的..最后窝找到了解决方法如上图.. 下次找MSDN解决问题好了..而且我们并不知道他所说的这个IDE到底是哪个厂商哪个版本的IDE这就很困惑 不过呢..它主要是让我们添加消息 ...

  3. Android简单自定义圆形和水平ProgressBar

    ProgressBar简介 继承于View类,直接子类有AbsSeekBar和ContentLoadingProgressBar,其中AbsSeekBar的子类有SeekBar和RatingBar,可 ...

  4. lr中定义字符串变量

    需要注意的是数组必须定义为固定的长度,如:char chary[20]: 5C2o"Go!\gm  nHH0 数组的最大长度为32064(32K),否则会出现“too many variab ...

  5. Ubuntu中如何打开终端terminal

    法一 先按住Alt,然后再按F2,出来一个运行框,在里面输入gnome-terminal即可 [编辑]法二 如果想从右键菜单中打开终端,需要安装一个软件: sudoapt-get install na ...

  6. jQuery插件开发--（转）

    1,开始 可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字: jQuery.fn.myPlugin = function(){ //开始写你的代码吧! ...

  7. SU unisam命令学习

  8. 深圳浩瀚技术有限公司（haohantech）推出的无线移动批发管理PDA解决方案------无线移动POS销售开单系统

    办好大型行业展会/交易会使其发挥强大的营销广告宣传作用从而为企业带来巨大的经济效益是每个参展企业的美好愿望. 由于行业内有影响力的展会每年屈指可数, 甚至很多情况下每年就只有一到两次, 如果没能够很好 ...

  9. 我的c++学习(6)默认参数和内联函数

    默认参数 一般情况下,函数调用时实参个数应与形参相同,但为了更方便地使用函数,C++也允许定义具有默认参数的函数,这种函数调用时实参个数可以与形参不相同.“默认参数”指在定义或声明函数时为形参指定默认 ...

  10. 比较全的JS checkbox全选、取消全选、删除功能代码

    看下面两种实现方法: JS checkbox 方法一: 复制代码 代码如下: function checkAll() { var code_Values = document.all['code_Va ...