前端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 ...
随机推荐
- Coursera课程笔记----P4E.Capstone----Week 4&5
Spidering and Modeling Email Data(week4&5) Mailing List - Gmane Crawl the archive of a mailing l ...
- python pip下载设置
安装命名为 pip install -i 网址 所需要安装的库名例如:pip install -i https://pypi.tuna.tsinghua.edu.cn/simple requests ...
- php_rce
0x01 PHP_RCE RCE(remote command/code execute):远程命令/代码执行 此题为ThinkPHP V5远程代码执行漏洞 0x02 命令执行 http://124. ...
- 1.Spring 框架概述
目录 Spring 框架概述 1 我们所说的 "Spring "是什么意思 2. Spring和Spring框架的历史 3. 设计理念 4.反馈和贡献 5.开始使用 Spring ...
- git命令之切换分支
Git一般有很多分支,我们clone到本地的一般都是master分支,如何进行分支的切换呢?那么下面带大家简单的看看如何通过命令来切换: 1.查看远程仓库及本地的所有分支 命令:git branch ...
- 学习Echarts：（一）静态图表
Echarts是现在比较火的js图表库,官网有丰富的实例和友好的入门教程.但是图表的种类很多,配置项的参数也很多,一开始我根据图表类型翻看配置项,发现这样学效率太低了,决定先制定一个简单的学习步骤,按 ...
- 【比较】遗传算法GA和遗传编程GP有什么不同？
遗传算法GA 本质上有一个固定的长度,这意味着所产生的功能有限的复杂性 通常会产生无效状态,因此需要以非破坏性方式处理这些状态 通常依赖于运算符优先级(例如,在我们的例子中,乘法发生在减法之前),这可 ...
- Kali Linux 2020.1安装以及安装后要做的事
Kali Linux是基于Debian的Linux发行版,预装了许多渗透测试软件,让大家从各种繁琐的软件安装中解脱出来,专注于测试本身. 本文章介绍了如何安装目前最新的2020.1版本,以及安装好后补 ...
- canvas遇到的一些问题
1.移动端无法全屏问题 问题描述:由于canvas的width和height只能设置px值,不支持rem单位,所以想在移动设备屏幕分辨率繁杂的情况下达到canvas铺满全屏的效果很困难. 解决方法:通 ...
- 201771010128王玉兰《面向对象与程序设计（Java）》第十七周学习总结
第一部分:理论基础 线程的同步 多线程并发运行不确定性问题解决方案:引入线 程同步机制,使得另一线程要使用该方法,就只 能等待. 在Java中解决多线程同步问题的方法有两种: - Java SE 5. ...