<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁(yè)面</title>
/*總體的樣式*/
<style>
/*盒子樣式*/
#box{
width: 350px; //寬
height: 450px; //高
border: 1px solid black; //邊框
border-radius: 10px; //邊框弧度
font-family: 黑體; //字體
letter-spacing:8px; //段間距
word-spacing: 10px; //字間距
line-height: 40px; //行高
font-size: 18px; //字大小
padding: 20px; //內(nèi)邊框
}
/*給'注冊(cè)'賦予樣式*/
.register{
width:280px ; //寬
height: 50px; //高
background-color: skyblue; //背景顏色
border-radius: 10px; //邊框弧度
}
/*將所有邊框都改變*/
*{
border-radius: 5px; 邊框弧度
}
/*使用class選擇器,賦予number寬高和邊框*/
.number{
width: 185px; //寬
height: 27px; //高
border-width: 1px; //邊框?qū)挾?
}
/*id選擇器*/
#two{
width: 55px; //寬
border-width: 1px; 邊框?qū)挾? }
/*id選擇器*/
#phone{
width: 103px; //寬
}
/*class 選擇器*/
.boxs{
zoom: 75%; //清除浮動(dòng)
color: darkgray; //顏色
}
/*class選擇器*/
.box_a{
width: 50px; //寬
height: 50px; //高
background-image: url("../image/04.jpg "); //背景圖片
background-repeat: no-repeat; // 是否平鋪
background-size: 50px 25px; //背景尺寸
position: relative; //定位 相對(duì)定位
left: 310px; //定位后左移
bottom: 32px; //定位后下移
}
</style>
</head>
<body>
<div id="box">
<h1>請(qǐng)注冊(cè)</h1>
<p style="color: darkgray">已有帳號(hào)?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
<label for="name">用戶名</label>
<input type="text" placeholder="請(qǐng)輸入用戶名" id="name" class="number"> <br>
<label for="phone">手機(jī)號(hào)</label>
<select name="" id="two" class="number">
<optgroup>
<option style="" class="">+86</option>
</optgroup>
</select>
<input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" id="phone" class="number"> <br>
<label for="mima">密?碼</label>
<input type="password" placeholder="請(qǐng)輸入密碼" id="mima" class="number"> <br>
<label for="mima">驗(yàn)證碼</label>
<input type="password" placeholder="請(qǐng)輸入驗(yàn)證碼" id="is" class="number">
<div class="box_a"></div>
<div class="boxs">
<input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
</div>
<input type="submit" value="注冊(cè)" class="register" >
</form>
</div>
</body>
</html>
在這里插入圖片描述
有半年之久沒(méi)有更新新作品了,但這個(gè)小小領(lǐng)地我并沒(méi)有忘記,我會(huì)堅(jiān)持下去,一直在這等你,等你的每次回眸,感恩你的每次駐足,這已經(jīng)足夠成為我堅(jiān)守的動(dòng)力和理由,盡管現(xiàn)在有很多不足和不盡人意,也沒(méi)很多的時(shí)間管理,我會(huì)盡量讓它保持足夠的新鮮感,每次的作品都投入足夠的用心,否則寧愿選擇缺省,當(dāng)某些東西成為寄托之后,就不能容許隨意的成分。
謝謝大家的支持,我會(huì)盡力做好每一頁(yè)的代碼,今天和大家分享的主題是《周末の玉玲》,誰(shuí)的青春沒(méi)有一個(gè)故事,僅以此篇祭祀那些逝去的青春,珍惜當(dāng)下,畢業(yè)不是終點(diǎn),不要再錯(cuò)過(guò)。
該主題包含一張index.html,后面預(yù)留了3頁(yè),留給你們自己設(shè)計(jì),因?yàn)槊總€(gè)人的青春都不一樣,html5+css3設(shè)計(jì),支持手機(jī)端。
導(dǎo)語(yǔ)
青澀的時(shí)光,情竇初開(kāi),那是學(xué)生時(shí)代,一個(gè)男孩心系一個(gè)女孩,每到課間休息都會(huì)在走廊上等你經(jīng)過(guò),只為看你一眼,你的一顰一笑,都印記在心里,至今無(wú)法抹去,如今的生活常常在夢(mèng)中遇見(jiàn)你,如若歲月可以回去那一年,我能否向你表明心聲和堅(jiān)持的決心,而不是讓懊悔和思念成為了不可逆轉(zhuǎn)的結(jié)局。
主題
《周末の玉玲》
圖摘
文件目錄結(jié)構(gòu)
lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>nw百度首頁(yè)</title>
<style>
.w1, .w2, .w3, .w4, .w5, .w6 {
width: auto;
}
.bk {
border: 1px solid red;
width: auto;
}
.w1 {
height: 46px;
}
.w1_1 {
width: 463px;
height: 46px;
float: right;
}
.w1_2 img {
margin-top: 15px;
margin-left: 391px;
}
.w2 {
height: 201px;
}
.w2 img {
margin-top: 90px;
margin-left: 690px;
}
.w3 {
height: 35px;
margin-left: 480px;
}
.w3_2 img {
position: relative;
right: 36px;
top: -5px;
}
.w4 {
height: 337px;
}
.w5 {
height: 64px;
}
.w5_1, .w5_2, .w5_3, .w5_4, .w5_5 {
float: left
}
.w5_1 {
font-size: 12px;
margin-left: 480px;
width: 642px;
}
.w5_2 {
}
.w5_3 p {
width: 93px;
margin-left: 8px;
line-height: 20px;
}
.w5_4 {
}
.w5_5 {
line-height: 22px;
}
.w5_5 p {
width: 93px;
margin-left: 8px;
line-height: 20px;
}
.w5_6{line-height:19px;}
.w5_6_1 span{margin-right:11px;}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li {
float: left;
margin-right: 20px;
margin-top: 24px;
font-size: 13px;
font-weight: bold;
}
a {
color: #333333
}
</style>
</head>
<body style="margin:0px auto;">
<div class="w1">
<div class="w1_1 ">
<ul>
<li><a href="">糯米</a></li>
<li><a href="">新聞</a></li>
<li><a href="">hao123</a></li>
<li><a href="">地圖</a></li>
<li><a href="">視頻</a></li>
<li><a href="">貼吧</a></li>
<li><a href="">登錄</a></li>
<li><a href="">設(shè)置</a></li>
</ul>
<p class="wl_2"><img src="images/111.jpg" alt=""> </p>
</div>
<p></p>
</div>
<div class="w2"><img src="images/222.jpg" alt=""></div>
<div class="w3 ">
<div class="w3_1">
<div class="w3_2">
<input style="width:536px;height:35px;border:1px solid #ccc; position: relative;
top:-13px" type="text">
<img src="images/333.jpg" alt=""> <img src="images/444.jpg" alt="" style="position:relative;left:-33px; top:0px" ;=""></div>
</div>
</div>
<div class="w4"></div>
<div class="w5 ">
<div class="w5_1">
<div class="w5_2" ><img src="images/555.jpg" alt="" style="display:block; float:left" ></div>
<div class="w5_3" >
<p > <b style="color:#666666;">手機(jī)百度</b><span style="color:#999999; display:block ">快人一部</span> </p>
</div>
<div class="w5_4 "><img src="images/666.jpg" alt="" style="display:block;" ></div>
<div class="w5_5 ">
<p > <b style="color:#666666; font-weight:bold; ">百度糯米</b><span style="color:#999999; display:block ">一元大餐</span> </p>
</div>
<div class="w5_6">
<div class="w5_6_1"> <span>把百度設(shè)為主頁(yè)</span> <span>關(guān)于百度</span> <span>About Baidu</span> <span>百度推廣</span> </div>
<div class="w5_6_2">?2016 Baidu 使用百度前必讀 意見(jiàn)反饋 京ICP證030173號(hào) </div><img src="images/777.jpg" alt="" style="vertical-align:middle;">
<div class="w5_6_3"><img src="images/888.jpg" alt="" style="vertical-align:middle;">京公網(wǎng)安備11000002000001號(hào)</div>
</div>
</div>
</div>
<div class="w6 "></div>
</body>
</html>
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。