`

div+css实现圆角聊天框

 
阅读更多

需要做个聊天样式的对话框，找了半天，终于找到一个比较好的样式，就像当前的手机短信对话框类似的下面贴出相关的代码：

 

1.css部分代码：

 

.chat_message,p {

margin: 0;

padding: 0;

}

p{

    margin-left: 1px;

}

//左侧div对话框样式

.div1,.div2,.div3 {

display: inline-block; #

display: inline; #

zoom: 1;

position: relative;

border-style: solid;

border-color: black;

zoom: 1;

}

 

.div1 {

margin-top: 5px;

margin-left: 10px;

border-width: 1px;

}

 

.div2,.div3 { #

left: -2px;

border-width: 0 1px;

background-color: #E3F790;

}

 

.div2 {

margin: 0 -2px;

}

 

.div3 {

width: auto;

margin: 1px -2px;

padding: 0 6px;

line-height: 1.5;

margin: 1px -2px;

}

 

.pointer1,.pointer2 {

position: absolute;

top: 7px;

width: 0;

height: 0;

overflow: hidden;

border-top: 6px transparent dotted;

border-bottom: 6px transparent dotted;

}

 

.pointer1 {

left: -9px;

border-right: 6px black solid;

}

 

.pointer2 {

left: -8px;

border-right: 6px #E3F790 solid;

}

 

//右侧div对话框样式

.diva,.divb,.divc {

margin-right: 5px;

display: inline-block; #

display: inline; #

zoom: 1;

position: relative;

border-style: solid;

border-color: black;

zoom: 1;

}

 

.diva {

margin-top: 5px;

margin-right: 10px;

border-width: 1px;

}

 

.divb,.divc { #

left: -2px;

border-width: 0 1px;

background-color: #E8F4F1;

}

 

.divb {

margin: 0 -2px;

}

 

.divc {

width: auto;

margin: 1px -2px;

padding: 0 6px;

line-height: 1.5;

}

 

.pointera,.pointerb {

position: absolute;

top: 7px;

width: 0;

height: 0;

overflow: hidden;

border-top: 6px transparent dotted;

border-bottom: 6px transparent dotted;

top: 7px;

}

 

.pointera {

right: -9px;

border-left: 6px black solid;

}

 

.pointerb {

right: -8px;

border-left: 6px #E8F4F1 solid;

}

 

2.html

<html>

<head></head>

<div id="main_body"

style="position: absolute; top: 40px; left: 50px; width: 900px; height: 600px; overFlow: auto; background-color: #F4F9F9; border:solid 1px #F9F94B; scrollbar-face-color: #ffd700; scrollbar-shadow-color: #e0ffff; scrollbar-highlight-color: #fa8072; scrollbar-3dlight-color: #ff0000; scrollbar-darkshadow-color: #afeeee; scrollbar-track-color: #ffb6c1; scrollbar-arrow-color: #e6e6fa;"

align="left">

<div align="left" id="outputArea"

style="overflow: visible; font-size: 14px; height: auto">

                                <div class='chat_message' align='left'><div class='div1'><div class='div2'>"

<div class='div3'><p align='left'>

请求

</p></div></div><div class='pointer1'></div><div class='pointer2'></div>                                    </div></div>

                               <div class='chat_message' align='right'><div class='diva' ><div class='divb'>

<div class='divc'><p align='left'>

 回复

</p></div></div><div class='pointera'></div><div class='pointerb'></div>                                    </div></div>

                         </div>

</div>

</html>

 

代码有点乱，基本样式实现了。有兴趣的可以看看

0
顶
4
踩
分享到：
| linux 启动oracle
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div+css实现圆角导航菜单的效果

    本文将深入探讨如何使用`div+css`来实现具有圆角效果的导航菜单。 首先，`div`是HTML中的一个块级元素，它可以被用作容器，用于组织页面内容。在创建导航菜单时，`div`可以用来包裹整个菜单或者单独的菜单项。例如...

    DIV+CSS实现圆角

    DIV+CSS实现圆角，无需图片，兼容性好。

    DIV+CSS实现圆角.rar

    "DIV+CSS实现圆角"是这个主题的核心，它涉及到CSS3中的一些关键属性，如`border-radius`，用于创建非矩形的、具有圆角边框的元素。接下来，我们将深入探讨这个知识点。 首先，`&lt;div&gt;`是HTML中的一个块级元素，常...

    div+css呈现圆角层示例

    在这个特定的案例"div+css呈现圆角层示例"中，我们将探讨如何利用CSS技术创建具有圆角边框的`div`层，而无需依赖背景图片。这种技术对于提升网页的可读性和美观性至关重要，因为它可以减少HTTP请求，提高页面加载...

    DIV+CSS IE圆角

    文件名`iecss3`可能包含的是一个解决IE圆角问题的CSS3兼容库或者是一些示例代码，它可能通过CSS滤镜或者其他技术帮助开发者在IE浏览器上实现圆角效果。使用这类资源可以帮助开发者节省时间并确保在不同浏览器中的...

    W3C网页标准、div+css教程、xhtml+css介绍

    CSS3是当前广泛使用的版本，引入了更多样式效果，如阴影、圆角、动画和过渡。 3. **XHTML (Extensible HyperText Markup Language)**：XHTML是HTML和XML的结合体，它结合了HTML的易用性和XML的严谨性，强制执行更...

    div+css后台登录模版

    在网页设计领域，Div+CSS技术的应用已经十分广泛，尤其在构建后台管理界面时，这种技术能够帮助我们实现清晰的结构、良好的可维护性和高效的页面表现。本篇文章将围绕"div+css后台登录模版"这一主题，深入探讨其设计...

    DIV+CSS 圆角边框

    标题“DIV+CSS 圆角边框”指向的是一个关于前端网页设计的技术主题，特别是如何使用HTML和CSS来实现元素的圆角边框效果。在Web开发中，DIV元素常被用作布局容器，而CSS（层叠样式表）则用于控制页面的样式和结构。在...

    div+css 可伸缩的圆角

    在网页设计中，"div+css 可伸缩的圆角"是一个常见的需求，它涉及到CSS3中的边框半径属性，以及如何构建响应式的布局。让我们深入探讨这个主题。 首先，`div`是HTML中的一种块级元素，通常用于组织页面结构。`div`...

    div+css制作非常实用的24款分页页码css代码

    "div+css"是一种常见的网页布局技术，通过使用HTML的div元素配合CSS（层叠样式表）来实现页面的结构与样式的分离，从而提高网页的可维护性和易读性。本篇内容将详细探讨如何利用div+css制作实用且美观的分页页码。 ...

    使用html+css+javascript实现聊天室的展示界面，并给出源码

    使用 HTML、CSS 和 JavaScript 实现聊天室的展示界面 在现代 web 开发中，构建一个聊天室是非常常见的需求。使用 HTML、CSS 和 JavaScript，我们可以轻松地实现一个聊天室的展示界面。本文将详细介绍如何使用 HTML...

    Div+Css的Tab菜单

    - Tab的样式可以多样化，包括扁平化设计、3D效果、圆角、渐变色、图标组合等，这些都是通过CSS实现的。 - Tab可以是水平的，也可以是垂直的，甚至可以设计成不规则形状，满足不同设计需求。 - 注意保持Tab的一致...

    div+css无图片实现圆角矩形(兼容Firefox)

    div+css无图片实现圆角矩形(兼容Firefox)

    div+css制作圆角矩形的原理示例解读

    本篇文章将深入解析如何通过div+CSS实现圆角矩形的原理，并提供一个示例来帮助读者理解。 首先，我们要明确CSS中并没有直接提供创建圆角的属性，但在CSS3中引入了`border-radius`属性，允许我们直接设置元素边框的...

    html5+div+css3网站样式模板

    DivCSS则通常指使用Div元素配合CSS进行布局和样式设计。H5模板通常包含预设的HTML5结构和CSS3样式，方便开发者快速构建网页。CSS3学习则涉及对CSS3新特性的理解和实践，如选择器、布局、动画等。 在...

    DIV+CSS漂亮的样式

    在网页设计领域，`DIV+CSS`是一种广泛使用的布局技术，它通过定义不同的CSS（层叠样式表）类来控制HTML中的`&lt;div&gt;`元素，从而实现页面的精美设计和结构化布局。本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS...

    div+css30款后台模板实用div+css30款后台模板实用

    CSS3是CSS的最新版本，增加了许多新的功能，如阴影、圆角、过渡、动画以及Flexbox和Grid布局系统，极大地丰富了网页设计的可能性。 2. **后台模板的重要性**：后台模板通常用于网站的管理界面，它们具有清晰的结构...

    基于html5+css3实现的精美聊天界面demo

    例如，通过使用`border-radius`属性可以创建圆角，使聊天气泡看起来更加自然；`box-shadow`和`text-shadow`则可以增加深度感和层次感；`transition`和`animation`可以实现平滑的动态效果，如消息发送后的淡入淡出...

    div+css select效果

    本教程将详细讲解如何使用`div+css`来实现一个兼容多浏览器的美化版`select`效果。 首先，我们需要创建一个`div`元素作为`select`的替代品，这将作为我们自定义样式的容器。通过设置`position`属性为`relative`，...

    十天学会DIV+CSS(WEB标准)

    《十天学会DIV+CSS（WEB标准）》是一份针对初学者和希望深入理解WEB标准布局技术的专业人士的宝贵教程。这份教程详细介绍了如何利用HTML的DIV元素与CSS（层叠样式表）相结合，实现网页的高效、灵活和可维护性布局。...

Magicbox
Global site tag (gtag.js) - Google Analytics