用CSS+DIV编写的腾讯首页框架资源-CSDN文库

共70个文件

jpg：24个

gif：15个

png：9个

需积分: 16 97 浏览量 2009-05-21 19:03:39 上传评论 1 收藏 1.34MB RAR 举报

在网页设计领域，CSS（Cascading Style Sheets）与HTML（HyperText Markup Language）是构建网页布局的基础。在这个“用CSS+DIV编写的腾讯首页框架”项目中，我们将深入探讨如何利用这两种技术来构建类似腾讯首页的复杂网页结构。 CSS是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的语言。它赋予了网页设计者对颜色、字体、布局等元素的控制权，使得网页设计更加灵活且易于维护。而DIV元素是HTML中的一个块级元素，常被用作布局容器，通过CSS样式控制，可以实现各种复杂的网页布局。在创建腾讯首页框架时，我们首先会使用HTML来定义页面的基本结构，包括头部、主体内容和底部导航等部分。每个部分都可以用一个或多个DIV元素来表示，这样可以方便地对各个区域进行独立的样式设置。例如，我们可以创建一个名为`<div id="header"></div>`的元素来表示顶部栏，再创建`<div id="content"></div>`来承载主要内容，最后是`<div id="footer"></div>`作为页脚。接下来，我们使用CSS来为这些DIV元素添加样式。CSS通过选择器来选取需要设置样式的元素，例如`#header`、`.content`和`#footer`分别对应ID为“header”、“content”的元素和类名为“content”的元素。通过设置`width`、`height`、`margin`、`padding`等属性，我们可以精确控制各个区域的大小和位置。对于腾讯首页这种响应式布局，可能还会涉及到媒体查询（media queries），以确保在不同设备和屏幕尺寸下都能呈现出良好的视觉效果。在CSS中，浮动（float）和定位（positioning）是两种常用的布局方法。在腾讯首页框架中，可能会使用浮动来实现内容的并排显示，如新闻模块和广告栏。而定位则可以用来实现固定在屏幕特定位置的元素，如顶部导航和侧边栏。除此之外，为了增强用户体验，我们还需要考虑交互性。这可能涉及使用CSS的伪类（`:hover`、`:active`、`:focus`等）来改变鼠标悬停、点击或获取焦点时元素的样式。同时，动画和过渡效果也是提升用户体验的重要手段，例如，滑动菜单、按钮的按下效果等，都可以通过CSS3的`transition`和`animation`属性实现。在实际开发中，我们还会遇到盒模型（Box Model）、层叠上下文（Cascading Order）以及浏览器兼容性等问题。盒模型决定了元素的实际大小，包括内容区、内边距、边框和外边距。而层叠上下文则是决定元素在重叠时显示顺序的关键。至于浏览器兼容性，我们需要确保代码能在不同的浏览器和版本中正常工作，这可能需要使用一些前缀（vendor prefixes）或者特性检测库。 “用CSS+DIV编写的腾讯首页框架”是一个综合性的实践课题，涵盖了HTML布局、CSS样式设计、响应式布局、交互设计以及兼容性处理等多个方面。通过这个项目，开发者可以提升对前端技术的掌握，同时也能够锻炼解决问题和优化用户体验的能力。

资源推荐

资源详情

资源评论

收起资源包目录

CSS+DIV编写的腾讯首页框架.rar （70个子文件）

用CSS编写的腾讯首页框架

images

home_b.gif 2KB

ind36.gif 789B

adsview.htm 3KB

816587.gif 2KB

wmlogo.gif 2KB

right2.swf 7KB

03.png 173KB

17457068.jpg 3KB

t_biao0511.swf 24KB

lg.gif 5KB

paipai.jpg 5KB

imanav.jpg 11KB

17534462.jpg 1KB

skin1.gif 26KB

17537145.jpg 3KB

weatherimg.png 7KB

skin512.css 8KB

17527208.jpg 4KB

06.png 88KB

expo_line.gif 72B

ipaddress.htm 62B

17520179.jpg 2KB

ping_qqcom_v1.js 3KB

01.png 156KB

speed_qqcom_v1.js 3KB

512.jpg 27KB

17493820.jpg 5KB

qq.jpg 3KB

6743671.jpg 3KB

oly_ico_01.gif 163B

blog3.jpg 5KB

nike.png 4KB

leftswf3.swf 22KB

imgnavxian.jpg 11KB

bai123.gif 49B

tencentvideo.js 11KB

17520844.jpg 3KB

dian.gif 50B

j.js 14KB

n1h1.jpg 2KB

imgnavsan.jpg 11KB

Thumbs.db 127KB

right1.swf 37KB

AD2v1.js 41KB

2g.gif 69B

weather.gif 5KB

17533010.jpg 3KB

leftswf.swf 20KB

leftswf2.swf 19KB

17517279.jpg 2KB

smart_for_qq.js 5KB

05.png 163KB

scale_090507.jpg 18KB

lview 5KB

skin512.gif 31KB

expotclogo.gif 2KB

10555.jpg 3KB

17520182.jpg 2KB

blog2.jpg 4KB

minisite2_166.js 107B

04.png 178KB

todaylink.gif 76B

17520181.jpg 2KB

blog1.jpg 5KB

02.png 138KB

c2c_link512.png 23KB

swfobject_modified.js 22KB

expressInstall.swf 773B

index.html 35KB

