1. 首頁
  2. 問答
  3. 的樣式與CSS和HTML

的樣式與CSS和HTML

2012-01-22 76 views
0

地圖我有巴西的CSS地圖，我想打有黃色邊框： enter image description here的樣式與CSS和HTML

你能告訴我怎麼做黃色邊框，以便我的地圖看起來更類似於此： enter image description here

我也想知道如何使黑色背景更大，因爲地圖比背景大。有關HTML和CSS是：

<div class="main_container" style="padding-top: 15px; padding-left: 15px; padding-bottom: 15px; height: 450px;width: 912px;"><form name="cse" action="/buscar" id="cse-search-box"> 
<div> 
<input type="hidden" name="cx" value="partner-pub-7211665888260307:9230854672" /> 
<input type="hidden" name="cof" value="FORID:10" /> 
<input type="hidden" name="ie" value="UTF-8" /> 
<input type="text" name="q" size="55" /> 
<input type="submit" name="sa" value="Buscar" /> 
</div> 
</form> 
<script type="text/javascript" src="http://www.google.com.br/coop/cse/brand?form=cse-search-box&amp;lang=pt"></script> 
    <div class="map_left map map_container" style="margin-top: -11px;"> 
     <div id="area_image" class="map sprite-map_new sprite-background"> 
      <div class="" id="area_highlight" style="z-index: 0;position:absolute;"></div><img style="z-index: 999; position: absolute;" src="/static/montaonegocio_files/transparent.gif" alt="" usemap="#indexmap" width="500" height="480"> 

     </div> 
    </div> 
    <div id="site-description" style="height: 220px;"> 
     <h1 style="padding-top: 10px;"><a href="/">Anúncios</a> no site Montao.com.br:</h1> 
     <h2>são colocados manualmente pelo usuário aqui.</h2> 

    </div> 

    <div id="info_tips" style="padding-top: 0px; height: 215px; margin-top: -5px;"> 
     <h3 style="margin-bottom: 0px; padding-top: 18px;">Todos os anúncios são revistos pela equipe do Montao.com.br</h3> 
     <ul style="margin-top: 13px;"> 
      <li><img src="/static/montaonegocio_files/transparent.gif" class="sprite-square_1 sprite-background">O anúncio será visível durante dois messes. </li> 
      <li><img src="/static/montaonegocio_files/transparent.gif" class="sprite-square_2 sprite-background"><strong class="OrangeText">Grátis!</strong> </li> 
      <li><img src="/static/montaonegocio_files/transparent.gif" class="sprite-square_3 sprite-background"></li> 
     </ul> 

    </div> 
    <a class="logo " style="text-decoration: none;" href="/.htm?ca=11_s"><img class="sprite-logo_new sprite-background" alt="Montao.com.br" src="/static/montaonegocio_files/transparent.gif" border="0"></a> 
    </div> 




body { 
    font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; 
    font-size: 12px; 
    margin: 0px; 
    color:#2C4F66; 
    background-color:#000000; 
    line-height:1.3; 
} 

