html5学习小结,float练习。
经过两天的H5学习之后,做了一下float属性的练习,要做出来的效果为:
下面为代码部分,所用到的知识不多,不过才现在刚开始,以后要学的东西还有很多,大家继续加油!
<!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练习。的更多相关文章
- HTML5学习小结
HTML5是用于取代1999年所制定的 HTML4.01和XHTML1.0标准的HTML标准版本.HTML5的第一份正式草案已于2008年1月公布:2012年12月,规范已经正式定稿.W3C计划在20 ...
- HTML5 学习总结(一)——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- flex学习小结
接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...
- objective-c基础教程——学习小结
objective-c基础教程——学习小结 提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...
- Html5学习导航
给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持我们,让我们利用大家的力量收集更多的HTML5学习资料, ...
- 本周JavaScript学习小结
应组长杨老师号召,写个js阶段性学习小结. emmm这周学了Linux进程通讯,学正则表达式尝试完成第一次编程作业,中秋还去平潭露营(所以...js学得很少hhh). 现在还处于感性认识阶段,浏览了一 ...
- HTML5学习第四天
HTML5学习第四天 一.HTML列表 HTML列表,有无序表,有序表以及自定义表,列表于列表之间可以实现嵌套 列表相关操作 <ul> <li>(多选)谁世界第二可爱?< ...
- Python 学习小结
python 学习小结 python 简明教程 1.python 文件 #!/etc/bin/python #coding=utf-8 2.main()函数 if __name__ == '__mai ...
随机推荐
- XML 文件解析
1.XML文件 <Data> <Movie id="1"> <title>good lucky to you</title> < ...
- Vs2012调试本地windows服务
背景: 在我的工作经历中,我用到了一个我们以前学习中没有接触过的老东西-服务.之所说以前没有接触过,是因为自己没有系统的研究过这东西:之所以又说它是老东西,是因为我们其实早就知道他的存在,经常用它去干 ...
- jq获取后台json并解析
参考: $(function () { $.ajax({ url: 'tsconfig.json', type: 'GET', dataType: 'json', timeout: 1000, cac ...
- filter应用案例二:权限控制
filter可以用来进行权限控制,比如admin文件夹下的文件只允许管理员进入,那么,可以给admin文件夹加上一个过滤器: 简单代码示例: import java.io.IOException; i ...
- sublime快捷键大全
转自:http://blog.useasp.net/archive/2013/06/14/sublime-text-2-all-default-Shortcuts-table-on-windows-t ...
- LoadRunner下载文件脚本
LoadRunner下载文件脚本 在看普泽关于pezybase的测试报告的时候,发现里面有用到jmeter(http协议)并发测试下载文件,考虑到后面可能需要在公司pezybase的并发下载,把之前 ...
- java的重载、覆盖和隐藏的区别
重载:方法名相同,但参数不同的多个同名函数 注意:1.参数不同的意思是参数类型.参数个数.参数顺序至少有一个不同 2.返回值和异常以及访问修饰符,不能作为重载的条件(因为对于匿名调用,会出现歧义,eg ...
- CSS3属性
1.边框阴影(box-shadow ): 投影方式,X轴偏移,Y轴偏移,阴影模糊半径,阴影扩展半径,颜色 2.边框图像(border-image) 3.边框圆角:border-radius:5px 4 ...
- vs2008/2010安装无法打开数据文件解决方案
本人在安装VS2008或2010时,在开始的第一个页面(进度条大约加载到75%左右),提示“无法打开数据文件 'C:/Documents and Settings/Administrator/Loca ...
- Java解析HTML之HTMLParser使用与详解
http://blog.csdn.net/jediael_lu/article/details/26285951