div+css 组成的人
来源:互联网 发布:黑魂3美女捏脸数据 编辑:程序博客网 时间:2024/06/07 06:39
哈哈哈,无聊时候,随便写了点,这阶段工作不忙,哈哈哈哈,很开心呢
css如下:
<style type="text/css"> .rectangle{ width:200px; height: 50px; border-radius: 10px; background-color: pink; position: relative } .rectangle::before{ content: ""; width: 0; height: 0; border: 15px solid pink; border-color: pink transparent transparent transparent; position: absolute; bottom: -30px; left:40px; } .face{ width: 100px; height: 100px; border: 2px solid black; border-radius: 50%; margin:10px 0 0 50px } .nose{ width: 0; height: 0; margin: 45px 0 0 35px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 24px solid red; } .mouth{ width:30px; height: 15px; border: 1px solid black; margin:10px 0 0 33px; border-radius: 0 0 30px 30px } .Leg{ width: 100px; height:100px; border: 0px solid black; margin:133px 0 0 0; float: left } .leftLeg{ width:130px; height:1px; background-color:black; margin:56px 0 0 0; transform: rotate(120deg) } .rightLeg{ width:130px; height:1px; background-color:black; margin:54px 0 0 -32px; transform: rotate(60deg) } .hand{ width: 196px; border: 1px solid black; margin: 30px 0 0 7px; position: absolute } .standBody{ width: 1px; height: 133px; border: 1px solid black; background-color:black; margin: 0 0 0 100px; position: absolute } .leftEye{ width: 28px; height:14px; border: 1px solid black; margin:25px 10px 0 15px; float: left; border-radius: 14px/7px } .rightEye{ width: 28px; height:14px; border: 1px solid black; margin:25px 0 0 0; float: left; border-radius: 14px/7px } .leftEyeBall{ width:13px; height:13px; border: 1px solid black; background-color:black; margin:0 0 0 6px; border-radius: 50% } .rightEyeBall{ width:13px; height:13px; border: 1px solid black; background-color:black; margin:0 0 0 6px; border-radius: 50% }</style>html如下:
<div style="position: relative"> <div class="rectangle"> <span >我美吗?哈哈哈哈哈哈哈哈哈哈</span> </div> <div class="face"> <div class="leftEye"> <div class="leftEyeBall" ></div> </div> <div class="rightEye"> <div class="rightEyeBall" ></div> </div> <div class="nose"></div> <div class="mouth"></div> </div> <div class="hand"></div> <div class="standBody"></div> <div class="Leg"> <hr class="leftLeg" > </div> <div class="Leg" > <hr class="rightLeg"> </div></div>用到的知识点如下:
1、定位
position: relative相对定位
absolute绝对定位
2、翻转
transform: rotate(120deg)将直线翻转
3、圆角
border-radius: 50%;
4、margin
margin:10px 2px 3px 0;距离上边距为10px,距离右边距为2px,距离下边距为3px,距离左边距为05、倒三角的实现
1 0
- div+css 组成的人
- DIV+CSS----Div的定位
- bootstrap div模块 组成的登陆界面
- div+css适合div的css属性
- CSS+DIV的优缺点
- 经典的div+CSS
- DIV+css的结构
- DIV+css的结构
- CSS+DIV的优点
- css+div的兼容问题
- div+css的几个问题
- div+css的position
- DIV+CSS的用法
- DIV+CSS的设计
- CSS+DIV的学习方法?
- CSS的属性组成和作用
- 让div+css的div居中
- div+css - Internet Explorer的CSS参考资料
- jQuery学习笔记(ajax)
- C++中运算符重载的问题 1:19
- 【软考】2016年上动态规划
- H5限制文件上传大小,还可以
- 使用poi调整字体格式、添加单元格注释、自动调整列宽
- div+css 组成的人
- ElasticSearch + Canal 开发千万级的实时搜索系统【转】
- 内存拷贝函数
- ABBYY FineReader 12没你想得那么简单
- INPUT子系统
- Android6.0 otg插入U盘 流程
- JS正则表达式
- bzoj 4245: [ONTAK2015]OR-XOR
- 在南通选择JAVA培训机构的独门秘诀