模仿QQ空间 网页设计

目的：1、通过模仿QQ空间，全自主写代码，熟悉网页设计的流程

　　　2、熟练的掌握HTML、CSS、JS的应用

　　　3、将在此过程中遇到的问题及其解决方法记录在此，以便取用。

开始：

一、登陆界面(index.aspx + login.aspx)

     1、背景填充整个浏览器界面：

　　width,height： 使p充满整个浏览器界面；

　　position：定位图片从左上角开始；

　　background-size:  cover；   在锁定图片纵横比的情况下，将图片放大到最小大小，并且能覆盖背景区域；

      background-size:  contain；在锁定图片纵横比的情况下，将图片放大到最大大小，使得在浏览器中能够看到完整的图片，但是不保证完全填充背景区域）； （详情参见转载的  CSS background-size:图片自适应  一文）

     

p#bg_img_container {width: 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；

<p 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></p>

　　3、阻止超链接跳转：

　　 javascript：void(0);  不做任何事情；

      设置边框的圆角属性：  border-radius： 3px；

<p id="log" class="navigation"><a id="log_a" class="active" href="javascript:void(0)" ><span>登录</span></a></p>

　　　　 .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输入框的提示信息，当输入信息后，提示信息消失；

<p 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" /> --%></p>

　　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() 仅寻找直接子元素中符合条件的元素

 

posted on 2015-12-01 16:48 as798982083 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/mengfff/p/5010577.html