如何動態調整標題的標識？

真的，我對html和css一無所知，但我有一個網頁，我可以在其中改變頁面的大小以適應屏幕分辨率的大小。我更喜歡頁面大小可以適應瀏覽器的大小，但是現在我可以忍受它。如何動態調整標題的標識？

在頁面上，我有了上午形象標識頭，但我不能去調整大小以適應頁面大小，我想知道這是否是可能的。

我的CSS文件的代碼是：

/* Resets 
--------------------------------------------------------------------------------*/ 

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { 
    margin: 0; 
    padding: 0; 
} 

a img { 
    border: 0; 
    /*NOTA: si se utiliza el width en la imagen se modifica el tamaño de la imagen del logo. 
    Se puede utilizar tanto en porcentaje como en pxels, pero en porcentaje no parece que se modifique, 
    solo si se indica en pixels. 
    ESTO ES UN AÑADIDO propio, no es original de la web.*/ 
    width: 100%; 
    /*@NOTA: eh height modica todas las imágenes del la página.*/ 
    //height: 100px; 
} 

a { 
    color: #6ca9d5; 
    text-decoration: none; 
} 

a:hover { 
    color: #90cbf5; 
} 

/* General Styling and Structure 
--------------------------------------------------------------------------------*/ 

body { 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 14px; 
    color: #868686; 
    /*NOTA: el margen es el que se deja entre el borde del navegador y el contenido. Por defecto es 0. 
    El padding es parecido y por defecto también es 0. Aunque se cambia y no hace nada. 
    Se tiene que poner 10px por ejemplo, px para indicar pixels. Si se pone 10% entonces es en porcentaje.*/ 
    margin: 1%; 
    padding: 0; 
    background: #fafafa; 
} 

h2 { 
    font-size: 1.7em; 
    margin: 0; 
    padding: .3em 0; 
    line-height: 1.2; 
    font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif; 
} 

#content h2 { 
    color: #90cbf5; 
} 

p { 
    font-size: 1em; 
    line-height: 1.5; 
    margin: 0; 
    padding: .5em 0; 
} 

#content p { 
    color: #868686; 
} 

#content abbr { 
    border-bottom: 1px dotted #8f8f8f; 
} 


#header-wrap, 
#main-wrap { 
    background: #fff; 
    /*@PRUEBA el original es el mind-width:1200px 
    width: 100%; 
    //min-width: 1200px; 
    vertical-align: baseline; 
} 


#page { 
    /*@NOTA: esto no deja margen a los lados, si no se indica width, pega todo al máximo de la resolución de pantalla. 
    Por defecto es 0 auto*/ 
    margin: 0 auto; 
    /*@MODIFICACION: este es el valor original. Si se amplia a 1300px por ejemplo ocupa todo el ancho 
    //de pantalla. Si no se pone nada, se pega todo a la pantalla sin márgenes. 
    Se ajusta al tamaño de pantalla, no al tamaño de la ventana del navegador.*/ 
    /*width: 900px*/ 
    /*@NOTA: si se indica un ancho automático se ajusta también al tamaño de pantalla. 
    Se ajusta al tamaño de pantalla, no al tamaño de la ventana del navegador.*/ 
    width: 100%; 
} 


#header { 
    padding: 0; 
    margin: 0; 
    /*@PRUEBA*/ 
    width: 2000px; 
} 

.wsite-logo, 
.wsite-logo a { 
    color: #90cbf5; 
    margin: 0; 
    padding: 0; 
    text-decoration: none; 
} 

.wsite-logo, 
.wsite-logo a:hover { 
    color: #90cbf5; 
} 

#logo, 
#logo a { 
    font-size: 36px; 
    color: #90cbf5; 
    font-weight: normal; 
    padding: 0; 
    font-family: "Actor", Arial, Helvetica, sans-serif; 
} 

#header-right a { 
    color: #6ca9d5; 
} 

#header-right a:hover { 
    color: #90cbf5; 
} 

/* Header Area 
-------------------------------------------------------------*/ 

#header { 
    /*El ancho parece que no se ajusta a nada, si se pone muy pequeño el logo se sigue viendo 
    completo*/ 
    width: 100%; 
    /*@NOTA: esto modifica el alto del encabezado, que es dond está el logo.*/ 
    height: 100px; 
} 

#header, 
#header table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

