「前端架構(gòu)師詳解Css12」案例“類(lèi)天貓掃碼登錄實(shí)現(xiàn)”并分享代碼

情提示：以下代碼是我們邀請(qǐng)的前端架構(gòu)師基于天貓門(mén)戶(hù)編寫(xiě)的css相關(guān)代碼，現(xiàn)在免費(fèi)分享給大家，獲取的方式為：

關(guān)注此頭條號(hào)“互聯(lián)網(wǎng)IT信息”——>私信發(fā)送 “天貓css” ，（注意：css全是小寫(xiě)）即可得到源代碼的獲取方式。

1. 此篇文章講解目錄：

案例和由此案例重點(diǎn)講解的知識(shí)點(diǎn)介紹
案例代碼實(shí)現(xiàn)

2. 案例和相關(guān)知識(shí)點(diǎn)介紹

此案例是頁(yè)面，效果如下：

此頁(yè)面的技術(shù)實(shí)現(xiàn)解析：通過(guò)css盒模型的絕對(duì)定位、相對(duì)定位來(lái)控制整體div的位置；使用padding和margin來(lái)控制div內(nèi)部塊的位置；

3. 此案例的代碼實(shí)現(xiàn)

第一步：編寫(xiě)背景banner的html

第二步：定義背景banner的css

第三步：編寫(xiě)登錄框的html

第四步：編寫(xiě)登錄div的樣式，使用絕對(duì)定位和padding來(lái)控制位置和里面內(nèi)容的內(nèi)邊距

第五步：編寫(xiě)title和掃碼部分的樣式，使用margin來(lái)控制塊與塊之間的距離

第六步：編寫(xiě)掃碼說(shuō)明部分的css，使用margin來(lái)控制位置

第七步：編寫(xiě)注冊(cè)和密碼登錄部分樣式，同樣適用margin來(lái)控制與上一個(gè)掃碼說(shuō)明之間的距離

例最終效果如下：

一、設(shè)置整個(gè)網(wǎng)頁(yè)的背景色

圖1

圖2

二、創(chuàng)建一個(gè)盒子，讓其水平居中，距離上邊200像素。

圖3

圖4

三、把盒子設(shè)置四個(gè)角為圓角，圓10個(gè)像素。

圖5

圖6

四、在大盒子里做一個(gè)ding盒子，設(shè)置它上面兩個(gè)角是圓角，下面兩個(gè)角是直角。

圖7

圖8

五、ding盒子里輸入幾個(gè)字，讓這幾個(gè)字在盒子里水平居中，垂直居中，關(guān)于盒子內(nèi)居中問(wèn)題可參看我寫(xiě)的文【203】。

圖9

圖10

六、在deng盒子里面再做三個(gè)小盒子，取名為ref，注意如果這三個(gè)盒子不用浮動(dòng)，會(huì)有什么效果，這個(gè)你可以試試看。

圖11

圖12

七、往ref盒子里面添加信息，發(fā)下圖，這里順便學(xué)習(xí)兩個(gè)標(biāo)簽，一個(gè)是input，一個(gè)是button。

圖13

圖14

八、去掉背景色，然后用盒子內(nèi)居中的方法，讓這些元素居中。

圖15

圖16

九、通過(guò)樣式，設(shè)置按鈕的大小和字的大小，這里我特地用id來(lái)給元素上名字，不同于class，在樣式里調(diào)用的時(shí)候，一個(gè)是前面加.一個(gè)是前面加#。

圖17

圖18

十、最后設(shè)置一下密碼輸入框，輸入內(nèi)容時(shí)為密碼隱藏符號(hào)。

圖19

圖20

TML如何制作在透明輸入框里面添加圖標(biāo)

最近在寫(xiě)一個(gè)律師推薦前臺(tái)的網(wǎng)站，在上面搜索框這里出現(xiàn)了問(wèn)題，我想把搜索的圖標(biāo)放在搜索框里面，但是弄了半天都不大如意……

話(huà)不多說(shuō)，我們直接進(jìn)入主題：

基本思路

其實(shí)就把輸入框與后面的圖標(biāo)一起放在一個(gè)div里面，然后將輸入框的border設(shè)置為0px，最后設(shè)置div的border為最終的外邊框

我們最直接上代碼：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="請(qǐng)輸入查找的律師或?qū)ｉL(zhǎng)">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:這里是設(shè)置外面整個(gè)div的樣式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

這里是設(shè)置里面的輸入框的長(zhǎng)寬、boder為0px、里面的字體大小、點(diǎn)擊不會(huì)亮邊框(outline:none)設(shè)置透明度這里使用rgba()，最后一個(gè)屬性就是透明度（在0-1之間）

在線(xiàn)咨詢(xún)

上一篇：HTML 之簡(jiǎn)介
下一篇：Nginx: 最常見(jiàn)的 2 中 http to https 跳轉(zhuǎn)場(chǎng)景

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商