`

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地图位置标记动画特效

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

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

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

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

    【纯CSS3地图位置标记动画特效】是一种利用CSS3特性实现的交互式地图效果,它在网页中可以显示动态的位置标记,为用户带来更生动、直观的地理信息展示。CSS3是层叠样式表(Cascading Style Sheets)的第三个版本,...

    css3学习与例子

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

    css3 炫丽按钮例子

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

    css样式表的一些例子

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

    html5+css3实战 例子

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

    css帮助文档(例子)

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

    CSS button例子

    2. **渐变背景**:CSS3引入了线性渐变和径向渐变,允许设计师创建动态、丰富的背景效果。比如,`background-image: linear-gradient(to right, red, yellow);`会创建一个从左到右由红色渐变为黄色的按钮。 3. **...

    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实例 :3D立方体旋转

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

    html5+css3源代码

    CSS3(层叠样式表第三版)则是用于定义网页外观和布局的样式语言,其特点和知识点包括: 1. 选择器增强:增加了类选择器(.class)、ID选择器(#id)、属性选择器([attr=value])等,更精确地控制样式应用。 2. ...

    css例子300例子

    6. **动画与过渡**:CSS3引入了动画(`animation`)和过渡(`transition`),使得元素动态效果的实现变得简单。例子会展示如何创建平滑的滑动、淡入淡出效果等。 7. **伪类和伪元素**:如`:hover`、`:active`、`:...

    CSS信封例子-Css-Letter

    【CSS信封例子-Css-Letter】是一个展示如何利用CSS技术来创建逼真的信封效果的项目。这个项目旨在帮助开发者和网页设计师更好地理解和运用CSS在网页设计中的灵活性和创意性。下面将详细介绍这个项目涉及的主要知识...

Global site tag (gtag.js) - Google Analytics