#header td { 
    vertical-align: middle; 
    /*@NOTA: la alineación modifica la posición de la imagen de la cabecera de GTS.*/ 
    text-align: left; 
} 


#logo { 
    /*@NOTA: el padding controla la separación desde la parte superior hasta la imagen del lgo de GTS. 
    El primer número indica el padding desde la parte superior y el segundo desde la izquierda. 
    El padding empieza a contar desde el margen de la página, es por tanto una adición al margen. 
    Se pueden indicar también porcentajes.*/ 
    padding: 0 0; 
    /*@NOTA: la opaciodad se indica con porcetanje. 1 es 100 de opacidad. Se Cambia la opacidad de la imagen 
    del logo de GTS de la cabecera. 
    ESTO ES AÑADIDO, no es original de la web.*/ 
    //Opacity: 0.2; 
} 


#header-right { 
    padding: 0 0 0 10px; 
} 

#header-right table { 
    width: 1px; 
} 

#header-right table, 
#header-right .search, 
#header-right .wsite-search { 
    clear: right; 
    float: right; 
} 

#header-right td { 
    padding: 0; 
} 




/* TOP RIGHT: Phone Number 
--------------------------------------------------------------------------------*/ 
#header-right .phone-number .wsite-text { 
    color: #868686; 
    font-size: 12px; 
    font-weight: normal; 
    font-family: Tahoma, Geneva, sans-serif; 
    text-decoration: none; 
    display: block; 
    white-space: nowrap; 
    margin: 5px 0 5px 15px; 
} 

/* TOP RIGHT: Social Links 
--------------------------------------------------------------------------------*/ 

#header-right .wsite-social { 
    vertical-align: middle; 
    margin: 5px 0 0 10px; 
} 

#header-right .wsite-social-item { 
    width: 12px; 
    height: 12px; 
    margin: 0 0 0 12px; 
} 

#header-right .wsite-social-rss { 
    background: url(rss-h.png) no-repeat; 
} 

#header-right .wsite-social-linkedin { 
    background: url(linkedin-h.png) no-repeat; 
} 

#header-right .wsite-social-facebook { 
    background: url(facebook-h.png) no-repeat; 
} 

#header-right .wsite-social-twitter { 
    background: url(twitter-h.png) no-repeat; 
} 

#header-right .wsite-social-mail { 
    background: url(mail-h.png) no-repeat; 
} 

/* TOP RIGHT: Search Box 
--------------------------------------------------------------------------------*/ 

#header-right .search { 
} 

#header-right .wsite-search { 
    margin: 5px 0 5px 15px; 
    vertical-align: middle; 
} 

#header-right .wsite-search-input { 
    width: 137px; 
    height: 13px; 
    border: none; 
    padding: 8px 8px 6px 8px !important; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #848484; 
    font-size: 12px; 
    background: url(input-bg.png) no-repeat; 
    vertical-align: middle; 
    display: inline-block; 
} 

#header-right .wsite-search-button { 
    position: relative; 
    width: 30px; 
    height: 27px; 
    color: #010101; 
    font-size: 12px; 
    border: none; 
    margin: 0; 
    padding: 0; 
    background: url(submit-bg-blue.png) no-repeat; 
    vertical-align: middle; 
    display: inline-block; 
} 

/* Navigation 
--------------------------------------------------------------------------------*/ 

#topnav { 
    clear: both; 
    margin: 0; 
    overflow: hidden; 
} 

#topnav ul { 
    list-style: none; 
    float: left; 
} 

#topnav ul li { 
    list-style: none; 
    float: left; 
    padding: 0 2px 0 0; 
} 

#topnav a { 
    float: left; 
    display: block; 
    color: #545454; 
    text-decoration: none; 
    font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif; 
    padding: 10px 15px 11px; 
    font-size: 13px; 
    border: 0; 
    outline: 0; 
    margin: 0; 
    list-style-type: none; 
    text-transform: uppercase; 
    line-height: 1; 
} 

#topnav li#active a, 
#topnav a:hover { 
    color: #545454; 
    background: #e3f3ff; 
    border: 0; 
} 

/****************************** flyout menus ******************************/ 

#wsite-menus .wsite-menu li a { 
    font-family: Tahoma, Geneva, sans-serif; 
    padding: 9px; 
    color: #545454; 
    background: #e3f3ff; 
    border: 0; 
    border-bottom: 1px solid #b6d2e6; 
} 

#wsite-menus .wsite-menu li a:hover { 
    color: #545454; 
    background: #fdfeff; 
} 

