DIV+CSS網(wǎng)頁布局（一）！
時(shí)間：2023-09-25 15:42:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-25 15:42:01 來源：網(wǎng)站運(yùn)營
DIV+CSS網(wǎng)頁布局（一）?。骸慊A(chǔ)自學(xué)留存，僅作筆記使用，2019.3.22更！
1，head頭部邏輯規(guī)范：
京東商城為例！<head><meta charset="utf-8"> <!--國際標(biāo)準(zhǔn)編碼 -->
<title>京東(http://JD.COM)-正品低價(jià)、品質(zhì)保障、配送及時(shí)、輕松購物!</title><!--網(wǎng)頁title標(biāo)題，第一個(gè)重要標(biāo)題，是搜索引擎了解網(wǎng)頁的入口和對網(wǎng)頁主題歸屬的最佳判斷點(diǎn)。最先出現(xiàn)的詞語權(quán)重越高，建議寫法：網(wǎng)站名（網(wǎng)址）— 網(wǎng)站介紹。 -->
<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城，為您提供正品低價(jià)的購物選擇、優(yōu)質(zhì)便捷的服務(wù)體驗(yàn)。商品來自全球數(shù)十萬品牌商家，囊括家電、手機(jī)、電腦、服裝、居家、母嬰、美妝、個(gè)護(hù)、食品、生鮮等豐富品類，滿足各種購物需求。
"><!--
Description 網(wǎng)站說明： 采用網(wǎng)頁的MATA標(biāo)簽中描述部分作為搜索結(jié)果的“內(nèi)容摘要”，建議Description作為網(wǎng)站的總體業(yè)務(wù)和主題概括，多采用“我們是…”“我們提供…”“×××網(wǎng)作為…”“電話：010…”之類語句。 -->
<meta name="keywords" content="網(wǎng)上購物,網(wǎng)上商城,家電,手機(jī),電腦,服裝,居家,母嬰,美妝,個(gè)護(hù),食品,生鮮,京東
"> <!--
Keywords 關(guān)鍵字：是搜索引擎關(guān)注點(diǎn)之一，限制在6-8個(gè)關(guān)鍵詞左右。 -->
<link rel="stylesheet" href="css/base .css"/><!--引用CSS外部樣式表 -->
</head>2，top廣告 ：先添加div通欄盒子（設(shè)置height與background-color），然后版心居中（width：1200px ; 與margin：auto；） 最后添加a鏈接 （設(shè)置height 與background：url（images/bg.png）no-repeat ; ）
3，top導(dǎo)航欄模塊：先添加div通欄盒子（設(shè)置height與background-color），然后版心居中（width：1200px ; 與margin：auto；） ，版心分為兩個(gè)部分，左邊和右邊，用兩個(gè)ul 設(shè)置（float；left ；與float：right；）浮動(dòng)設(shè)置 ，在每個(gè)li 標(biāo)簽里面添加a鏈接，分割線用一像素的小盒子隔開 ，給小盒子設(shè)置外邊距，給右邊距的ul 再添加一個(gè)float：left，完成效果。
4，logo，搜索，購物欄 全部用定位制作，以版心為相對定位。先添加div通欄盒子（設(shè)置height與background-color），然后版心居中（width：1200px ; 與margin：auto；），最后開始設(shè)置各個(gè)欄目。
在線咨詢