本學(xué)期的CSS課程已經(jīng)到了期末，我們的最終項(xiàng)目是設(shè)計(jì)和開(kāi)發(fā)一個(gè)網(wǎng)站，并為它創(chuàng)建三個(gè)頁(yè)面。在這個(gè)項(xiàng)目中，我們學(xué)習(xí)了許多關(guān)于網(wǎng)頁(yè)設(shè)計(jì)和CSS樣式的知識(shí)。下面我們來(lái)看看我為這三個(gè)頁(yè)面設(shè)計(jì)的樣式。

Homepage

這個(gè)首頁(yè)需要給人帶來(lái)一個(gè)宜人的感覺(jué)。我的設(shè)計(jì)是通過(guò)溫暖的色調(diào)和簡(jiǎn)潔的設(shè)計(jì)來(lái)實(shí)現(xiàn)這個(gè)目標(biāo)。我使用了線性漸變以及陰影效果來(lái)實(shí)現(xiàn)一個(gè)干凈的設(shè)計(jì)。下面是CSS代碼:

.header{
background-image: linear-gradient(to bottom, #F9D423, #FC8D2E);
box-shadow: 0 2px 5px rgba(0,0,0,.26);
}

Product Page

這個(gè)產(chǎn)品頁(yè)面需要有一些炫目的效果來(lái)吸引注意力。我的設(shè)計(jì)具有較大的圖像和精美的圖標(biāo)，通過(guò)使產(chǎn)品看起來(lái)很美麗，來(lái)激發(fā)購(gòu)物的興趣。我還使用了動(dòng)畫，讓使用者在觸摸圖標(biāo)時(shí)可以感受到更多的樂(lè)趣。以下是CSS代碼:

.product-image{
max-width: 100%;
}
.product-list li a i{
transform: scale(1.2);
transition: scale .3s ease-in-out;
}
.product-list li a:hover i{
transform: scale(1.5);
}

Contact Us Page

在這個(gè)聯(lián)系我們頁(yè)面中，我們必須確保用戶可以輕松地找到信息，并且頁(yè)面設(shè)計(jì)要非常干凈。我使用了簡(jiǎn)單的線框架以及一些漸變色來(lái)使頁(yè)面看起來(lái)干凈漂亮。我的設(shè)計(jì)使頁(yè)面看起來(lái)非常專業(yè)，讓用戶重新信任我們。下面是CSS代碼:

.contact-form{
background-color: transparent;
box-shadow: none;
border: 2px solid #FD5E53;
}
.form-control:focus{
border: none;
box-shadow: none;
}
.btn-send{
background-image: linear-gradient(to bottom right, #FD5E53, #3C3C3C);
}

我為這三個(gè)頁(yè)面創(chuàng)建了許多其他的CSS效果，這些效果包括響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)、文字對(duì)齊、字體和顏色等等。這個(gè)項(xiàng)目的重點(diǎn)是通過(guò)整個(gè)學(xué)期的學(xué)習(xí)來(lái)設(shè)計(jì)出吸引人的網(wǎng)站，并運(yùn)用風(fēng)格統(tǒng)一的CSS樣式來(lái)實(shí)現(xiàn)這個(gè)目標(biāo)。我相信這個(gè)項(xiàng)目可以成為我未來(lái)進(jìn)一步開(kāi)發(fā)網(wǎng)頁(yè)的基礎(chǔ)。