/* main */ 

#main { 
} 

#content { 
    min-height: 400px; 
    /*@NOTA: el padding modifica la separación entre las banderas con los idiomas el menú.*/ 
    padding: 30px 0; 
} 

#container { 
    /*width: 920px;*/ 
    width: 1200px; 
    margin: 0 auto; 
} 

/* 
#banner-wrap { 
    border-bottom: 1px solid #d4d4d4; 
    border-top: 1px solid #d4d4d4; 
    background: #f6f6f6; 
    min-width: 920px; 
} 
*/ 

/* 
#banner-bot { 
    background: url(banner-bot.png) left bottom no-repeat; 
    padding-bottom: 14px; 
} 



#banner-top { 
    background: url(banner-top.png) no-repeat; 
    padding-top: 14px; 
} 



#banner-mid { 
    background: url(banner-mid.png) repeat-y; 
    padding: 0 10px; 
    overflow: hidden; 
} 
*/ 

/* 
#banner-outer { 
    border: 6px solid #fff; 
} 
*/ 

/* 
#banner { 
    background: url(banner-top.png) no-repeat; 
    padding-top: 14px; 
    position: relative; 
} 
*/ 

/* PAGE TYPE: banner-tall 
--------------------------------------------------------------------------------*/ 
/* 
.tall-header-page .wsite-header { 
    width: 888px; 
    height: 258px; 
    background: url(banner-tall.jpg) no-repeat; 
} 
*/ 

/* PAGE TYPE: banner-short 
--------------------------------------------------------------------------------*/ 
/* 
.short-header-page .wsite-header { 
    width: 888px; 
    height: 168px; 
    background: url(banner-short.jpg) no-repeat; 
} 
*/ 

.no-header-page #banner-wrap { 
    padding: 8px 0; 
    border-bottom: 1px solid #d4d4d4; 
    border-top: 1px solid #d4d4d4; 
} 

/* 
.no-header-page #banner-bot { 
    display: none; 
} 
*/ 

/* PAGE TYPE: banner-landing 
--------------------------------------------------------------------------------*/ 

.landing-page #banner { 
    border: none; 
    background: none; 
    padding: 0; 
} 

.landing-page #banner-detail { 
    background: #66c9c1; 
} 

#bannerleft { 
    float: left; 
    width: 504px; 
    padding: 0; 
    position: relative; 
} 

/* 
#banner-b { 
    background: url(landing-bnr-mid-03.png) left bottom no-repeat; 
    padding-bottom: 14px; 
} 
*/ 

/* 
#banner-t { 
    background: url(landing-bnr-top.png) no-repeat; 
    padding-top: 14px; 
} 
*/ 

/* 
#banner-m { 
    background: url(landing-bnr-mid.png) repeat-y; 
    padding: 0 10px; 
    overflow: hidden; 
} 
*/ 

#banner-inner { 
    border: 6px solid #fff; 
} 

.landing-page .wsite-header { 
    /*width: 472px;*/ 
    width: 1200px; 
    height: 318px; 
    background: url(banner-landing.jpg) no-repeat; 
} 

#bannerright { 
    float: right; 
    width: 366px; 
    padding: 65px 25px 0 25px; 
} 

#bannerright h2 { 
    color: #90cbf5; 
    font-size: 32px; 
    padding: 0 0 12px 0; 
} 

#bannerright p { 
    color: #868686; 
    font-size: 1.1em; 
    padding-bottom: 25px; 
    margin: 0; 
} 

#bannerright .wsite-button { 
    margin: 0; 
} 

/* PAGE TYPE: splash 
--------------------------------------------------------------------------------*/ 

.splash-page #header { 
    width: 532px; 
} 

.splash-page #banner { 
    width: 527px; 
    height: 161px; 
    padding: 6px 4px 4px 6px; 
    background: url(banner-splash-bg.png) no-repeat; 
} 

.splash-page .wsite-header { 
    width: 515px; 
    height: 149px; 
    background: url(banner-splash.jpg) no-repeat; 
} 

.splash-page #content-container { 
    width: 528px; 
} 

.splash-page #content { 
    width: 528px; 
} 

.splash-page #footer { 
    width: 524px; 
} 

/* Footer 
--------------------------------------------------------------------------------*/ 

#footer-wrap { 
    border-top: 1px solid #dedede; 
    background: #fafafa; 
    min-width: 920px; 
} 

