网页设计—仿QQ做的一个网页
admin 发布于：2013-11-21 18:02:00
阅读：loading
前段时间看了下传智播客的html方面的视频讲解，确实有些收获，先感谢一下那些无私的讲师。这两天有点时间想想作个页面出来吧，正好检查一下水平看看，于是就开始做了，另外一个原因是想着开发人员写这种静态代码，可能会更好。外行人乍一眼看上去应该觉得挺像吧，在专业的设计师眼里应该觉得很糙吧。
QQ原网址：http://pc.qq.com/
纯eclipse下手写，在FF下测试的，写完了之后发现支持IE8以上的浏览器，IE6-7下还是挺乱的，这个就不用管了。
页面中的所有图片都来自QQ网页中的，值得说的是它里面全是用的一张大背景图，然后使用坐标的形式来引用一个一个的小图标，虽然很早就知道这种方式，但一直没用到过，不会，页面预览效果图如下：
html源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>腾讯软件中心-电脑管家-QQ拼音-QQ影音-TT浏览器-QQ旋风-腾讯软件下载平台</title>
<link rel="stylesheet" href="qq/qq.css" style="text/css" />
<script type="text/javascript">
function changeBg(obj){
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
var li = lis[i];
if(li.className == "menuContentTitle_li"){
li.className = "";
}
}
obj.className = "menuContentTitle_li";
}
</script>
</head>
<body>
<div class="topMenu">
<div class="topContent">
<a href="javascript:void(0);">设为首页</a>
<label>·</label>
<a href="javascript:void(0);">腾讯研究院</a>
<label>·</label>
<a href="javascript:void(0);">腾讯网</a>
<label>·</label>
<a href="javascript:void(0);">腾讯QQ</a>
<label>·</label>
<a href="javascript:void(0);">手机QQ</a>
<label>·</label>
<a href="javascript:void(0);">腾讯客服</a>
</div>
</div>
<div class="titleContent">
<img src="qq/logo.png" alt="腾讯软件中心" align="top" />
<h1>腾讯软件中心，腾讯精品软件展示台</h1>
<p>
我们会不断提升产品的性能和体验，为你打造最好用的软件！
</p>
</div>
<div class="menuContent">
<ul class="menuContentTitle">
<li class="menuContentTitle_li" onclick="changeBg(this)">首页</li>
<li onclick="changeBg(this)">PC产品</li>
<li onclick="changeBg(this)">MAC产品</li>
<li onclick="changeBg(this)">无线产品</li>
<li onclick="changeBg(this)">企业产品</li>
<li id="menuContentTitle_li_pos">
<div id="qq"><strong>QQ</strong>实验室</div>
</li>
<li class="clear"></li>
</ul>
</div>
<div class="centerContent">
<img src="qq/left.png" align="middle" class="centerContent_Left" />
<div class="centerContent_Right">
<h1>最新动态</h1>
<ul>
<li>·<a href="javascript:void(0);">腾讯电脑管家8.0正式版发布</a></li>
<li>·<a href="javascript:void(0);">QQ音乐10.0 发布，用“新”聆听音乐</a></li>
<li>·<a href="javascript:void(0);">微云贺岁版，回收站、独立密码让数据更安全</a></li>
<li>·<a href="javascript:void(0);">腾讯手机管家(PC版)2.0新版 只为用户更好体验</a></li>
<li>·<a href="javascript:void(0);">QQ影音3.7发布，提升转码速度</a></li>
<li>·<a href="javascript:void(0);">QQ2012 Beta2(Q+)：全新Q+，更快更便捷</a></li>
<li>·<a href="javascript:void(0);">Foxmail 7发布新版本，支持繁、简、英多语言</a> </li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="toolsContent">
<div class="softwareList">
<div class="softwareListTitle">
<h1>腾讯软件</h1>
<a href="javascript:void(0);">更多>></a>
</div>
<ul class="softList">
<li>
<span class="moreList_li" id="moreList_li_QQ"></span>
<h1><a href="javascript:void(0);">QQ2013 正式版SP4<label class="hot_none"></label></a>更新日期：2013-10-31</h1>
<p class="softList_li_p">
<a href="javascript:void(0);" class="softList_li_down">下载</a>
<label>|</label>
<a href="javascript:void(0);">官方网站</a>
</p>
<p class="softList_li_info">
免费的即时通讯平台，带来更多沟通乐趣
</p>
</li>
<li>
<span class="moreList_li" id="moreList_li_GJ"></span>
<h1><a href="javascript:void(0);">腾讯电脑管家<label class="hot"></label></a>更新日期：2013-10-22</h1>
<p class="softList_li_p">
<a href="javascript:void(0);" class="softList_li_down">下载</a>
<label>|</label>
<a href="javascript:void(0);">官方网站</a>
</p>
<p class="softList_li_info">
专业的免费杀毒软件，全面便捷管理电脑
</p>
</li>
<li>
<span class="moreList_li" id="moreList_li_RJ"></span>
<h1><a href="javascript:void(0);">软件管理<label class="hot_none"></label></a>更新日期：2013-08-21</h1>
<p class="softList_li_p">
<a href="javascript:void(0);" class="softList_li_down">下载</a>
<label>|</label>
<a href="javascript:void(0);">官方网站</a>
</p>
<p class="softList_li_info">
下载软件，就用软件管理
</p>
</li>
<li>
<span class="moreList_li" id="moreList_li_YY"></span>
<h1><a href="javascript:void(0);">QQ音乐10.04<label class="hot"></label></a>更新日期：2013-10-19</h1>
<p class="softList_li_p">
<a href="javascript:void(0);" class="softList_li_down">下载</a>
<label>|</label>
<a href="javascript:void(0);">官方网站</a>
</p>
<p class="softList_li_info">
全新界面设计，视野更开阔，操作更简单
</p>
</li>
<li>
<span class="moreList_li" id="moreList_li_LLQ"></span>
<h1><a href="javascript:void(0);">QQ浏览器<label class="hot"></label></a>更新日期：2013-10-31</h1>
<p class="softList_li_p">
<a href="javascript:void(0);" class="softList_li_down">下载</a>
<label>|</label>
<a href="javascript:void(0);">官方网站</a>
</p>
<p class="softList_li_info">
全新设计，简约轻快，精巧易用
</p>
</li>
<li>
<span class="moreList_li" id="moreList_li_YX"></span>
<h1><a href="javascript:void(0);">QQ影像<label class="hot_none"></label></a>更新日期：2013-01-24</h1>
<p class="softList_li_p">
<a href="javascript:void(0);" class="softList_li_down">下载</a>
<label>|</label>
<a href="javascript:void(0);">官方网站</a>
</p>
<p class="softList_li_info">
管理、浏览、编辑、上传一站体验
</p>
</li>
<li>
<span class="moreList_li" id="moreList_li_SRF"></span>
<h1><a href="javascript:void(0);">QQ输入法<label class="hot_none"></label></a>更新日期：2013-07-12</h1>
<p class="softList_li_p">
<a href="javascript:void(0);" class="softList_li_down">下载</a>
<label>|</label>
<a href="javascript:void(0);">官方网站</a>
</p>
<p class="softList_li_info">
打字准，速度快，装机必备的输入法
</p>
</li>
<li>
<span class="moreList_li" id="moreList_li_SJ"></span>
<h1><a href="javascript:void(0);">腾讯手机管家pc版<label class="hot_none"></label></a>更新日期：2013-04-26</h1>
<p class="softList_li_p">
<a href="javascript:void(0);" class="softList_li_down">下载</a>
<label>|</label>
<a href="javascript:void(0);">官方网站</a>
</p>
<p class="softList_li_info">
海量热门应用免费下载，便捷管理您的手机资源
</p>
</li>
<li>
<span class="moreList_li" id="moreList_li_TM"></span>
<h1><a href="javascript:void(0);">TM2013<label class="hot_none"></label></a>更新日期：2013-01-17</h1>
<p class="softList_li_p">
<a href="javascript:void(0);" class="softList_li_down">下载</a>
<label>|</label>
<a href="javascript:void(0);">官方网站</a>
</p>
<p class="softList_li_info">
极简的沟通体验，QQ产品团队荣誉出品
</p>
</li>
</ul>
</div>
<div class="moreList">
<div class="softwareListTitle" id="softwareMoreList">
<h1>更多推荐</h1>
<a href="javascript:void(0);">更多>></a>
</div>
<ul class="moreListUl">
<li id="QQxuanfeng">
<a href="javascript:void(0);">QQ旋风</a>
<p class="moreList_li_p">
<a href="javascript:void(0);" class="moreList_li_down">下载</a>
</p>
</li>
<li id="QQshipin">
<a href="javascript:void(0);">腾讯视频播放器</a>
<p class="moreList_li_p">
<a href="javascript:void(0);" class="moreList_li_down">下载</a>
</p>
</li>
<li id="QQyingyin">
<a href="javascript:void(0);">QQ影音</a>
<p class="moreList_li_p">
<a href="javascript:void(0);" class="moreList_li_down">下载</a>
</p>
</li>
<li id="QQxiaoqshuzhuo">
<a href="javascript:void(0);">小Q书桌</a>
<p class="moreList_li_p">
<a href="javascript:void(0);" class="moreList_li_down">下载</a>
</p>
</li>
<li id="QQfoxmail">
<a href="javascript:void(0);">Foxmail</a>
<p class="moreList_li_p">
<a href="javascript:void(0);" class="moreList_li_down">下载</a>
</p>
</li>
<li id="QQwangumumakexing">
<a href="javascript:void(0);">顽固木马克星</a>
<p class="moreList_li_p">
<a href="javascript:void(0);" class="moreList_li_down">下载</a>
</p>
</li>
<li id="QQqqyinyue">
<a href="javascript:void(0);">QQ音乐10.04</a>
<p class="moreList_li_p">
<a href="javascript:void(0);" class="moreList_li_down">下载</a>
</p>
</li>
<li id="QQqqyouxi">
<a href="javascript:void(0);">QQ游戏</a>
<p class="moreList_li_p">
<a href="javascript:void(0);" class="moreList_li_down">下载</a>
</p>
</li>
<li id="QQshoujiqq">
<a href="javascript:void(0);">手机QQ</a>
<p class="moreList_li_p">
<a href="javascript:void(0);" class="moreList_li_down">下载</a>
</p>
</li>
<li id="QQqqwubi">
<a href="javascript:void(0);">QQ五笔</a>
<p class="moreList_li_p">
<a href="javascript:void(0);" class="moreList_li_down">下载</a>
</p>
</li>
<li id="QQqqcidian">
<a href="javascript:void(0);">QQ词典</a>
<p class="moreList_li_p">
<a href="javascript:void(0);" class="moreList_li_down">下载</a>
</p>
</li>
<li id="QQqqgongjulan">
<a href="javascript:void(0);">QQ工具栏</a>
<p class="moreList_li_p">
<a href="javascript:void(0);" class="moreList_li_down">下载</a>
</p>
</li>
</ul>
<!-- 合作伙伴 -->
<div class="hezuohuoban">
<h1>合作伙伴</h1>
<ul>
<li><a href="javascript:void(0);">腾讯网下载</a></li>
<li><a href="javascript:void(0);">下载吧</a></li>
<li><a href="javascript:void(0);">IT168</a></li>
<li><a href="javascript:void(0);">东坡下载</a></li>
<li><a href="javascript:void(0);">完美下载</a></li>
</ul>
</div>
</div>
</div>
<div class="bottomContent">
<p>Copyright © 1998 - 2012 Tencent. All Rights Reserved.</p>
<p>腾讯公司 版权所有</p>
</div>
</body>
</html>
注：网页里面没用使用<table>标记，并非不是觉得使用table不好，纯练手。
源码包下载（已找不到了）
点赞
