前端CSS学习

网站CSS内容分析，主要是style.css的分析，相对比较简单，可能也有一些错误，只是为了方便自己积累，打卡学习。

最好将下面内容粘贴到编辑器中查看，比如常用的sublimeText，会很方便哦。

刚开始学前端，加深了我的了解和映象。

/*所有的内外边距都为0*/
* {margin:0;padding:0}
/*div是否是浮动的，向左浮动*/
.fleft {float:left}
/*div是否是浮动的，向右浮动*/
.fright {float:right}
/*div是否是浮动的，不浮动，字体居中*/
.fcenter {float:none;text-align:center}
/*div左右都不许浮动*/
.fclear {clear:both}
/*无边框，字体颜色为红色，外边距左边减去100像素，内容溢出就hidden，行高为0，内边距为0，字体大小为11像素*/
.inner_copy {border:0;color:#f00;float:right;width:50% !important;margin:-100% 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:11px}
/*内边框为0像素，外边框为0像素，字体系列，字体大小13像素；字体颜色；背景颜色*/
body {padding:0;margin:0;font-family:Verdana, Arial,Helvetica,sans-serif;font-size:13px;color:#6B6854;background:#fff}
/*给这些HTML的标签给一个内外边距的属性都为0*/
div, p, ul, h1, h2, h3, h4, img, form, input {padding:0;margin:0}
/*列表标记属性为无*/
ul {list-style-type:none}
/*左右都不浮动，字体大小为0，行高为0*/
.blank {clear:both;font-size:0;line-height:0}
/* upper table */
/*继承父元素的宽度，背景图片，横向铺满 ，字体颜色，div颜色*/
#upperpan {width:100%;background:url(images/upper_pan_bg.gif) repeat-x #FDFEFF;color:#6B6854}
/* header */
/*宽为778像素，背景图片，横向铺满，div颜色，相对定位，外边距为上下为0，左右自动，高度为145 ，颜色*/
#header {width:778px;background:url(images/header_bg.gif) repeat-x #FDFEFF;position:relative;margin:0 auto 0 auto;height:145px;color:#515151}
/*绝对定位。高37px，距离左边的像素*/
#header img {position:absolute;top:37px;left:65px}
/*宽468，绝对定位，高28 ，具体左边265*/
#header ul {width:468px;position:absolute;top:28px;left:265px}
/*向左浮动，以块状元素显示*/
#header ul li {float:left;display:block}
/*文本块首行缩进，字体大小，div高度，块状显示，清楚超链接下划线*/
#header ul li a {text-indent:-2000px;font-size:0;height:31px;text-decoration:none;display:block}
/*背景图片，不重复，宽156*/
#header ul li a.sol {background:url(images/solution.gif) no-repeat;width:156px}
/*背景颜色，不重复，宽156*/
#header ul li a.sol:hover {background:url(images/solution_h.gif) no-repeat;width:156px}
/*背景颜色，不重复，宽156*/
#header ul li a.ser {background:url(images/services.gif) no-repeat;width:156px}
/*背景颜色，不重复，宽156*/
#header ul li a.ser:hover {background:url(images/services_h.gif) no-repeat;width:156px}
/*背景颜色，不重复，宽156*/
#header ul li a.sup:hover {background:url(images/support_h.gif) no-repeat;width:156px}
/*背景图片，不重复，绝对定位，文本首行缩进，div高66，距左265上66开始，高23，宽434*/
#header h1{background: url(images/slogan.gif) no-repeat;position: adsolute;text-indent:-2000px;top:66px;left:265px;width: 434px;height: 23px}
/*宽507，绝对定位，距左上135 118 以块状显示*/
#header ul.navi{width: 507px;position: absolute;top:118px;left: 135px;display: block}
/*向左浮动，上下外边距为0，左右各8像素*/
#header ul.navi li{float: left;padding: 0 8px 0 8px}
/*首行不缩进，字体颜色，链接下划线不显示，以块状显示，高22，左浮动，字体系列，字体加粗，字体大小，行高，内外边距，div颜色*/
#header ul.navi li a.na{text-indent: 0;color: #515151;text-decoration: none;display: block;height: 22px;float: left;font-family: Arial,Helvetica,sans-serif;font-weight: bold;font-size: 11px;line-height: 22px;padding: 0 3px;margin: 2px 0;background: #DCDCDC}
/*div背景颜色，字体颜色*/
#header ul.navi li a.na:hover{background: #FDFEFF;color:#515151;}

/*who we are --*/
/*宽667,兼容各大浏览器水平居中，背景图片不重复，字体颜色，*/
#who {width: 667px;margin: 0 auto 0 auto;background: url(images/who_pic.jpg) no-repeat 0 22px #FDFEFF;color: #6B6854}
/*宽119，高39，文本首行缩进2000像素，背景图片，不重复，左外边距为178，块状显示*/
#who h2{width: 119px;height: 39px;text-indent: -2000px;background: url(images/who.gif) no-repeat;margin-left: 178px;display: block}
/*宽477，外边距上9右178，块状显示，内边距具体底部1px，字体大小14*/
#who p{width:477px;margin: 9px 0 0 178px;display: block;padding-bottom: 1px;font-size: 14px}
/*字体颜色，背景颜色*/
#who p strong{color: #CC6500;background: #FDFEFF}
/*背景图片，不重复，高16，块状显示，宽459，外边距具体底部52*/
#who p.line{background: url(images/line.gif)no-repeat left;height: 16px;display: block;width:459px;margin-bottom: 52px}
/*字体大小12，行高16，字体系列，字体颜色，字体加粗，链接无下划线。高16，块状显示，内边距0，右浮动，背景颜色*/
#who p.line a{font:12px/16px Verdana,Arial,Helvetica,sans-serif;color: #467700;font-weight: blod;text-decoration: none;height: 16px;display: block;padding: 0;float: right;background: #FDFEFF}

/*链接无下划线*/
#who p.line a:hover{text-decoration: underline;}
/*middle table */
/*宽与父元素一样，背景图片，水平铺满，左浮动，字体颜色，*/
#middle100{width: 100%;background: url(images/middle_table_	bg.gif) repeat-x #FDFEFF;float: left;color: #6B6854}
/*--middle*/
/*宽679，外边距左右居中，*/
#middle {width: 679px;margin:0 auto;}
/* --left pan*/
/*宽206，左浮动，背景颜色，相对定位，字体颜色*/
#left {width:206px;float: left;background: #FDFEFF;position: relative;color: #6B6854}
/*背景图片，不重复，外边距，块状显示，字体首位缩进,，高48*/
#left h2{background: url(images/latest_events.gif) no-repeat; margin: 0 0 0 15px;display: block;text-indent: : -2000px;height: 48px}
/*字体颜色，字体系列，字体加粗，绝对定位，距离左上15， 25，宽160，背景颜色*/
#left h3{color: #DA6C00;font-family: Verdana,Arial,Helvetica,sans-serif;font-weight: bold;font-size: 13px;position: absolute;top: 25px;left: 15px;width: 160px;background: #FDFEFF}
/*宽168，内边距，块状显示*/
#left p{width: 168px;padding: 0 0 15px 18px;display: block}
/*内边距，块状显示*/
#left img{padding: 0 0 19px 18px;display: block}
/*颜色，字体系列，字体加粗，字体大小14，宽168，外边距，块状显示，背景颜色*/
#left h4{color: #6B6854;font-family: Verdana,Arial,Helvetica,sans-serif;font-weight: bold;font-size: 14px;width: 168px;margin: 0 0 15px 15px;display: block;background: #FDFEFF}
/*字体颜色，背景颜色*/
#left p span{color: #61A500;background: #FDFEFF}
/*背景图片，不重复，左浮动，背景颜色，高16，块状显示，宽157，外边距，字体颜色*/
#left p.line {background: url(images/line_2.gif) no-repeat left #FDFEFF;height: 16px;display: block;width: 157px;margin: 0 0 69px 15px;color: #36B6854}
/*字体系列，字体加粗，字体大小14，宽168，外边距，块状显示，背景颜色*/
#left p.line a{font-family: Verdana,Arial,Helvetica,sans-serif;font_weight:bold;font-size:14px;width: 168px;margin:0 0 15px 15px;display: block;background: #FDFEFF;}
/*字体颜色，背景颜色*/
#left p span{color: #61A500;background: #FDFEFF}
/*背景图片，不重复，高16，块状显示，宽157，外边距，字体颜色*/
#left p.line{background: url(images/line_2.gif) no-repeat left #FDFEFF;height: 16px;display: block;width: 157px;margin:0 0 69px 15px;color: #6B6854}
/*字体大小12，行高16，字体系列，字体颜色，字体加粗，文本有下划线，背景颜色，高16，块状显示，内边框，右浮动*/
#left p.line a{font:12px/16px Verdana,Arial,Helvetica,sans-serif;color: #467700;font-weight: bold;text-decoration: none;background: #FDFEFF;height: 16px;display: block;padding: 5px 10px 0 0;float: right}
/*文本有下划线*/
#left p.line a:hover{text-decoration: underline;} 
/*mid*/
/*宽234，边框1px颜色，左浮动，背景颜色，内边距，字体系列*/
#mid{width: 234px;border: #DCDBDB 1px solid;color: #6B6854;float: left;background: #FDFEFF;padding: 15px;font-family: Verdana,Arial,Helvetica,sans-serif}
/*背景图片，不重复，字体颜色，宽234，高61，文本首行缩进*/
#mid h2{background: url(images/login_icon.gif) no-repeat #EDEDED;color: #4F4F4F;width: 234px;height: 61px;padding-bottom: 14px;text-indent: -2000px}
/*宽217，背景颜色，块状显示，内边距左17px，高120px，字体颜色*/
#mid form{width:217px;background: #EDEDED;display: block;padding-left: 17px;height:120px; color: #3B3B3B}
/*宽199，高17，外边距下16*/
#mid form input{width: 199px;height: 17px;margin-bottom: 16px}
/*宽125，高18，背景图片，不重复，字体颜色，字体大小，块状显示，字体加粗，行高17，左浮动*/
#mid form label{width: 125px;height: 18px;background: url(images/regi_arrow.gif) no-repeat 8px 5px #EDEDED;color: #373737;font-size: 16px;padding:0 0 0 28px;display:block;font-weight:bold;line-height:17px;float:left}
/*字体颜色，文本无修饰，背景颜色*/
#mid form label a {color:#373737,text-decoration:none;background: #FDFEFF}
/*字体下划线*/
#mid form label a:hover{text-decoration: underline;}
/*宽49高18，左浮动，块状显示，背景图片不重复，鼠标移动上去变成手的形状*/
#mid form input.button{width: 49px;height: 18px;float: left;display: block;background: url(images/login_button.gif) 0 0 no-repeat #FDFEFF;color: #fff;font-size: 0;font-weight: bold;line-height: 18px;border: none;cursor: pointer;}
/*宽234，高64，背景图片，不重复，文本首行缩进，外边距上11，字体颜色*/
#mid h3{width: 234px;height: 64px;background: url(images/want.gif) no-repeat 0 0 #FDFEFF;text-indent: -2000px;margin-top: 11px;color: #999}
/*宽231，块状显示，外边距上27*/
#mid ul {width:231px;display: block;margin: 27px 0 0 0}
/*块状显示，高61，字体大小14，行高13，字体系列，字体颜色，字体加粗 背景颜色*/
#mid ul li {display: block;height: 61px;font:14px/13px Verdana,Arial,Helvetica,sans-serif;color: #585858;font-weight: bold;background: #FDFEFF}
/*背景图片，不重复，内边距左10，外边距上8，块状显示，字体系列，字体颜色，字体下划线*/
#mid ul li a{background: url(images/mis_arrow.gif) no-repeat 0 5px #FDFEFF;padding-left: 10px;margin-top: 8px;display: block;font:13px/13px Verdana,Arial,Helvetica,sans-serif;color: #585858;text-decoration: underline;}
/*字体装饰无*/
#mid ul li a:hover{text-decoration: none}
/*背景图片，不重复，宽92，高12，块状显示，字体加粗，字体大小12，行高12,*/
a.view{background: url(images/mid_morebg.gif) no-repeat #fff; width: 92px;height: 12px;height: 12px;display: block;font-weight:bold;font:12px/12px Verdana,Arial,Helvetica,sans-serif;color: #467700;text-decoration: none;padding:0 0 0 135px;margin:0 0 20px 0; }
/*字体颜色，背景颜色，字体有下划线*/
a.view.hover{color: #000;background: #FDFEFF;text-decoration: underline;}
/*right side*/
/*宽190，背景颜色，左浮动，字体颜色*/
#right{width: 190px;background: #fff;float: left;padding-left: 17px;color: #6B6854}
/*高29，背景图片，块状显示，文本首行缩进*/
#right h2{height: 29px;background: url(images/current_link.gif);display: block;text-indent: -2000px}
/*宽190，背景颜色，左浮动，内边距左17，字体颜色*/
#right ul{width:190px;background: #fff;float: left;padding-left: 17px;color: #6B6854}
/*背景图片，不重复，高20，内边距*/
#right ul li{background: url(images/arrow.gif) no-repeat 0 8px;height: 20px;padding:0 0 0 17px;}
/*字体大小13，行高20，字体系列，字体颜色，字体有下划线，背景颜色*/
#right ul li a{font:13px/20px Verdana,Arial,Helvetica,sans-serif;color: #6B6854;text-decoration: underline;background: #FDFEFF}
/*修饰id=right的右边盒子中
  这个序列的链接一个属性：
  什么字体，字体大小，背景颜色，字体颜色和下划线
*/
#right ul li a:hover{text-decoration: none}
/*修饰id=right的右边盒子中
  段落给它一个宽高，背景图片，
  背景图片的边界颜色和
  段落的边界颜色
*/
#right p {width:190px;height:276px;background: url(images/services_pic.gif) no-repeat #fff;color: #E4E4E4}
/**footer*/
/*宽跟父元素一样，高114，上边距6px，颜色，实线，左浮动*/
#footer100{width:100%;height: 114px;border-top: #EDEDED 6px solid;float: left;}
/*宽679，相对定位，外边距左右居中，高114，字体系列*/
#footer{width: 679px;position: relative;margin:0 auto 0 auto;height: 114px;font-family: Arial,Helvetica,sans-serif}
/*宽520，绝对定位，高20，距左88*/
#footer ul{width: 520px;position: absolute;top: 20px;left: 88px}
/*左浮动，块状显示，字体大小12px，行高36px，字体系列，字体颜色，背景颜色，字体无装饰，外边距*/
#footer ul li{float: left;display: block;font:12px/36px Arial,Helvetica,sans-serif;color: #515151;background: #FDFEFF;text-decoration: none;margin: 0 11px 0 11px}
/*字体大小12，行高36，字体系列，字体颜色，背景颜色，字体无装饰，外边距*/
#footer ul li a{font:12px/36px Arial,Helvetica,sans-serif;color: #515151;background: #FDFEFF;text-decoration: none;margin: 0 11px 0 11px }
/*文本下划线*/
#footer  ul li a:hover{text-decoration: underline;}
/*字体颜色，字体大小12，行高20，绝对定位，高50，宽100，背景颜色*/
#footer p{color: #000;font-size: 12px;line-height: 20px;position: absolute;top: 50px;left:100px;background: #FDFEFF}
/*字体颜色，背景颜色，字体有下划线，外边距，内边距*/
#footer p a{color: #000;background: #fff;text-decoration: underline;margin: 0;padding:0;}
/*字体颜色，背景颜色*/
#footer p a:hover{color: #000;background: #C6C6C6}
/*宽，绝对定位，高49，左偏移322*/
#footer ul.link{width: 122px;position: absolute;top: 49px;left: 322px}
/*左浮动。块状显示，字体大小，高16*/
#footer ul.link li{float: left;display: block;font-size: 0;height: 16px}
/*块状显示，字体首行缩进，高16，外边距，*/
#footer ul.link li a{display: block;text-indent: -2000px;height: 16px;margin:10px 2px 0 0;font-size: 0}
/*背景图片，不重复，宽，高*/
#footer ul.link li a.html{background: url(images/html.gif) no-repeat;width: 59px;height: 16px}
/*背景图片，不重复，宽，高*/
#footer ul.link li a.html：hover{background: url(images/html_h.gif) no-repeat;width: 59px;height: 16px}
/*背景图片，不重复，宽，高*/
#footer ul.link li a.css{background: url(images/css.gif) no-repeat;width: 59px;height: 16px}
/*背景图片，不重复，宽，高*/
#footer ul.link li a.css:hover{background: url(images/css+h.gif) no-repeat;width: 59px;height: 16px}