Heim  >  Artikel  >  Web-Frontend  >  学了这些,你就算入门DIV+CSS了(转)_html/css_WEB-ITnose

学了这些,你就算入门DIV+CSS了(转)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:29:10870Durchsuche

转自:http://www.zhukun.net/archives/361#more-361

CSS功能复杂多变,大多数新手莫不着头脑,不知道怎么去控制。所以做个简易教程。
1,文字控制类

font-size:12px; 文字大小,通常为12px。现在又流行14px。大小自己控制。

color:#666; 颜色控制,颜色自己下个取色板吧。16进制
line-height:2em; 行高,em为字符,支持px 百分比等等多种单位
text-align:center; 文字居中,居左不要,居右为right
font-weight:bold; 文字加粗
text-indent:2em; 每段缩进,两个字符,常用

用以上CSS便可基本供职90%的问题了,其他的慢慢自己研究。
2,布局类

margin:10px 10px 10px 50px ; 外补丁,为上 右 下 左。除0外,必须为单位,单位可以是px cm 等等。常用px
padding10px 10px 10px 50px 内补丁,设置同外补丁
float:left; 浮动,常用属性。多试试
width:51px; 宽度
height:89px; 高度
overflow:hidden; 清除立体浮动(针对火狐等浏览器),溢出隐藏
clear:both; 清除平面浮动
border:1px solid #77543b; 设置边框为1,实线,颜色,16进制

每个CSS前必写以下这段代码

*{ padding:0; margin:0;} 如未指定,则内补丁和外补丁均为0,可解决90%的火狐不兼容问题代码。
body{font-size:12px; background:#AC956C;} 设置内容默认字体大小等,不建议在此控制行高。

a:link,a:visited,a:active{ color:#333; text-decoration:none; font-size:12px;}
a:hover{ color:#666; text-decoration:underline;font-size:12px;} 默认链接属性。

li{ list-style:none;} li去掉前面的点。

列表

#tuijian {}
#tuijian ul { margin-left:60px;}
#tuijian ul li{ line-height:1.5em;color:#EEE4C1}
#tuijian ul li a{ color:#EEE4C1}

列表控制比较难学,其实也简单,不建议给li使用外左补丁控制间距,建议使用LI宽度控制。ul一般留空即可,如要定位另说,如果需要列表为一行,常用于导航处,将li设置一个左浮动即可。

掌握以上的CSS内容,你就基本入门了。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn