信息網(wǎng)絡(luò)技術(shù)與網(wǎng)絡(luò)出版發(fā)行04-資料下載頁
2025-02-28 17:15本頁面
【正文】 合內(nèi)容 Nav a:link 定義復(fù)合內(nèi)容 Nav a:visited 定義復(fù)合內(nèi)容 Nav a:hover 1. li需要 Float:left。 實現(xiàn)橫向?qū)Ш綏l效果 2. a通過 Display:block。使之成為盒子塊狀元素 3. 利用背景的垂直位移可以用同一張背景圖實現(xiàn)背景變化效果 DIV+CSS樣式排版 DIV標準布局 1 橫向 3欄 ? Container ? Header ? Menu/Navbar ? MainContent ? Footer container {margin:0 auto。 width:900px。} header { height:100px。 background:6cf。 marginbottom:5px。} menu { height:30px。 background:09c。 marginbottom:5px。} mainContent { height:500px。 background:cff。 marginbottom:5px。} footer { height:60px。 background:6cf。} container {margin:0 auto。 width:900px。} DIV標準布局 2 標準內(nèi)容頁 ? Container ? Header ? Menu/Navbar ? MainContent ? SideBar ? Content ? Footer container {margin:0 auto。 width:900px。} header { height:100px。 background:6cf。 marginbottom:5px。} mainContent { marginbottom:5px。} sidebar { float:left。 width:200px。 height:500px。 background:9ff。} content { float:right。 width:695px。 height:500px。 background:cff。}/*因 為 是固定 寬 度，采用左右浮動 方法可有效避免 ie 3像素 bug*/ footer { height:60px。 background:6cf。} DIV標準布局 3 標準內(nèi)容頁 ? Container ? Header ? Menu/Navbar ? MainContent ? SideBar1 ? SideBar2 ? Content ? Footer container {margin:0 auto。 width:900px。} header { height:100px。 background:6cf。 marginbottom:5px。} menu { height:30px。 background:09c。 marginbottom:5px。} mainContent { height:500px。 marginbottom:5px。} sidebar { float:left。 width:200px。 height:500px。 background:9ff。} sidebar2 { float:right。 width:200px。 height:500px。 background:9ff。} content { margin:0 205px !important。 margin:0 202px。 height:500px。 background:cff。} footer { height:60px。 background:6cf。} 常見縮寫與簡化 CSS Hack ? 學(xué)習(xí)資料 ? 由于不同的瀏覽器，比如 Inter Explorer 6,Inter Explorer 7,Mozilla Firefox等，對 CSS的解析認識不一樣，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的 CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。 作業(yè) 5 CSS模板修改 演講完畢，謝謝觀看！
醫(yī)療健康相關(guān)推薦
鄂ICP備17016276號-1