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;
}
相关文章
相关视频
推荐阅读
-
DIV+CSS在不同浏览器中的表现_html/css_WEB-ITnose
-
DIV+CSS简介_html/css_WEB-ITnose
-
DIV+CSS入门案例_html/css_WEB-ITnose
-
像csdn博客文章中图片和文字、代码等的排版是如何在服务器数据库中存储的?_html/css_WEB-ITnose
-
CSS实现背景透明,文字不透明(兼容各浏览器)_html/css_WEB-ITnose
-
求解决问题,IE8透明度背景跟文字也被透明了_html/css_WEB-ITnose
-
背景图片文字布局问题_html/css_WEB-ITnose
-
如何让下图中的红色部分(span)内的文字相对于红色部分竖直方向上居中呢?源代码如下,图在第二楼_html/css_WEB-ITnose
-
Div+Css视频学习笔记_html/css_WEB-ITnose
-
Div+CSS网站设计的优点_html/css_WEB-ITnose