Css 如何排版

html-css015

Css 如何排版,第1张

你需要写一个CSS样式文件,后缀名称就是CSS,我这里正好写了一个CSS样式表,用于定义网站显示文字的格式,然后你复制这个代码将这个代码保存格式为:comman.css

/*------reset------*/

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{

margin:0

color: #000

font-size: 12px

font-family: "微软雅黑"

text-align: center

}

body,button,input,select,textarea{font:12px/1.5 tahoma,'\5b8b\4f53',sans-serifcolor:#6c6c6c}

body{padding-top:42px}

h1,h2,h3,h4,h5,h6{font-size:100%}

em,i,b{font-style:normal}

ul,ol{list-style:none}

a{color:#6c6c6ctext-decoration:none}

a:hover{

color:#330033

font-size: 12px

text-align: left

}

img{border:0}

button,input,select,textarea{font-size:100%outline:nonevertical-align:middle}

textarea{resize:none}

table{

border-collapse:collapse

border-spacing:0

text-align: center

}

td,th,ul,ol{

padding:0

color: #000

text-align: center

font-family: "微软雅黑"

font-size: 12px

}

/*------common------*/

.pr{position:relative}

.pa{position:absolute}

.fl{float:left}

.fr{float:right}

.fl,.fr{display:inline}

.bc{margin-left:automargin-right:auto}

.cb{clear:both}

.db{display:block}

.clearfix{*zoom:1}

.clearfix:after{content:'\20'display:blockheight:0line-height:0visibility:hiddenclear:both}

.tc{text-align:center}

.tr{text-align:right}

.fb{font-weight:bold}

.fn{font-weight:normal}

.f16{font-size:16px}

.f14{font-size:14px}

.f_yh{font-family:'\5FAE\8F6F\96C5\9ED1'}

.ell{text-overflow:ellipsiswhite-space:nowrapoverflow:hidden}

.none{display:none}

.hidden{visibility:hidden}

.ht{overflow:hiddentext-indent:-9999pxtext-decoration:none}

.unl{text-decoration:underline}

.bd1{border:1px solid #d8d8d8}

.bd1-t{border-top:1px solid #d8d8d8}

.bd1-b{border-bottom:1px solid #d8d8d8}

.bd3{border:3px solid #d8d8d8}

.hlh30{height:30pxline-height:30px}

.hlh24{height:24pxline-height:24px}

.lh22{line-height:22px}

.hlh20{height:20pxline-height:20px}

.c1{color:#5d5d5d}/*积齥*/

.c2{color:#8f8f8f}/*k*/

.c3{color:#e44cea}/*a?k*/

.c4{color:#f49bff}/*toplink*/

.c5{color:#ff0000}

.bc1{background:#f3f3f3}/*积sk*/

.bc2{background:#f8f8f8}/*齭k*/

.bc3{background:#ffffff}

.mt10{margin-top:10px}

.mb10{margin-bottom:10px}

.mr9{margin-right:9px}

.ml7{margin-left:7px}

.ml89{margin-left:89px}

.p20{padding:20px}

.p10{padding:10px}

.pt1{padding-top:1px}

.pr6{padding-right:6px}

.pl6{padding-left:6px}

.w230{width:230px}

.spr{background:url(http://ossweb-img.qq.com/images/ktv/web201206/spr.png) no-repeatoverflow:hidden}

.ico{width:8pxheight:8pxline-height:8pxmargin:10px 8px 0 8px}

/*--notice--*/

.game-notice{width:1000pxpadding:60px 0 30px 0}

.game-notice em{padding:0 4pxcolor:#6c6c6c}

/*--footer--*/

.footer{

background:#19001a

color: #FFF

}

.foot-con{width:915pxpadding:20px 0 30px 85px}

.foot-logo{width:216pxheight:45pxborder-right:1px solid #3a173b}

.game-logo{width:107pxheight:35pxbackground-position:0 -232px}

.kaige-logo{width:93pxheight:35pxbackground-position:-107px -232pxcursor:default}

.foot-list{padding-left:15pxcolor:#673768}

.foot-list a{color:#673768}

.foot-list a:hover{text-decoration:underline}

.foot-link{width:578px}

.foot-link span{padding:0 5pxcolor:#3A173B}

.copy{width:576px}/*  |xGv00|8d5f9fb42d5dc8f4155bd7ed0d0073ae */

两种办法,第一种可以作为默认选择。两种办法都可以让文字底部对齐。

1、如果是文字或者其他块级元素。使用定位的思想。position:absolute,然后boottom:0。父元素注意要设置一下position:relative。因为绝对定位是相对于最近一个非static定位的元素的相对位置。 但是如果出现多个元素在同一父元素内 同时需要绝对定位移动位置,那么需要注意,如果直接这样做,会造成那些元素重叠,而不是与float一样的正常排布,这是因为他们有相同的父元素,使用绝对定位之后就都会移动到父元素的左边,而不是还处在原来的位置。

为了解决这种情况,需要给那些需要移动位置的元素 嵌套一个父元素,让他们的父元素去定位,给他们的父元素设置relative,这样原先的父元素就变成了爷元素。这样一来,再给他们设置完绝对定位加位置属性之后就不会出现重叠的效果,因为他们都是在父元素的限度内去移动,再跑也跑不出来。这样就又不重叠,又能贴近底部,但是需要注意。新嵌套的父元素需要一个固定的高度,高度要高于内部元素。不然他的高度就是被内部元素撑开的。

2、如果是文字(块级元素没试过,到时候可以试一下)。那么需要给包着文字的那个div设置成 display:table-cell+ vertical:bottom。这样文字就贴着div底部了。

拓展资料:

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

参考资料:百度百科-CSS (层叠样式表)

text-align: center水平居中

height:30pxline-height:30px垂直居中

vertical-align:middle垂直居中

td里面可以直接<td valign="middle" align="center"

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

其实当时在互联网界已经有过一些统一样式表语言的建议了,但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中,一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合每个人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年的www网络会议上CSS又一次被提出,博斯演示了Argo浏览器支持CSS的例子,哈肯也展示了支持CSS的Arena浏览器。