2. 程式人生 > 其它 >jd首頁移動端---使用百分比佈局

jd首頁移動端---使用百分比佈局

阿新 • • 發佈：2020-12-19

技術標籤：jd首頁移動端（百分比佈局）csshtmlcss3html5

jd首頁移動端—使用百分比佈局

// index.css
* {
	margin: 0;
	padding: 0;
}
img {
	vertical-align: middle;
}
li {
	list-style-type: none;
}
a {
	color: #666;
	text-decoration: none;
}
body {
  width: 100%;
	min-width: 320px;
	max-width: 640px;
	margin: 0 auto;
	font-size: 14px;
	color:
 
 #666;
	line-height: 1.5;
	font-family: -apple-stystem,Helvetica,sans-serif;
	background-color: #ddd;
	height: 2000px;
}
.app {
	height: 45px;
}
.app ul li {
	float: left;
	height: 45px;
	line-height: 45px;
	text-align: center;
	background-color: #333;
	color: #fff;
}
.app ul li:nth-child(1){
	width: 8
 
%;
	text-align: center;

}
.app ul li:nth-child(1) img {
	width: 10px;
	/* 不寫高度的話 等比縮放 */
}
.app ul li:nth-child(2){
	width: 10%;
}
.app ul li:nth-child(2) img {
	width: 30px;
	vertical-align: middle;/* 圖片和文字垂直居中對齊，不加的話，圖片和文字基線對齊 */
}
.app ul li:nth-child(3){
	width: 57%;
}
.app ul li:nth-child(4){
	width:
 
 25%;
	background-color: red;
}

/*  */
.search-wrap {
	position: fixed;
	overflow:hidden;
	width: 100%;/* 固定定位要有寬度 */
	height: 44px;
	min-width: 320px;
	max-width: 640px;
}
.search-btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 44px;
	background-color: rgb(245, 190, 190);
}
.search-btn::before {
	content: '';
	display: block;
	width: 20px;
	height: 18px;
	/* background: url(../img/s-btn.png) no-repeat; 
	background-size: 20px 18px;
	margin: 14px 0 0 15px;
	*/
	
}
.search-login {
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 44px;
	line-height: 44px;
	color: #fff;
}
/* 標準流盒子可以縮放 父盒子寬度100% */
.search {
	position: relative;
	height: 30px;
	background-color: #fff;
	margin: 0 50px;
	margin-top: 7px;/* 上邊距會發生邊距合併，給父級新增overflow:hidden */
	border-radius: 15px;
}
.jd-icon {
	position: absolute;
	top: 8px;
	left: 13px;
	width: 20px;
	height: 15px;
	background-color: rgb(214, 247, 178);
	/* background: url(../img/jd.png) no-repeat; 
	background-size: 20px 15px;
	*/
}
.jd-icon::after {
	position: absolute;
	top: 0;
	right: -8px;
	content: '';
	display: block;
	width: 1px;
	height: 15px;
	background-color: #ccc;
}
.sou {
/* 搜尋框中的放大鏡，用精靈圖 */
/* 二倍精靈圖做法：
		在firework裡把精靈圖等比例縮放為原來的一半，
		根據大小 測量座標，
		注意background-size也要寫：精靈圖原來寬度的一半 */
	position: absolute;
	top: 8px;
	left: 50px;
	width: 18px;
	height: 15px;
	background-color: rgb(143, 202, 241);
	/* background: url(../img/jd-sprites.png) no-repeat -81px 0; 
	background-size: 200px;
	*/
}

/* 焦點圖 在搜尋框下邊,所以搜尋盒子定位fixed*/
.slider {
	width: 100%;
	/* 高等比縮放 ,因為沒有圖片,現設定個height*/
	height: 240px;
	background-color: rgb(240, 146, 243);
}
/* 品牌日  */
.brand {
	overflow: hidden;/* 目的是讓圖片也有圓角 */
	border-radius: 10px 10px 0 0;
}
/* 3個div各佔33.33% */
.brand div {
	float: left;
	width: 33.33%;
}
.brand div img {
	width: 100%;
	background-color: rgb(119, 241, 211);
	/* 因為沒有圖片,現設定個height */
	height: 150px;
}
/*  導航欄  */
nav {
	padding-top: 5px;
}
nav a {
	float: left;
	width: 20%;
	text-align: center;
}
nav a img {
	width: 40px;
	/* 因為沒有圖片,現設定個height */
	height: 40px;
	margin: 10px 0;
}
nav a span {
	display: block;
	
}
/* 新聞模組 */
.news {
	margin-top: 20px;
}
.news img {
	width: 100%;
	/* 因為沒有圖片,現設定個height */
	height: 120px;
}
.news a {
	float: left;
	box-sizing: border-box;
}
.news a:nth-child(1) {
	width: 50%;
}
.news a:nth-child(n+2) {
	width: 25%;
	border-left: 1px solid #ccc;
}

