模仿QQ空间 网页设计

时间：2022-06-11 15:07:25

目的：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 {

       width: %;

       heigth: %;

       position: absolute;

       background-image: url(images/bgimg.jpg);

       background-size: cover;

       z-index: ;

}

　　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: ;

    padding: ;

    background: url(../images/bgimg.jpg) no-repeat;

}　　

7、js中children()和find()方法的使用

find()  寻找所有下属元素中符合条件的元素，找到最低层。

children() 仅寻找直接子元素中符合条件的元素

相关文章