目录
1.网络传输三大基石
前端（浏览器）：URL、HTML
前后端传输：HTTP协议
2.开发工具hbuilder
https://www.dcloud.io/hbuilderx.html
3.HTML
3.1 head 页面配置信息
<!DOCTYPE html>
<html>
<!--head存放页面配置信息
<title> <meta> <link> <style> <script> <base>-->
<head>
<title>页面标题</title>
<!--标题前面的图片-->
<link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon32.ico" type="image/x-icon" />
<!--设置页面编码，防止乱码-->
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<!--3s后，自动跳转页面-->
<!--meta http-equiv="refresh" content="3;https://www.baidu.com"/-->
<meta name = "author" content="haha;123@qq.com" />
<!--设置页面搜索的关键字、描述，做推广的人用这个？？-->
<meta name = "keywords" content="学习;赚钱;自由"/>
<meta name = "description" content="这里详细的方法，教你，走上人生巅峰">
</head>
<!--body页面展示信息-->
<body>
this is html
</body>
</html>
3.2 body 页面展示信息
1.文本标签
<!DOCTYPE html>
<html>
<head>
</head>
<!--body页面展示信息-->
<body>
<!--文本标签-->
<!--标题标签 h1-h6系列，默认换行-->
<h1>这是h1</h1>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
<!--横线标签 width 宽度,align 位置-->
<hr/>
<hr width="300px" align="center"/>
<hr width="30%" />
<!--段落标签,行内效果需要用 实体字符 -->
<p>  近日，黑莓公司设计的一款实时操作系统被爆存在重大的网络安全漏洞问题，可能会导致使用该软件的汽车和医疗设备面临风险，让高度机密的系统暴露在黑客面前。但是黑莓公司却隐瞒这一消息长达数月之久。据资料显示，全球范围内共有1.95亿辆汽车使用了该系统，包括大众、宝马和福特等汽车制造商，以及国内小鹏汽车p7系列也使用了该系统，因此这次安全漏洞的曝光，将会对很多车主造成影响。
本周二，黑莓公开承认QNX 系统包含BadAlloc 漏洞，该漏洞可以让黑客瘫痪相关设备。而同样受到 BadAlloc 漏洞影响的公司在几个月前就向用户发布了公告，比如，微软安全研究人员在 4 月份宣布，他们在多家公司的操作系统和软件中发现了该漏洞。</p>
<!--加粗、倾斜、下划线、删除线-->
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<del>删除线</del>
<i><b><u>加粗、倾斜、下划线</u></b></i>
<!--预编译标签，在页面显示原样效果-->
<pre>
pubic static void main(String[] args){
System.out.println("Hello,Html");
}
</pre>
<!--换行<br>-->
近日，黑莓公司设计的一款实时操作系统被爆存在重大的网络安全漏洞问题<br \>可能会导致使用该软件的汽车和医疗设备面临风险
<!--字体标签-->
<font color="aqua" size="20" face="字体">黑莓公司</font>
</body>
</html>
2.多媒体标签（音视频）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--图片-->
<!--src：引入图片位置，可以是本地，也可以是网络
width：图片宽度，height：图片高度。一般只设置宽度，图片自动调整高度。如果两个都设置，可能会导致变形
title：鼠标悬浮到图片上的提示语。如果没有alt标签，当图片加载失败是会显示title
alt：图片加载失败是显示-->
<img src="img/本地.png" width="300px" title="这是一个截图" alt="图片加载失败"/>
<!--音、视频-->
<embed src="https://images-assets.nasa.gov/video/iss065m262321329_SpaceCast_Weekly/iss065m262321329_SpaceCast_Weekly~small.mp4" width="500px" height="500px"></embed>
<!--爱奇艺分享视频，自带html语言，但是再Google浏览器中不支持flash播放-->
<embed src="//player.video.iqiyi.com/a8b0c3aeadd92f10476497c9d3704c78/0/0/v_eri17zzoa4.swf-albumId=1450015041393600-tvId=1450015041393600-isPurchase=0-cnId=undefined" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</body>
</html>
3.超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--href：目标地址-->
<a href="https://www.baidu.com/" target="_self">这是个超链接,在当前页面覆盖打开</a>
<a href="https://www.baidu.com/" target="_blank">这是个超链接，在新界面打开</a>
<a href="https://www.baidu.com/" target="_blank"><img src="img/本地.png"/></a> <!--点击图片，连接到百度-->
<!--设置锚点：当页面很长时，在同一个页面的不同位置设置-->
<a name="手机"/> <!--设置锚点-->
<h1>手机</h1>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<p>华为手机</p>
<a name="笔记本"/>
<h1>笔记本</h1>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<p>华硕笔记本</p>
<a name="化妆品"/>
<h1>化妆品</h1>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<p>眼影</p>
<a name="衣服"/>
<h1>衣服</h1>
<p>连衣裙</p>
<p>连衣裙</p>
<p>连衣裙</p>
<p>连衣裙</p>
<p>连衣裙</p>
<p>连衣裙</p>
<p>连衣裙</p>
<p>连衣裙</p>
<p>连衣裙</p>
<p>连衣裙</p>
<p>连衣裙</p>
<p>连衣裙</p>
<p>连衣裙</p>
<p>连衣裙</p>
<a href="#手机">手机</a> <!--跳转到锚点-->
<a href="#笔记本">笔记本</a>
<a href="#化妆品">化妆品</a>
<a href="#衣服">衣服</a>
<a href="duomeiti.html">跳转到其他页面</a>
</body>
</html>
4.列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--无序列表
1.type：设置列表前图标的样式 type="circle"
2.使用css,可以自定义样式：style= "list-style: url();"-->
<h1>无序列表</h1>
<ul style="list-style: url(https://g.csdnimg.cn/static/logo/favicon32.ico);">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<!--ol有序列表，设置类型type,设置起始值start-->
<h1>有序列表</h1>
<ol type="1" start="6">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
</body>
</html>
4.表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--表格table ,表头(居中、加粗) th,行 tr ,单元格 td-->
<!--border：设置边框大小。cellspacing:单元格与边框之间的空隙 -->
<table border="1px" cellspacing="0px" width="100px" height="100px" bgcolor="aquamarine" > <!--background="img/本地.png"-->
<tr>
<th>A</th>
<th>B</th>
<th rowspan="2">C</th> <!-列合并，只保留一个单元格，并且rowspan设置几个单元格合并-->
</tr>
<tr>
<td align="center">2.1</td> <!--align设置位置-->
<td>2.2</td>
</tr>
<tr>
<td colspan="3">3.1</td> <!--行合并-->
</tr>
</table>
</body>
</html>
5.内嵌框架：网页中嵌入网页
neiqianwangye.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>我喜欢的图书列表</h1>
<ul><!--无序-->
<li>
<a href="https://img30.360buyimg.com/vc/jfs/t1/115650/38/2104/1293315/5e9eb61aE4c07376b/0dd9aef8222795b8.jpg" target="book_img">荒野求生</a><!--在内嵌页面中展示图片-->
</li>
<li>
<a href="http://img10.360buyimg.com/bookdetail/jfs/t1/177326/12/3426/379531/609a138bE381ed86a/12367993816a2906.jpg" target="book_img">猫头鹰王国</a>
</li>
</ul>
</body>
</html>
启动页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe src="neiqianwangye.html" width="500px" height="700px"></iframe>
<iframe name="book_img" width="500px" height="700px"></iframe>
</body>
</html>
6.邮箱登录
登录页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
用户名：<input type="text" /><br />
密码： <input type="password" /><br />
<a href="首页.html">登录</a>
</body>
</html>
首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe name="top" width="100%" height="100px" src="邮箱顶部页面.html" ></iframe>
<iframe name="left" width="20%" height="500px" src="邮箱左侧界面.html" ></iframe>
<iframe name="right" width="79%" height="500px" ></iframe>
</body>
</html>
邮箱顶部页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>欢迎<font color="aqua">木木</font>来到邮箱</h1>
</body>
</html>
邮箱左侧界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>
<a href="img/1.jpg" target="right" >写信</a>
</li>
<li>
<a href="img/2.jpg" target="right" >收信</a>
</li>
<li>
<a href="img/3.jpg" target="right" >草稿箱</a>
</li>
</ul>
</body>
</html>
7.页面框架：将页面分割，展示不同的信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!--框架集合与body是并列的，不要将框架集合放到body中-->
<frameset rows="20%,*,40%"><!--框架中分三行，每行占百分比-->
<frame src="img/2.jpg"/>
<frameset cols="30%,40%,*">
<frame src="img/1.jpg"/>
<frame />
<frame />
</frameset>
<frame src="img/3.jpg" />
</frameset>
</html>
8.form表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--http://127.0.0.1:8848/EmailProject/aaa?username=admin&pwd=111
? 之前是提交资源的目标地址
? 之后提交的具体数据(当method="get"时)
http：传输协议
127.0.0.1:8848 ：服务器的ip和端口
EmailProject/aaa：项目名称
-->
<!--表单元素
1.input标签
（1）name属性：必填项。提交数据是键——值对的形式 name-value。如果不写name属性，则不提交。
（2）type属性：文本框类型，text:输入文本，submit：提交。
(3)placeholder属性：提示语
-->
<form action="aaa" method="get">
用户名：<input type="text" name="username" placeholder="请输入用户名"/><br />
密码：<input type="password" name="pwd" /><br />
<input type="text" name="a" value="1" disabled="disabled" /><!--置灰显示，不可修改，不能提交数据-->
<input type="text" name="a" value="1" readonly="readonly" /> <!--只读，不可修改，可以提交数据-->
<!--单选框radio，
name属性，name值相同，在同一个分组中，只能单选。
value属性，每个单选项一个值
checked属性，默认选中的值-->
<input type="radio" name="性别" value="1"/>男
<input type="radio" name="性别" value="0" checked="checked"/>女
<!--多选按钮checkbox-->
<input type="checkbox" name="语言" value="java" checked="checked" />java
<input type="checkbox" name="语言" value="python" checked="checked"/>python
<input type="checkbox" name="语言" value="c"/>c
<!--文件-->
<input type="file" />
<!--隐藏项，提交时-->
<input type="hidden" name="a" value="1" />
<!--普通按钮，可以点击。与js事件一起使用。-->
<input type="button" value="按钮"/>
<!--重置按钮-->
<input type="reset" /><br />
<!--下拉列表，
默认单选，加入multiple属性，多选。
selected：默认选中值-->
你喜欢的城市
<select name="城市" multiple="multiple">
<option value="0" >哈尔滨</option>
<option value="1" selected="selected">北京</option>
<option value="2">上海</option>
</select>
<!--多行文本框-->
<textarea></textarea>
<!--label光标定位，当点击用户名时，光标定位到输入框中。
input中id,与label中for关联-->
<label for="u">用户名</label> <input type="text" name="u1" id="u" />
<!--email格式校验-->
<input type="email" name="email" />
<!--url格式校验-->
<input type="url" />
<!--整数格式校验,下拉选择，控制最大、最小值，步幅-->
<input type="number" name="num" min="1" max="10" step="2"/>
<!--range数值范围，滚轮效果-->
<input type="range" name="num2" min="1" max="10" step="2" />
<!--颜色-->
<input type="color" />
<!--date-->
<input type="date" />
<input type="month" />
<input type="week" />
<!--自动定位光标、必填项-->
<input type="text" autofocus="autofocus" />
<input type="text" required="required" />
<!--提交-->
<input type="submit" />
</form>
</body>
</html>
模拟百度搜索
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
</head>
<body>
<form action="https://www.baidu.com/s" method="get">
<input type="text" name="wd" />
<input type="submit" value="百度一下" />
</form>
</body>
</html>
4.CSS
4.1css三种书写方式
【第一种】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 style="color: aqua;font-family: "arial narrow";">style属性设置css样式</h1>
</body>
</html>
【第二种】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
color: beige;
font-family: "bodoni mt";
}
</style>
</head>
<body>
<h1>style标签，定位到h1设置样式</h1>
</body>
</html>
【第三种：引入外部css资源】
h1{
color: red;
font-family: "arial narrow";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入外部css资源：link-->
<link rel="stylesheet" type="text/css" href="./css/mycss.css"/>
</head>
<body>
<h1>在head中使用link,引入外部css资源</h1>
</body>
</html>
4.2基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">/* 基本选择器优先级：id选择器 > class选择器 > 元素选择器 */
/* 【1】元素选择：通过元素的名字进行定位，获取页面上的所有这个元素 */
h1{
color: blueviolet;
}
/* 【2】类选择器 */
.mycls{
color: darkgoldenrod;
}
/* 【3】id选择器 */
#myid{
color: coral;
}
div{
border: 0.0625rem #FF0000 solid;
}
span{
border: 0.0625rem forestgreen solid;
}
</style>
</head>
<body>
<h1>标签1</h1>
<h1>标签2</h1>
<h2 class="mycls">标签3</h2>
<h2 id="myid">标签4</h2>
<div>这是div,块级元素，一个div占一整行多，有换行作用</div>
<span>这是span,元素多大占位多大</span>
</body>
</html>
4.3关系选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 【1】后代选择器：只要是这个元素的后代，样式都会发生变化 */
div h1{
color: red;
}
【2】子代选择器：只有直接子代，样式发生变化。（孙子代的不会发生变化）
div>h1{
color: green;
}
</style>
</head>
<body>
<div>
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<span>
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
</span>
</div>
</body>
</html>
4.4属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 属性选择器 */
input[type="text"]{
color: red;
}
/* 通过多个属性定位到一个元素，两个中括号之间不能有空格 */
input[type="text"][value="user1"]{
background-color: green;
}
</style>
</head>
<body>
<form>
用户名：<input type="text" value="user" />
用户名：<input type="text" value="user1" />
密码：<input type="password" value="123" />
<input type="submit" value="登录" />
</form>
</body>
</html>
4.5伪类选择器
向某类选择器，添加效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 鼠标悬浮时候，颜色改变 */
h1:hover{
color: red;
}
</style>
</head>
<body>
<h1>标题1</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 如果设置的没有效果，清除下缓存再看效果 */
/* 静止状态 */
a:link{
color: yellow;
}
/* 鼠标悬浮状态 */
a:hover{
color: red;
}
/* 触发状态 */
a:active{
color: green;
}
/* 设置完成状态 */
a:visited{
color: aqua;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">超链接</a>
</body>
</html>
4.6浮动
文字环绕图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
float: left;/* 文字环绕图片 */
}
</style>
</head>
<body>
<img src="img/1.jpg" />
我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，
我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，
我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，
我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，我是一个小可爱，
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 消除被影响元素的浮动效果
(1)父节点加入overflow: hidden;
(2)父节点加入height: 500px;
(3)被影响的节点加入clear: both;-->
<div style="background-color: pink;clear: both;"><!-- 给浮动的父节点加入overflow: hidden;或者加入高度，消除浮动 -->
<div style="width: 100px;height: 100px;background-color: #008000;float: left;">111</div>
<div style="width: 200px;height: 200px;background-color: #FFFF00;float: left;">222</div>
<div style="width: 300px;height: 300px;background-color: #FF7F50;float: left;">333</div>
</div>
<div style="width: 500px;height: 500px;background-color: #8A2BE2;clear: both;">
</div>
</body>
</html>
4.7静态定位static position
默认效果，元素出现在默认位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/1.jpg" style="position: static;" >
</body>
</html>
4.8相对定位absolute position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width: 500px;height: 500px;background-color: #00FFFF;">
<div style="width: 100px;height: 100px;background-color: #0000FF;"></div>
<div style="width: 100px;height: 100px;background-color: #8A2BE2;position: relative;bottom: 10px;left: 10px;"></div><!-- 相对元素原来位置定位，原先底部上移10px, 原来左侧右移10px。保留原先位置占位。-->
<div style="width: 100px;height: 100px;background-color: #FFFF00;"></div>
</div>
</body>
</html>
4.9绝对定位relative position
绝对定位，逐层向父级节点查看，是否存在定位，如果找到定位就以此为定位，如果没有定位就以最外层为定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#outer{
width: 500px;
height: 500px;
background-color: #0000FF;
margin-left: 300px;/* 整体左移300px */
}
#div1{
width: 100px;
height: 100px;
background-color: #FF0000;
position: absolute;/* 绝对定位，相对于最外层body的。距离左侧30px,顶部30px。并释放原位置。 */
left: 30px;
top: 30px;
}
#div2{
width: 100px;
height: 100px;
background-color: #228B22;
}
</style>
</head>
<body>
<div id="outer">
<div id="div1">111</div>
<div id="div2">222</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#outer{
width: 500px;
height: 500px;
background-color: #0000FF;
margin-left: 300px;/* 整体左移300px */
position: relative;
}
#div1{
width: 100px;
height: 100px;
background-color: #FF0000;
position: absolute;/* 绝对定位，由于父级节点是相对定位，此时在父级节点上绝对定位 */
left: 30px;
top: 30px;
}
#div2{
width: 100px;
height: 100px;
background-color: #228B22;
}
</style>
</head>
<body>
<div id="outer">
<div id="div1">111</div>
<div id="div2">222</div>
</div>
</body>
</html>
4.10固定定位fixed position
浏览器比较长、宽，在左右、上下滚动时，固定不动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#mydiv{
width: 50px;
height: 500px;
background-color: #FF7F50;
/* 固定定位，距离浏览器顶部10px,右侧0px ,当拉动滚动条时，位置不变*/
position: fixed;
top: 10px;
right: 0px;
}
</style>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
4.11盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 将所有元素的，外边距、边框、内边距全部设置为0 */
*{
margin: 0px;
border: 0px;
padding: 0px;
}
#outer{
width: 500px;
height: 450px;
background-color: #0000FF;
margin-left: 100px;/* 设置外边框100px\100px */
margin-top: 100px;
padding-top: 50px;/* 设置内边距 ，移动div1位置。这时候为了避免整体盒子高度变化，需要将heigh减少50px*/
padding-left: 50px;
}
#div1{
width: 75px;
height: 75px;
background-color: #FF0000;
padding-top: 25px;/* 设置内边框，使文字居中*/
padding-left: 25px;
}
</style>
</head>
<body>
<div id="outer">
<div id="div1">111</div>
</div>
</body>
</html>
3707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