#footer { 
    padding: 40px 0 45px; 
    font-size: 12px; 
    color: #666; 
    font-family: Arial, sans-serif; 
    text-align: right; 
} 

#footer p { 
    color: #666; 
} 

#footer a { 
    color: #919191; 
} 

#footer a:hover { 
    color: #6ca9d5; 
} 

#footer h2 { 
    font-size: 16px; 
    margin: 0 0 2px; 
    padding: .3em 0; 
    line-height: 1.5; 
    color: #414141; 
    font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif; 
    border-bottom:1px solid #ddd; 
} 

#footer span { 
    vertical-align: middle; 
} 

#footer .wsite-social { 
    vertical-align: middle; 
} 

#footer .wsite-social-item { 
    width: 12px; 
    height: 12px; 
    margin-right:6px; 
} 

#footer .wsite-social-rss { 
    background: url(rss.png) no-repeat; 
} 

#footer .wsite-social-linkedin { 
    background: url(linkedin.png) no-repeat; 
} 

#footer .wsite-social-facebook { 
    background: url(facebook.png) no-repeat; 
} 

#footer .wsite-social-twitter { 
    background: url(twitter.png) no-repeat; 
} 

#footer .wsite-social-mail { 
    background: url(mail-h.png) no-repeat; 
} 

.wsite-footer { /* make sure enough space between element footer and attribution */ 
    margin-bottom: 15px; 
} 

/* Form Customization 
--------------------------------------------------------------------------------*/ 

.wsite-form-label { 
    display: inline-block; 
    color: #868686; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 1em; 
    padding: 12px 0 5px 0; 
} 

.form-radio-container { 
    color: #868686; 
    font-size: 14px; 
    font-family: Tahoma, Geneva, sans-serif; 
} 

.wsite-form-input { 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 13px; 
    color: #868686; 
    background: #fff; 
    border: 1px solid #dcdcdc; 
    padding: 8px 4px 5px !important; 
    width: 300px; 
    line-height: 1; /* background:#fff url(field.png) repeat-x; 
      -webkit-border-radius: 3px; 
      -moz-border-radius: 3px; 
      border-radius: 3px; 
     */ 
} 

.form-select { 
    color: #868686; 
    border: 1px solid #dcdcdc; 
    font-size: 13px; 
    background: #fff; 
    font-family: Tahoma, Geneva, sans-serif; 
    padding: 3px 4px; 
    width: 320px; 
    height: 27px; 
    line-height: 27px; /* 
      background:url#fff (field.png); 
      -webkit-border-radius: 3px; 
      -moz-border-radius: 3px; 
      border-radius: 3px; 
     */ 
} 

/* Footer Form Customization 
--------------------------------------------------------------------------------*/ 

.wsite-form-container { 
    margin-top:0px !important; 
    text-align:left; 
} 

.wsite-footer .wsite-form-label { 
    font-size: 1em; 
    padding: 5px 0 2px 0; 
} 

.wsite-footer .wsite-form-field { 
    width:300px !important; 
} 

.wsite-footer .form-radio-container { 
    font-size:1em; 
} 

.wsite-footer .wsite-form-input { 
    font-size: 1em; 
    width: 100% !important; 
} 

.wsite-footer .form-select { 
    width: 100%; 
} 

/* Buttons 
--------------------------------------------------------------------------------*/ 

/* 
    Buttons are styled with background image sprites. There are 4 unique image files: 
    - small & normal-colored (button_small_grey.png) 
    - large & normal-colored (button_large_grey.png) 
    - small & highlight-colored (button_small_orange.png) 
    - large & highlight-colored (button_large_orange.png) 

    Each of these 4 types of buttons must define a :hover state (when user's mouse is over) 
    as well as an :active state (when the user presses down). 

    Look at the CSS (especially the inner .wsite-button-inner wrapper), as well as the 
    image files to understand how the liquid-width nature of these buttons work. 
*/ 

/* small */ 

.wsite-button { 
    color: #333 !important; 
    font-family: Arial, Helvetica, sans-serif; 
    height: 34px; 
    display: inline-block; 
    font-size: 12px; 
    border: none; 
    font-weight: normal; 
    font-size: 13px; 
    text-decoration: none; 
    padding: 0 15px 0 0; 
    background: url(button.png) no-repeat 100% -105px; 
} 

.wsite-button:hover { 
    background-position: 100% -140px; 
} 

