<ul id="ecosy"></ul>

css設(shè)計(jì)并排布局

番茄西紅柿發(fā)布于2019-04-23 13:26 / 1142人閱讀

摘要：用戶名新密碼請(qǐng)輸入您的新密碼確認(rèn)密碼請(qǐng)?jiān)俅屋斎肽男旅艽a以進(jìn)行確認(rèn)確認(rèn)修改效果如下

css code

form#reset_password ul {
    list-style: none;
    margin: 0 0 20px 200px;
    padding: 0;
}

form#reset_password ul li:first-child {
    display: inline;
    line-height: 34px;
    padding-left: 10px;
}

form#reset_password ul li:nth-child(2) {
    float: left;
    line-height: 34px;
}

form#reset_password ul li:last-child {
    float: left;
}

html code

<form id="reset_password">
    <input type="hidden" name="rt" value="">
    <input type="hidden" name="uname" id="uname" value="">
    <ul>
        <li>li>
        <li> 用戶名li>
        <li><input class="form-control" type="text" value=""
            placeholder="" autocomplete="off" disabled />li>
    ul>

    <ul>
        <li>li>
        <li> 新密碼li>
        <li><input class="form-control" type="password" name="newpwd" id="newpwd" value=""
            autocomplete="off" placeholder="請(qǐng)輸入您的新密碼" />li>
    ul>

    <ul>
        <li>li>
        <li>確認(rèn)密碼li>
        <li><input class="form-control" type="password" name="repeat_pwd" id="repeat_pwd" value=""
            autocomplete="off" placeholder="請(qǐng)?jiān)俅屋斎肽男旅艽a以進(jìn)行確認(rèn)" />li>
    ul>
    <p><button id="save_new_pwd" class="btn btn-success">確認(rèn)修改button>p>
form>

效果如下

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1863.html

相關(guān)文章

前端入門4-CSS屬性樣式表

摘要：正文屬性樣式表正文屬性樣式表了解了具體的各種工作原理使用方式選擇器規(guī)則層疊算法等之后，那么該來學(xué)習(xí)的也就是都支持哪些屬性樣式表了。本篇文章已授權(quán)微信公眾號(hào) dasu_Android（大蘇）獨(dú)家發(fā)布聲明本系列文章內(nèi)容全部梳理自以下四個(gè)來源：《HTML5權(quán)威指南》《JavaScript權(quán)威指南》 MDN web docs Github:smyhvae/web 作為一個(gè)前端小白，入...

hss01248 2019-04-23 13:14 評(píng)論0 收藏0
【零基礎(chǔ)入門】 css學(xué)習(xí)筆記（4）布局與定位介紹

摘要：內(nèi)聯(lián)元素在水平方向上相互挨著，總體上會(huì)從左上方流向右下方。，增加元素，設(shè)置屬性，兩個(gè)內(nèi)聯(lián)元素并排擺放，但只有左右方向有。還能與其它內(nèi)聯(lián)元素并排。寫在前面：作為一個(gè)剛開始寫技術(shù)博客的新手，看到有人收藏了文章，寫作動(dòng)力又猛增了。這應(yīng)該就是寫技術(shù)博客的好處之一：能給自己增加成就感和驅(qū)動(dòng)力。最近關(guān)于css布局和定位相關(guān)內(nèi)容整理地有點(diǎn)慢，因?yàn)橥瑫r(shí)在做freecodecamp上的題，所以節(jié)奏有點(diǎn)...

nevermind 2019-08-30 15:53 評(píng)論0 收藏0
css實(shí)現(xiàn)左右頂頭、寬度自適應(yīng)的多列、多塊并排，多列布局

摘要：今天在工作中遇到了一個(gè)問題有三個(gè)塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。首先就是可能會(huì)打亂的加載順序，還有就是間距是不固定的，并且加了，可能會(huì)有副作用。今天在工作中遇到了一個(gè)問題：有三個(gè)div塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。我第一時(shí)間想到的是傳統(tǒng)的三列布局，但傳統(tǒng)的三列布局都是固定寬度加自適應(yīng)寬度，從網(wǎng)...

xuhong 2019-08-28 18:21 評(píng)論0 收藏0
css實(shí)現(xiàn)左右頂頭、寬度自適應(yīng)的多列、多塊并排，多列布局

摘要：今天在工作中遇到了一個(gè)問題有三個(gè)塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。首先就是可能會(huì)打亂的加載順序，還有就是間距是不固定的，并且加了，可能會(huì)有副作用。今天在工作中遇到了一個(gè)問題：有三個(gè)div塊，里面放置展示內(nèi)容，并排，中間有間隙，兩邊頂頭，可以隨屏幕大小自適應(yīng)寬度。我第一時(shí)間想到的是傳統(tǒng)的三列布局，但傳統(tǒng)的三列布局都是固定寬度加自適應(yīng)寬度，從網(wǎng)...

anyway 2019-08-01 14:56 評(píng)論0 收藏0
[譯]HTML&CSS Lesson5: 定位

摘要：浮動(dòng)定位的其中一種方法就是使用屬性。例如，是一個(gè)內(nèi)聯(lián)元素，它默認(rèn)的值為和值是不生效的。然而，如果我們將這個(gè)內(nèi)聯(lián)元素設(shè)置為浮動(dòng)，那么它的默認(rèn)值會(huì)變成這時(shí)候和值就生效了。包裹元素就是將浮動(dòng)元素置于父元素中，父元素作為容器會(huì)置于正常的文件流中。 CSS最大的用處之一就是可以將內(nèi)容和元素定位到任何我們想要的位置，使我們的設(shè)計(jì)具有結(jié)構(gòu)，使內(nèi)容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...

YorkChen 2019-08-01 17:39 評(píng)論0 收藏0