好看123网站首页DIV+css静态页面资源-CSDN文库

共21个文件

gif：11个

png：6个

js：1个

需积分: 10 16 浏览量 2009-01-06 14:51:26 上传评论收藏 233KB RAR 举报

《好看123：探索DIV+CSS在静态页面设计中的应用》在互联网网页设计领域，"好看123"作为一个知名的网址导航网站，其首页的界面设计与布局无疑是其吸引用户的重要因素之一。该网站采用了传统的HTML和CSS技术，特别是以DIV+CSS的方式构建了静态页面，这一设计模式在现代网页开发中被广泛应用。本文将深入探讨DIV+CSS在好看123首页设计中的应用，以及这种技术带来的优势和特点。一、DIV+CSS概述在HTML中，DIV（Division）元素是一个通用的容器，用于对页面内容进行分组，以便更好地组织和控制布局。CSS（Cascading Style Sheets）则是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。通过将样式与结构分离，CSS使得网页设计更具灵活性和可维护性。二、DIV+CSS在好看123首页的应用 1. 结构清晰：在好看123的首页设计中，各个模块如搜索框、广告栏、链接列表等，都是通过DIV元素来划分和定位的，这使得页面结构层次分明，易于理解和维护。 2. 布局灵活：CSS提供了丰富的布局方式，如浮动布局、定位布局、Flexbox和Grid布局等，好看123可能根据需要选择合适的布局策略，以实现响应式设计，适应不同设备的屏幕尺寸。 3. 样式统一：通过CSS，设计师可以为整个网站定义统一的字体、颜色、边距等样式，确保页面风格一致，提升用户体验。 4. 优化性能：CSS的外部引用方式可以减少HTML文件的大小，提高页面加载速度，对于像好看123这样访问量大的网站，性能优化尤为重要。三、CSS在细节处理上的应用 1. 响应式设计：好看123的首页可能运用了媒体查询（Media Queries）来实现不同设备的适配，确保在手机、平板和桌面电脑上都能提供良好的浏览体验。 2. 动画效果：CSS3引入了动画和过渡效果，使首页的某些元素（如鼠标悬停、滑动效果等）更生动有趣，增加了用户的互动体验。 3. 清晰的字体与颜色搭配：通过CSS设置字体家族、字号、行高、颜色等，以达到清晰易读且美观的视觉效果。四、维护与更新由于好看123的页面采用的是静态HTML和CSS，所以在更新内容或调整设计时，只需修改对应的CSS文件，无需对后端代码进行改动，大大简化了维护工作。总结，好看123首页采用DIV+CSS的设计模式，实现了页面的高效布局和优美呈现。这种技术的应用不仅提高了页面的可读性和可维护性，也提升了用户体验，使得网站在众多导航站中脱颖而出。随着前端技术的不断发展，我们可以期待好看123在未来的设计中融合更多创新技术，持续优化用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

haokan123.rar （21个子文件）

haokan123

images

long.gif 8KB

bg.png 43KB

icons.gif 9KB

foot_bg.png 1KB

xian.gif 11KB

baidu_lm.gif 1KB

karting.gif 6KB

baidu_logo.gif 1KB

wj.gif 3KB

btn_gsrc.gif 304B

logo.png 71KB

yongshi.gif 9KB

minilogo.png 3KB

icons.png 10KB

huoxian.gif 10KB

Thumbs.db 59KB

bg_x.png 2KB

haokan123.js 13KB

style.css 13KB

wow.gif 11KB

index.html 58KB

