DIV CSS 绘制风车

最新推荐文章于 2022-11-24 18:01:56 发布

weixin_30391339

最新推荐文章于 2022-11-24 18:01:56 发布

阅读量169

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/empist/p/5925734.html

我得说，CSS和DIV是个有趣的东西。

由于脑袋一无聊，突然想，画个DIV风车怎么样，于是就画了一个。

border的风格可以自主选择。

上代码：

<style>
*{
margin:0px;
padding:0px;
}
.we{
border-left:5px double red;
border-right:5px dotted green;
border-top:5px solid #3333FF;
border-bottom:6px groove #FF9900;
width:500px;
height:300px;
margin:0 auto;
}
#ftop{
margin-left:100px;
margin-right:0px;
width:100px;
height:200px;
background-color:#FF0000;
}
#fright{
margin-left:200px;
margin-top:-100px;
width:200px;
height:100px;
background-color:#FFFF66;
}
</style>
<div class="we">different border</div>
<br/>
<div><!-- first part-->
<div id="ftop">up</div>
<div id="fright">right</div>
</div>
<style>
#fleft{
margin-left:0px;
margin-right:0px;
width:200px;
height:100px;
float:left;
background-color:#0099CC;
}
#fdown{
margin-left:200px;
margin-top:0px;
width:100px;
height:200px;
background-color:#66FF00}
</style>
<div><!--second part-->
<div id="fleft">left</div>
<div id="fdown">down</div>
</div>

different border

right

left

down

转载于:https://www.cnblogs.com/empist/p/5925734.html