項目12-購物街網(wǎng)站制作

購物街網(wǎng)站制作項目要點網(wǎng)頁結(jié)構(gòu)的設(shè)置 01.02.內(nèi)容和樣式分離技能目標(biāo)會設(shè)置通用樣式01.02.能靈活運用浮動任務(wù)1設(shè)置通用樣式任務(wù)1設(shè)置通用樣式任務(wù)1設(shè)置通用樣式命令行方式創(chuàng)建用戶01首先要建立一個網(wǎng)站。站點文件夾名字為shoping，在站點文件夾創(chuàng)建首頁index.html，創(chuàng)建文件夾css，放置我們的樣式表文件main.css，創(chuàng)建文件夾image，放置我們所用到的網(wǎng)頁圖片。02首頁是水平居中的。設(shè)置一個外層容器container，將它的max-width設(shè)置為1080px。如果瀏覽器窗口的寬度大于1080px，那么就顯示為1080。如果瀏覽器的寬度小于1080，就以瀏覽器窗口大小進行顯示。然后設(shè)置外層容器container的margin:0auto，這樣網(wǎng)頁內(nèi)容水平居中。同時設(shè)置body的字體大小和顏色為body{font-size:14px;color:#444;}。任務(wù)1設(shè)置通用樣式命令行方式創(chuàng)建用戶03首頁中導(dǎo)航欄左邊有一部分內(nèi)容，右邊有一部分內(nèi)容，因此設(shè)置左浮動和右浮動。作為通用樣式設(shè)置放在樣式的前面進行設(shè)置，.fl{float:left;}.fr{float:right;}。04發(fā)現(xiàn)外層容器container的高度變?yōu)榱?，是什么原因呢？主要是因為container容器的高度是由它內(nèi)子元素的高度確定的。現(xiàn)在的兩個元素都設(shè)置為浮動，因此高度就為零了。這個問題怎么解決呢？那就是清除浮動。如何清除呢？我們可以在fl的前面和fr的后面進行浮動元素的清除。也就是在第一個浮動元素之前和最后一個浮動元素之后進行浮動元素的清除，這時我們可以使用css當(dāng)中的偽類的概念設(shè)置.clear-f:after,.clear-f:before{display:block;clear:both;}。任務(wù)1設(shè)置通用樣式命令行方式創(chuàng)建用戶05分析首頁，很多元素是水平并列排列的，假設(shè)并列排列的元素有四個，他們平均分配我們的瀏覽器寬度的話，每一個就占25%，按照這個思路，設(shè)置column類，使其顯示為塊級元素，進行相對定位，最小高度是1像素，并且左浮動，之后分別定義col-1到col-9類，它們占總寬度的10%，20%，90%等。任務(wù)2設(shè)計網(wǎng)頁結(jié)構(gòu)任務(wù)2設(shè)計網(wǎng)頁結(jié)構(gòu)命令行方式創(chuàng)建用戶分析頁面的結(jié)構(gòu)。最上面是一個導(dǎo)航欄，導(dǎo)航欄下面是一個搜索欄，搜索欄中有l(wèi)ogo、搜索、購物車等內(nèi)容。下面是主體內(nèi)容區(qū)：主體的左邊分類，中間輪播，輪播的下面是小廣告，主體區(qū)的右邊是登錄注冊以及公告等信息。主體區(qū)下面是不同區(qū)的促銷，比如女裝促銷區(qū)、鞋帽促銷區(qū)、化妝品的促銷等等，網(wǎng)頁的最下面就是頁腳部分。這個實戰(zhàn)我們沒有添加具體圖片，我們主要進行布局的設(shè)計，大家可以根據(jù)自己的需要進行實際圖片的添加。任務(wù)3設(shè)計頁面內(nèi)容和樣式任務(wù)3設(shè)計頁面內(nèi)容和樣式命令行方式創(chuàng)建用戶背景色都去掉，然后設(shè)置.top-nav的背景色為淺灰色.top-nav{background:#eee;}，設(shè)置超鏈接的樣式無下劃線a{text-decoration:none;}，頁面其他位置也會出現(xiàn)其他鏈接，因此我們把top-nav塊中的鏈接定義為.item，超鏈接本來是inline元素，將其設(shè)置為inline-block，然后設(shè)置padding，顏色#666。鼠標(biāo)移到超鏈接上顏色設(shè)置為#333，也就是顏色設(shè)置深一點，有一個視覺反饋任務(wù)3設(shè)計頁面內(nèi)容和樣式命令行方式創(chuàng)建用戶top-nav的下面是header部分。最左邊是一個logo，我們定義一個類名叫l(wèi)ogo，里邊放置LOGO圖片，也可以是文字，我們把文字設(shè)置為35px，它的padding設(shè)置為上下20像素，左右0像素。搜索欄的邊框設(shè)置類名search-bar，為其加一個邊框：#dd182b,2px,solid，背景色也設(shè)置為#dd182b顏色。input寬度占80%，button寬度20%，各自顯示block，左浮動。隱藏input和button的邊框，將其屬性border設(shè)置為0。設(shè)置button的背景顏色#dd182b。任務(wù)3設(shè)計頁面內(nèi)容和樣式命令行方式創(chuàng)建用戶主促銷區(qū)main-promote，分為左中右三塊。左邊cat類，cat類的背景色#6e6568，文本顏色#fff。原來的內(nèi)容“分類導(dǎo)航”使用下面的內(nèi)容取代，類item的padding:12px20px;，鼠標(biāo)移上去的時候，添加一個深一些顏色的類似遮罩的背景。部分代碼如下。主促銷區(qū)main-promote的中間部分是輪播廣告區(qū)，因為我們還沒有學(xué)習(xí)JavaScript，因此這里先放一張圖片，等學(xué)習(xí)JavaScript之后，放置三張圖片輪播顯示。圖片大小2000*900，因為圖片比較大，所以設(shè)置其樣式為img{max-width:100%;display:block;