你好！ 這是你第一次使用 Markdown編輯器 所展示的歡迎頁。如果你想學習如何使用Markdown編輯器, 可以仔細閱讀這篇文章，瞭解一下Markdown的基本語法知識。

新的改變

我們對Markdown編輯器進行了一些功能拓展與語法支援，除了標準的Markdown編輯器功能，我們增加了如下幾點新功能，幫助你用它寫部落格：

  1. 全新的介面設計 ，將會帶來全新的寫作體驗；
  2. 在創作中心設定你喜愛的程式碼高亮樣式，Markdown 將程式碼片顯示選擇的高亮樣式 進行展示；
  3. 增加了 圖片拖拽 功能，你可以將本地的圖片直接拖拽到編輯區域直接展示；
  4. 全新的 KaTeX數學公式 語法；
  5. 增加了支援甘特圖的mermaid語法1 功能；
  6. 增加了 多螢幕編輯 Markdown文章功能；
  7. 增加了 焦點寫作模式、預覽模式、簡潔寫作模式、左右區域同步滾輪設定 等功能，功能按鈕位於編輯區域與預覽區域中間；
  8. 增加了 檢查列表 功能。

功能快捷鍵

撤銷：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜體：Ctrl/Command + I
標題：Ctrl/Command + Shift + H
無序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
檢查列表：Ctrl/Command + Shift + C
插入程式碼：Ctrl/Command + Shift + K
插入連結：Ctrl/Command + Shift + L
插入圖片：Ctrl/Command + Shift + G
查詢：Ctrl/Command + F
替換：Ctrl/Command + G

合理的建立標題，有助於目錄的生成

直接輸入1次#，並按下space後，將生成1級標題。
輸入2次#，並按下space後，將生成2級標題。
以此類推，我們支援6級標題。有助於使用TOC語法後生成一個完美的目錄。

如何改變文字的樣式

強調文字 強調文字

加粗文字 加粗文字

標記文字

刪除文字

引用文字

H2O is是液體。

210 運算結果是 1024.

插入連結與圖片

連結: link.

圖片: Alt

帶尺寸的圖片: Alt

居中的圖片: Alt

居中並且帶尺寸的圖片: Alt

當然，我們為了讓使用者更加便捷，我們增加了圖片拖拽功能。

如何插入一段漂亮的程式碼片

去部落格設定頁面，選擇一款你喜歡的程式碼片高亮樣式，下面展示同樣高亮的 程式碼片.

// An highlighted block
var foo = 'bar';

生成一個適合你的列表

  • 專案
    • 專案
      • 專案
  1. 專案1
  2. 專案2
  3. 專案3
  • 計劃任務
  • 完成任務

建立一個表格

一個簡單的表格是這麼建立的：

專案Value
電腦$1600
手機$12
導管$1

設定內容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列第二列第三列
第一列文字居中第二列文字居右第三列文字居左

SmartyPants

SmartyPants將ASCII標點字元轉換為“智慧”印刷標點HTML實體。例如：

TYPEASCIIHTML
Single backticks'Isn't this fun?'‘Isn’t this fun?’
Quotes"Isn't this fun?"“Isn’t this fun?”
Dashes-- is en-dash, --- is em-dash– is en-dash, — is em-dash

建立一個自定義列表

Markdown
Text-to- HTML conversion tool
Authors
John
Luke

如何建立一個註腳

一個具有註腳的文字。2

註釋也是必不可少的

Markdown將文字轉換為 HTML。

KaTeX數學公式

您可以使用渲染LaTeX數學表示式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通過尤拉積分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多關於的資訊 LaTeX 數學表示式here.

新的甘特圖功能，豐富你的文章

Mon 06 Mon 13 Mon 20 已完成 進行中 計劃一 計劃二 現有任務 Adding GANTT diagram functionality to mermaid
  • 關於 甘特圖 語法，參考 這兒,

UML 圖表

可以使用UML圖表進行渲染。 Mermaid. 例如下面產生的一個序列圖：

張三 李四 王五 你好！李四, 最近怎麼樣? 你最近怎麼樣，王五？ 我很好，謝謝! 我很好，謝謝! 李四想了很長時間, 文字太長了 不適合放在一行. 打量著王五... 很好... 王五, 你怎麼樣? 張三 李四 王五

這將產生一個流程圖。:

連結 長方形 圓 圓角長方形 菱形
  • 關於 Mermaid 語法，參考 這兒,

FLowchart流程圖

我們依舊會支援flowchart的流程圖：

Created with Raphaël 2.2.0 開始 我的操作 確認？ 結束 yes no
  • 關於 Flowchart流程圖 語法，參考 這兒.

匯出與匯入

匯出

