制作网易前端界面

网易界面制作,很简单的一个页面,

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网易邮箱登录</title>
	</head>
	<body>
		<table border="0" width="65%" height="600px" align="center">
			<tr>
				<td height="20%">
					<table border="0" height="100%" width="100%">
						<tr>
							<td width="50%"><img src="img/163logo.gif"></td>
							<td width="50%" align="right">免费邮 企业邮 VIP邮箱 帮助 </td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td height="70%">
					<table border="0px" height="100%" width="100%">
						<tr>
							<td width="50%">
								<table border="0px" height="100%" width="100%">
						          <tr>
							          <td><img src="img/imap.jpg"></td>
						          </tr>
						          <tr>
							          <td>
							          	.163/126/yeah三大免费邮箱均默认开放<br/>
										.全面支持iPhone/iPad及Android等系统<br/>
										.客户端、手机与网页,实现发送、阅读邮件立即同步普通登录手机号登录<br/>
							          </td>
						          </tr>
					            </table>
							</td>
							<td width="50%" >
								<table border="0px" height="100%" width="100%">
						          <tr>
						          	<td >
							         <img src="img/loginIcon.gif" align="top"><b>普通登录</b>
							         <br/>
							         </td>
						          </tr>
						          <tr>
						          	<td align="center">
							                         用户名:<input type="text" />@163.com<br/>
							        </td>
						          </tr>
						          <tr>
						          	<td align="center">
							                         密   码:<input type="password" /><br/>
							        </td>
						          </tr>
						          <tr>
						          	<td align="center">
							                          版本
    							       <select name="version">
    								   <option value="1" selected="selected">默认</option>
    								   <option value="2" >1.1</option>
    								   <option value="3" >1.2</option>
    							       </select>
    							       <br />
    							       </td>
						          </tr>
						          <tr>
						          	<td align="center">
							           <input type="checkbox"/>自动登录
    								   <input type="checkbox"/>SSL   
    								   <br />
    								   </td>
						          </tr>
						          <tr>
						          	<td align="center">
						          	<input type="submit" value="提交"/>
    							       
    							    <input type="submit"  value="注册"/>
    							    <br />
    							    </td>
						          </tr>
					           </table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td height="10%">
					<table border="0px" height="100%" width="100%" bgcolor="darkkhaki">
						<tr>
							<td><img src="img/netease_logo.gif"></td>
							<td align="center"> 关于网易 免费邮 官方博客 客户服务 隐私政策 | 网易公司版权所有 @ 1997-2011</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

<html>
<head>
    <meta charset="utf-8">
    <title>阿里巴巴会员注册</title>
</head>
<body>
	<table border="0px" height="100%" width="100%" align="center">
		<tr>
			<td height="10%" width="100%">
				<img src="img/header.jpg" width="100%"/>
			</td>
		</tr>
		<tr>
			<td height="60%">
			<table border="0px" width="100%" height="100%">
				<tr>
					<td width="20%">
						<table border="0px",width="100%" height="100%" align="right">
							<tr>
								<td align="right" height="13%">电子邮箱</td>
							</tr>
							<tr>
								<td align="right" height="13%">会员登录名</td>
							</tr>
							<tr>
								<td align="right" height="13%">密码</td>
							</tr>
							<tr>
								<td align="right" height="13%">再次输入密码</td>
							</tr>
							<tr>
								<td align="right" height="13%">会员身份</td>
							</tr>
							<tr>
								<td align="right" height="13%">验证码</td>
							</tr>
						</table>
					</td>
					<td width="80%">
						<table border="0px" width="100%" height="100%" align="middle">
							<tr>
								<td height="16%">
									<input type="text" />
								</td>
							</tr>
							<tr>
								<td height="17%">
									<input type="text" />
								</td>
							</tr>
							<tr>
								<td height="17%">
									<input type="password"></td>
							</tr>
							<tr>
								<td height="17%">
									<input type="password" />
								</td>
							</tr>
							<tr>
								<td height="17%">
									<input name="se" type="radio" checked="checked" height="100%"/>买家 
									<input name="se" type="radio" height="100%" />卖家 
									<input name="se" type="radio" height="100%" />两者都是
								</td>
							
							</tr>
							<tr>
								<td height="17%">
									<table width="60%" height="100%" align="middle">
										<tr>
											<td width="10%">
												<input type="text" size="10"/>
											</td>
											<td width="30%" align="center" height="100%">
												<img src="img/verycode.gif" height="30"/>
											</td>
											<td width="60%" height="100%">
												<a href="http://www.baidu.com"\>看不清楚?换一张</a>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							
						</table>
					</td>
				</tr>
			</table>
			</td>
	   </tr> 
		<tr>
			<td height="20%">
				<table border="0px" width="100%" height="100%">
					<tr>
						<td width="20%">	
						</td>
						<td width="80%">
							<table border="0px" width="100%" height="100%">
								<tr>
									<td height="10%">
									    <input type="submit" value="同意以下服务条款并注册" style="background: orangered; color: white;"/>
									</td>
							   </tr>
								<tr>
									<td height="30%">
										<textarea cols="60" rows="5">欢迎阅读阿里巴巴公司(阿里巴巴)服务条款协议(下称"本协议"),您应当在使用服务之前认真阅读本协议全部内容,且对本协议中加粗字体显示的内容,阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站(所涉域名为:Alibaba.com.cn、alibaba.cn、1688.com,下同),所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。
										</textarea><br />
									</td>
								</tr>
							</table>
						</td >
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td height="10%">
				<img src="img/footer.jpg" width="100%"/>			
			</td>
		</tr>
	</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>picture</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
	<EMBED SRC="a.mp3" loop=false width=0 height=0>
	<div>
		<img src="img/3.jpg" class="pic1"/>
		<img src="img/5.jpg" class="pic2"/>
		<img src="img/6.jpeg" class="pic3" />
		<img src="img/7.jpeg" class="pic4"/>
		<img src="img/8.jpeg" class="pic5"/>
		<img src="img/9.jpg" class="pic6"/> 
	</div>
