Web之路笔记之三 - 使用Floating实现双栏样式
2014秋季学期Web2.0课程实验
<Lab2 - Journal>
1. 对CSS的BOX MODEL进行亲密接触,理解他的用途。
2. 在float图片的时候,发现此时图片脱离了原来所在的div,如图所示。
需要注意的是,float之后的element也是从页面正常流里面移除了。极端的来说,如果一个div里面的所有element都设置为float的话,那么它的高度就为0了。此时用Chrome开发者工具查看,图片的margin和文本的content上端是水平的,可以知道他仍然是在content block内。此处使用的是在content的css内添加了overflow:hidden。
overflow性质是用于当content超过了box之后,应该如何处理。属性值及具体用途:
1. visible,缺省值,当内容超过了box,不剪切,直接覆盖box以外的东西显示。
2. hidden,当内容超过了box时隐藏超过的内容。
3. scroll,当内容超过了box时,隐藏超过的内容并且添加滚动条。在内容没有超过box的时候,也会出现滚动条,只不过不能够滑动。
4. auto,当内容超过了box时自动添加滚动条,也就是没有超过的时候,是没有滚动条的。
5. initial,使用缺省值,这是一个关键词,在一般情况下使用initial和使用visible是一样的。应该在JS脚本处派上用场。
6. inherit,继承父元素的值。
此处使用了hidden,按照基本功能来说,图片算是超过了以文字内容决定宽高的box,应该是被隐藏的,但是实际上这里并没有隐藏,反而将它重新包括在box中。此处更多的是用了它可以清除浮动的功能。这是一个很常用的功能,需要记住。
overflow:hidden的效果相当于将容器的高撑起来,取子元素的最高值。
3. 居中分为block alignment和text alignment,需要对block进行对齐的时候,使用margin。例如需要居中,则使用margin-left:auto,margin-right:auto,将block外部自动平均分成两份作为margin,达到将整体内容居中的效果。
4. 对于List的ul、ol标签,缺省值是将序号/符号置于文字内容之外,所以没有调整之前是没有办法通过文字的样式调整来改变序号/符号的。要改变,则要将ol/ul的样式中,list-style-position调整为inside(缺省为outside)。
5. 生成双栏样式,需要使用到的主要属性有float、margin-left或-right。
首先想到的是对朋友列表添加一个div fricol,对内容列表添加一个div seccol,直接只对fricol做float:left操作,结果如下。
明显朋友列表只附在了第一个内容框的左边,第二个内容框仍然淡定的留在原地。
之后我就想将seccol也设置为float:right,结果如下。
明显,所有的框都跳脱出来了……这跟content框中一开始图片float之后跑出框是一样的,所以在entire框中添加了overflow:hidden之后,这个问题就不存在了。
解决了范围问题,还是没解决不能成两列的问题,所以上网查找过教程之后,发现一般的思路都是将最左边的一栏(一般都是导航栏)设置为float,第二栏则使用margin-left来设置。也就是说,最左边一栏需要设置width,将这个width设置成第二栏的margin-left。
所以我将fricol的width设置成170px,seccol的margin-left设置成196px,得到了想要的效果。
可是这是在正常电脑上浏览的结果,如果是手机等小屏设备的结果呢?我将浏览器视窗缩窄,发现效果如下。
相信这完全不是我们想要的效果,实际的网站上如果是这样的效果,换做是我我也不会再登陆了,所以为了改善这个问题,观察这个layout,发现文字和列表的边框都溢出了,可以得出这又是overflow的设置,所以此时在entire中添加overflow:hidden,当然是用auto也是可行的,因为都能够将超出entire的部分剪切掉。
解决了overflow的问题,我们还发现一个问题,因为两栏的宽度都是设定了一个绝对值,所以当设备视窗的宽度小于最左边栏的宽度时,明显文章内容就已经看不到了。一般来说这样也不是我们希望看到的,毕竟主要的还是看内容啊不是看po主有哪些朋友,所以我将宽度和margin-left都设成了百分值(此处是30%)。同时对fricol的overflow设置为auto。达到了如下效果。
6. 最后修改选中时文字的样式,使用伪元素::selection即可。
总结:html的结构化使用div实现,是最基本的练习;而CSS练习到了box model,position,float,而且overflow的效果以及其hidden的特殊用法,另外还有一些display等的用法,复习了伪元素,学会了如何用float做一个双栏layout。
Web之路笔记之三 - 使用Floating实现双栏样式的更多相关文章
- Web之路笔记之四
2014秋季学期Web2.0课程作业 <Homework1 - Recipe> 给出内容的文本文档,根据要求编写html和css.基本上没有难点. 1. 需要添加标签栏名称前面的小图标,是 ...
- Web之路笔记之二 - CSS Positioning
CSS中控制各个Block element的位置方式之一,tag为position,有4种属性. 1. static 一般网页默认的属性,表示element根据页面正常流(normal flow)进行 ...
- Web之路笔记之一
简单说一句,现在开始准备面试前端的知识,每天完成相关的任务,记录一些点. 2014秋季学期Web2.0课程习题 <Lab1 - About Me Page> 目标是自己动手写一个粗略的包含 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- ASP.NET MVC Web API 学习笔记---第一个Web API程序
http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
随机推荐
- nginx auth
location / { auth_basic "closed site";##Context:http, server, location, limit_except auth_ ...
- ADB简单基础命令
1.查看设备 adb devices 这个命令是查看当前连接的设备, 连接到计算机的android设备或者模拟器将会列出显示 2.安装软件 adb install adb install :这个命令将 ...
- Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器
(八)传入的数据绑定 先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在Vue实例外面操纵 ...
- java 编译期常量
今天在看书的时候遇到了一个不是很懂的名词,是在think in java 这本书的第七章讲final关键字时讲到的.然后自己在网上查了一下知道了一些. 编译器常量就是:它的值在编译期就可以确定的常量. ...
- 阿里巴巴矢量图标的使用Demo
一.html网页的使用步骤: 1. 登录进入阿里巴巴矢量图标库中,选择自己喜欢的图标,放到购物车,http://www.iconfont.cn/plus/manage/index?manage_typ ...
- JDBC 内部资料 请勿转载 谢谢合作
一.JDBC常用接口.类介绍 JDBC提供对独立于数据库统一的API,用以执行SQL命令.API常用的类.接口如下: DriverManager 管理JDBC驱动的服务类,主要通过它获取Connect ...
- 封装好的AFN网络请求框架和MBProgress
demo:https://github.com/IMCCP/CCPAFNNetworking(收藏下来)
- Jquery ajax提交表单几种方法
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...
- Dreamweaver架设网站终极教程
转自:http://www.cnblogs.com/loveme513/archive/2006/04/03/365969.html 一.定义站点 1. 在任意一个根目录下创建好一个文件夹(我们这里假 ...
- PHPExcel对于Excel中日期和时间类型的处理
PHPExcel是一款优秀的处理Excel文件读写的开源PHP Library,能够给我们提供强大的Excel读写能力,本文针对Excel处理过程中关于日期和时间类型的处理进行深入的讨论.PHPExc ...