html+css實現小米商城首頁靜態頁面
學了一個星期的html和css,用新學的東西寫點東西,仿照小米商城的首頁按照它的頁面佈局盜用它的圖片寫了個小米商城的靜態頁面。
原始碼:連結:https://pan.baidu.com/s/1qf63B6dBAUoDd6tpHFgESQ 密碼:lwc5
- 總結寫前端時的不足:
- css很多屬性名記不住,經常需要去查筆記
- 類名命名不是很規範
- 沒有充分利用css類的特性
- 整個頁面佈局像是東拼西湊出來的(雖然拼湊的挺不錯)
- 暫時還沒實現頁面的動態效果,比如說輪播圖,選項卡,滑鼠放在某個a標籤上的動態效果(等學了javascript再回過頭來實現動態效果)
- 總結:寫前端更像是在‘織毛衣’,從上到下一點一點,一個div一個div的去寫,去佈局,沒有邏輯。通過寫這個頁面加深了對html標籤的使用以及對css元素屬性的瞭解,知道了自己的不足以及後續編寫其他頁面需要注意的一些地方。
效果圖
頂部
中間部分
尾部
相關推薦
html+css實現小米商城首頁靜態頁面
學了一個星期的html和css,用新學的東西寫點東西,仿照小米商城的首頁按照它的頁面佈局盜用它的圖片寫了個小米商城的靜態頁面。 原始碼:連結:https://pan.baidu.com/s/1qf63B6dBAUoDd6tpHFgESQ 密碼:lwc5 總結寫前端時的不足: css很
CSS+HTML - 搭建小米商城首頁 - 總結
目錄 第三方字型樣式 欄位間分割線的樣式實現 搭建網站前的reset操作 滑鼠懸浮出現浮框 - 購物車部分例子 - 重點步驟總結 塊與塊之間的分割線 塊顏色的根據位置不同而不同 懸浮上移+陰影 第三方字型樣式 fonta
個人小作品之某公司首頁靜態頁面的製作
前言 學習了一段時間的html+css,自己來製作個網站首頁靜態頁面來玩玩,檢驗自己的學習成果。 製作一個靜態頁面前必備的: html&html5基礎(html標籤的知識、運用,標籤所代表的意義)css&css3基礎(css屬性基礎知識,每個屬性所代
android開發之仿商城首頁Banner圖的實現
list()方法 into nal 滾動 商城 專業 bili pub 縮放 實現效果:當banner滾動的時候 首先會縮放當前以及上一個或下一個banner圖,當banner滾動時會,背景會隨滾動系數變化縮放(自動滾動),下面相關技術人員來分享一下源碼://0無狀態,1縮
純html+css實現點選切換tab頁
核心內容是使用單選框實現css的點選事件 大致分析一下dom結構,被切換的tab頁和按鈕放在同一個li內 一共需要切換三個頁面,也就是說需要有三個li,首先寫一下基本dom結構 一、基礎結構 我使用的是VScode的軟體,可以使用快捷建立dom,就像使用css選擇器一樣的使用
HTML+CSS實現網頁分頁頁碼
直角分頁頁碼實現 <!doctype html> <html> <head> <meta charset="utf-8"> <title>直角分頁頁碼</title> <style type="text/css"&
高仿各大商城首頁---使用分型別的RecyclerView來實現
**正所謂,一入商城深似海~ 商城類的App,確實是有許多東西值得學習,但是隻要略微斟酌一下,你又會發現,它們之間存在著許多不謀而合的相似,也就是所謂的雷同~既然如此,讓我們也來接下地氣,先從一個簡單的首頁做起吧~** 源部落格http://blog.csdn.net/cjm
利用html和csss實現京東首頁靜態頁面
京東首頁靜態頁面的程式碼書寫,熟悉html和css的使用和網頁頁面的實現。 1.編碼格式為UTF-8,由於頁面程式碼冗長,選擇外鏈式css檔案來加入css程式碼。 2.京東首頁整體分為頁面頭部導航,中部內容和頁面底部服務欄,其中頭部導航與底部服務在每個京東子頁面裡出現,可以
day71_淘淘商城專案_04_入口網站介紹 + 商城首頁搭建 + CMS內容管理系統的建立 + CMS內容管理系統的實現_匠心筆記
淘淘商城專案_04 1、門戶(前臺)系統的搭建 1.1、什麼是門戶系統 1.2、系統架構 1.3、搭建taotao-portal-web工程 1.3.1、建立Maven工程 1.3
html+css實現下拉菜單
eight lock 二級 charset type 菜單顯示 位置 去除 relative <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
微信小程序UI------實現攜程首頁頂部的界面(彈性布局)
app clas 點擊下載 技術 使用 css .html 攻略 enter 今天寫了一個攜程界面的UI,利用H5的彈性盒子來實現,學過H5彈性盒子的,來看是比較方便的,因為CSS代碼都差不多。 可以看看這篇博客 快速使用CSS 彈性盒子 效果圖如下: 主要是攜程首頁
電商商城首頁總結
引入 fontsize 桌面 window turn 頁面 log screen scss 1.首先需要看設計稿是多少(750px),根據設計稿在設置rem,也就是設置html的字體大小,25*30=750 <!-- 在HTML開頭就引入動態獲取屏幕寬度 -->
仿錘子商城首頁banner圖鼠標跟隨及視覺差效果
利用 master see border del round web ack sta 我發現現在很多網站都使用了這種效果,比如說錘子官網、elementui官網、秒味課堂等,不單單有鼠標跟隨的效果,隨著鼠標的移動還有視覺差的效果,看起來很高大上的技術,其實實現起來很簡單,主
Html+Css實現梯形選項卡
second scrip absolute 分享圖片 設置 type bottom osi ans 1,先看一下效果圖 2,梯形通過定位和設置Border來實現的,平行四邊形通過旋轉來實現的。 3,代碼如下 (1)HTML代碼 <html lang="
less和reset.css的引用及首頁活動、商品推薦模塊的建立及flex布局
add field base put ide 17. red back text ?記在前面 人生最大的希望在於:自己值得自己等待 先打開運行項目: 一、less和reset.css的使用 1.less的引用: 安裝less和les
【HTML+CSS】日歷備忘錄(靜態)
caption ica -s round width 實現 height html+css enter 需求:實現日歷備忘錄(靜態) <!DOCTYPE html> <html> <head> <meta charset=
【SSH網上商城專案實戰14】商城首頁UI的設計
轉自:https://blog.csdn.net/eson_15/article/details/51373403 前面我們利用EasyUI和SSH搭建好了後臺的基本框架,做好了後臺的基本功能,包括對商品類別的管理和商品的管理等,這一節我們開始搭建前臺頁面。 做首頁的思
js+html+css實現本地聊天室
歡迎訪問我的個人部落格:http://mrzyf.club. 程式碼完成效果: 話不多說,直接上程式碼—— css程式碼: <style type="text/css"> &nb
html css實現文字水平垂直居中顯示
這幾天在工作中遇到了一個小問題:文字內容怎麼能在div裡水平垂直居中顯示呢?同時群裡的小夥伴恰巧也有提問這個問題的,所以我就總結了一下我知道的方法。 一、利用行高(line-height)和vertical-align配合實現 具體做法如下: html: <div clas
HTML製作簡易百度首頁
前些天為了學習頁面佈局,做了一個簡易的百度首頁。做百度首頁的原因是因為它的佈局比較簡單,需要顧及的地方比較少,但是需要相關的知識點又基本上都能用上,對自己理解頁面佈局以及一些標籤(如float和margin)的用法有很大的幫助。 仿做一個網頁之前需要分析該網頁的佈局,下圖是