目的：1、通过模仿QQ空间，全自主写代码，熟悉网页设计的流程
2、熟练的掌握HTML、CSS、JS的应用
3、将在此过程中遇到的问题及其解决方法记录在此，以便取用。
开始：
一、登陆界面(index.aspx + login.aspx)
1、背景填充整个浏览器界面：
width,height： 使div充满整个浏览器界面；
position：定位图片从左上角开始；
background-size: cover； 在锁定图片纵横比的情况下，将图片放大到最小大小，并且能覆盖背景区域；
background-size: contain；在锁定图片纵横比的情况下，将图片放大到最大大小，使得在浏览器中能够看到完整的图片，但是不保证完全填充背景区域）； （详情参见转载的 CSS background-size:图片自适应 一文）
div#bg_img_container { 100%; heigth: 100%; position: absolute; background-image: url(images/bgimg.jpg); background-size: cover; z-index: 0; }
2、iframe的使用：
iframe可以通过设置name值来调用，将打开方式设置为：target=log_frame即可；
frameborder=0; 0:没有边框，1：有边框 默认是有边框的； 一般设置为0,再然后通过DIV父元素设置边框属性。
scrolling="yes"; yes: 有滚动条； no: 没有滚动条； 默认在需要的情况下添加滚动条；
src; iframe中所显示的网页的URL；
<div id="log_win">
<iframe id="log_frame" name="log_frame" frameborder="0" scrolling="yes" width=100% height=100% margin-width=0 src="login.aspx">
</iframe>
</div>
3、阻止超链接跳转：
javascript：void(0); 不做任何事情；
设置边框的圆角属性： border-radius： 3px；
<div id="log" class="navigation">
<a id="log_a" class="active" href="javascript:void(0)" >
<span>登录</span></a>
</div>
.log_body .submit ,.register_body .register_b {
border-radius: 3px;
}
4、在.cs文件中使用HTML标签：
在HTML标签中添加 runat="server" 属性，即可在.cs文件中直接使用HTML标签； eg(例如): username.Value = "aaaaa"; 注意：Value的首字母大些，在这个问题上竟然折腾了半小时；
虽然可以在后台直接调用HTML标签，但还是有局限性。比如为HTML的标签添加事件的时候会很麻烦，在需要的地方可以用asp标签代替；
placeholder： HTML标签的该属性设置了text输入框的提示信息，当输入信息后，提示信息消失；
<div id="log_body" class="log_body active">
<input type="text" id="username" class="text username" placeholder=" 账号" runat="server" />
<input type="password" id="password" class="text password" placeholder=" 密码" runat="server" />
<asp:button ID="submit" class="submit" runat="server" text="登 陆" OnClick="submit_Click"/>
<%-- <input type="button" id="submit" class="submit" value="登 录" runat="server" /> --%>
</div>
5、连接SQL Server数据库 + 在新网页中打开网址
调用SqlConnection、SqlCommand、SqlDataReader三个AOD.NET组件的对象对数据库进行操作；（不局限于SQL Server 只是其他数据库所要调用的具体对象名称不同）
在.CS中实现在新网页中打开网址的几种方法（详见文章 .cs文件中 打开新窗口的四种方法）
SqlConnection scn; //数据库连接实例
SqlCommand scmd; //数据库操作实例
string sqlstr = "Integrated Security=true;" //连接字符串 连接是否是安全的， 取值可以是true，false，sspi； SSPI:security server provider interfaces;(安全服务提供程序接口) (若数据库用的是window连接方式则为true)
+ "Initial Catalog=QQ_web;" //数据库的名称；
+ "Data Source=ZCJ-PC"; //SQL SERVER 数据库服务器的名称 ，可以是local，localhost，也可以是具体的名字；
scn = new SqlConnection(sqlstr);
string mysqlstr = "select * from personal_information"; //操作字符串
scmd = new SqlCommand(mysqlstr, scn); //创建对数据源的相关操作
scn.Open(); //打开链接
SqlDataReader da = scmd.ExecuteReader(); //通过SqlDataReader对象读取得到的信息
if(da.HasRows)
while(da.Read()) //跳转到下一行
{
if (da.GetString(1) == username.Value)
{
if (da.GetString(2).Equals(password.Value))
{
// form1.Target = "_blank"; //结合使用可以在新网页中打开指定网址 但本文使用的是iframe所以任然不能在新网页打开网址
// Response.Redirect("mainzone.aspx",false); //重定向到新网址 指定旧网页是否要关闭
Response.Write("<script language='javascript'>window.close();window.open('mainzone.aspx','_blank');</script>"); //重定向到新网址 指定旧网页是否要关闭
}
}
}
da.Close(); //在SqlDataReader对象关闭之前，SqlConnection对象不能进行其他操作，因为他在为Reader对象服务；
scn.Close();
6、背景图片问题：
让背景图片充满整个屏幕，只要给body设置background-image就行了；
body { margin: 0; padding: 0; background: url(../images/bgimg.jpg) no-repeat; }
7、js中children()和find()方法的使用
find() 寻找所有下属元素中符合条件的元素，找到最低层。
children() 仅寻找直接子元素中符合条件的元素