前端注冊頁面布局

 

我好久沒寫微博了，我承認我是真的懶，到現在還在寫css的，我以后一定勤快一點

要求

(1) 設置頁面父容器寬度隨瀏覽器窗口大小自適應改變，但最小不小於400px，最大不大於700px，並且居中顯示，設置邊框、背景色和字符間距；

(2) 設置默認字體大小為13px，設置標題“注冊信息”的大小為默認字體的1.5倍，字體透明，使用三重文本陰影顯示（紅、藍、綠），分別使用rgba設置具有一定透明度的陰影顏色；

(3) 頁面每一行（對應一類信息）放在一個div中，設置div背景色和圓角邊框；

(4) 每一行的提示文本、輸入框和右側輔助信息保持垂直居中對齊，且保障各行間的各同類元素水平對齊；

(5) 姓名和密碼輸入框中顯示背景圖像；

(6) 單選按鈕和復選按鈕被選中時，其后的輔助文本動態變化為紅色字體；

(7) 用戶單擊“返回頂部”時回到頁面頂部，並且標題字體變為紅色。

這里面5，6，7我沒遇到過（我知道還是比較簡單的，但是我菜），所以記錄一下

第五個，首先是html

  

 <div class="item">
            <div class="item-hint">姓名：</div>
            <div class="add item-input">
                <i class="tupian tupian1"></i>
                <input type="text" class='user' name="user_name" maxlength="10" autofocus required />
                <font color="#FF0000"> *</font>
            </div>
        </div>


        <div class="item">
            <div class="item-hint">密碼：</div>
            <div class="add item-input">
                <i class="tupian tupian2"></i>
                <input type="password" class="user" name="user_paw" placeholder="請輸入8位密碼" required />
                <font color="#FF0000"> *</font>
            </div>
        </div>

　　然后是css

 

.add {
        box-sizing: border-box;
        position: relative;
        /*border: 1px solid blueviolet;*/
       
    }
    .tupian {
        position: absolute;
        background-repeat: no-repeat; /*設置圖片不重復*/
        background-position: 0px 0px;
        width: 20px; /*設置圖片顯示的寬*/
        height: 20px; /*圖片顯示的高*/
       /*border: 1px solid green;*/
        top:2px;
        left: 2px;
    }
  
    .user {
        /*border: 1px solid red;*/
        padding: 1px 1px 1px 20px;
        width: 148px;
    }
    .tupian1 {
        background-image: url(../images/name.gif); 
    }
    .tupian2 {
        background-image: url(../images/password.gif); 
    }

　　效果圖

 

第六題

html

 

<div class="item">
			<div class="item-hint">性別：</div>
			<div class="item-input"><input type="radio" name="user_sex" value="man" /><label for="user_sex">男</label>
				<input type="radio" id="user_sex" name="user_sex" value="woman" checked /><label
					for="user_sex">女</label></div>
		</div>

　　接着是css

input[type="radio"]:checked+label {
    color: red;
}

　　效果圖

第七題 用的偽類

<div id="title" tabindex="1" align="center">注 冊 信 息</div>

　　

	<li><a href="#title">返回頂部</a></li>

　　css

 #title:focus {

        color:red;

    }

　　

 效果圖就不發了