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

模仿QQ空间 网页设计的更多相关文章

  1. Android 模仿QQ空间风格的 UI(转)

    本文内容 环境 演示模仿QQ空间风格的UI 虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西. 下载 Demo 环境 Windows 7 64 位 Eclipse ADT V22.6.2 ...

  2. Android 模仿QQ空间风格的 UI

    本文内容 环境 演示模仿QQ空间风格的UI 虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西. 下载 Demo 环境 Windows 7 64 位 Eclipse ADT V22.6.2 ...

  3. 模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)

      我们大部分人都发过动态,想必都知道发动态.回复评论.删除动态的整个过程,那么作为初学者,要模仿这些功能有点复杂的,最起码表的关系得弄清楚~~ 先把思路理一下: (1)用户登录,用session读取 ...

  4. jsp模仿QQ空间说说的发表

    1.在文本域中输入文字(可以不添加) 2.点击添加图片(可以不添加) 3.点击发表 4.发表成功,文字和图片是超链接,点击就可以查看全部内容 5.点击图片查看原图,没有图片则不显示查看原图的超链接 主 ...

  5. Android模仿QQ空间图片上传——原理

    MainActivity.class package com.example.imagedemotext; import java.io.ByteArrayOutputStream; import j ...

  6. QQ空间爬虫--获取好友信息

    QQ空间网页版:https://user.qzone.qq.com/ 登陆后,进入设置,有一个权限设置,设置“谁能看我的空间”为好友可见,然后构造爬虫. (1)获取Cookie 两种方式: 第一种:通 ...

  7. Atitit qzone qq空间博客自动点赞与评论工具的设计与实现

    Atitit qzone qq空间博客自动点赞与评论工具的设计与实现 Qzone发送评论的原理 首先,有个a标签, <a class="c_tx3" href="j ...

  8. iOS开发UI篇—模仿ipad版QQ空间登录界面

    iOS开发UI篇—模仿ipad版QQ空间登录界面 一.实现和步骤 1.一般ipad项目在命名的时候可以加一个HD,标明为高清版 2.设置项目的文件结构,分为home和login两个部分 3.登陆界面的 ...

  9. 网页分享到微博、QQ、QQ空间、微信

    <ul id="content-share-list" class="bdsharebuttonbox bdshare-button-style0-16" ...

随机推荐

  1. Mongodb(2)创建数据库,删除数据库,创建集合,删除集合,显示文档内容

    显示所有数据库列表:show dbs > show dbs local .078GB runoob .078GB > 显示当前数据库:db > db runoob > 显示所有 ...

  2. C++模板元编程 - 1 基本数据类型和运算

    这是博客开通前几天做的,C++的模板没办法存方便的浮点数,算了. 基本类型的设计参考了vczh轮子叔模仿boost的MPL的设计. 话说template和typename写多了真是无限烦人啊,不得已定 ...

  3. spring controller中@Value取不到applicationContext.xml中加载配置文件的问题

    原因还未查证: http://sunjun041640.blog.163.com/blog/static/256268322014127113844746/ 在使用spring mvc时,实际上是两个 ...

  4. 如何用js来判断浏览器类型(ie,firefox)等等

    现在网络上的浏览器,操作系统就象中国的方言一样,那个叫多啊!这给我们这些开发人员 带来了巨大的痛苦!虽然可能大家的喜好不同!用的系统也不同!有人喜欢用ie,有人喜欢用 firefox,还有人喜欢用腾讯 ...

  5. dede织梦列表页如何调用全站子栏目

    网站原代码:{dede:channel type='son'} <a href="[field:typelink/]">[field:typename/]</a& ...

  6. shell 统计 awk

    time awk '{a[$1]++}END{for(i in a){printf("%d\t%s\n",a[i],i)}}' access.log | sort -nr | he ...

  7. java中json包的使用以及字符串,map,list,自定义对象之间的相互转换

    做一个map和字符串的转换,需要导入这些jar包,这是最基本的一些jar包. 经过多方尝试得出结论入下: 首先导入基本包:json-lib-2.2.3-jdk15.jar 如果没有这个jar包,程序是 ...

  8. go get 获得 golang.org 的项目

    go get 用来动态获取远程代码包的,目前支持的有BitBucket.GitHub.Google Code和Launchpad.这个命令在内部实际上分成了两步操作:第一步是下载源码包,第二步是执行g ...

  9. 全新安装Mac OSX 开发者环境 同时使用homebrew搭建 PHP,Nginx ,MySQL,Redis,Memcache ... ... (LNMP开发环境)

    https://segmentfault.com/a/1190000000606752

  10. Android Screen Monitor抓取真机屏幕

    今天看到一款有点意思的开源软件“android-screen-monitor”, 简要记录如下: 1 简介 一款同步手机真机屏幕到PC上的软件(屏幕实时抓取,有点小卡) 2 开源地址 http://c ...