码迷,mamicode.com
首页 > Web开发 > 详细

网页学习(部分)CSS

时间:2015-08-05 18:42:40      阅读:262      评论:0      收藏:0      [点我收藏+]

标签:

layout.css

.col1, .col2, .col3, .cols {float:left}
.col1 {padding-left:37px;width:287px}
.col2 {padding-left:42px;width:557px}
.cols {width:263px}
#page4 .cols {width:155px}
#page4 .marg_right1 {margin-right:41px}
#page5 .cols {width:256px}
#page5 .pad_left1 {padding-left:40px}
#page6 .cols {width:68px}
#page6 .col2 {width:560px}

reset.css

a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var {background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;vertical-align:top}
ol, ul {list-style:none}
blockquote, q {quotes:none}
table, table td {padding:0;border:none;border-collapse:collapse}
img {vertical-align:top}
embed {vertical-align:top}
* {border:none}

style.css

/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {display:inline}
/* Left & Right alignment */
.left {float:left}
.right {float:right}
.wrapper {width:100%;overflow:hidden}
.relative {position:relative}
* +html .relative {position:static}
/* Global properties */
body {background:url(../images/bg_img.jpg) top center no-repeat #000;border:0;font:13px Arial, Helvetica, sans-serif;color:#3a3a3a;line-height:20px;min-width:980px;padding:10px 0}
.ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.css3 {border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;box-shadow:0 0 4px rgba(0, 0, 0, .4);-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);position:relative}
/* Global Structure */
.main {margin:0 auto;width:960px;padding:10px;background:#fff;box-shadow:0 0 7px rgba(0, 0, 0, .2);-moz-box-shadow:0 0 7px rgba(0, 0, 0, .2);-webkit-box-shadow:0 0 7px rgba(0, 0, 0, .2);position:relative}
/* main layout */
a {color:#1d77e9;text-decoration:underline;outline:none}
a:hover {text-decoration:none}
h1 {padding:27px 0 0 41px;float:left}
h2 {font-size:20px;line-height:1.2em;padding:12px 32px 16px 32px;margin-bottom:14px;background:#f7f7f7;position:relative;letter-spacing:-1px}
h2.top {border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;-webkit-border-radius:6px 6px 0 0}
h3 {font-size:30px;color:#000;line-height:1.2em;margin-top:-4px;letter-spacing:-1px;padding:0 0 21px 0}
h3 span {font-size:20px;color:#767676;line-height:1.2em;display:block;margin-top:-5px}
h4 {font-size:20px;color:#000;line-height:1.2em;padding:0 0 14px 0;letter-spacing:-1px}
p {padding-bottom:18px}
/* header */
header {height:230px;width:100%;overflow:hidden;background:url(../images/bg_top.jpg) 0 0 no-repeat}
#logo {display:block;background:url(../images/logo.png) 0 0 no-repeat;width:120px;height:104px;text-indent:-9999px}
#slogan {font-size:20px;line-height:1.2em;color:#fff;float:left;padding:95px 0 0 18px;letter-spacing:-1px}
#top_nav {float:right;padding:38px 56px 0 0}
#top_nav li {float:left;padding-left:25px;width:50px;text-align:center}
#top_nav li a {display:inline-block;padding-top:13px;color:#fff}
.nav1 {background:url(../images/img_top1.gif) center 0 no-repeat}
.nav2 {background:url(../images/img_top2.gif) center 0 no-repeat}
.nav3 {background:url(../images/img_top3.gif) center 0 no-repeat}
#menu {padding:27px 0 0 42px}
#menu li {float:left;margin-left:-1px;background:url(../images/menu_line.gif) bottom right no-repeat}
#menu .end {background:none}
#menu li a {display:block;height:71px;font-size:26px;line-height:71px;color:#fff;text-decoration:none;letter-spacing:-1px}
#menu li a span {display:block}
#menu li a span span {padding:0 32px;margin:0 6px}
#menu li a:hover, #menu #menu_active a {background:url(../images/menu_left.png) top left no-repeat;color:#000}
#menu li a:hover span, #menu #menu_active a span {background:url(../images/menu_right.png) top right no-repeat}
#menu li a:hover span span, #menu #menu_active a span span {background:url(../images/menu_bg.gif) top repeat-x}
/* content */
#content {width:100%;overflow:hidden;padding-bottom:14px}
.for_banners {background:url(../images/bg_top_img.jpg) 0 0 no-repeat;width:100%;height:342px;padding-top:30px}
.pad1 {padding:30px 0;background:url(../images/bg_top2.jpg) 0 0 no-repeat}
#page1 .pad1 {background:none}
.pad {padding:0 27px 0 32px}
.pad_bot1 {padding-bottom:10px}
.pad_bot2 {padding-bottom:15px}
.pad_bot3 {padding-bottom:32px}
.pad_left1 {padding-left:31px}
.pad_top1 {padding-top:11px}
.marg_right1 {margin-right:31px}
/* tabs begin */
.tabs {position:relative}
.tabs ul.nav {position:absolute;top:0}
.tabs ul.nav li {float:left;padding-right:1px;width:95px}
.tabs ul.nav .end {padding-right:0}
.tabs ul.nav li a {color:#fff;text-align:center;display:block;background:url(../images/tabs.gif) 0 0 repeat-x #30c1fd;line-height:42px;text-decoration:none;border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;-webkit-border-radius:6px 6px 0 0; box-shadow:0 0 3px #d0d0d0;-moz-box-shadow:0 0 3px #d0d0d0;-webkit-box-shadow:0 0 3px #d0d0d0;position:relative;overflow:hidden}
.tabs ul.nav li a:hover, .tabs ul.nav .selected a {color:#000;background:url(../images/tabs_active.gif) top repeat-x #e7e6e6}
.tabs .content {background:#fff;border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px ;-webkit-border-radius:0 0 6px 6px ; box-shadow:0 0 3px #d0d0d0;-moz-box-shadow:0 0 3px #d0d0d0;-webkit-box-shadow:0 0 3px #d0d0d0;position:relative;padding:1px;top:40px;padding-bottom:20px}
.tabs .tab-content {}
/*  tabs end */
/* tabs begin */
.tabs2 {position:relative}
.tabs2 ul.nav {position:absolute;top:0}
.tabs2 ul.nav li {float:left;padding-right:1px;width:185px}
.tabs2 ul.nav .end {padding-right:0}
.tabs2 ul.nav li a {color:#fff;text-align:center;display:block;background:url(../images/tabs.gif) 0 0 repeat-x #30c1fd;line-height:42px;text-decoration:none;border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;-webkit-border-radius:6px 6px 0 0; box-shadow:0 0 3px #d0d0d0;-moz-box-shadow:0 0 3px #d0d0d0;-webkit-box-shadow:0 0 3px #d0d0d0;position:relative;overflow:hidden}
.tabs2 ul.nav li a:hover, .tabs2 ul.nav .selected a {color:#000;background:url(../images/tabs_active.gif) top repeat-x #e7e6e6}
.tabs2 .content {background:#fff;border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px ;-webkit-border-radius:0 0 6px 6px ; box-shadow:0 0 3px #d0d0d0;-moz-box-shadow:0 0 3px #d0d0d0;-webkit-box-shadow:0 0 3px #d0d0d0;position:relative;padding:1px;top:40px;padding-bottom:20px}
.tabs2 .tab-content {}
/* tabs end */
/* The Nivo Slider styles */
#slider {height:114px;overflow:hidden;width:561px !important;margin-top:200px;margin-left:40px;float:left}
.nivoSlider {position:relative}
.nivoSlider img {position:absolute;top:0px;left:0px}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:60;display:none}
.nivo-slice {display:block;position:absolute;z-index:50;height:100%}
.aToolTip {border:1px solid #000;background:url(../images/opacity_50_black.png) repeat;color:#fff;margin:0;padding:2px 10px;font-size:11px}
.aToolTip .aToolTipContent {position:relative;margin:0;padding:0}
.button1 {display:inline-block;font-size:13px;color:#fff;text-decoration:none;line-height:28px;height:30px;padding:0 19px;background:url(../images/button_1.gif) 0 0px repeat-x #1d77e9;border-radius:5px;-moz-border-radius:5px ;-webkit-border-radius:5px ;position:relative;cursor:pointer}
.button1 strong {display:block;padding-right:16px;background:url(../images/marker_2.gif) right 10px no-repeat}
.button1:hover {background:url(../images/button_active.gif) 0 0 repeat-x #e7e6e6}
.button1:hover strong {background:url(../images/marker_1.gif) right 10px no-repeat;color:#1d77e9}
.link1 {padding-left:13px;background:url(../images/marker_1.gif) 0 6px no-repeat;display:inline-block}
.box1 {background:#fff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;box-shadow:0 0 3px #d0d0d0;-moz-box-shadow:0 0 3px #d0d0d0;-webkit-box-shadow:0 0 3px #d0d0d0;position:relative;padding:1px}
.color1 {color:#7f7f7f}
.list1 li {width:100%;overflow:hidden}
.list1 li a {padding-left:11px;background:url(../images/marker_1.gif) 0 4px no-repeat}
.calendar {width:100%;overflow:hidden;font-size:12px;color:#000;line-height:18px;text-align:center;padding-bottom:4px}
.calendar .thead li {float:left;width:27px;padding-right:1px;padding-bottom:2px}
.calendar .tbody li {float:left;padding-right:1px;width:27px;padding-bottom:1px}
.calendar .tbody li a {display:block;border:1px solid #e5e5e5;height:18px;color:#000;text-decoration:none}
.calendar .tbody li a.active {border:1px solid #1d77e9;background:#1d77e9;color:#fff}
.calendar .tbody li a.selected {background:#cccccc;border:1px solid #b7b7b7}
.box2 {background:#f7f7f7;padding:14px 32px;color:#000;margin-bottom:14px;font-size:12px}
.box2.top {border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;-webkit-border-radius:6px 6px 0 0}
.box2 strong {font-size:13px}
footer {padding:33px 0 37px 70px;background:url(../images/bg_footer.gif) top repeat-x #d7dce6;font-size:12px;color:#3a3a3a}
footer a {color:#1d77e9}
footer a:hover {}
#icons {float:left;padding-top:7px}
#icons li {float:left;padding-right:9px}
.links {padding-left:186px;width:310px;text-align:center;float:left}
.jqTransformInputWrapper {float:left;width:auto !important}
.jqTransformInputWrapper div {float:left}
.jqTransformRadioWrapper {float:left;display:block;margin-right:7px;margin-top:4px}
.jqTransformRadio {height:12px;width:12px;display:block;background:url(../images/radio.png);background-position:bottom/*display:-moz-inline-block;*/}
.jqTransformRadio.jqTransformChecked {background-position:top}
.jqTransformCheckboxWrapper {float:left;display:block;margin-right:7px;margin-top:4px}
.jqTransformCheckbox {height:12px;width:12px;display:block;background:url(../images/check.gif);background-position:bottom/*display:-moz-inline-block;*/}
.jqTransformCheckbox.jqTransformChecked {background-position:top}
.jqTransformSelectWrapper {position:relative}
.jqTransformSelectWrapper div {float:left;font:12px Arial, Helvetica, sans-serif;color:#7f7f7f;display:block;position:relative;white-space:nowrap;height:19px;line-height:19px;overflow:hidden;cursor:pointer;border:1px solid #e5e5e5;background:#fff}
.jqTransformSelectWrapper div span {padding:0 0 0 7px;display:block}
a.jqTransformSelectOpen {display:block;position:absolute;top:0px;right:0px;width:17px;height:18px;background:url(../images/select.gif) 4px 6px no-repeat}
.jqTransformSelectWrapper ul {position:absolute;top:20px;left:0px;background:#fff;border:1px solid #e5e5e5;font:12px Arial, Helvetica, sans-serif;display:none;z-index:10; padding:5px 0 2px 0;height:50px;overflow:auto;min-height:20px}
.jqTransformSelectWrapper ul a {display:block;padding:0 7px;text-decoration:none;color:#7f7f7f}
.jqTransformSelectWrapper ul a.selected {color:#7f7f7f}
.jqTransformSelectWrapper ul a:hover, .jqTransformSelectWrapper ul a.selected:hover {color:#fff;background:#1d77e9; }
/* Hidden - used to hide the original form elements */
.jqTransformHidden {display:none}
#form_1 .right.relative {margin-top:9px;margin-right:32px}
#form_1 .link1 {margin-left:32px;margin-top:13px}
#form_1 .radio {background:#f7f7f7;padding:14px 32px;margin-bottom:14px}
#form_1 .radio .left {width:88px;padding-left:0}
#form_1 .row {min-height:25px;width:100%;overflow:hidden}
#form_1 .left {width:64px;padding-left:31px}
#form_1 .input, #form_1 .input1, #form_1 .input2 {background:#fff;border:1px solid #e5e5e5;font:12px Arial, Helvetica, sans-serif;color:#7f7f7f;float:left;padding:2px 7px;height:14px;width:142px !important}
#form_1 .input1 {width:60px !important}
#form_1 .input2 {width:11px !important}
#form_1 .col1 {width:177px;padding-left:0}
#form_1 .marg_top1 {margin-top:12px}
#form_1 .pad_left1 {padding-left:9px}
#form_2 .radio {background:#f7f7f7;padding:14px 32px;margin-bottom:14px}
#form_2 .left {width:64px;padding-left:31px}
#form_2 .row {min-height:25px;width:100%;overflow:hidden}
#form_2 .input, #form_2 .input1, #form_2 .input2 {background:#fff;border:1px solid #e5e5e5;font:12px Arial, Helvetica, sans-serif;color:#7f7f7f;float:left;padding:2px 7px;height:14px;width:142px !important}
#form_2 .input1 {width:60px !important}
#form_2 .input2 {width:11px !important}
#form_2 .right.relative {margin-top:9px;margin-right:32px}
#form_2 .link1 {margin-left:32px;margin-top:13px}
#form_2 .pad_left1 {padding-left:9px}
#form_2 .help {float:left;margin-left:5px;width:20px;height:20px;background:url(../images/help.gif) 0 0 no-repeat}
#form_3 .radio {background:#f7f7f7;padding:14px 32px;margin-bottom:14px}
#form_3 .radio .left {width:88px;padding-left:0}
#form_3 .row {min-height:25px;width:100%;overflow:hidden}
#form_3 .row_select {min-height:25px;width:100%}
#form_3 .left {width:94px;padding-left:31px}
#form_3 .input, #form_3 .input1, #form_3 .input2 {background:#fff;border:1px solid #e5e5e5;font:12px Arial, Helvetica, sans-serif;color:#7f7f7f;float:left;padding:2px 7px;height:14px;width:112px !important}
#form_3 .input1 {width:60px !important}
#form_3 .input2 {width:31px !important;margin-left:5px}
#form_3 .jqTransformSelectWrapper {float:left;width:128px !important}
#form_3 .jqTransformSelectWrapper span {float:left;width:119px !important}
#form_3 .pad_left1 {padding-left:32px}
#form_3 .select1 {height:30px}
#form_3 .select1 .jqTransformSelectWrapper {float:left;width:221px !important}
#form_3 .select1 .jqTransformSelectWrapper span {float:left;width:212px !important}
#form_3 .right.relative {margin-top:9px;margin-right:32px}
#form_4 {padding-top:1px;padding-bottom:19px}
#form_4 .right.relative {margin-top:9px;margin-right:32px}
#form_4 .link1 {margin-left:32px;margin-top:13px}
#form_4 .row {min-height:25px;width:100%;overflow:hidden}
#form_4 .left {width:95px;padding-left:31px}
#form_4 .input, #form_4 .input1, #form_4 .input2 {background:#fff;border:1px solid #e5e5e5;font:12px Arial, Helvetica, sans-serif;color:#7f7f7f;float:left;padding:2px 7px;height:14px;width:111px !important}
#form_4 .input1 {width:60px !important}
#form_4 .input2 {width:11px !important}
#form_4 .col1 {width:177px;padding-left:0}
#form_4 .marg_top1 {margin-top:12px}
#form_4 .pad_left1 {padding-left:9px}
.form_5 .right.relative {margin-top:16px;margin-right:4px}
.form_5 .link1 {margin-left:32px;margin-top:13px}
.form_5 .radio {background:#f7f7f7;padding:14px 32px;margin-bottom:14px}
.form_5 .radio .left {width:108px;padding-left:0}
.form_5 .row {min-height:25px;width:100%;overflow:hidden}
.form_5 .left {width:74px}
.form_5 .input, .form_5 .input1, .form_5 .input2 {background:#fff;border:1px solid #e5e5e5;font:12px Arial, Helvetica, sans-serif;color:#7f7f7f;float:left;padding:2px 7px;height:14px;width:112px !important}
.form_5 .input1 {width:60px !important;margin-right:6px}
.form_5 .input2 {width:11px !important}
.form_5 .col1 {width:247px;padding-left:0}
.form_5 .check_box {padding-left:20px;float:left;padding-top:25px}
.form_5 .check_box span {float:left}
.form_5 .marg_top1 {margin-top:5px}
.form_5 .pad_left1 {padding-left:9px}
.form_5 .help {float:left;margin-left:5px;width:20px;height:20px;background:url(../images/help.gif) 0 0 no-repeat}
.form_5 .under {border-bottom:1px solid #f2f2f2;padding-bottom:14px;margin-bottom:13px}
.form_5 .cols {width:196px}
.form_5 .marg_right1 {margin-right:27px}
.form_5 h6 {line-height:23px;padding-left:32px;background:url(../images/marker_3.gif) 0 0 no-repeat;font-weight:normal;padding-bottom:18px}
.form_5 h5 {line-height:23px;padding-left:32px;background:url(../images/marker_4.gif) 0 0 no-repeat;font-weight:normal;padding-bottom:18px}
.form_5 .marker_left {float:left;background:url(../images/marker_left.gif) 0 0 no-repeat;width:20px;height:20px;margin-right:17px}
.form_5 .marker_right {float:left;background:url(../images/marker_right.gif) 0 0 no-repeat;width:20px;height:20px;margin-left:17px}
.form_5 .select1 {height:25px}
.form_5 .select1 .jqTransformSelectWrapper {float:left;width:121px !important}
.form_5 .select1 .jqTransformSelectWrapper span {float:left;width:112px !important}
.form_5 .cols .left {width:49px;padding-left:9px}
.form_5 .cols .select1 {height:25px}
.form_5 .cols .select1 .left {width:45px;padding-left:0px}
#form_8 .col2 {width:300px;padding-left:0}
#form_8 .col2 .left {width:55px;padding-left:9px}
#form_8 .pad_bot2 {padding-bottom:20px}
#form_8 .markers {padding:14px 0 5px 0;width:100%;overflow:hidden}
#form_8 .markers span {float:left;padding:0 13px 0 9px;font-size:12px}
#form_8 .markers span.end {padding-right:0}
#form_8 .markers strong {float:left;width:18px;height:18px;border:1px solid #e5e5e5}
#form_8 .markers strong.active {background:#1d77e9;border:1px solid #1d77e9}
#form_8 .markers strong.selected {background:#ccc;border:1px solid #b7b7b7}
#form_8 {padding-bottom:23px}
#ContactForm {padding-top:3px}
#ContactForm span {width:65px;float:left}
#ContactForm .wrapper {min-height:25px}
#ContactForm .textarea_box {min-height:470px;padding-bottom:6px;width:100%;overflow:hidden}
#ContactForm {}
#ContactForm a {margin-left:10px;float:right}
#ContactForm .input {float:left;width:219px;background:#fff;border:1px solid #e5e5e5;font:12px Arial, Helvetica, sans-serif;color:#7f7f7f;float:left;padding:2px 7px;height:14px}
#ContactForm textarea {overflow:auto;width:479px;background:#fff;border:1px solid #e5e5e5;font:12px Arial, Helvetica, sans-serif;color:#7f7f7f;float:left;padding:2px 7px;height:457px;margin:0;float:left}


网页学习(部分)CSS

标签:

原文地址:http://my.oschina.net/u/1994482/blog/488265

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!