前端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 ...
随机推荐
- 测试开发专题:spring-boot自定义异常返回
上文测试开发专题:spring-boot统一异常捕获我们讨论了java异常以及如何使用Spring-Boot捕获异常,但是没有去说捕获异常后该如何进一步处理,这篇文章我们将对这个遗留的问题进行讨论. ...
- scala 中 Any、AnyRef、Object、AnyVal 关系
Any,是 scala 中的抽象类,不能实例化 AnyRef 继承于 Any,它是一个 trait AnyVal 继承于 Any,它是一个抽象类,目的是消除基本类型,scala中只有引用类型,仅此作用 ...
- Java Stream 流如何进行合并操作
1. 前言 Java Stream Api 提供了很多有用的 Api 让我们很方便将集合或者多个同类型的元素转换为流进行操作.今天我们来看看如何合并 Stream 流. 2. Stream 流的合并 ...
- 1018 Public Bike Management (30分) 思路分析 + 满分代码
题目 There is a public bike service in Hangzhou City which provides great convenience to the tourists ...
- C#语言实现推箱子
话不多说直接上代码 using System; namespace Boxer { class Program { const int WIDTH = 8; const int HEIGHT = 8; ...
- spring boot构建restful服务
使用spring boot快速构建出restful服务 JPA实现REST 创建spring boot项目,在项目文件pom.xml中添加以下依赖: <dependency> <gr ...
- zsteg
以前知道zsteg,但是没有去安装使用,所以就一直没有使用. 最近在找有关lsb隐写的题,发现有些大佬的wp上面写用zsteg就解决了lsb隐写的题,自己就想,难道zsteg很方便,于是就去安装zst ...
- node的stream
stream在Unix系统中是个标准的概念. In computer programming, standard streams are preconnected input and output c ...
- wordpress另一更新正在进行
登录mysql,然后进入wordpress数据库, use wordpress select * from wp_options where option_name='core_updater.loc ...
- java 面向对象面试题，问答题，构造方法，抽象类，继承，多态，接口，异常总结；
一,构造方法的特点 面向对象的思想是如何在java展现的呢? 就是通过类和对象 类是一组相关的属性和行为的集合.是一个抽象的概念. 对象是该类事物的具体表现形式.具体存在的个体. 一.抽象类的抽象方法 ...