【移動端網(wǎng)頁布局】流式布局案例 ② ( 實(shí)現(xiàn)頂部固定定位提示欄 | 布局元素百分比設(shè)置 | 列表樣式設(shè)置

這篇具有很好參考價(jià)值的文章主要介紹了【移動端網(wǎng)頁布局】流式布局案例 ② ( 實(shí)現(xiàn)頂部固定定位提示欄 | 布局元素百分比設(shè)置 | 列表樣式設(shè)置 | 默認(rèn)樣式設(shè)置 )。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

一、樣式測量及核心要點(diǎn)

1、樣式測量

京東手機(jī)端 https://m.jd.com/ 頂部提示使用京東 APP 打開網(wǎng)頁的提示 , 是通過固定定位放置在頂部的 ,

【移動端網(wǎng)頁布局】流式布局案例 ② ( 實(shí)現(xiàn)頂部固定定位提示欄 | 布局元素百分比設(shè)置 | 列表樣式設(shè)置 | 默認(rèn)樣式設(shè)置 )

當(dāng)向上滑動界面的時(shí)候 , 該頂部固定定位元素消失 ;

首先實(shí)現(xiàn)頂部的提示條 , 該提示條的寬度肯定是 100% , 網(wǎng)頁布局寬度 = 設(shè)備屏幕寬度 = 本提示條寬度 ;

如果不能確定具體的元素寬度 , 可以參考現(xiàn)有網(wǎng)站的實(shí)現(xiàn)方式 ;

進(jìn)入 F12 調(diào)試模式 , 使用選擇工具 , 選擇想要分析 https://m.jd.com/ 的網(wǎng)頁元素 , 第一個(gè) 關(guān)閉按鈕 , 寬度是 8% ;
【移動端網(wǎng)頁布局】流式布局案例 ② ( 實(shí)現(xiàn)頂部固定定位提示欄 | 布局元素百分比設(shè)置 | 列表樣式設(shè)置 | 默認(rèn)樣式設(shè)置 )

LOGO 圖片所在的盒子 , 寬度是 10% ;
【移動端網(wǎng)頁布局】流式布局案例 ② ( 實(shí)現(xiàn)頂部固定定位提示欄 | 布局元素百分比設(shè)置 | 列表樣式設(shè)置 | 默認(rèn)樣式設(shè)置 )

LOGO 圖標(biāo)設(shè)置的是固定值 , 30 像素 , 沒有設(shè)置高度 , 該圖片是正方形 , 寬高等比例縮放 , 其高度也是 30 像素 ;

中間的文字 " 打開京東 APP , 實(shí)惠又輕松 " 內(nèi)容 , 寬度為 57% ;

立即打開按鈕 , 寬度是 25% ;

綜合上述測量結(jié)果 :

當(dāng)前寬度可以使用百分比進(jìn)行設(shè)置 , 高度暫時(shí)寫死為 45 像素即可 ;

使用 FastStone 截圖工具的吸管工具 ( 屏幕取色器 Ctrl + Shift + P ) , 獲取背景的顏色值 , 該顏色值為 #333333 ;

右側(cè)紅色按鈕 , 背景為 #F63515 顏色 ;

2、高度設(shè)定

整個(gè)提示欄高度是 45 像素 , 這里先設(shè)置一個(gè)固定值 ;

.app {
    /* 設(shè)置頂部提示條高度 45 像素 */
    height: 45px;
}

3、列表項(xiàng)設(shè)置

下面的列表包含 4 個(gè)列表項(xiàng) , 為其設(shè)置左浮動 , 可以令四個(gè)列表項(xiàng)水平排列 , 并且沒有默認(rèn)的內(nèi)外邊距 ;

設(shè)置其行高 = 內(nèi)容高度 = 45 像素 , 令其中的文本內(nèi)容垂直居中 ;

設(shè)置其 text-align: center 樣式 , 令文本水平居中 ;

.app ul li {
    /* 設(shè)置左浮動 令列表元素水平排列 */
    float: left;
    /* 設(shè)置高度 45 像素 = 行高 垂直居中 */
    height: 45px;
    line-height: 45px;
    /* 設(shè)置總體背景 */
    background-color: #333333;
    /* 文本水平居中 */
    text-align: center;
    /* 文本顏色白色 */
    color: #fff;
}

注意要全局設(shè)置列表項(xiàng)的默認(rèn)樣式 , 不要內(nèi)外邊距 , 取消列表項(xiàng)的左側(cè)小圓點(diǎn)默認(rèn)樣式 ;

ul {
    /* 取消 ul 列表項(xiàng)的內(nèi)外邊距 */
    margin: 0;
    padding: 0;
    /* 取消列表項(xiàng)的樣式 - 左側(cè)的小圓點(diǎn) */
    list-style: none;
}

4、設(shè)置每個(gè)元素的百分比寬度

按照下圖測量的內(nèi)容 , 為每個(gè)元素設(shè)置其百分比寬度 , 注意最后一個(gè)紅色按鈕設(shè)置其紅色背景 ;
【移動端網(wǎng)頁布局】流式布局案例 ② ( 實(shí)現(xiàn)頂部固定定位提示欄 | 布局元素百分比設(shè)置 | 列表樣式設(shè)置 | 默認(rèn)樣式設(shè)置 )

.app ul li:nth-child(1) {
    /* 關(guān)閉按鈕 寬度占布局寬度 / 設(shè)備寬度 的 8% */
    width: 8%;
}

.app ul li:nth-child(2) {
    /* 設(shè)置 Logo 寬度 10% */
    width: 10%;
}
.app ul li:nth-child(3) {
    /* 中間的 "打開京東APP, 實(shí)惠又輕松" 文本盒子的寬度 */
    width: 57%;
}

.app ul li:nth-child(4) {
    /* 右側(cè)的 立即打開 紅色按鈕盒子 */
    width: 25%;
    background-color: #F63515;
}

5、設(shè)置圖像寬度

關(guān)閉按鈕和 LOGO 按鈕包含兩個(gè)圖片 , 要為圖片設(shè)置寬度 , 以及對齊方式 ;

這里特別注意 , 默認(rèn)的圖片對齊方式是基線對齊 , 只要不是基線對齊 , 隨便設(shè)置頂部 / 底部 / 中部對齊都可以實(shí)現(xiàn)圖像居中 ;

.app ul li:nth-child(1) img {
    /* 設(shè)置關(guān)閉按鈕的圖像寬度 該圖片自動水平 / 垂直對齊 */
    width: 10px;
}

.app ul li:nth-child(2) img {
    /* 在 10% 寬度的 Logo 盒子中 圖片的寬度是 30 像素
       高度沒有給出 但是 寬高等比例縮放 高度也是 30 像素 */
    width: 30px;
    /* 默認(rèn)的圖片對齊方式是基線對齊 只要不是基線對齊
       這里隨便設(shè)置 頂部 / 底部 / 中部 對齊都可以 */
    vertical-align: middle;
}

建議為圖像設(shè)置一個(gè)總體默認(rèn)樣式 , 默認(rèn)的基線對齊是個(gè)大坑 ;

img {
    /* 默認(rèn)的圖片對齊方式是基線對齊 只要不是基線對齊
       這里隨便設(shè)置 頂部 / 底部 / 中部 對齊都可以 */
    vertical-align: middle;
}

二、核心代碼編寫

下圖中的四個(gè)元素 , 使用 <ul><li></li></ul> 列表實(shí)現(xiàn) , 為 <li> 元素設(shè)置左浮動 , 就可以浮動起來 , 水平方向上進(jìn)行排序 ;
【移動端網(wǎng)頁布局】流式布局案例 ② ( 實(shí)現(xiàn)頂部固定定位提示欄 | 布局元素百分比設(shè)置 | 列表樣式設(shè)置 | 默認(rèn)樣式設(shè)置 )

1、HTML 標(biāo)簽結(jié)構(gòu)

HTML 標(biāo)簽結(jié)構(gòu) :

    <!-- 頂部 APP 提示標(biāo)簽 -->
    <header class="app">
        <ul>
            <li>
                <!-- 左側(cè)的關(guān)閉按鈕 -->
                <img src="images/close.png" alt="">
            </li>
            <li>
                <!-- 關(guān)閉按鈕右側(cè)的京東 LOGO -->
                <img src="images/logo.png" alt="">
            </li>
            <li>打開京東APP, 實(shí)惠又輕松</li>
            <li>立即打開</li>
        </ul>
    </header>

2、CSS 樣式

CSS 樣式標(biāo)簽 :

.app {
    /* 設(shè)置頂部提示條高度 45 像素 */
    height: 45px;
}

.app ul li {
    /* 設(shè)置左浮動 令列表元素水平排列 */
    float: left;
    /* 設(shè)置高度 45 像素 = 行高 垂直居中 */
    height: 45px;
    line-height: 45px;
    /* 設(shè)置總體背景 */
    background-color: #333333;
    /* 文本水平居中 */
    text-align: center;
    /* 文本顏色白色 */
    color: #fff;
}

.app ul li:nth-child(1) {
    /* 關(guān)閉按鈕 寬度占布局寬度 / 設(shè)備寬度 的 8% */
    width: 8%;
}

.app ul li:nth-child(1) img {
    /* 設(shè)置關(guān)閉按鈕的圖像寬度 該圖片自動水平 / 垂直對齊 */
    width: 10px;
}

.app ul li:nth-child(2) {
    /* 設(shè)置 Logo 寬度 10% */
    width: 10%;
}

.app ul li:nth-child(2) img {
    /* 在 10% 寬度的 Logo 盒子中 圖片的寬度是 30 像素
       高度沒有給出 但是 寬高等比例縮放 高度也是 30 像素 */
    width: 30px;
    /* 默認(rèn)的圖片對齊方式是基線對齊 只要不是基線對齊
       這里隨便設(shè)置 頂部 / 底部 / 中部 對齊都可以 */
    vertical-align: middle;
}

.app ul li:nth-child(3) {
    /* 中間的 "打開京東APP, 實(shí)惠又輕松" 文本盒子的寬度 */
    width: 57%;
}

.app ul li:nth-child(4) {
    /* 右側(cè)的 立即打開 紅色按鈕盒子 */
    width: 25%;
    background-color: #F63515;
}

3、展示效果

三、完整代碼示例

1、HTML 標(biāo)簽結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 設(shè)置 meta 視口標(biāo)簽 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入 css 初始化樣式 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入要開發(fā)的 CSS 文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>流式布局示例</title>
</head>

<body>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 設(shè)置 meta 視口標(biāo)簽 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入 css 初始化樣式 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入要開發(fā)的 CSS 文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>流式布局示例</title>
</head>

<body>
    <!-- 頂部 APP 提示標(biāo)簽 -->
    <header class="app">
        <ul>
            <li>
                <!-- 左側(cè)的關(guān)閉按鈕 -->
                <img src="images/close.png" alt="">
            </li>
            <li>
                <!-- 關(guān)閉按鈕右側(cè)的京東 LOGO -->
                <img src="images/logo.png" alt="">
            </li>
            <li>打開京東APP, 實(shí)惠又輕松</li>
            <li>立即打開</li>
        </ul>
    </header>
</body>

</html>

2、CSS 樣式

a {
    /* 取消鏈接點(diǎn)擊時(shí)的高亮效果 */
    -webkit-tap-highlight-color: transparent;
}

img,
a {
    /* 禁用 長按彈出菜單 */
    -webkit-touch-callout: none;
}

input {
    /* 設(shè)置 iOS 取消按鈕的自定義樣式 */
    -webkit-appearance: none;
}

div {
    /* 設(shè)置 CSS3 盒子模型樣式 */
    box-sizing: border-box;
}

ul {
    /* 取消 ul 列表項(xiàng)的內(nèi)外邊距 */
    margin: 0;
    padding: 0;
    /* 取消列表項(xiàng)的樣式 - 左側(cè)的小圓點(diǎn) */
    list-style: none;
}

img {
    /* 默認(rèn)的圖片對齊方式是基線對齊 只要不是基線對齊
       這里隨便設(shè)置 頂部 / 底部 / 中部 對齊都可以 */
    vertical-align: middle;
}

a {
    /* 設(shè)置字體顏色值 */
    color: #666;
    /* 取消鏈接的底部橫線樣式 */
    text-decoration: none;
}

.clearfix:after {
    /* 清除浮動的固定樣式
       如果要為某個(gè)容器清除浮動 
       為其設(shè)置 class="clearfix" 樣式 */
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}

body {
    /* 網(wǎng)頁布局寬度 = 設(shè)備寬度 */
    width: 100%;
    /* 最小寬度 320 像素 */
    min-width: 320px;
    /* 最大寬度 640 像素 */
    max-width: 640px;
    /* 居中對齊 */
    margin: 0 auto;
    /* 字體大小 14 像素 */
    font-size: 14px;
    /* 如果是蘋果就是用蘋果默認(rèn)字體 
       如果不是蘋果手機(jī) 就使用后啊面的字體 */
    font-family: -apple-system, Helvetica, sans-serif;
    /* 字體顏色 */
    color: #666;
    /* 行高 */
    line-height: 1.5;
}

.app {
    /* 設(shè)置頂部提示條高度 45 像素 */
    height: 45px;
}

.app ul li {
    /* 設(shè)置左浮動 令列表元素水平排列 */
    float: left;
    /* 設(shè)置高度 45 像素 = 行高 垂直居中 */
    height: 45px;
    line-height: 45px;
    /* 設(shè)置總體背景 */
    background-color: #333333;
    /* 文本水平居中 */
    text-align: center;
    /* 文本顏色白色 */
    color: #fff;
}

.app ul li:nth-child(1) {
    /* 關(guān)閉按鈕 寬度占布局寬度 / 設(shè)備寬度 的 8% */
    width: 8%;
}

.app ul li:nth-child(1) img {
    /* 設(shè)置關(guān)閉按鈕的圖像寬度 該圖片自動水平 / 垂直對齊 */
    width: 10px;
}

.app ul li:nth-child(2) {
    /* 設(shè)置 Logo 寬度 10% */
    width: 10%;
}

.app ul li:nth-child(2) img {
    /* 在 10% 寬度的 Logo 盒子中 圖片的寬度是 30 像素
       高度沒有給出 但是 寬高等比例縮放 高度也是 30 像素 */
    width: 30px;
    /* 默認(rèn)的圖片對齊方式是基線對齊 只要不是基線對齊
       這里隨便設(shè)置 頂部 / 底部 / 中部 對齊都可以 */
    vertical-align: middle;
}

.app ul li:nth-child(3) {
    /* 中間的 "打開京東APP, 實(shí)惠又輕松" 文本盒子的寬度 */
    width: 57%;
}

.app ul li:nth-child(4) {
    /* 右側(cè)的 立即打開 紅色按鈕盒子 */
    width: 25%;
    background-color: #F63515;
}

3、展示效果

【移動端網(wǎng)頁布局】流式布局案例 ② ( 實(shí)現(xiàn)頂部固定定位提示欄 | 布局元素百分比設(shè)置 | 列表樣式設(shè)置 | 默認(rèn)樣式設(shè)置 ) 文章來源地址http://www.zghlxwxcb.cn/news/detail-424839.html

到了這里，關(guān)于【移動端網(wǎng)頁布局】流式布局案例 ② ( 實(shí)現(xiàn)頂部固定定位提示欄 | 布局元素百分比設(shè)置 | 列表樣式設(shè)置 | 默認(rèn)樣式設(shè)置 )的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！