.wsite-button:active { 
    background-position: 100% -175px; 
} 

.wsite-button-inner { 
    height: 34px; 
    line-height: 34px; 
    display: block; 
    font-size: 14px; 
    font-weight: normal; 
    border: none; 
    text-decoration: none; 
    padding: 0 10px 0 25px; 
    background: url(button.png) no-repeat 0 0; 
} 

.wsite-button:hover .wsite-button-inner { 
    background-position: 0 -35px; 
} 

.wsite-button:active .wsite-button-inner { 
    background-position: 0 -70px; 
} 

/* large */ 

.wsite-button-large { 
    height: 41px; 
    background: url(button_large.png) no-repeat 100% -126px; 
    padding: 0 15px 0 0; 
} 

.wsite-button-large:hover { 
    background-position: 100% -168px; 
} 

.wsite-button-large:active { 
    background-position: 100% -210px; 
} 

.wsite-button-large .wsite-button-inner { 
    height: 41px; 
    line-height: 41px; 
    padding: 0 10px 0 25px; 
    background: url(button_large.png) no-repeat 0 0; 
} 

.wsite-button-large:hover .wsite-button-inner { 
    background-position: 0 -42px; 
} 

.wsite-button-large:active .wsite-button-inner { 
    background-position: 0 -84px; 
} 

/* highlight */ 

/* 
Making the highlighted versions of the buttons is easy because we just need 
to switch out the background images. This works because the different button 
states (normal, :hover, :active) have their sprite coordinates in the same places. 
*/ 

.wsite-button-large.wsite-button-highlight { 
    background-image: url(button_large_highlight_blue.png); 
} 

.wsite-button-large.wsite-button-highlight .wsite-button-inner { 
    background-image: url(button_large_highlight_blue.png); 
} 

.wsite-button-highlight { 
    color: #fff !important; 
    background-image: url(button_highlight_blue.png); 
} 

.wsite-button-highlight .wsite-button-inner { 
    background-image: url(button_highlight_blue.png); 
}

而且我的HTML代碼是這樣的：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
</head> 
<body class=' tall-header-page wsite-theme-dark'> 
<div id="header-wrap"> 
    <div id="page"> 
     <div id="header-container"> 
      <table id="header"> 
       <tr> 
        <td id="logo">{logo}</td> 
        <td id="header-right"> 
         <table> 
          <tr> 
           <td class="phone-number">{phone:text}</td> 
           <td class="social">{social}</td> 
          </tr> 
         </table> 
         <div class="search">{search}</div> 
        </td> 
       </tr> 
      </table> 
      <div id="topnav"> 
       {menu} 
       <div style="clear:both"></div> 
      </div> 
     </div> 
    </div> 
</div> 
<div id="banner-wrap"> 
    <div id="container"> 
     <div id="banner-bot"> 
      <div id="banner"> 
       <div id="banner-mid"> 
        <div id="banner-outer"> 
         <div class="wsite-header"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div id="main-wrap"> 
    <div id="page"> 
     <div id="main"> 
      <div id="content">{content}</div> 
     </div> 
    </div> 
</div> 
<div id="footer-wrap"> 
    <div id="page"> 
     <div id="footer">{footer}</div> 
    </div> 
</div> 
</body> 
</html>

我想知道如何更改標誌的寬度，頭，以適應頁面的寬度。

如果可能的話，如何適應頁面的寬度與瀏覽器的寬度，所以當用戶改變瀏覽器窗口的大小，適合內容到瀏覽器的大小。

謝謝。

來源

2014-01-23 Álvaro García

無論是使用寬/高值或使用JavaScript時調整窗口大小來更新佈局。我強烈建議通過使用基於百分比的寬度/高度來調整佈局的響應。另外，感謝代碼，但這太多了。您應該發佈與手頭問題相關的代碼，不需要CSS頁腳... – Jasper

另外... __不使用表佈局網站_ !! –

查看[媒體查詢]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）。他們會幫助你。 – badAdviceGuy

由於瀏覽器的分辨率/大小取決於客戶端，你可以在客戶端解決此問題。

我建議尋找到JavaScript的，因爲它有這些方便的功能（及以上）：

基於百分比

// Get the page width 
windowWidth = document.body.offsetWidth; 

// Get the page height 
windowHeight = document.body.offsetHeight;

來源

2014-01-23 17:02:28

如何動態調整標題的標識？

回答

相關問題