div#footer { 
    clear: both; 
    float: none; 
    padding: 0; 
    margin: 5px 0 0 15px; 
    width: 940px; 
} 
#footer a:link, 
#footer a:hover, 
#footer a:visited { color: #999 } 
#footer .footer_item { 
    display: inline; 
    font-weight: normal; 
    font-size: 10px; 
    color: #999; 
} 
#footer .footer_right { 
    float: right; 
    width: 50%; 
    text-align: right; 
    vertical-align: right; 
} 
#footer .footer_left { 
    float: left; 
    width: 50%; 
    text-align: left; 
    vertical-align: left; 
} 
a:hover { text-decoration: none } 
.Container { 
    width: 960px; 
    position: relative; 
    background-color:#ffffef; 
    margin: 5px 0 0 20px; 
    padding: 40px 0 0 0; 
} 
.IndexContainer { padding: 5px 0 0 10px } 
.BannerShadow { margin: 0 } 
.map { 
    width: 500px; 
    height: 480px; 
} 
.map_container { 
    float: right; 
    clear: both; 
    margin: 7px 0; 
} 
.show_state_name { 
    left: 780px; 
    width: 125px; 
    font-size: 1.1em; 
    text-align: center; 
    position: absolute; 
    top: 120px; 
    background: #d4d4d4; 
    color: #000; 
    padding: 5px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 
.AreaList { 
    background: #fff7db; 
    border: 1px solid #e5dec5; 
    float: left; 
    padding: 5px 10px; 
    width: 300px; 
    margin: 18px 0; 
} 
.expl_container { 
    width: 100%; 
    height: 60px; 
    margin-top: -20px; 
    display: block; 
} 
.Explanation { 
    display: block; 
    cursor: pointer; 
    color: #fff; 
    font-size: 22px; 
    line-height: 1.65em; 
    margin: 0 0 0 713px; 
    padding: 0 0 0 15px; 
    font-weight: normal; 
    text-transform: lowercase; 
} 
.main_container { 
    width: 903px; 
    height: 472px; 
    margin: 0; 
    padding: 25px 10px 25px 25px; 
    background: #000000; 
    border: 1px solid #e5e5e5; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 
#site-description h1, 
#site-description h2, 
#site-description h3 { 
    display: block; 
    font-weight: normal; 
    color: #666; 
    margin: 0; 
} 
#site-description h1 { 
    font-weight: bold; 
    font-size: 2.2em; 
    color: #000; 
} 
#site-description h2 { font-size: 2.2em } 
#site-description h3 { 
    font-size: 1.6em; 
    margin: 1.6em 0 0 0; 
} 
#info_tips, 
#site-description { 
    width: 300px; 
    height: 216px; 
    border: 1px solid #e5e5e5; 
    background: #fff; 
    margin-bottom: 20px; 
    padding: 5px 18px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 
