`
txf2004
  • 浏览: 7067765 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

纯CSS仿QQ消息管理器的样式

阅读更多

<html>
<head>
<title> </title>
<style type="text/css">
.msgbox { padding:5px; width:700px; height:600px; overflow:hidden; margin:100px auto; border:1px solid #83B8DC; background:#fff; }
.msgbox h1 { color:#3E659F; font-size:14px; border-bottom:1px solid #BBCDDE; height:30px; line-height:30px; padding:0 10px; }
.msgbox ul { padding:0; margin:10px 0; list-style:none; }
.msgbox a { color:#333; border:1px solid #fff; display:block; padding:10px 10px 1px 10px; text-decoration:none; }
.msgbox a:hover { color:#333; border:1px solid #C3DFF4; text-decoration:none; background: #F1FAFE; }
.msgbox span{display:block;
color:#4167A7;}
</style>
</head>
<body>
<div class="msgbox">
<h1>日期:2008-8-28</h1>

<ul>
<li>
<a href="#"><span>系统消息 11:07:06</span>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</a>
</li>
<li>
<a href="#"><span>系统消息 11:07:06</span>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</a>
</li>
<li>
<a href="#"><span>系统消息 11:07:06</span>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</a>
</li>
<li>
<a href="#"><span>系统消息 11:07:06</span>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</a>
</li>
<li>
<a href="#"><span>系统消息 11:07:06</span>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</a>
</li>
<li>
<a href="#"><span>系统消息 11:07:06</span>消息内容消息内容消息内容消息内容消息内容消息内容消息内容</a>
</li>
</ul>
</div>
</body>
</html>

分享到:
评论

相关推荐

    DIV+CSS 仿QQ首页

    在Web开发领域,"DIV+CSS 仿QQ首页"是一个常见的练习项目,旨在提升开发者对网页布局和样式控制的理解。这个项目通常要求开发者使用HTML和CSS技术,模仿腾讯QQ官方网站的首页设计,以此来掌握这两种语言的核心应用。...

    仿QQ音乐HTML静态网页

    【标题】"仿QQ音乐HTML静态网页"是一个项目,旨在模仿QQ音乐的界面设计和功能,用纯HTML和CSS技术实现。这样的项目可以帮助开发者提升在前端网页设计和开发上的技能,学习如何创建具有高复用性的布局结构。 【描述...

    纯div+css仿QQ空间投票效果

    总的来说,"纯div+css仿QQ空间投票效果"是一个很好的练习项目,可以帮助你掌握CSS布局和交互设计的基本技巧。通过实践这个项目,你不仅能提升自己的CSS技能,还能了解如何将这些技能应用于实际的Web开发场景中。无论...

    仿QQ音乐(纯前端).zip

    总结来说,"仿QQ音乐(纯前端)"项目是一个集HTML5布局、CSS样式设计、JavaScript交互和前端工具链运用于一体的实战案例,非常适合初学者通过实际操作来加深对Web前端技术的理解和掌握。通过这个项目,学习者不仅能...

    CSS3仿QQ浏览器官网彗星动画背景特效

    【CSS3仿QQ浏览器官网彗星动画背景特效】是一种利用CSS3的新特性来实现的视觉效果,它在网页背景上创造出一种类似彗星划过夜空的动态景象,为用户带来极具吸引力的交互体验。这一特效主要依赖于CSS3中的关键帧动画...

    仿QQ+html5的聊天界面

    在这个项目中,开发者试图创建一个类似于QQ的在线聊天平台,该平台的用户界面是通过HTML5进行布局和结构设计,CSS用于样式控制和交互效果,而JavaScript(jQuery库)则负责动态功能的实现,如消息的发送与接收、文件...

    XP Menu 仿QQ菜单、仿XP资源管理器左侧菜单

    【标题】"XP Menu 仿QQ菜单、仿XP资源管理器左侧菜单" 是一个JavaScript库,主要用于在网页中实现类似Windows XP系统中的菜单效果,同时结合了QQ菜单的设计风格,提供了一种美观且用户友好的界面体验。这种菜单通常...

    jquery仿QQ消息框

    综上所述,实现“jquery仿QQ消息框”涉及到jQuery的选择器、DOM操作、事件处理、动画、CSS样式设计以及可能的插件化开发等多个方面。通过熟练掌握这些技术,我们可以创建出功能强大、用户体验良好的消息提示组件。在...

    仿QQ音乐均衡器及音频图谱

    在IT领域,音频处理是一个重要的分支,而"仿QQ音乐均衡器及音频图谱"的项目则关注于用户界面(UI)设计与音频可视化。这个项目的目标是模仿QQ音乐应用程序中的均衡器效果和音频波形图,为用户提供更加美观且交互性强...

    JS+css实现仿QQ空间信息提示框

    总结来说,利用JavaScript和CSS实现仿QQ空间信息提示框,需要掌握基本的DOM操作、CSS样式设计以及JavaScript事件处理和动画效果。这是一个很好的实践项目,可以帮助开发者提升前端技能,并理解如何在实际项目中创建...

    仿QQ空间采用Div+CSS布局

    【标题】"仿QQ空间采用Div+CSS布局"所涉及的知识点主要集中在网页设计与开发领域,特别是关于前端布局技术的运用。QQ空间是腾讯公司推出的一款个人博客服务,其界面设计深受用户喜爱。在网页设计中,使用Div+CSS布局...

    仿QQ空间个人站点CSS+DIV布局

    【标题】"仿QQ空间个人站点CSS+DIV布局"是一个基于Web开发的项目,旨在创建一个与QQ空间类似的个人展示平台。这个项目采用的技术栈主要包括Visual Studio 2005作为开发环境,Microsoft SQL Server 2000作为数据库...

    仿QQ消息弹出

    【标题】:“仿QQ消息弹出”是一种在软件或网页设计中常见的用户交互方式,它模仿了腾讯QQ即时通讯软件中的消息提示效果。这种设计旨在提供一种熟悉且友好的用户体验,让用户在使用其他应用程序时也能感受到类似QQ的...

    通过HTML和CSS仿制qq会员界面.rar

    2. **CSS3选择器**:CSS3引入了更强大的选择器,如类选择器、ID选择器、属性选择器、伪类和伪元素等,使样式应用更加精准。在仿制QQ会员界面时,开发者可能利用这些选择器为不同的元素添加特定样式,如按钮、标题和...

    导航菜单纯css

    总的来说,这个“导航菜单纯CSS”项目提供了一个学习和实践CSS布局、选择器、伪类和背景图像等概念的机会。通过理解和修改`demo.html`、`css`目录中的CSS文件,你可以创造出符合自己需求的个性化导航菜单,同时提升...

    腾爱糖大夫官网QQ浮动,纯CSS的QQ浮动哦

    纯CSS实现的QQ浮动意味着没有使用JavaScript或者其他编程语言,而是完全依赖于CSS(层叠样式表)的特性来完成动态效果。CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。通过...

    qq音乐项目html静态页面

    4. 响应式设计:利用媒体查询(`@media`)调整不同屏幕尺寸下的布局和样式,确保在手机、平板和电脑上都能正常工作。 此外,为了提高用户体验,还可以考虑集成音频播放器的JavaScript库,如JQuery Audio Player或...

    网页模板——JQUEYR 消息插件 Messager v1.5 仿QQ消息弹出提醒.zip

    网页模板——jQuery Messager v1.5是一款仿QQ消息弹出提醒的插件,它为开发者提供了在网页中实现类似即时通讯软件的消息提示功能。这个插件基于流行的JavaScript库jQuery构建,旨在提升用户体验,使网站的互动性更强...

Global site tag (gtag.js) - Google Analytics