div+css文字“本来”_html/css_WEB-ITnose
*{
margin: 0;
padding:0;
}
.main_obj{
width: 500px;
height: 240px;
/*background-color: #9cf;*/
margin:0 auto;
margin-top: 200px;
}
.ben_main,.lai_main{
height: 230px;
width: 220px;
overflow: hidden;
float: left;
/*background-color: #cccccc;*/
}
.ben{
background-color: #464646;
position: relative;
}
.ben_1{
height: 25px;
width:190px;
top: 45px;
left: 14px;
}
.ben_2{
width: 25px;
height:234px;
left: 95px;
}
.ben_3{
width: 143px;
height: 220px;
border: 20px solid #464646;
position:relative ;
border-radius:100px;
top: -177px;
left:17px;
}
.ben_4{
width: 80px;
height: 25px;
top: -330px;
left:68px;
}
.lai_main{
float: right;
/*background-color:#ccc ;*/
}
.lai_1{
top: -140px;
}
.lai_2{
width: 150px;
height: 150px;
border: 20px solid #98b821;
border-radius:100px ;
position: relative;
top: -151px;
left: -13px;
}
.lai_3{
height: 40px;
width: 180px;
overflow: hidden;
/*background-color: red;*/
position: relative;
top: -441px;
left: 25px;
}
.lai_4{
width: 20px;
height: 40px;
background-color:#98b821 ;
position: relative;
top: -482px;
left: 38px;
transform:rotate(35deg);
}
.lai_4:before{
content: "";
display: block;
width: 15px;
height: 20px;
background-color: #ffffff;
position: relative;
left: -15px;
top: 4px;
}
.lai_5{
transform:rotate(145deg);
position: relative;
left: 155px;
top: -522px;
}
.lai_5:before{
content: "";
position: relative;
left: -15px;
top: 15px;
}
.lai2_out{
height: 61px;
width: 188px;
/* background-color: #0092DC; */
position: relative;
top: -446px;
left: 15px;
overflow: hidden;
transform: rotate(2deg);
}
.lai2_1{
width: 150px;
height: 150px;
border: 20px solid #98b821;
border-radius: 100px;
position: relative;
top:-142px;
}
.lai2_2{
width: 20px;
height: 33px;
background-color: #98b821;
position: relative;
top: -183px;
transform: rotate(45deg);
left: 27px
}
.lai2_2:before{
content: "";
display: block;
width: 23px;
height: 34px;
background-color: #ffffff;
position: relative;
top: 0px;
left: -23px;
}
.lai2_3{
transform:rotate(135deg);
top: -222px;
left: 150px;
}
.lai2_3:before{
position: relative;
top: 13px;
left: -23px;
}
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
上一篇： oracle 树结构查询
下一篇： php+ajax文件上传进度条
推荐阅读
-
如何设置网页中的一段文字，使它的宽度是页面宽度的62%且能自动换行？_html/css_WEB-ITnose
-
div+css布局时的浏览器兼容问题_html/css_WEB-ITnose
-
【原】《DIV+CSS商业案例与网页布局开发精讲》读书笔记(2)_html/css_WEB-ITnose
-
button 文字换行的问题_html/css_WEB-ITnose
-
IE8.0下DIV+CSS网站不居中解决办法_html/css_WEB-ITnose
-
三角形里面添加文字_html/css_WEB-ITnose
-
div中有一个marquee标签，marquee中有滚动显示的文字，如何让文字在div中垂直居中从右向左滚动显示？_html/css_WEB-ITnose
-
CSS实现背景透明，文字不透明（各浏览器兼容）_html/css_WEB-ITnose
-
css实现文字竖排效果_html/css_WEB-ITnose
-
div+CSS绝对定位absolute属性_html/css_WEB-ITnose