網(wǎng)頁設(shè)計與制作實訓(xùn)報告推薦閱讀(編輯修改稿)
2024-11-09 22:40 本頁面
【文章內(nèi)容簡介】 / border:0。/*定義邊框粗細(xì)*/ background: transparent。/*定義背景透明*/ } ，選擇“修改→頁面屬性”菜單命令，在打開的“頁面屬性”對話框中進(jìn)行相應(yīng)設(shè)置。在頂部的“top”元素中插入一幅圖像。如圖所示。網(wǎng)頁導(dǎo)航條是非常重要的網(wǎng)頁元素，網(wǎng)頁間的跳轉(zhuǎn)，需要通過導(dǎo)航條來完成。1）將光標(biāo)定位在“nav” Div元素中，在其內(nèi)部輸入列表項，并為列表項的各個單元設(shè)置超鏈接。設(shè)置情況如圖所示。2）添加CSS樣式。nav { height:30px。/*定義高度*/ width:100%。/*定義寬度*/ backgroundcolor:c00。/*定義背景顏色*/ overflow: hidden。/*定義溢出效果*/ } nav ul { fontsize:12px。/*定義字號*/ color:FFF。/*定義字體顏色*/ lineheight:30px。/*定義字體行高*/ whitespace:nowrap。/*定義區(qū)塊空格*/ margin:0 0 0 30px。/*定義外邊距*/ padding:0。/*定義內(nèi)邊距*/ } nav li { liststyletype:none。/*定義列表類型*/ display:inline。/*定義區(qū)塊顯示效果*/ } nav li a { textdecoration:none。/*定義字體修飾*/ fontfamily:Arial, Helvetica, sansserif。/*定義字體*/ color:FFF。/*定義字體顏色*/ padding:7px 10px。/*定義內(nèi)邊距*/ } nav li a:hover { color:ff0。/*定義字體顏色*/ backgroundcolor:red。/*定義背景顏色*/ 該樣式表使用列表項實現(xiàn)導(dǎo)航菜單功能。效果如圖所示。1）把光標(biāo)置于DIV元素“l(fā)eft”中，創(chuàng)建新的DIV元素 sideBarLefta1，并定義相關(guān)樣式2）在DIV元素“sideBarLefta1”的內(nèi)部插入推薦廠家標(biāo)志及說明文字等信息，定義相關(guān)樣式如圖所示。3），left { float:left。/*定義浮動位置 */ width:640px。/*定義寬度 */ height:832px。/*定義高度 */ }.sideBarLeftb1 { width:238px。/*定義寬度 */ height:240px。/*定義高度*/ border:ebcbb4 solid 1px。/*定義邊框的顏色、粗細(xì)、樣式*/ } 1）將光標(biāo)置于div元素“l(fā)eft”中，插入一個嵌套的div元素sideBarLefta2，2）將光標(biāo)置于DIV元素“banner”中，插入一個已經(jīng)準(zhǔn)備好的SWF元素。3）選中“banner”下面DIV元素，并定義類為“hot”，在4個小DIV元素中分別插入準(zhǔn)備好的廣告圖，效果如圖所示： sideBarLefta2 {float:left。/*定義浮動位置 */ width:390px。/*定義寬度 */ height:268px。/*定義高度*/ overflow: hidden。/*定義溢出效果*/ } banner { margintop:5px。/*定義頂端外邊距*/ border:999 solid 1px。/*定義邊框的顏色、粗細(xì)、樣式*/ width:390px。/*定義寬度 */ }.hot{ display:inline。/*定義區(qū)塊顯示效果*/ border:999 1px solid。/*定義邊框的顏色、粗細(xì)、樣式*/ width:91px。/*定義寬度 */ height:70px。/*定義高度*/ float:left。/*定義浮動位置 */ margin:2px。/*定義外邊距*/ } 1）將光標(biāo)置于DIV元素“right”中。如圖所示。2），，效果如圖所示。： right { float:left。/*定義浮動位置 */ width:320px。/*定義寬度 */ height:832px。/*定義高度 */ }.sideBarRightb3 { height:60px。/*定義高度*/ margintop:5px。/*定義頂端外邊距*/ border:ebcbb4 1px solid。/*定義邊框的顏色、粗細(xì)、樣式*/ }.sideBarRightb4 { height:93px。/*定義高度*/ margintop:5px。/*定義頂端外邊距*/border:ebcbb4 1px solid。/*定義邊框的顏色、粗細(xì)、樣式*/ marginbottom:5px。/*定義底端外邊距*/ }.sideBarRightb3,.sideBarRightb4 img { textalign:center。/*定義文本位置 */ padding:5px。/*定義內(nèi)邊距*/ } 1）將光標(biāo)置于DIV元素“l(fā)eft”中，在其下側(cè)插入一個嵌套的DIV元素“sideBarLeftb2”。2）選中Div元素“sideBarLeftb2”，將光標(biāo)定位在其內(nèi)部，創(chuàng)建多個新Div。3）選中DIV元素“sideBarLeftb3”，：sideBarLeftb3 { textalign:left。/*定義文本位置 */ float:left。/*定義浮動位置 */ height:150px。/*定義高度*/ width:280px。/*定義寬度 */ padding:4px。/*定義內(nèi)邊距*/ } 4）將光標(biāo)移到sideBarLeftb3的DIV元素中，插入兩行列表并對列表設(shè)置相關(guān)CSS參數(shù)。：.sideBarLeftb3 ul { fontsize:12px。/*定義字號*/ lineheight:6px。/*定義字體行高*/ float:left。/*定義浮動位置 */ width:270px。/*定義寬度 */ margin:0 0 0 5px。/*定義外邊距*/ padding:0。/*定義內(nèi)邊距*/ } 5）在列表中添加列表內(nèi)容，代碼如下： 機(jī)械 軸承 閥門 模具 刀具夾具 泵 密封件 粉碎機(jī) 壓縮機(jī) 減速機(jī) 機(jī)械加工 焊機(jī) 風(fēng)機(jī) 機(jī)床 彈簧 齒輪 鍋爐 更多第四篇：網(wǎng)頁設(shè)計與制作實訓(xùn)報告《網(wǎng)頁設(shè)計與制作》課程設(shè)計報告書設(shè)計題目：起止日期： 工作室或公司網(wǎng)站設(shè)計目錄一、關(guān)于網(wǎng)站 183
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1