除非使用外部网址调用,否则Blogger css样式表不起作用

时间:2014-09-03 14:44:41

标签: css blogger

最近,我在博客上写了博客,但我发现了Css样式表的问题。

当我把这个Css样式表放在b:skin标签中时:

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:700);

a img {border: none;}
a, a:visited{ color:#1E6FE0; text-decoration:underline; }
a:hover{ color:#FC7F01; text-decoration:underline; }

/****** header area *******/
.header_container {background:transparent !important;}
.header_nav { float:left; list-style-type:none; width:744px; height:31px; margin:36px 0 0 0; padding:0; background-image:url('http://www.example.com/short_navbar.png'); background-repeat:no-repeat !important;}
.header_nav div { margin:0 5px 0 5px; }
.header_nav li { float:left; }
.header_nav a { display:block; color:white; text-decoration:none; font-size:12px; line-height:30px; padding:0 7px 0 7px; font-weight:bold; text-shadow:0 2px 2px rgba(0, 0, 0, 0.3); font-family:Arial,Verdana,Helvetica,sans-serif;}
.header_nav_seleced, .header_nav a:hover { background-image:url('http://www.example.com/ttr-sprites.png'); background-repeat:repeat-x !important; padding-bottom:11px; background-position:0 -25px; }
.header_nav li { position:relative; }
.header_nav li ul { display:none; position:absolute; top:30px; left:0; padding:0; }
.header_nav li ul li { list-style:none; }
.header_nav li ul a { display:block; text-decoration:none; width:78px; background:#b95806; border-bottom:1px solid black; }
.header_nav li ul a:hover { display:block; text-decoration:none; background:#e8b866; background-image:none; min-width:56px; padding:0 7px 0 7px; }
.header_nav li:hover ul { display:block; }
.header_search_form { top:3px; left:-270px; }
.header_search_form_js { position:absolute; left: -272px; display:none; }
.header_search_form .search_bar { background-image:none; background-color:#fff; border: 1px solid #333; color:#333; font-size:12px; width: 308px; height:17px; padding:4px; -moz-border-radius: 3px; border-radius: 3px; }
.header_search_form #q { margin:0; }
.header_mousetrack { color:white; font-size:11px; font-weight:bold; margin:7px 0 11px 14px; float:left; }
.header_mousetrack a, .header_mousetrack a:visited { color:white; }
.new_portal_footer a, .new_portal_footer:visited, .new_portal_footer a:hover
.header_mousetrack a:hover { color:white; text-decoration:none; }
.header_top_ad { margin:0 0 0 0; }
.header_logo { float:left; margin:0 0 0 5px; _margin:0 0 0 0; }
.top_container {background: transparent !important; width: 988px !important; }
.header_nav_bar {display:inline;}
.ad5_container { background-image:url('http://www.example.com/black_border-2.png');  background-repeat:no-repeat !important; padding: 15px 0 0 15px; margin: 0 0 -30px -15px; height:330px; width:330px; _height:300px; _width:300px; _background:none;}


/* New header 2013 */
.hdr_top_left { width: 254px; padding-top: 18px; float: left; text-align: left; }
.hdr_nav_bar { position: relative; }
.hdr_nav_selected, .hdr_nav a:hover { background: #338CD8; }
.hdr_mag_outer { display: inline-block; margin-top: 4px; }
.hdr_search_form { position: absolute; top: 60px; right: 10px; display: none; .margin-top: -55px; }
.hdr_search_bar { border-radius: 8px; float: left; height: 24px; margin-top: 5px; width: 320px; background: transparent url(http://www.example.com/ttr_new_search_2.jpg) no-repeat scroll 0 0; }
.hdr_search_bar input { border: none; margin: 3px 5px 0; width: 305px; }
.hdr_search_bar input:focus { outline-width: 0; }
.hdr_top_ad { margin-top: 20px; }
.hdr_nav_outer { display: table; border: 0; margin: 18px 0 0 12px; min-width: 718px; background-color: #282828; float: left; }
.hdr_nav { display: table-row; overflow: hidden; margin: 0; padding: 0; min-width: 718px; list-style-type: none; }
.hdr_nav li.hdr_search_box { line-height: 1; vertical-align: top; }
.hdr_nav .hdr_search_box a { padding-top: 9px; padding-bottom: 16px; }
.hdr_nav li:hover { background: #338CD8; }
.hdr_nav li { line-height: 42px; display: table-cell; border: 0; margin: 0; padding: 0; vertical-align: middle; text-align: center; .float: left; }
.hdr_nav li, .hdr_nav2 li a { padding-bottom: 0; }
.hdr_nav li a, .hdr_nav li2 a:visited { padding: 0 7px; white-space: nowrap; color: white; display: inline-block; font-weight: normal; text-decoration: none; font-family: 'Roboto Condensed', arial, helvetica, sans-serif; font-size: 15px; text-shadow: none; .padding: 0 10px; }
.hdr_nav .hdr_search_box img { display: inline-block; width: 15px; height: 15px; margin-top: 4px; background: transparent url(http://www.example.com/mag-glass-dark.gif) no-repeat scroll center 0; }


.sprite{ width:170px;height:56px; background:url(http://www.example.com/ttr-sprites.png);}
.checkmark{width:17px;height:12px;background-position:0 0; margin-left:auto;margin-right:auto;}
.star_full_blue{ width:13px;height:14px; background-position:-18px 0px; float:left;}
.star_half_blue{ width:13px;height:14px; background-position:-31px 0px; float:left;}
.star_empty_blue{ width:13px;height:14px; background-position:-45px 0px; float:left;}
.star_full_gold{ width:13px;height:14px; background-position:-60px 0px; float:left;}
.star_half_gold{ width:13px;height:14px; background-position:-74px 0px; float:left;}
.star_empty_gold{ width:13px;height:14px; background-position:-87px 0px; float:left;}
.magnify_glass{ width:16px;height:18px; background-position:-101px 0px;}
.mailing_list_submit_button{width:60px;height:25px;background-position:-117px 0px;}
.tan_bar{width:32px;height:32px; background-position:-114px 32px;}

.right_ad_scroller {width: 300px; margin: 10px;}

/****** footer area *******/
.footer{ width:917px; float:left; padding:30px 30px 30px 30px; background-color:#000; color:#ccc; margin:0 0 0 2px; overflow:hidden;}
.footer a.footer-links{ text-align:left; display:block; float:left; width:160px; color:#ccc; text-decoration:none; line-height:30px; font-weight:100; border-top-style:solid; border-top-color:#474747; border-top-width:thin; }
.footer a.footer-links:hover{ color:#fff; }
.footer-headers{ font-size:20px; display:block; float:left; color:#fff; text-decoration:none; line-height:50px; font-weight:lighter; letter-spacing:0.05em; }
.footer-lcolumn{ font-size:14px; letter-spacing:0px; width:160px; margin:0 30px 0 0; float:left; }
.footer-rcolumn{ font-size:14px; letter-spacing:0px; width:300px; float:right; }
.footer-bar{ display:block; width:300px; .width:303px; margin:0 0 20px 0; float:right; font-size:12px; }
.footer .newsletter-input{ display:block; font-size:16px; color:#999; width:212px; height:28px; line-height:18px; float:left; padding:0 5px 0 5px; margin:0 2px 0 0; border:none; }
.footer a.footer-button:hover{ opacity:0.9; }
.footer-button:hover{ opacity:0.9; }

    footer { clear:both; text-align: center; }
    .new_portal_footer ul {
        list-style-type: none;
        margin-bottom: 10px;
        margin-top: 10px;
        padding-left: 0px;
        font-size: 8px;
    }
    .new_portal_footer {
        background-color: white;
        color: white;
        font-size: 10px;
    }
    .popcontentrow {
        width: 100%;
        clear: both;
        float: left;
        background-color: #FFFFFF;
    }
    #popcontent {
        position: absolute;
        border: 0px;
        display: none;
        background-color: #FFFFFF;
        z-index: 501;
    }
    .new_portal_footer img { margin-top:0 !important; }
    .site-tools { margin:35px auto 40px; padding:10px 0; width:68%; text-align:center; border-top:2px solid #ccc; border-bottom:2px solid #ccc; clear:both; }
    .site-tools a { margin:0 15px; padding:0; position:relative; width:80px; height:75px; overflow: hidden; display: inline-block; opacity:1; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; }
    .site-tools a:hover { opacity:.6; }
    .site-tools img { position: relative; }
    .site-tools img.newsletter { }
    .site-tools img.staff-index { top:-72px; }
    .site-tools img.mobile { top:-152px; }
    .site-tools img.contact-us { top:-222px; }
    .site-index { color:#fff; background:#000; .display:block !important; }
    .footer-wrap { margin:0 auto; padding:70px 0; width:974px; text-align: left; background:#000; }
    .footer-toggle { clear: both; background:#fff; text-align: center; border-bottom:1px solid #000; line-height:20px; }
    .footer-toggle span { padding:8px 39px 4px 34px; background:#000 url('http://www.example.com/sprite-footer-icons.gif') no-repeat -190px 13px; font-size:1.6em; cursor:pointer; }
    .links { margin:0 15px 0 15px; float:left; width:165px; }
    .links li { font-size:1.6em; line-height:36px; border-top:1px solid #333; }
    .links li a:hover { text-decoration: underline; }
    .links li.title, .nl-signup .title { margin-bottom:20px; position:relative; border-top:none; height:28px; width:188px; overflow: hidden; line-height:48px; }
    .nl-signup .title { width:224px; }
    li.title img, img.join { position:relative; }
    li.title img.company { top:0; }
    li.title img.network { top :-42px; }
    li.title img.footer-categories { top: -82px; }
    li.title img.follow-us { top: -122px;}
    .title img.join { top: -166px; }
    .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    .footer-tools { margin:10px 0 0 70px; float:left; width:318px; }
    .footer-tools .links { margin:0 0 60px; width:318px; }
    .footer-tools .links li { border-top:none; float:left; }
    .footer-tools .links li.title { float:none; }
    .footer-tools li a.rss, .footer-tools li a.fbook, .footer-tools li a.gplus, .footer-tools li a.twitter, .footer-tools li a.youtube { margin-right:20px; width:43px; height:40px; position:relative; overflow:hidden; float:left; }
    .footer-tools li a.youtube { margin-right:none; }
    .footer-tools li a img { position: relative; top:-207px; opacity:1; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; }
    .footer-tools li a:hover img { opacity: .6; }
    .footer-tools a.rss img { left:0; }
    .footer-tools a.fbook img { left:-65px; }
    .footer-tools a.gplus img { left:-135px; }
    .footer-tools a.twitter img { left:-197px; }
    .footer-tools a.youtube img { left:-264px; }



/******** body area **********/
body { background-image:  url('http://www.example.com/black-to-gray-bg.png'); background-position: left top; background-repeat:  repeat-x; background-color:  #737573 !important; margin: 0;}
.main_page_left, .main_page_right {display:none;}
.main_page_left {background-color:transparent; background-image:none !important;}
.main_page_right {background-color:transparent; background-image:none !important;}
.portal_body {width: 1000px; margin: auto; font-family: Arial, Verdana, Helvetica, sans-serif;}
/*.sponsored_ads {display:none;}*/
.t1_nav_bar { background-image: url('http://www.example.com/matrix-header.gif') !important; background-position: 8px top; background-repeat: no-repeat; background-color: transparent; height: 48px; color: white; text-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px; padding: 0 10px !important; width: 981px; }
.bottom_next_page_cont { width: 953px !important; margin-left: 9px; display: inline; }
.middle_page_inner_container { width: 953px !important; margin-left: 9px; display: inline; background-color: white; }
td.t1_left_cell_10 { width: 152px !important; }
.rank_row_last_col { }
.new_review_header { width: 937px !important; }
.ttr_top_left { width:240px; padding-left: 0px !important; padding-right: 0px !important;}
#contents { position:absolute; width:auto; top:600px; left:200px; }

    /* right nav */
    #ad_4 { float:none; text-align:center; padding:0; margin:0; }
    #ad_5 { padding:0; margin:0; border:none; }
    .top_ten_products { width:300px; min-height:85px; overflow:hidden; border:1px solid #CCC; }
    .top_ten_products_header { background-image:url('http://www.example.com/top_ten_grad.png'); width:300px; height:37px; border-bottom:1px solid #CCC; }
    .top_ten_products_header_title { float:left; font-size:18px; margin:6px 0 0 9px; }
    .top_ten_products_header_all { float:right; margin:11px 14px 0 0; }
    .top_ten_products_body { width:300px; max-height:212px; overflow:auto; }
    .top_ten_products_row { float:left; border-bottom:1px solid #CCC; width:275px; padding:2px 0 2px 0;}
    .top_ten_products_img { float:left; width:43px; height:36px; margin:0 5px 0 5px; text-align:center; }
    .top_ten_products_img img { max-width:43px; max-height:34px; margin:1px 0 1px 0; }
    .top_ten_products_rank { float:left; font-size:13px; margin: 12px 5px 0 0; }
    .top_ten_products_name { float:left; font-size:12px; margin:13px 0 0 3px; width:200px;}

我的博客页面变得凌乱。但是当我离开b:skin为空并使用外部URL调用css样式表时:

<link rel="stylesheet" type="text/css" href="http://www.example.com/stylesheet.css" media="all" /> 

该页面在Chrome上有条理且优雅地工作..在Firefox上有点麻烦。

请告诉我我使用的css代码有什么问题。

0 个答案:

没有答案