</body>
</html>

*{
	background-color: pink;
}
img{
	width:300px;
	height:250px;
	padding: 20px;
	background-color: white;
	position:absolute;
	box-shadow: 10px 10px 10px rgba(50,50,50,0.8);
	border-radius: 20px;
}
img:hover{
	transform: rotate(0deg) scale(1.3);
	box-shadow: 20px 20px 20px rgba(50,50,50,0.8);
	z-index: 1;
	transition:all 1s ease-out;
}
div{
	width:80%;
	height:450px;
}
.pic1{
	transform: rotate(10deg);
	top:40px;
	left:250px;
}
.pic2{
	transform: rotate(-20deg);
	top:40px;
	left:450px;
}
.pic3{
	transform: rotate(-38deg);
	top:400px;
	left:700px;
}
.pic4{
	transform: rotate(30deg);
	left:200px;
	top:400px;
}
.pic5{
	transform: rotate(28deg);
	left:900px;
	top:120px;
}
.pic6{
	transform: rotate(30deg);
}

<!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>
<title>个人主页</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="images/login.js"></script>
<link href="css/login2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>主页登录<sup>V2017</sup></h1>

<div class="login" style="margin-top:50px;">
    
    <div class="header">
        <div class="switch" id="switch"><a class="switch_btn_focus" id="switch_qlogin" href="javascript:void(0);" tabindex="7">快速登录</a>
			<a class="switch_btn" id="switch_login" href="javascript:void(0);" tabindex="8">快速注册</a><div class="switch_bottom" id="switch_bottom" style="position: absolute; width: 64px; left: 0px;"></div>
        </div>
    </div>    
  
    
    <div class="web_qr_login" id="web_qr_login" style="display: block; height: 235px;">    

            <!--登录-->
            <div class="web_login" id="web_login">
               
               
               <div class="login-box">
    
            
			<div class="login_form">
				<form action="../ft5_23_blend/a.html" name="loginform" accept-charset="utf-8" id="login_form" class="loginForm" method="post"><input type="hidden" name="did" value="0"/>
               <input type="hidden" name="to" value="log"/>
                <div class="uinArea" id="uinArea">
                <label class="input-tips" for="u">帐号:</label>
                <div class="inputOuter" id="uArea">
                    
                    <input type="text" id="u" name="username" class="inputstyle"/>
                </div>
                </div>
                <div class="pwdArea" id="pwdArea">
               <label class="input-tips" for="p">密码:</label> 
               <div class="inputOuter" id="pArea">
                    
                    <input type="password" id="p" name="p" class="inputstyle"/>
                </div>
                </div>
               
                <div style="padding-left:50px;margin-top:20px;"><input type="submit" value="登 录" style="width:150px;" class="button_blue"/></div>
              </form>
           </div>
           
            	</div>
               
            </div>
            <!--登录end-->
  </div>

  <!--注册-->
    <div class="qlogin" id="qlogin" style="display: none; ">
   
    <div class="web_login"><form name="form2" id="regUser" accept-charset="utf-8"  action="http://www.js-css.cn" method="post">
	      <input type="hidden" name="to" value="reg"/>
		      		       <input type="hidden" name="did" value="0"/>
        <ul class="reg_form" id="reg-ul">
        	<br />  <br />                
        	    <li>
                    <label for="user"  class="input-tips2">用户名:</label>
                    <div class="inputOuter2">
                        <input type="text" id="user" name="user" maxlength="16" class="inputstyle2"/>
                    </div>
               </li>
                <li>
                <label for="passwd" class="input-tips2">密码:</label>
                    <div class="inputOuter2">
                        <input type="password" id="passwd"  name="passwd" maxlength="16" class="inputstyle2"/>
                    </div>
                <li>
                    <div class="inputArea">
                        <input type="button" id="reg"  style="margin-top:10px;margin-left:85px;width:150px;" class="button_blue" value="注册"/>
                    </div>
                    
                </li><div class="cl"></div>
            </ul></form>
           
    
    </div>
   
    
    </div>
    <!--注册end-->
</div>
<div class="jianyi">*推荐使用ie8或以上版本ie浏览器或Chrome内核浏览器访问本站</div>
</body></html>


发布了192 篇原创文章 · 获赞 27 · 访问量 10万+

猜你喜欢

转载自blog.csdn.net/lovely_girl1126/article/details/73655640