DIV CSS 绘制风车

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

时间: 2024-10-08 09:04:02

DIV CSS 绘制风车的相关文章

(转)Div+CSS布局入门

在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图. 下面,我们需要根据构思图来规划一下页面的布局

纯CSS绘制三角形

使用CSS绘制三角形 正三角形的绘制: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正三角形</title> 6 <style type="text/css"> 7 #triangle-up { 8 width: 0; 9 height: 0; 10

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

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="citizens.css"> 7 </head&

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

本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录的问题吧.一,css画特殊图形. 在网页中,需要一些特殊图形时.比如半圆形,三角形等,我们一般是让ui切图,但是实际上,利用css的边框 (border)属性,我们可以绘制一些有规律的图形. 盒模型中元素有四个角,那么每个角就存在一个弧度的属性. 先看代码: 1 .half_circle{ 2 wi

div+css3绘制基本图形

基本图形包括:矩形.圆角矩形.圆形.椭圆形.三角形.值线.弧 这些图形的绘制用到了CSS圆角属性,不考虑IE8. 下面的实现在chrome浏览器运行通过. 1.矩形 比较简单,通过CSS设置宽度.高度.背景色即可. html: <div class="rectangle"></div> css: .rectangle { width: 150px; height: 100px; background-color: orangered; } 呈现: 2.圆角矩形

css绘制三角形

今天看到人家用css画了一个三角形,简简单单几行代码,惊讶css其实还有很多我们不知道的东西. 三角形其实还是可以用在很多地方的.其实就那么几行代码直接贴上: div.arrow-up {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-bottom: 50px solid #2f2f2f;     

css绘制三角形原理

1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .caret{ height:0;/*将宽高都设置为0*/ width:0; border:1

css绘制六边形

CSS id选择器实现 正六边形 用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: HTML代码: 1 <div id="box1"></div> 2 <div id="box2"></div> 3 <div id="box3"></div> CSS代码: #box1{width:0;border-left: 52px solid transp

使用css绘制六边形

用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: 接下来,就是代码了: CSS: <style>    #box1{width:0;border-left: 52px solid transparent;border-right: 52px solid transparent;border-bottom: 30px solid #6c6;    }    #box2{width: 104px;height: 60px;background-color: #6c6