前端HTML div标签的用法 盒子模型
盒子模型
边框 border …外边距 margin…
内容与边框距离padding【会撑大div边框】…
宽width…高height。
div的奇特玩法
1.把div弄成圆形
【css设置border-radius: ?px;】
例子：<div class="circle" id="c1"></div>
css：
.circle{ width: 100px; height: 100px; border-radius: 50px; background: black； }
2.div画三角形
【1.设置宽高为0，设置边框大小与颜色，要三边透明色transparent】；
例如：<div id="top" class="trdiv"></div>
css：.trdiv{ width: 0px; height: 0px; margin: 0 auto; } #top{ border-bottom: 50px green solid; border-left: 50px transparent solid; border-right: 50px transparent solid; }
3.用1，2方法画画。【门窗可用表格实现更简单】
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#top{
width: 0px;
height: 0px;
border-bottom:160px brown solid;
border-left: 300px transparent solid;
border-right: 300px transparent solid;
float: left;
}
#moon{
width: 60px;
height: 60px;
border-radius: 30px;
float: left;
margin-left: 1360px;
background: darkblue;
}
#moon2{
width: 80px;
height: 80px;
border-radius: 40px;
/*float: left;*/
margin-left: 1340px;
background: yellow;
}
#rom{
width: 400px;
height: 300px;
background: darkgrey;
margin-left: 100px;
margin-top: 50px;
padding-top: 25px;
}
#yc1{
width: 50px;
height: 15px;
background: gray;
margin-left: 355px;
border: 1px solid black;
}
#yc2{
width: 40px;
height: 80px;
background: gray;
margin-left:360px;
}
#window{
width: 100px;
height: 100px;
border: 2px solid white;
margin-left: 30px;
float: left;
margin-top: 50px;
}
#window td{
border: 5px solid white;
background: aqua;
}
#door{
width: 100px;
height: 200px;
border: 5px solid white;
float: left;
margin-top: 100px;
margin-left: 100px;
}
#door td{
border: 5px solid white;
background: aqua;
}
.trdiv{
width: 0px;
height: 0px;
margin: 0 auto;
}
#treetop{
border-bottom: 80px green solid;
border-left: 50px transparent solid;
border-right: 50px transparent solid;
}
#mid{
border-bottom: 120px green solid;
border-left: 100px transparent solid;
border-right: 100px transparent solid;
}
#btm{
border-bottom:250px green solid;
border-left: 200px transparent solid;
border-right: 200px transparent solid;
}
#shugan{
width: 50px;
height: 200px;
background: brown;
}
#house{
margin-top: 178px;
margin-left: 200px;
}
#tree,#house{
float: left;
}
#tree{
margin-top: 0px;
}
#hr1{
clear: both;
}
.road{
width: 100px;
height: 100px;
border: 20px dashed white;
float: left;
background: #5d5d5d;
}
</style>
</head>
<body bgcolor="#00008b">
<div id="moon"></div>
<div id="moon2"></div>
<div id="house">
<div id="top"></div>
<div id="yc1"></div>
<div id="yc2"></div>
<div id="rom">
<table id="window">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table id="door">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
<div id="tree">
<div id="treetop" class="trdiv"></div>
<div id="mid" class="trdiv"></div>
<div id="btm" class="trdiv"></div>
<div id="shugan" class="trdiv"></div>
</div>
<hr id="hr1"/>
<div class="road"></div>
<div class="road"></div>
<div class="road"></div>
<div class="road"></div>
<div class="road"></div>
<div class="road"></div>
<div class="road"></div>
<div class="road"></div>
<div class="road"></div>
<div class="road"></div>
</body>
</html>
前端HTML div标签的用法 盒子模型的更多相关文章
- DIV+CSS两种盒子模型（W3C盒子与IE盒子）
在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...
- 前端（十六）—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- DIV+CSS两种盒子模型
盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 从上图可以看到标准 W3C 盒子模型的范围包括 margin.bord ...
- 前端-----margin用法(盒子模型里补充)
margin塌陷问题 当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div ...
- HTML之前端操作div标签布局
事例图片: div元素是用于分组HTML元素的块级元素 上图代码示例如下: <!DOCTYPE html> <html lang="en"> <hea ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- CSS复合选择器和div盒子模型
一.复合选择器(3种) 1.交集复合选择器 特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class=&qu ...
- js中的盒子模型
说到盒子模型,你第一时间会想到css盒子模型,css中的盒子模型包括(内容区+内边距+边框).那在js中怎么去获取这些属性值呢?下面一起来学习js中的盒子模型. css样式 body { margin ...
随机推荐
- 单口RAM、双口RAM、FIFO
单口与双口的区别在于,单口只有一组数据线与地址线,因此读写不能同时进行.而双口有两组数据线与地址线,读写可同时进行.FIFO读写可同时进行,可以看作是双口. 双口RAM分伪双口RAM(Xilin ...
- DP之石子堆合并问题
相邻 环形 总结 (1)相邻:在一个圆形操场的四周摆放着n堆石子(n<= 100),现要将石子有次序地合并成一堆.规定每次只能选取相邻的两堆合并成新的一堆,并将新的一堆的石子数,记为该次合并的得 ...
- [ACdream 1212 New Year Bonus Grant]贪心
题意:员工之间形成一棵树,上级可以给下级发奖金,任何一个人最多可以给一个下级发,并且发了奖金后就不能接受奖金.求总共最多可以产生多少的奖金流动 思路:每次选择没有下级并且有上级的员工a,令它的上级为b ...
- [acdream_oj1732]求1到n的最小公倍数(n<=1e8)
题意:如标题 思路:如果n在10^6以内则可以用o(nlogn)的暴力,题目给定的是n<=1e8,暴力显然是不行的,考虑到1到n的最小公倍数可以写成2^p1*3^p2*5^p3*...这种素数的 ...
- 《C程序设计语言》 练习2-8
问题描述 练习 2-8 编写一个函数rightrot(x, n),该函数返回将x循环右移(即从最右端移出的位将从最左端移入)n(二进制)位后所得到的值. Write a function rightr ...
- python --分隔符split（）
描述: python split()是通过指定分隔符对字符串进行切片,且可以指定分隔n+1个字符串. 语法: str.split(str="",num=string.count(s ...
- zabbix email报警
把email 报警整了一遍 . 1 ,先把mail 系统整好. 我用的是sendmail yum install -y sendmail sendmail-cf vim /etc/mail/local ...
- .net core kafka 入门实例 一篇看懂
kafka 相信都有听说过,不管有没有用过,在江湖上可以说是大名鼎鼎,就像天龙八部里的乔峰.国际惯例,先介绍生平事迹 简介 Kafka 是由 Apache软件基金会 开发的一个开源流处理平台, ...
- Python格式化字符串（格式化输出）
熟悉C语言 printf() 函数的读者能够轻而易举学会 Python print() 函数,它们是非常类似的. print() 函数使用以%开头的转换说明符对各种类型的数据进行格式化输出,具体请看下 ...
- HTTP请求格式
HTTP请求格式 URL包含:/index/index2?a=1&b=2:路径和参数都在这里. 请求头部: · content-length表示请求体里面的数据长度: · ...