如果你想嘗試使用此編輯器, 你可以在此篇文章任意編輯。當你完成了一篇文章的寫作, 在上方工具欄找到 文章匯出 ，生成一個.md檔案或者.html檔案進行本地儲存。

匯入

如果你想載入一篇你寫過的.md檔案，在上方工具欄可以選擇匯入功能進行對應副檔名的檔案匯入，
繼續你的創作。

  1. mermaid語法說明 ↩︎

  2. 註腳的解釋 ↩︎

相關推薦

jd首頁移動端---使用百分比佈局

技術標籤：jd首頁移動端（百分比佈局）csshtmlcss3html5 jd首頁移動端—使用百分比佈局

移動端常見佈局——flex佈局、百分比佈局

技術標籤：html5htmlcsscss3 移動端常用佈局方式 當移動端單獨製作時，使用傳統的佈局雖然相容性好，但是它的佈局繁瑣，且有侷限性，不能在移動端很好的佈局。所以很多時候我們可以藉助下面的幾個方式來幫助我們

移動端常見佈局

流式佈局（百分比佈局） 流式佈局,就是百分比佈局,也稱非固定畫素佈局。 通過盒子的寬度設定成百分比來根據螢幕的寬度來進行延伸,不受固定畫素的限制,內容向兩側填充。

移動端web佈局：適配

viewport與移動裝置適配的核心問題是什麼？ meta標籤與移動適配的相關內容 移動web適配

微信小程式淘寶首頁雙排圖片佈局排版程式碼(推薦)

效果圖： 使用技術主要是flex佈局,絕對定位佈局,小程式前端頁面開發,以及一些樣式!

移動端導航佈局

寫在最前：移動端中導航的網格式佈局無處無在，寬高怎麼設定相適應？元素怎麼居中對齊？不同場景怎麼選擇程式碼最高效？巧妙使用margin、padding等基礎屬性，小小技巧可以解決許多煩惱！

短視訊商城原始碼，首頁輪播圖佈局管理

短視訊商城原始碼，首頁輪播圖佈局管理實現的相關程式碼 1.設定輪播效果 它的使用其實就是把RecycleView.LayoutManager改一下就可以實現了，其他都是recycleView的正常操作：

移動端流式佈局專案之京東商城首頁

技術標籤：前端階段專案htmlhtml5csscss3 移動端流式佈局專案之京東商城首頁 文章目錄

流式佈局-京東移動端首頁

一、準備工作 　　1.技術選型 　　　　方案：採用單獨製作移動頁面方案 　　　　技術：佈局採取流式佈局

51CTO部落格移動端新版首頁上線，好文章隨你“移動”

近期部落格陸續有了新動作，在剛剛過去的51CTO部落格PC端首頁改版後，我們又對移動端的部落格首頁進行了優化~ 請看圖！

Vue黑馬頭條移動端-Day2-"首頁-文章列表”頁面

一、首頁的一個搜尋框 ===我們可以直接用van-nav-bar裡面直接加入一個button，button的插槽slot定義為titie的話就可以製作一個居中的button了

使用 flexible.js + rem 製作蘇寧移動端首頁

一、技術選型 二、搭建相關資料夾 三、設定視口標籤以及引入初始化樣式檔案和js檔案

Vue3.0入門 + Vant3.0移動端實踐（二）輪播圖模組封裝及首頁完善

技術標籤：vue.js 接著上一篇的來，上一篇介紹了環境搭建及做好了底部的導航欄模組，接下來繼續完善首頁。

京東移動端首頁

①初始化視口以及引入normalize.css檔案     <!DOCTYPE html> <html lang=\"en\"> <head>

京東移動端首頁（五）

實現如下效果，中間的搜尋欄是可以自適應的，所以中間的這個搜尋不設定寬度，兩邊兩個小盒子設定寬度，然後中間設定外邊距。

京東移動端首頁（六）

做如下這個效果：    這兩個使用before屬性加上content來設定。 效果如下：     <!DOCTYPE html>

vue移動端購物商場首頁製作

1.搭建專案框架 新建首頁主元件及其子元件並將子元件展示出來 2.封裝所需介面

基於servlet+filter+反射模擬實現天貓首頁的後端

前言：為了深入web原理，本專案沒有使用框架，主要描述了從請求到頁面展現的思路，詳情請見文末的具體專案

Vue移動端用淘寶彈性佈局lib-flexible外掛做適配的方法

淘寶彈性佈局lib-flexible lib-flexible並不單獨使用，而是搭配px2rem-loader一起做適配方案，目的是自動將css中的px轉換成rem，在專案中還是按照設計稿寫上對應的固定畫素（px）就行。

cc分享java：php中PC 和移動端 flex 通用佈局解決方案

1.flex 佈局 常用屬性 宣告flexBox容器display: flex; 主軸方向：預設行方向flex-direction: row;