在国庆长假马上结束时,分享一篇关于 css定位的博文,收回你的玩心,开始工作了.
css 中的定位是一个重点,也是难点,之前有一篇专门探讨 css中position定位的问题
达到的效果
如果你够细心的话,你会发现我的博客列表也和博文详情页右侧侧边栏有变化
之前侧边栏是跟随滚动条移动的,当右侧内容不足时,会看到一片空白,体验不好
所以我希望,当滚到到右侧无内容填补时,指点的模块能做一个固定定位,漂浮在顶部右侧,不再跟随滚动条移动
简单说,当右侧侧边栏有内容时,跟随滚动条上下移动
当滚动到右侧无内容时,最小边的模块一直漂浮在右上角,如下图
入群讨论 和 订阅公众号 模块始终
css3 响应式布局学习
响应式:就是根据不同设备,或者设备不同分辨率,动态给出对应的样式变化
响应不同的设备
涉及到 css 中的 Media Queries ,这个词组被译为 "媒体查询"
Media Queries 用法如下: <link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />
或者另外一种引入css 文件的方法
<style type="text/css" media="screen">
@import url("css/sty
记录规整一些 关于CSS 处理中文 /英文 折行/不折行 省略 等问题.
这些问题涉及到了几个css 属性,简单记录一下,以备以后碰到
涉及到控制上面提到的问题,必须注意一点,你的容器设定了固定的宽度
英文字母换行,只对英文字母起作用,如果是单词,可能一个单词被拦腰折断 word-break:break-all;
word-break语法： word-break: normal(默认) | break-all | keep-all
Firefox、Opera不能识别
normal: 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
break-all: 该行为与亚洲语言的
记录规整一些 关于CSS 处理中文 /英文 折行/不折行 省略 等问题.
这些问题涉及到了几个css 属性,简单记录一下,以备以后碰到
涉及到控制上面提到的问题,必须注意一点,你的容器设定了固定的宽度
英文字母换行,只对英文字母起作用,如果是单词,可能一个单词被拦腰折断 word-break:break-all;
word-break语法： word-break: normal(默认) | break-all | keep-all
Firefox、Opera不能识别
normal: 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
break-all: 该行为与亚洲语言的
找准自己的位置很重要.页面也是一样.设计师出手的psd是这样的结果施工后的效果是这样的:这样的结果相信PO喝完酒也不会验收成功吧.页面在设计时的层次,羽化,字体,大小,边距,背景等.这些都不是随便堆砌起来的.所以切页面的时候要完全按照设计师的psd 效果来实施,才不会让最后的产品和设计相差甚远.其中,比较难的是层的定位.所以今天大概说一下 position 属性相关的一点点知识分享.position 属性包含如下几个值:relative 相对的 (这个属性值有参照物)absolute 绝对的 (这个绝对其实也是有一个参照物的)fixed 固定的(就像钉子钉在那里一样)static 静止的 (这
我就要当一次标题党了。这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。border-radius很多开发者估计都没有正确认识这个border-radius，因为基本上很多人都是这么用的：.box{border-radius:4px;}稍微高端一点的是这样的：.box{border-radius:4px6px6px4px;}然而，终极黑科技是这样用的：.box{border-radius:5px5px3px2px/5px5px1px3px;}对，它可以赋8个值，没见过？不着急，具体的解释是这样的：斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，各个数字就分别
传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽)重复展示(用无数张同样的图片来铺满容器的背景面积)x轴 /y轴 重复展示(纵向拉伸不重复 / 横向拉伸不重复 )background-repeat 这个货看下它的值:repeat 默认。背景图像将在垂直方向和水平方向重复。repeat-x 背景图像将在水平方向重复。repeat-y 背景图像将在垂直方向重复。no-repeat 背景图像将仅显示一次(无节操拉伸)。inherit 规定应该从父元素继承 background-repeat 属性的设置。很明显,上面的 css2 满