从0开始学编程(11)--(131)---每天要记住一些小概念,padding,line-height
line-height是行高,一行文字的高度;
padding是留白距离
padding:0px 8px;等价于 padding:0px 8px 0px 8px;
padding:8px; 这样单个属性值表示上下左右各留白8px
padding:8px 0 6px;这样表示为上边留白8px,左右不留白,底部留白6px 1 楼 Jennycn 2011-10-24 min-height就是你的层的最小高度,如果该层中的元素内容高度小于这个高度,就将层显示为min-height的值,超过的话,就撑破层,使层的高度与元素内容高度一样。
max-height就是和这个相反了,不超出的话,层高度就和层中内容元素高度一样,否则就截断内容,显示max-height的高度。
line-height是行高,就是针对文本的,即一行文字的行高,是以该标签中文字大小font-size做比较的,例如line-height=200%;就是让行高是文字大小的两倍。 2 楼 Jennycn 2011-10-24 Jennycn 写道min-height就是你的层的最小高度,如果该层中的元素内容高度小于这个高度,就将层显示为min-height的值,超过的话,就撑破层,使层的高度与元素内容高度一样。
max-height就是和这个相反了,不超出的话,层高度就和层中内容元素高度一样,否则就截断内容,显示max-height的高度。
line-height是行高,就是针对文本的,即一行文字的行高,是以该标签中文字大小font-size做比较的,例如line-height=200%;就是让行高是文字大小的两倍。
我照着一个例子,用line-height 1.5px,font-size12,就挤成一团了,做导航栏,竖着的时候
用这种文字的几倍高,比较好,我用了200% 3 楼 Jennycn 2011-10-24 刚刚学会了做垂直的导航栏,鼠标经过时,链接还可以变颜色
4 楼 Jennycn 2011-10-24 我准备把一些常用的做一些模板
一些常规要记住的,做一些小条子,或者直接就在模板里设置好.
比如这些,是每一个都要做的,就一次记住,写上
大多数标签都有自己的默认样式,比如第二天课程中遇到的body默认外边距,另外本例中ul前的圆点及左侧的内边距,另h1-h6字体大小各不相同,em默认为斜体,strong表示粗体。正因为有这些默认样式,一个设计合理的页面,即使没有加载样式,也能让用户很容易阅读。但此时这些默认样式对我们没用,所以需要清除掉,为了方便,建议用标签重定义方式,这样可以很简单地把全局的样式给统一起来。另外页面中的图片添加链接后会默认添加个边框,ul默认情况下会在列表前添加圆点,这些都是需要去掉的。
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
ul { list-style: none; }
img { border-style: none; }
5 楼 Jennycn 2011-10-24 display:block;
是让对象成为块级元素(比如a,span等)
display有很多对象,具体可以参考http://www.w3school.com.cn/css/pr_class_display.asp
一般都是用display:none和display:block来控制层的显示
display=none 控制对象的隐藏
display=block控制对象的显示
block : CSS1 块对象的默认值。用该值为对象之后添加新行
none : CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
6 楼 Jennycn 2011-10-24 定位标签:position
包含属性:relative(相对) absolute(绝对)
1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素"相对于"它的原始起点进行移动。(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框)
2.position:absolute; 表示绝对定位,位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高,它显示的越在上层。)
3.父容器使用相对定位,子元素使用绝对定位后,这样子元素的位置不再相对于浏览器左上角,而是相对于父窗口左上角
4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置,这四个属性只有在该元素使用定位后才生效,其它情况下无效。另外这四个属性同时只能使用相邻的两个,不能即使用上又使用下,或即使用左,又使用右
7 楼 Jennycn 2011-10-24 哎,刚刚依样画葫芦地,做了一个竖着的导航栏,加鼠标点上去,可以显示二级菜单的 8 楼 Jennycn 2011-10-24 我发现有时,要是用汉语写注释,也会出问题
9 楼 Jennycn 2011-10-24 a:link { color: #06F; text-decoration: none; }
a:visited { color: #999; text-decoration: line-through; }
a:hover { color: #F00; text-decoration: underline; }
a:active { color: #F0F; }
顺序都不能颠倒,唉
我还是记住吧 10 楼 Jennycn 2011-10-24 链接在默认状态下是内联元素,转换为块级元素后可以获得更大的点击区域,可以设置宽度和高度,将链接转换为块状,只需增加一个display:block的css属性即可。
11 楼 Jennycn 2011-10-25 把链接改为 按钮时, 我就不明白,为啥设置了height 还要设置line-height,还一样的数字
a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }