模仿QQ空间 网页设计
目的: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空间 网页设计的更多相关文章
- Android 模仿QQ空间风格的 UI(转)
本文内容 环境 演示模仿QQ空间风格的UI 虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西. 下载 Demo 环境 Windows 7 64 位 Eclipse ADT V22.6.2 ...
- Android 模仿QQ空间风格的 UI
本文内容 环境 演示模仿QQ空间风格的UI 虽然这个 UI 跟现在的QQ空间有点差别,但是也能学到很多东西. 下载 Demo 环境 Windows 7 64 位 Eclipse ADT V22.6.2 ...
- 模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
我们大部分人都发过动态,想必都知道发动态.回复评论.删除动态的整个过程,那么作为初学者,要模仿这些功能有点复杂的,最起码表的关系得弄清楚~~ 先把思路理一下: (1)用户登录,用session读取 ...
- jsp模仿QQ空间说说的发表
1.在文本域中输入文字(可以不添加) 2.点击添加图片(可以不添加) 3.点击发表 4.发表成功,文字和图片是超链接,点击就可以查看全部内容 5.点击图片查看原图,没有图片则不显示查看原图的超链接 主 ...
- Android模仿QQ空间图片上传——原理
MainActivity.class package com.example.imagedemotext; import java.io.ByteArrayOutputStream; import j ...
- QQ空间爬虫--获取好友信息
QQ空间网页版:https://user.qzone.qq.com/ 登陆后,进入设置,有一个权限设置,设置“谁能看我的空间”为好友可见,然后构造爬虫. (1)获取Cookie 两种方式: 第一种:通 ...
- Atitit qzone qq空间博客自动点赞与评论工具的设计与实现
Atitit qzone qq空间博客自动点赞与评论工具的设计与实现 Qzone发送评论的原理 首先,有个a标签, <a class="c_tx3" href="j ...
- iOS开发UI篇—模仿ipad版QQ空间登录界面
iOS开发UI篇—模仿ipad版QQ空间登录界面 一.实现和步骤 1.一般ipad项目在命名的时候可以加一个HD,标明为高清版 2.设置项目的文件结构,分为home和login两个部分 3.登陆界面的 ...
- 网页分享到微博、QQ、QQ空间、微信
<ul id="content-share-list" class="bdsharebuttonbox bdshare-button-style0-16" ...
随机推荐
- Mongodb(2)创建数据库,删除数据库,创建集合,删除集合,显示文档内容
显示所有数据库列表:show dbs > show dbs local .078GB runoob .078GB > 显示当前数据库:db > db runoob > 显示所有 ...
- C++模板元编程 - 1 基本数据类型和运算
这是博客开通前几天做的,C++的模板没办法存方便的浮点数,算了. 基本类型的设计参考了vczh轮子叔模仿boost的MPL的设计. 话说template和typename写多了真是无限烦人啊,不得已定 ...
- spring controller中@Value取不到applicationContext.xml中加载配置文件的问题
原因还未查证: http://sunjun041640.blog.163.com/blog/static/256268322014127113844746/ 在使用spring mvc时,实际上是两个 ...
- 如何用js来判断浏览器类型(ie,firefox)等等
现在网络上的浏览器,操作系统就象中国的方言一样,那个叫多啊!这给我们这些开发人员 带来了巨大的痛苦!虽然可能大家的喜好不同!用的系统也不同!有人喜欢用ie,有人喜欢用 firefox,还有人喜欢用腾讯 ...
- dede织梦列表页如何调用全站子栏目
网站原代码:{dede:channel type='son'} <a href="[field:typelink/]">[field:typename/]</a& ...
- shell 统计 awk
time awk '{a[$1]++}END{for(i in a){printf("%d\t%s\n",a[i],i)}}' access.log | sort -nr | he ...
- java中json包的使用以及字符串,map,list,自定义对象之间的相互转换
做一个map和字符串的转换,需要导入这些jar包,这是最基本的一些jar包. 经过多方尝试得出结论入下: 首先导入基本包:json-lib-2.2.3-jdk15.jar 如果没有这个jar包,程序是 ...
- go get 获得 golang.org 的项目
go get 用来动态获取远程代码包的,目前支持的有BitBucket.GitHub.Google Code和Launchpad.这个命令在内部实际上分成了两步操作:第一步是下载源码包,第二步是执行g ...
- 全新安装Mac OSX 开发者环境 同时使用homebrew搭建 PHP,Nginx ,MySQL,Redis,Memcache ... ... (LNMP开发环境)
https://segmentfault.com/a/1190000000606752
- Android Screen Monitor抓取真机屏幕
今天看到一款有点意思的开源软件“android-screen-monitor”, 简要记录如下: 1 简介 一款同步手机真机屏幕到PC上的软件(屏幕实时抓取,有点小卡) 2 开源地址 http://c ...