style.css 18KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>腾讯首页</title> <script src="js/swfobject_modified.js" type="text/javascript"></script> <script>  </script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="headnav"> <ul> <li><span>·</span><a href="#">腾讯客服</a></li> <li><span>·</span><a href="#">导航</a></li> <li><span>·</span><a href="#">充值</a></li> <li><span>·</span><a href="#">设为首页</a></li> <li><span>·</span><a href="#">手机腾讯网</a></li> <li><a href="#">QQ邮箱<img src="images/2g.gif"/></a></li> </ul> </div> <div id="mainnav"> <div id="mainnavtext"> <div id="mainnavtextlogo"><img src="images/expotclogo.gif"/></div> <div id="mainnavtext0"> <span><a href="#">新闻</a></span> <a href="#">博客</a> <a href="#">论坛</a> <a href="#">评论</a><br/> <span><a href="#">财经</a></span> <a href="#">证券</a> <a href="#">基金</a> <a href="#">理财</a> </div> <div id="mainnavtext1"> <img src="images/expo_line.gif"/> <span><a href="#">娱乐</a></span> <a href="#">明星</a> <a href="#">电影</a> <a href="#">音乐</a><br/> <span><a href="#">体育</a></span> <a href="#">NBA</a> <a href="#">足球</a> <a href="#">综合</a> </div> <div id="mainnavtext1"> <img src="images/expo_line.gif"/> <span><a href="#">汽车</a></span> <a href="#">房产</a> <a href="#">家居</a> <a href="#">家电</a><br/> <span><a href="#">科技</a></span> <a href="#">数码</a> <a href="#">手机</a> <a href="#">下载</a> </div> <div id="mainnavtext2"> <img src="images/expo_line.gif"/> <span><a href="#">女性</a></span> <a href="#">健康</a> <a href="#">育儿</a><br/> <span> <a href="#">购物</a></span> <a href="#">时尚</a> <a href="#">杂志</a> </div> <div id="mainnavtext1"> <img src="images/expo_line.gif"/> <span> <a href="#">读书</a></span> <a href="#">教育</a> <a href="#">高考</a> <a href="#">出国</a><br/> <span><a href="#">游戏</a></span> <a href="#">动漫</a> <a href="#">动画</a> <a href="#">星座</a> </div> <div id="mainnavtext2"> <img src="images/expo_line.gif"/> <span><a href="#">视频</a></span> <a href="#">直播</a> <a href="#">图片</a><br/> <span><a href="#">世博</a></span> <a href="#">公益</a> <a href="#">儿童</a> </div> </div> <div id="mainnavimg"> <div id="weather"> <img src="images/weather.gif"/> </div> <div id="tabs0"> <ul class="menu0" id="menu0"> <li onmouseover="setTab(0,0)" class="hover">网页</li><img src="images/imgnavxian.jpg"/> <li onmouseover="setTab(0,1)">图片</li><img src="images/imgnavxian.jpg"/> <li onmouseover="setTab(0,2)">音乐</li><img src="images/imgnavxian.jpg"/> <li onmouseover="setTab(0,3)">搜吧</li><img src="images/imgnavxian.jpg"/> <li onmouseover="setTab(0,4)">问问</li><img src="images/imgnavxian.jpg"/> <li onmouseover="setTab(0,5)">博客</li><img src="images/imgnavxian.jpg"/> <li onmouseover="setTab(0,6)">更多</li><img src="images/imgnavsan.jpg"/> </ul> <div class="main0" id="main0"> <ul class="block"><li><input name="shou" type="text" id="mainnavimginput"/></li></ul> <ul><li><input name="shou" type="text" id="mainnavimginput"/></li></ul> <ul><li><input name="shou" type="text" id="mainnavimginput"/></li></ul> <ul><li><input name="shou" type="text" id="mainnavimginput"/></li></ul> <ul><li><input name="shou" type="text" id="mainnavimginput"/></li></ul> <ul><li><input name="shou" type="text" id="mainnavimginput"/></li></ul> <ul><li><input name="shou" type="text" id="mainnavimginput"/></li></ul> </div> </div> <div id="mainnavimgbtd"> <input name="shou" type="button" value="搜搜" id="mainnavimgbt"/> </div> <div id="mainnavimgright"><img src="images/512.jpg"/></div> </div> </div> <div id="container"> <div id="leftpage"> <div id="leftnav"> <p id="leftnavp1"> <span>通信</span> <a href="#">QQ邮箱</a> <a href="#">QQ软件</a> <a href="#">QQ秀</a> <a href="#">QQ会员</a> <a href="#">号码</a> <a href="#">和悦</a> </p> <p id="leftnavp2"> <span>社区</span> <a href="#">QQ空间</a> <a href="#">相册</a> <a href="#">音乐</a> <a href="#">视频</a> <a href="#">直播</a> <a href="#">Q吧</a> <a href="#">QQ校友</a> </p> <p id="leftnavp2"> <span>休闲</span> <a href="#">QQ游戏</a> <a href="#">炫舞</a> <a href="#">宠物</a> <a href="#">飞车</a> <a href="#">音速</a> <a href="#">QQ堂</a> <a href="#">丝路</a> </p> <p id="leftnavp2"> <span>网游</span> <a href="#">寻仙</a> <a href="#">地下城与勇士</a> <a href="#">穿越火线</a> <a href="#">自由幻想</a> <a href="#">三国</a> </p> <p id="leftnavp2"> <span>手机</span> <a href="#">QQ无线</a> <a href="#">超级QQ</a> <a href="#">手机游戏</a> <a href="#">手机QQ</a> <a href="#">wapQQ</a> </p> <p id="leftnavp2"> <span>商务</span> <a href="#">拍拍网</a> <a href="#">财付通</a> <a href="#">QQ充值</a> <a href="#">更多</a> </p> </div> <div id="leftswf1"> <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="409" height="114"

评论收藏

内容反馈