<!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=gb2312" /><title>好看123--www.haokan123.com</title><meta name="keywords" content="好看123,网址导航,上网导航,网址,搜索,音乐,娱乐,图片,社区,BLOG,黄页，企业名录,114查询,网上黄页" /><meta name="description" content="好看123,网址之家,网址大全,网址,搜索,音乐,娱乐,图片,小游戏,短信,社区,日记,相册,K歌,通讯簿,BLOG,天气预报,实用工具.最方便,最快捷,最多华人使用的上网导航" /> <script language="javascript" src="/images/haokan123.js" ></script> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head><body><div id="wrap"><div id="header" class="container"><div id="topmeta" class="box"><div class="fr"><a href="#" onclick="javascript:if(document.all){this.style.behavior='url(#default#homepage)';this.setHomePage('http://'+document.location.host+'/index.htm'); }else{setHomePage('http://'+document.location.host+'/index.htm')}">设为首页</a> | <a href="javascript:addBookmark(bookmarkname,'http://www.haokan123.com/index.htm');">加入收藏</a> | <a href="http://w.haokan123.com" target="_blank">旧版首页</a></div><span id="clock"></span><span id="dayweather"></span><strong id="wearhermore" style="visibility:hidden"><a href="http://ip.haokan123.com/weather.htm"target="_blank">[查看更多]</a></strong></div> <div id="top" class="clearfix"><div class="fr" id="hotag"> <h4>网上购物</h4><ul><li><a href="http://btrmb.com/link.htm?q=%B4%F2%D5%DB%BB%FA%C6%B1" target="_blank" style="color:#F00">特价机票</a></li><li><a href="http://btrmb.com/link.htm?q=%CA%D6%CC%E1%B5%E7%C4%D4%BC%DB%B8%F1" target="_blank" style="color:#F00">手提电脑</a></li><li><a href="http://btrmb.com/link.htm?q=%BB%F0%B3%B5%C6%B1+%D4%A4%B6%A8" target="_blank" style="color:#F00">火车订票</a></li><li><a href="http://btrmb.com/link.htm?q=%BC%D9%B7%A2" target="_blank">时尚假发</a></li><li><a href="http://btrmb.com/link.htm?q=%C2%F2%CA%E9" target="_blank">热销新书</a></li><li><a href="http://btrmb.com/link.htm?q=%C7%EF%B6%AC%B7%FE%CA%CE" target="_blank">08秋冬装</a></li><li><a href="http://btrmb.com/link.htm?q=%C6%FB%B3%B5%C3%C0%C8%DD" target="_blank" style="color:#00F">汽车美容</a></li><li><a href="http://btrmb.com/link.htm?q=%B1%A6%C2%ED" target="_blank" style="color:#00F">BMW宝马</a></li><li><a href="http://btrmb.com/link.htm?q=%CA%D6%BB%FA%A1%A1%B3%E4%D6%B5%BF%A8" target="_blank" style="color:#00F">手机充值</a></li></ul><h4>休闲生活</h4><ul> <li><a href="http://btrmb.com/link.htm?q=%B1%B1%BE%A9+%D3%B0%CA%D3+%B6%AF%BB%AD+%C5%E0%D1%B5" target="_blank">影视培训</a></li><li><a href="http://btrmb.com/link.htm?q=pc%D3%CE%CF%B7" target="_blank">游戏排名</a></li><li><a href="http://btrmb.com/link.htm?q=%D3%A2%D3%EF%BF%DA%D3%EF%C5%E0%D1%B5" target="_blank">英语速成</a></li><li><a href="http://btrmb.com/link.htm?q=%BF%B5+%B1%A6+%C0%B3" target="_blank" style="color:#F00">减肥良方</a></li><li><a href="http://btrmb.com/link.htm?q=%D0%C4%C0%ED+%D7%C9%D1%AF" target="_blank" style="color:#F00">爱情顾问</a></li><li><a href="http://btrmb.com/link.htm?q=%C1%AC%CB%F8%BC%D3%C3%CB" target="_blank" style="color:#F00">明星副业</a></li><li><a href="http://btrmb.com/link.htm?q=%C7%A9%D6%A4+%D7%C9%D1%AF" target="_blank">签证咨询</a></li><li><a href="http://btrmb.com/link.htm?q=%D3%A2%D3%EF%BF%DA%D3%EF" target="_blank">结识老外</a></li><li><a href="http://btrmb.com/link.htm?q=%C1%F4%D1%A7%D6%D0%BD%E9" target="_blank">留学中介</a></li></ul><div class="sbox"><div class="ghotag"><a href="http://www.google.cn/webhp?client=pub-5483494931677797&prog=aff&ie=GB2312&oe=GB2312&hl=zh-CN" target="_blank" class="sgg">谷歌首页</a><a href="http://btrmb.com/link.htm?q=%B9%C9%C6%B1%BA%DA%C2%ED" target="_blank">股市行情</a><a href="http://btrmb.com/link.htm?q=%C8%E7%BA%CE%B3%B4%CD%E2%BB%E3" target="_blank">如何炒汇</a><a href="http://btrmb.com/link.htm?q=%C8%E7%BA%CE%BF%EC%CB%D9%D7%AC%C7%AE" target="_blank">快速赚钱</a><a href="http://btrmb.com/link.htm?q=%B6%A9%BE%C6%B5%EA" target="_blank">预定酒店</a></div><form action="http://www.google.cn/search" method="get" target="_blank" id="google_s1"> <input type="hidden" name="forid" value="1"><input type="hidden" name="prog" value="aff"><input type="hidden" name="ie" value="GB2312"><input type="hidden" name="oe" value="GB2312"><input type="hidden" name="hl" value="zh-CN"><input name="q" id="q" type="text" class="txt" onmouseover="this.focus();"onfocus="this.select();" /><input name="" type="image" src="images/btn_gsrc.gif" alt="搜索" /></form></div></div><div id="logo" style="behavior:url(#default#homepage)"><a href="javascript:clicklogo();" title="好看123" id="logourl"><img src="images/logo.png" alt="Haokan123" /></a></div></div><div id="search"> <ul id="searchmenu" class="clearfix"><li style="margin-left:0; width:69px;"><a href="javascript://" onclick="selectTag('baidu8',this)">Google</a></li><li class="focu"><a href="javascript://"onclick="selectTag('baidu0',this)">网页</a></li><li><a href="javascript://" onclick="selectTag('baidu1',this)">MP3</a></li><li><a href="javascript://" onclick="selectTag('baidu2',this)">图片</a></li><li><a href="javascript://" onclick="selectTag('baidu3',this)">贴吧</a></li><li><a href="javascript://" onclick="selectTag('baidu4',this)">知道</a></li><li><a href="javascript://" onclick="selectTag('baidu5',this)">百科</a></li><li><a href="javascript://" onclick="selectTag('baidu6',this)">视频</a></li><li><a href="javascript://" onclick="selectTag('baidu7',this)">股票</a></li><li><a href="javascript://" onclick="selectTag('baidu9',this)">邮箱</a></li> </ul><div id="baidu0" class="searchcon box clearfix "><form action="http://www.baidu.com/s" method="get" target="_blank"><a href="http://www.114la.com/search/index.htm"target="_blank"><img src="images/baidu_logo.gif" class="img1" /></a><input name="wd" type="text" class="int" onMouseOver="this.focus();" onFocus="this.select();" autocomplete="off"id="search_baidu0" onkeyup="myhint(event,this)" /><input name="tn" type="hidden" id="tn" value="haokan123" /><input type="submit" class="btn" value="百度一下" /></form><div class="adlink"><a href="http://www.baidu.com/s?wd=09年放假安排&tn=haokan123" target="_blank" onclick="searchlog('1326');">09年放假安排</a>  <a href="http://www.sooe.cn?comeID=17824" target="_blank" onclick="searchlog('1013');">2008创业赚</a>  <a href="http://www.28.com?comeID=56827" target="_blank" onclick="searchlog('1066');">一夜赚80万</a>  <a href="http://www.baidu.com/s?wd=燃油税改革方案&tn=haokan123" target="_blank" onclick="searchlog('1136');">油税改革</a>  </div></div><div id="baidu1" style="display:none;" class="box clearfix searchcon"><form action="http://mp3.baidu.com/m" method="get" target="_blank"><a href="http://www.114la.com/search/index.htm" target="_blank"><img src="images/baidu_mp3.gif" class="img1" /></a><input name="word" type="text" class="int" onMouseOver="this.focus();" onFocus="this.select();" autocomplete="off"id="search_baidu1"onkeyup="myhint(event,this)"/> <input name="tn" type="hidden" id="tn" value="haokan123" /><input name="f" type="hidden" id="f" value="ms" /><input name="ct" type="hidden" id="ct" value="134217728" /><input type="submit" class="btn" value="百度一下" /></form><div class="adlink"><a href="http://mp3.baidu.com/m?word=爱不能做主&tn=haokan123&f=ms&ct=134217728" target="_blank" onclick="searchlog('1020');">爱不能做主</a>  <a href="http://mp3.baidu.com/m?word=自由飞翔&tn=haokan123&f=ms&ct=134217728" target="_blank" onclick="searchlog('1018');">自由飞翔</a>  <a href="http://mp3.baidu.com/m?word=%B1%B1%BE%A9%BB%B6%D3%AD%C4%E3&tn=haokan123&f=ms&ct=134217728" target="_blank" onclick="searchlog('1019');">北京欢迎你</a>  <a href="http://mp3.baidu.com/m?word=稻香&tn=haokan123&f=ms&ct=134217728" target="_blank" onclick="searchlog('1083');">稻香</a>  <a href="http://mp3.baidu.com/m?wor

评论收藏

内容反馈