<address id="xpjh9"><listing id="xpjh9"><meter id="xpjh9"></meter></listing></address>

<address id="xpjh9"><address id="xpjh9"><listing id="xpjh9"></listing></address></address>
<noframes id="xpjh9">
<noframes id="xpjh9">

<address id="xpjh9"><address id="xpjh9"><listing id="xpjh9"></listing></address></address>
    <form id="xpjh9"></form><address id="xpjh9"><listing id="xpjh9"><menuitem id="xpjh9"></menuitem></listing></address>

      <noframes id="xpjh9">
      VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
      SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
      當前位置:
      首頁 > 網站開發 > HTML >
      • css教程之搭建框架

      • 2015-01-22 23:57 來源:未知
      搭建框架(相關css教程
      首先在dw里新建一個html文件:

      點擊創建后會自動生成如下代碼的一個html文件,保存為index.html并把無標題文檔改為:主頁。強調一點,許多同學喜歡把第一行代碼刪除掉,認為沒用,其實這句話的作用大著呢,它標明以何種形式解析文檔,如果刪除可能會引起樣式表失效或其它意想不到的問題。接下來需要插入以上各個塊的標簽了,以插入header的標簽為例,其它的插入方法類同。
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>主頁</title>
      </head>
      <body>
      </body>
      </html>

      按照上圖的方法依次插入標簽,或者直接在代碼視圖中手工輸入,代碼如下:(注意main和side在maincontent里包含著呢)
      <div id="header">此處顯示 id "header" 的內容</div>
      <div id="nav">此處顯示 id "nav" 的內容</div>
      <div id="maincontent">
        <div id="main">此處顯示 id "main" 的內容</div>
        <div id="side">此處顯示 id "side" 的內容</div>
      </div>
      <div id="footer">此處顯示 id "footer" 的內容</div>
      從上邊的效果圖分析得知,整個網頁是居中瀏覽器顯示的,按照這樣的寫法需要把以上的header、nav、maincontent、footer都設置寬度并居中,這樣做起來很麻煩,所以再在這些標簽外增加一下父標簽,設置這個父標簽寬度并居中后,是不是所有的標簽都居中了呢。增加后的代碼如下:
      <div id="container">
      <div id="header">此處顯示 id "header" 的內容</div>
      <div id="nav">此處顯示 id "nav" 的內容</div>
      <div id="maincontent">
        <div id="main">此處顯示 id "main" 的內容</div>
        <div id="side">此處顯示 id "side" 的內容</div>
      </div>
      <div id="footer">此處顯示 id "footer" 的內容</div>
      </div>
      html框架代碼寫完后,下邊就需要設置css樣式表了。先測量下效果圖的整體寬度,然后設置container也是這個寬度并居中。說起測量效果圖寬度,方法有多種,可以直接查看圖片尺寸。如果測量其中某一塊的寬度,可以使用測量軟件,也可以在ps下測量。本人一般在ps下測量,因為效果圖在ps下制作的,所以用ps測量也比較方便。方法是首選項里把ps的單位改為像素,然后用選區選中要測量的部分,在信息面板中就顯示出當前選區的寬高了(如果你實在不知道怎么改單位,怎么選區怎么查看的,就要補習一下ps啦)。

      測量后得知:整體寬度為900px,main部的寬度為664px,side寬度為228px。把這三個基本的寬度測量后,下面就可以寫css代碼了。由于本實例是按照實際當中應用來做的,所以css樣式表就最好寫在單獨文件里了,不要再寫在文件內部了,這樣可以利用代碼的重用性,減少很多勞動強度。下面就新建一個css樣式表文件:在DW文件菜單選擇新建,然后在打開的窗口頁面類型中選擇css,創建后保存在css文件夾中并命名為layout.css


      保存后先設置全局的樣式,而后寫每一塊單獨的樣式,全局樣式如下:
      body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
      ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
      ul { list-style:none;}
      img { border:0px;}
      a { color:#05a; text-decoration:none;}
      a:hover { color:#f00;}
      全局的樣式定義完后,下面定義以上幾大塊的樣式,先設置下#containerr的樣式如下:
      #container { width:900px; margin:0 auto;}
      預覽下index.html,發現并沒有改變,這是為什么呢?因為剛定義的樣式表沒有和html文件關聯,所以設置的樣式當然不能對它生效了,還記得第一天課時講的幾種樣式并聯方式嗎?下面我操作一遍:在css面板中點擊附加樣式表按鈕,然后在彈出的窗口中選擇剛才創建的樣式表文件,確定,ok了,預覽一下,是不是整體已經居中了呢。


      如果已經是寬度為900px并居中,說明樣式和文件關聯好了。這就是為什么要定義一個站點了,因為許多文件要關聯在一起才能構成一個完整的網頁,所以要把它們放在一起,才能讓這個頁面找到和它相關的文件在哪里。下面設置內部幾大塊的樣式,為了便于觀察,我們把部分塊設置了背景色。代碼如下:
      /*body*/
      #container { width:900px; margin:0 auto;}
      /*header*/
      #header { height:70px; background:#CCFFCC; margin-bottom:8px;}
      #nav { height:30px; background:#CCFFCC; margin-bottom:8px;}
      /*main*/
      #maincontent { margin-bottom:8px;}
      #main { float:left; width:664px; height:500px; background:#FFFF99;}
      #side { float:right; width:228px; height:500px; background:#FFCC99;}
      /*footer*/
      #footer { height:70px; background:#CCFFCC;}
      現在預覽一下:在IE6下#maincontent的底部外邊距并沒有生效,而在IE8下,#footer干脆跑到#maincontent的下邊了,這又是怎么回事呢?如果前邊幾天你都認真學的話,那么這個問題已經不是問題了。這就是之前我們講的,如果一個容器內的元素都浮動的話,那么它的高度將不會去適應內部元素的高度。解決辦法是在#maincontent增加 overflow:autol; zoom:1;,這樣就可以讓它自動適應內部元素的高度了。
      現在再預覽一下,是不是都正常了。為了更加保險,建議在header、nav、maincontent、footer之間增加如下一句代碼并設置css樣式如下,它的作用是清除浮動。
      <div class="clearfloat"></div>
      .clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>主頁</title>
      <link href="http://www.aa25.cn/upload/2010-09/16/layout.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
      <div id="container">
      <div id="header">此處顯示 id "header" 的內容</div>
      <div class="clearfloat"></div>
      <div id="nav">此處顯示 id "nav" 的內容</div>
      <div class="clearfloat"></div>
      <div id="maincontent">
      <div id="main">此處顯示 id "main" 的內容</div>
      <div id="side">此處顯示 id "side" 的內容</div>
      </div>
      <div class="clearfloat"></div>
      <div id="footer">此處顯示 id "footer" 的內容</div>
      </div>
      </body>
      </html>
      提示:可以先修改部分代碼后再運行
      相關教程
      江苏快3 三亚 | 玉环 | 涿州 | 永康 | 乌兰察布 | 陇南 | 乳山 | 库尔勒 | 石河子 | 台州 | 德州 | 克拉玛依 | 连云港 | 三亚 | 庆阳 | 聊城 | 姜堰 | 临沂 | 玉环 | 烟台 | 延边 | 临沂 | 东台 | 诸城 | 博尔塔拉 | 北海 | 平潭 | 德清 | 江西南昌 | 哈密 | 南京 | 日土 | 定州 | 东台 | 公主岭 | 中卫 | 迁安市 | 章丘 | 如皋 | 吴忠 | 天门 | 澄迈 | 德阳 | 承德 | 双鸭山 | 正定 | 榆林 | 许昌 | 龙口 | 莱州 | 芜湖 | 慈溪 | 高雄 | 浙江杭州 | 河北石家庄 | 湖北武汉 | 洛阳 | 四川成都 | 商洛 | 唐山 | 沧州 | 上饶 | 桐城 | 泗阳 | 防城港 | 铜川 | 巴中 | 山南 | 雅安 | 中山 | 石河子 | 鹤岗 | 台湾台湾 | 东海 | 焦作 | 石狮 | 陕西西安 | 黔南 | 台山 | 榆林 | 阜新 | 湘西 | 平顶山 | 海拉尔 | 鹤壁 | 顺德 | 项城 | 随州 | 云浮 | 任丘 | 双鸭山 | 九江 | 六安 | 泗阳 | 海宁 | 象山 | 建湖 | 鹰潭 | 仙桃 | 广饶 | 玉林 | 黄石 | 凉山 | 十堰 | 无锡 | 偃师 | 宿州 | 咸阳 | 上饶 | 阿拉尔 | 南平 | 顺德 | 娄底 |