.small_txt { 
    font-size: .8em; 
    font-weight: normal; 
} 
#info_tips h3 { 
    font-size: 1.6em; 
    margin: 0 0 40px 0; 
} 
#info_tips ul { 
    font-size: 1.6em; 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    _margin-top: 40px; 
} 
#info_tips li { 
    line-height: 2.2em; 
    _height: 2.2em; 
} 
#info_tips img { 
    width: 30px; 
    height: 26px; 
    vertical-align: middle; 
    margin: 0 10px 0 0; 
} 
.logo { 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

.index_regions span { 
    margin: 10px 0 0 0; 
    color: #999; 
} 
.index_regions .regions_links { 
    text-align: right; 
    vertical-align: right; 
    display: inline; 
    float: right; 
    padding-right: 20px; 
} 
.index_regions a { 
    padding-left: 5px; 
    color: #999; 
    font-weight: normal; 
} 
#header-line { 
    float: left; 
    padding-top: 12px; 
    margin-top: 20px; 
    width: 710px; 
    height: 2px; 
} 
#header-payoff { 
    clear: right; 
    float: left; 
    font-size: 13px; 
    color: #e00c16; 
    margin-top: 20px; 
    padding-left: 15px; 
    font-weight: bold; 
} 
#AdRight { 
    vertical-align: top; 
    padding-top: 200px; 
} 
#AdRight img { 
    margin: 0; 
    padding: 0; 
} 
.handheld_tip { display: none } 
#AdRight .right-campaign { 
    padding-right: 0; 
    padding-left: 10px; 
} 
#News { 
    font-size: 10px; 
    white-space: nowrap; 
} 
#News a { font-size: 12px } 
#News .pipe { 
    color: #999; 
    padding: 0 5px 0 5px; 
} 
.news_large { width: 930px } 
* html .news_large { width: 941px } 
*+html .news_large { width: 935px } 
.news_small { width: 728px } 
#startpage_ie { 
    position: absolute; 
    margin: 88px 0 0 326px; 
    text-align: center; 
    z-index: 40000; 
} 
#startpage_ff { 
    position: absolute; 
    margin: 88px 0 0 326px; 
    text-align: center; 
    z-index: 40000; 
    line-height: 110%; 
} 
#startpage_ff_info #ff2_fix { 
    position: absolute; 
    height: 35px; 
    width: 35px; 
    margin-left: -50px; 
} 
#startpage_ff_info { 
    position: absolute; 
    background: transparent url(/img/startpage_ff.png) no-repeat; 
    width: 232px; 
    height: 180px; 
    margin: 20px 0 0 315px; 
    text-align: center; 
    z-index: 40001; 
} 
#startpage_ff_info .logo { padding: 30px 0 0 0 } 
#startpage_ff_info .icon { 
    border: 2px dashed #b5af83; 
    margin-right: 7px; 
} 
#startpage_ff_info .infotext { 
    text-align: left; 
    padding: 7px 20px 0 20px; 
} 
#startpage_ff_info .logo img { padding: 5px } 
#startpage_ff_info .close { 
    text-align: right; 
    margin: 12px 20px 0 0; 
} 
#startpage_sf { 
    position: absolute; 
    margin: 20px 0 0 315px; 
    text-align: center; 
} 
.StateList td { 
    font-size: 14px; 
    font-weight: bold; 
    line-height: 16px; 
} 
.StateList a:visited { color: #936 } 
#AdTop { 
    margin-top: 4px; 
    height: 90px; 
} 
#AdSquare td { 
    vertical-align: bottom; 
    text-align: center; 
} 
#AdSquare .LeftCol, 
#AdSquare .RightCol { padding: 5px 0 0 0 } 
#AdSquare .LeftCol { 
    padding-left: 5px; 
    width: 150px; 
} 
#AdSquare .RightCol { padding-right: 12px } 
#AdSquare { 
    width: 283px; 
    margin: 8px 0 0 12px; 
} 
#AdSquare .Ad .Empty { margin: 0 } 
#AdSquare .Jobb24 { margin: 0 0 12px 0 } 
#AdSquare .Jobb24Text { padding-bottom: 1px } 
#AdSquare .MatchLink { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 
#AdSquare .Sesam { 
    margin: 1px 0 0 13px; 
    padding: 0; 
} 
#AdSquare .Sesam form { 
    margin: 0; 
    padding: 0; 
} 
#AdSquare .AdBottom { margin: 10px 0 0 0 } 
#AdSquare .AdBottom { 
    height: 120px; 
    background-repeat: no-repeat; 
    font-family: verdana; 
    padding: 12px 0 0 12px; 
    margin: 0; 
} 
#AdSquare .AdBottom { 
    float: right; 
    margin-right: 12px; 
} 
#AdSquare .AdBottom .Text { 
    font-size: 14px; 
    font-family: Verdana,Arial,Helvetica,sans-serif; 
    font-weight: bold; 
    width: 230px; 
    line-height: 105%; 
    margin: 0 0 0 12px; 
} 
#AdSquare .AdBottom .TextBoxWho { 
    width: 140px; 
    font-family: verdana,arial,helvetica; 
    font-size: 11px; 
} 
#AdSquare .AdBottom .TextBoxWhere { 
    width: 140px; 
    font-family: verdana,arial,helvetica; 
    font-size: 11px; 
} 
#AdSquare .MatchText { 
    margin: 9px 0 -4px 0; 
    position: relative; 
} 
.clean_table, 
.clean_table td { 
    padding: 0; 
    margin: 0; 
    height: 0; 
    border: 0; 
} 
.shadowed_thumb .middle_left { 
    background: url(/img/thumb_border_left.gif) repeat-y; 
    width: 2px; 
} 
.shadowed_thumb .top_middle { 
    background: url(/img/thumb_border_top.gif) repeat-x; 
    height: 2px; 
} 
.shadowed_thumb .extra_middle_right { 
    background: url(/img/thumb_extra_border_right.gif) repeat-y; 
    width: 6px; 
} 
.shadowed_thumb .extra_bottom_center { 
    background: url(/img/thumb_extra_border_bottom.gif) repeat-x; 
    height: 6px; 
} 
.shadowed_thumb .single_middle_right { 
    background: url(/img/thumb_single_border_right.gif) repeat-y; 
    width: 6px; 
} 
.shadowed_thumb .single_bottom_center { 
    background: url(/img/thumb_single_border_bottom.gif) repeat-x; 
    height: 6px; 
} 
.Front { 
    margin: 9px 0 0 0; 
    font-size: 14px; 
    line-height: 18px; 
} 
.RedText { color: #c00 } 
.OrangeText { color: #fe7b07 } 
.AdsNow { margin: 14px 0 0 0 } 
.sprite-background { background: url(http://www.montao.com.br/_/img/montao_sprites.gif) no-repeat scroll transparent } 
.sprite-balcao_logo_new { 
    background-position: -50px -265px; 
    width: 133px; 
    height: 48px; 
} 
.sprite-insert_ad { 
    background-position: -13px -145px; 
    width: 227px; 
    height: 38px; 
} 
.sprite-logo_new { 
    background-position: -11px -25px; 
    width: 421px; 
    height: 81px; 
} 
.sprite-map_new { 
    background-position: -465px 0; 
    width: 457px; 
    height: 469px; 
} 
.sprite-orange_arrow { 
    background-position: -65px -213px; 
    width: 30px; 
    height: 13px; 
} 
.sprite-state_1 { 
    background-position: -7572px -2px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_10 { 
    background-position: -3597px -165px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_11 { 
    background-position: -5483px -2px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_12 { 
    background-position: -4298px -3px; 
    width: 457px; 
    height: 369px; 
} 
.sprite-state_13 { 
    background-position: -3390px -1px; 
    width: 457px; 
    height: 268px; 
} 
.sprite-state_14 { 
    background-position: -5080px -2px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_15 { 
    background-position: -3389px -259px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_16 { 
    background-position: -2934px -1px; 
    width: 457px; 
    height: 320px; 
} 
.sprite-state_17 { 
    background-position: -2934px -259px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_18 { 
    background-position: -2346px -283px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_19 { 
    background-position: -2659px -1px; 
    width: 457px; 
    height: 369px; 
} 
.sprite-state_2 { 
    background-position: -7176px -3px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_20 { 
    background-position: -2344px -2px; 
    width: 457px; 
    height: 369px; 
} 
.sprite-state_21 { 
    background-position: -2077px -2px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_22 { 
    background-position: -1637px -2px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_23 { 
    background-position: -1102px -174px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_24 { 
    background-position: -1306px -71px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_25 { 
    background-position: -1015px -251px; 
    width: 157px; 
    height: 469px; 
} 
.sprite-state_26 { 
    background-position: 83px -380px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_27 { 
    background-position: -989px -1px; 
    width: 457px; 
    height: 169px; 
} 
.sprite-state_3 { 
    background-position: -6791px -2px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_4 { 
    background-position: -6364px -2px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_5 { 
    background-position: -6082px -1px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_6 { 
    background-position: -5781px -3px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_7 { 
    background-position: -4623px -2px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_8 { 
    background-position: -3971px -311px; 
    width: 457px; 
    height: 469px; 
} 
.sprite-state_9 { 
    background-position: -3972px -2px; 
    width: 457px; 
    height: 269px; 
} 
.sprite-square_1 { 
    background-position: -296px -150px; 
    width: 30px; 
    height: 26px; 
} 
.sprite-square_2 { 
    background-position: -332px -150px; 
    width: 30px; 
    height: 26px; 
} 
.sprite-square_3 { 
    background-position: -366px -150px; 
    width: 30px; 
    height: 26px; 
} 
html { height: 100% } 
body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background: #FFF; 
    color: #000; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
} 
#TableContainer { 
    width: 100%; 
    height: 100%; 
} 
#Page { 
    width: 960px; 
    vertical-align: top; 
    padding: 6px 0 0 40px; 
} 
td, 
tr, 
table { 
    font-size: 12px; 
    padding: 0; 
    margin: 0; 
} 
img { 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 
ul, 
ol { margin-top: 0 } 
a { 
    font-family: Arial,Helvetica,sans-serif; 
    font-weight: bold; 
    font-style: normal; 
    color: #144678; 
    text-decoration: none; 
    outline: 0; 
} 
a:hover { text-decoration: underline }

來源

2012-01-22 Niklas Rosencrantz

+0

這裏有太多的代碼。 –

+0

邊框是圖像的一部分，而不是你可以用css改變的東西。 –

+0

使用縮放的矢量圖形？ http://raphaeljs.com/australia.html – mowwwalker

回答

相關問題

 相關問題