我得说,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

up
right

left
down

DIV CSS 绘制风车的更多相关文章

  1. CSS绘制三角形和箭头,不用再用图片了

    前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...

  2. div+css3绘制基本图形

    基本图形包括:矩形.圆角矩形.圆形.椭圆形.三角形.值线.弧 这些图形的绘制用到了CSS圆角属性,不考虑IE8. 下面的实现在chrome浏览器运行通过. 1.矩形 比较简单,通过CSS设置宽度.高度 ...

  3. css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

  4. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  5. 碉堡了! 纯 CSS 绘制《辛普森一家》人物头像

    这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...

  6. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  7. css绘制六边形

    CSS id选择器实现 正六边形 用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: HTML代码: <div id="box1">< ...

  8. div+css模式编写html静态网页例子_仿照网页制作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. (转)Div+CSS布局入门

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

随机推荐

  1. 基础笔记1(进制,浮点,递归,floor,round和ceil)

    1,进制默认是十进制 0开头 8进制 0x     16进制 0b     2进制 2,long 的范围是19位数字.int范围是21亿左右,short 是三万二千左右. 超过int范围的long类型 ...

  2. Unity3D笔记 英保通五 鼠标事件与GUI系统双击检测

    一.如何使用GUI事件来检测鼠标是否按下的事件: 获取当前事件:var e:Event=Event.current: using UnityEngine; using System.Collectio ...

  3. 使用不同模板引擎beetl、FreeMarker、Velocity动态解析sql的方法

    1. String sql = null;if(null == renderType || renderType.equals(ConstantRender.sql_renderType_beetl) ...

  4. postgresql----JSON类型和函数

    postgresql支持两种json数据类型:json和jsonb,而两者唯一的区别在于效率,json是对输入的完整拷贝,使用时再去解析,所以它会保留输入的空格,重复键以及顺序等.而jsonb是解析输 ...

  5. easyui datagrid columns的field支持属性的子属性(field.sonfield形式或者格式化程序形式)

    var col=$(_758).datagrid("getColumnOption",_75e);if(col){//var _75f=_75c[_75e];var _75f=un ...

  6. JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日

    标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...

  7. TOP100summit 2017:【案例分享】魅族持续交付平台建设实践

    本篇文章内容来自第10期魅族开放日魅族运维架构师林钟洪的现场分享.编辑:Cynthia 一.自动化建设历程1.1 魅族互联网发展的时间线 2003-2008年被称之为“互联网1.0时代”.2003年, ...

  8. R中使用rvest爬取数据小试

    总结R中使用 xpath 和 css selectors 获取标签内容(xpath功能强大,而CSS选择器通常语法比较简洁,运行速度更快些) 例:抓取下面标签的内容: <h3 class=&qu ...

  9. 注意:darknet安装

    参考:https://github.com/AlexeyAB/darknet # 一.安装 ## linux下安装 - 在darknet目录下执行make ## windows下安装 1. 安装vs2 ...

  10. LCA——最近公共祖先

    今天终于把倍增的LCA搞懂了!尽管周测都没写,尽管lca其实很简单,但这也是进度君的往前一点点的快乐.学渣的呻吟. 倍增的lca其实关键就在于二进制的二进制的拆分(显然是两次的拆分,很奇妙,懂二进制的 ...