`

css3 女厕所标记例子

css 
阅读更多
css:

/* Created by TopStyle Trial - www.topstyle4.com */
.ren_header{
   width: 100px;
   height: 100px;
background: black;
border-radius: 100px 100px 100px 100px;
margin-left:100px;
}
.ren_hand1{
width: 25px;
height: 170px;
background: black;
border-right: red solid 2px;
border-radius:50px 0px 20px 20px;
position: absolute;
margin-left:48px;
}
.ren_hand2{
width: 25px;
height: 170px;
background: black;
position: absolute;
border-radius:0px 50px 20px 20px;
margin-left:225px;
border-left: red solid 2px;
}
.ren_body{
width: 150px;
height: 150px;
background: black;
position: absolute;
border: 0px solid #ccc;
margin-left:75px;
}
.ren_jiao1{
width: 50px;
height: 150px;
background: black;
position: absolute;
border: 0px solid #ccc;
border-radius: 0px 0px 10px 10px;
margin-left:90px;
margin-top:150px;
}

.ren_jiao2{
width: 50px;
height: 150px;
background: black;
position: absolute;
border: 0px solid #ccc;
margin-left:160px;
margin-top:150px;
border-radius: 0px 0px 10px 10px;
}
.ren_qunzi{
width: 50px;
height: 15px;
background: rgba(0,0,0,0);
border:50px solid #f00;
border-color:rgba(0,0,0,0) rgba(0,0,0,0) #000 rgba(0,0,0,0);
border-width: 90px;
/**border-style: black dashed;*/
margin-left:35px;
position: absolute;
}

html:

<div class="ren_header"></div>
<div class="ren_hand1"></div>
<div class="ren_body"></div>
<div class="ren_hand2"></div>
<div class="ren_jiao1"></div>
<div class="ren_jiao2"></div>
<div class="ren_qunzi"></div>
分享到:
评论

相关推荐

    div+css例子 div+css例子

    div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...

    纯CSS3地图位置标记动画特效.zip

    此资源“纯CSS3地图位置标记动画特效.zip”提供了一个使用CSS3实现的地图位置标记动画效果,它无需JavaScript,完全依赖CSS3的特性来创建动态的视觉体验。 首先,我们要理解CSS3中的关键帧动画(@keyframes)是这个...

    简单的CSS3地图位置标记动画特效

    本文将深入探讨“简单的CSS3地图位置标记动画特效”这一主题,了解如何利用CSS3来创建动态、引人注目的地图标记。 首先,让我们了解CSS3的关键帧动画(@keyframes)。这是实现动画效果的基础。通过定义动画的不同...

    CSS3地图位置标记动画特效.zip

    本项目“CSS3地图位置标记动画特效”聚焦于使用CSS3来创建动态的地图定位标记,为用户提供更加生动、直观的交互体验。在这款特效中,开发者利用了CSS3的特性,如伪类、变换(transform)、过渡(transition)和关键...

    css3学习与例子

    通过实践这些CSS3的例子,你将掌握现代网页设计的关键技巧,并能创建出更具吸引力和交互性的网页。无论是新手还是经验丰富的开发者,深入理解和熟练运用CSS3都是提升设计能力的必备步骤。在学习过程中,不断尝试和...

    css3 炫丽按钮例子

    单纯css3做的各种炫丽按钮,特效按钮,会呼吸的按钮,颜色渐变, 直接通过css3绘制出特殊效果,使用css的动画技术实现的简单例子

    css样式表的一些例子

    本主题聚焦于"css样式表的一些例子",特别是与ASP(Active Server Pages)技术的结合应用。 标题中的"css样式表的一些例子"意味着我们将探讨CSS的实际应用,包括但不限于选择器的使用、属性设置、布局控制、盒模型...

    html5+css3实战 例子

    而CSS3则是层叠样式表的升级,提供了丰富的样式控制和布局解决方案,让网页设计更加灵活多变。 在HTML5中,新增的语义化元素如、、、和等,帮助开发者更好地组织页面内容,提高搜索引擎优化(SEO)的效果。同时,...

    HTML5&CSS3网页制作:HTML5段落标记.pptx

    虽然题目主要关注HTML5的段落标记,但CSS3在网页设计中也起着至关重要的作用。它可以用来进一步定制`&lt;p&gt;`元素的样式,例如调整段落的字体、颜色、大小、对齐方式、边距等。例如,如果要将所有段落的字体设置为`Arial...

    css帮助文档(例子)

    css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子css 帮助文档 例子

    CSS和CSS3思维导图(xmind版)

     一个css与css3都有效的code,如果浏览器不支持css3,那么只会以css的样式显示。最常见的就是圆弧角。一个只在css3中有效的code,如果浏览器不支持css3,那么其显示效果就不会出现。 css3和css,在编写code的时候,...

    css-spinners, 使用CSS和最小HTML标记制作的简单CSS微调器和 throbbers.zip

    css-spinners, 使用CSS和最小HTML标记制作的简单CSS微调器和 throbbers CSS微调器使用CSS和最小HTML标记制作的简单CSS加载指示器。 所有加载指示器都设计为使用最小标记:&lt;div class="loading-indicator"&gt; Loading.....

    Qt 控件的CSS样式例子

    本文将深入探讨Qt控件的CSS样式例子及其应用。 首先,让我们理解QtCSS的基本概念。QtCSS允许我们通过定义样式表来改变窗口小部件(QWidget)及其子类的外观,如按钮(QPushButton)、标签(QLabel)、文本框...

    (完整版)《HTML5+CSS3网站设计基础教程》_教学大纲.pdf

    《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容。本课程旨在让学生了解网页开发历程 及其未来方向,熟悉网页设计流程、掌握...

    CSS模仿谷歌的标记

    用CSS编写样式,模仿谷歌的标记!很详细哦!

    css禅意花园的一些例子(从网站收集,有图,有代码)

    学习CSS禅意花园的例子,可以提升设计师对CSS的理解和运用能力。你可以尝试自己修改这些CSS文件,观察网页的变化,从而深化对CSS规则和属性的掌握。同时,这也是一种很好的启发式学习方法,能激发创造力,拓宽设计...

    html5+css3+JS代码

    在CSS3方面,一个实用的例子是使用媒体查询实现响应式布局。通过设置不同的CSS规则来适应不同屏幕尺寸,开发者可以确保网页在手机、平板和桌面电脑上都能呈现出良好的用户体验。 最后,在JavaScript部分,可以学习...

    HTML5+CSS3实例 :3D立方体旋转

    在本实例中,CSS3的transform属性被用于实现3D立方体的旋转效果,通过设置rotateX、rotateY和rotateZ来控制立方体的各个轴向转动。 实现3D立方体旋转需要用到的关键CSS3属性有: 1. `perspective`:定义观察者与3D...

Global site tag (gtag.js) - Google Analytics