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>
DIV CSS 绘制风车的更多相关文章
- CSS绘制三角形和箭头,不用再用图片了
前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...
- div+css3绘制基本图形
基本图形包括:矩形.圆角矩形.圆形.椭圆形.三角形.值线.弧 这些图形的绘制用到了CSS圆角属性,不考虑IE8. 下面的实现在chrome浏览器运行通过. 1.矩形 比较简单,通过CSS设置宽度.高度 ...
- css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数
本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- 碉堡了! 纯 CSS 绘制《辛普森一家》人物头像
这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...
- DIV+CSS+JS基础+正则表达式
...............HTML系列.................... DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...
- css绘制六边形
CSS id选择器实现 正六边形 用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: HTML代码: <div id="box1">< ...
- div+css模式编写html静态网页例子_仿照网页制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- (转)Div+CSS布局入门
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
随机推荐
- Json.NET Deserialize时如何忽略$id等特殊属性
由于$id.$ref等是默认Json.NET的特殊属性,在反序列化时不会将其对应的值填充,例如: [DataContract] public class MyObject { [DataMember( ...
- 【题目】求n以内的素数个数
最近在leetCode上刷提,还是满锻炼人的,为以后面试打基础吧.不多说下面开始. 问题:求[2,n]之间的素数的个数. 来源:leetCode OJ 提示: Let's start with a i ...
- C++ vs Python向量运算速度评测
本文的起源来自最近一个让我非常不爽的事. 我最近在改一个开源RNN工具包currennt(http://sourceforge.net/projects/currennt/),想用它实现RNNLM功能 ...
- iOS - 使用WKWebView时OC调JS的user-select属性控制用户操作
// 页面加载完成之后调用 - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigatio ...
- openstack 部署(Q版)-----环境准备篇
一.环境准备 系统:centos7 cinder01 内网:192.168.10.51 外网:172.16.1.51 compute01 内网:192.168.10.52 外网:172.16.1. ...
- 存储opline的内存地址可以实时跟踪opcode的执行
static intphp_handler(request_rec *r) { /* Initiliaze the context */ php_struct * volatile ctx; void ...
- 伪随机数生成算法-梅森旋转(Mersenne Twister/MT)
今天主要是来研究梅森旋转算法,它是用来产生伪随机数的,实际上产生伪随机数的方法有很多种,比如线性同余法, 平方取中法等等.但是这些方法产生的随机数质量往往不是很高,而今天介绍的梅森旋转算法可以产生高质 ...
- Java-06-动手动脑
1.为什么子类的构造方法在运行之前,必须调用父类的构造方法?能不能反过来?为什么不能反过来? 因为子类继承于父类,子类中有父类的对象,父类的构造方法初始化后,子类才能运行自己的构造方法 不能放过来,继 ...
- Linux监控远程端口是否开启脚本
#!/bin/bash #author Liuyueming #date 2017-07-29 #定时检测邦联收单及预付卡系统 pos_num=`nmap 远程IP地址 -p 端口号|sed -n & ...
- 在排序模型方面,点评搜索也经历了业界比较普遍的迭代过程:从早期的线性模型LR,到引入自动二阶交叉特征的FM和FFM,到非线性树模型GBDT和GBDT+LR,到最近全面迁移至大规模深度学习排序模型。
https://mp.weixin.qq.com/s/wjgoH6-eJQDL1KUQD3aQUQ 大众点评搜索基于知识图谱的深度学习排序实践 原创: 非易 祝升 仲远 美团技术团队 前天