HTML
CqDemo
demo1.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</body>
</html>
运行效果:
基本标签
标签:加粗文字
标签: 控制文字大小,和颜色,字体
< hr> 标签:下划线
标签:字体倾斜
标签 :字体下划线
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p align="center">
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
<p align="right">
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
<p>
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
</body>
</html>
运行效果:
< p>段落标签 align段落对其方式
标题标签
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>标题标签H1</h1>
<p align="center">
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
<h6>标题标签H6</h6>
<p align="right">
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
<H2>标题标签h2</H2>
<p>
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
</body>
</html>
运行效果:
< h>标签 : 标题标签
图片标签< img >
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="/img/kebi.jpg" width="300px" height="80px" border="6px">
<h1>标题标签H1</h1>
<p align="center">
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
<h6>标题标签H6</h6>
<p align="right">
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
<H2>标题标签h2</H2>
<p>
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
</body>
</html>
运行效果:
< img >标签: 图片标签 border加边框
超链接标签:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="demo1.1.html">超链接</a>
<img src="/img/kebi.jpg" width="300px" height="80px" border="6px">
<h1>标题标签H1</h1>
<p align="center">
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
<h6>标题标签H6</h6>
<p align="right">
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
<H2>标题标签h2</H2>
<p>
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
</body>
</html>
运行效果:
跳转到:
超媒体链接标签
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<embed src="img/A6B1D8790BDE372EF12C49CF2D3F3E31.mp4">
<a href="demo1.1.html">超链接</a>
<img src="/img/kebi.jpg" width="300px" height="80px" border="6px">
<h1>标题标签H1</h1>
<p align="center">
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
<h6>标题标签H6</h6>
<p align="right">
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
<H2>标题标签h2</H2>
<p>
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
</body>
</html>
运行效果如下:
< embed>标签:超媒体链接标签可以导入视频 音乐类
网页音乐播放的标签
< bgsound>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<bgsound src="http://music.163.com/song/media/outer/url?id=1807799505.mp3">
唯一
</bgsound>
<embed src="img/A6B1D8790BDE372EF12C49CF2D3F3E31.mp4">
<a href="demo1.1.html">超链接</a>
<img src="/img/kebi.jpg" width="300px" height="80px" border="6px">
<h1>标题标签H1</h1>
<p align="center">
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
<h6>标题标签H6</h6>
<p align="right">
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
<H2>标题标签h2</H2>
<p>
<b>下午好</b>,今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>,今天我们开始学习HTML<br>
<u>下午好</u>,今天我们开始学习HTML<br>
</p>
</body>
</html>
运行效果:
注意:这时候一进这网页就听到了《唯一》这一首歌
< bgsound >音乐背景标签
表格
CqDemoHtml
demo2.html
简单的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="300px" height="200px" border="2px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
运行效果如下:
一行三列
属性:
cellpadding : 内容距离单元格内边距的距离 如果距离太小有一端达不到那么这个距离就会失效
cellspacing : 单元格之间的距离
align : 单元格对其的方式
剧中效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="300px" height="200px" border="2px" cellpadding="0" cellspacing="" align="center">
<tr align="center" bgcolor="#6495ed">
<td >1</td>
<td>2</td>
<td background="img/kebi.jpg">3</td>
</tr>
<tr>
<td>a</td>
<td bgcolor="#dc143c">b</td>
<td align="right">c</td>
</tr>
</table>
</body>
</html>
属性:
< tr align=“center” bgcolor=“#6495ed”> 这一行 内容居中 颜色为#6495ed
< td background=“img/kebi.jpg”>3 单元格插入背景
< td align=“right” >c 单元格内容靠右对其
< td bgcolor=“#dc143c”>b 单元格背景颜色
单元格合并问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="300px" height="200px" border="2px" cellpadding="0" cellspacing="" align="center">
<tr align="center" bgcolor="#6495ed">
<!--合并横两个单元格时候需要把它前一个或者后一个单元格删除才可以合拼-->
<td colspan="2">合并横两单元格</td>
<td background="img/kebi.jpg">3</td>
</tr>
<tr>
<!--合并同一列下的两个单元格时候需要删除它上一个或者下一个单元格即可-->
<td rowspan="2">a</td>
<td bgcolor="#dc143c">b</td>
<td align="right">c</td>
</tr>
<tr>
<td bgcolor="#dc143c">b</td>
<td align="right">c</td>
</tr>
</table>
</body>
</html>
运行效果:
注意:
属性colspan:合并横两个单元格时候需要把它前一个或者后一个单元格删除才可以合拼
属性rowspan=“2” :合并同一列下的两个单元格时候需要删除它上一个或者下一个单元格即
列表
demo2.2html
无序链表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>芒果</li>
<li>苹果</li>
<li>西瓜</li>
<li>梨子</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</body>
</html>
运行效果:
点点开头无序列表
有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>芒果</li>
<li>苹果</li>
<li>西瓜</li>
<li>梨子</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<ol >
<li>芒果</li>
<li>苹果</li>
<li>西瓜</li>
<li>梨子</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
</body>
</html>
运行效果:
1 2 3排序就是有序列表
注意:排序的变化属性
type
滚动
demo2.3.html
< marquee>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<marquee direction="down" behavior="alternate" loop="6" >
你好!欢迎来到学习不快乐天堂!!
</marquee>
</body>
</html>
运行效果:
属性:
direction : 滚动方向
behavior : 滚动方式
loop : 滚动次数
层
demo2.4.html
表单
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="demo3.1_1.html">
<input type="text" value="请输入姓名">
</br>
<input type="password" value="请输入密码">
</br>
<!--单选框 如果复选框的nema相等就说明他们是一组 如果有checked属性就说明此复选框为选中状态-->
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</br>
<!--复选框 如果有checked属性就说明此复选框为选中状态-->
爱好:
<input type="checkbox">学Python
<input type="checkbox">学Linux
<input type="checkbox">学Mysql
<input type="checkbox">学Java
</br>
<!--按钮 此按钮关联form里的action 跳转到demo3.1_1.html-->
<input type="submit" value="确定">
<input type="reset" value="还原">
<!---普通按钮-->
<input type="button" value="普通按钮">
</br>
<!--! 文本域:20行10列-->
<textarea cols="20" rows="10">请仔细阅读,下面的条款需求承诺书!</textarea>
</br>
<!--label里的东西不可以改-->
<label>姓名 :</label><input type="text"/>
</br>
<!-- 分组框 fieldset外边框 legend外边框上的文字-->
<legend>爱好</legend>
<input type="checkbox">学Python</br>
<input type="checkbox">学Linux</br>
<input type="checkbox">学Mysql</br>
<input type="checkbox">学Java</br>
</fieldset>
</form>
</body>
</html>
表单元素
1.文本框 : < input type=“text”>
2.密码框 : < input type=“password”>
3.单选框 : < input type=“radio”>
4.复选框 : < input type=“checkbox”>
5.提交框 : < input type=“submit”>
6.重置按钮 : < input type=“reset”>
7.普通按钮 : < input type=“button”>
8.文本域标签 : < textarea>
框架
横向分割网页
< frameset>
demo3.2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--纵向分割网页-->
<frameset cols="30%,*">
<frame src="demo3.2_1.html">
<frame src="demo3.2_2.html">
</frameset>
</html>
demo3.2_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="#00ffff">
</body>
</html>
demo3.2_2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="#d2691e">
</body>
</html>
运行demo3.2.html效果如下:
横向分割
< frameset rows=“”>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--横向分割网页-->
<frameset rows="30%,*">
<frame src="demo3.2_1.html">
<frame src="demo3.2_2.html">
</frameset>
</html>
运行效果如下:
横向纵向分割网页
创建demo3.2_3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--网页横向分割 上30% noresize name="right"关联demo3.2_2.html里面的超链接来替换demo3.2_1.html-->
<frameset rows="30%,*">
<frame src="demo3.2_1.html" noresize name="right">
<!--底部网页纵向分割左50% noresize固定比例不可以变动-->
<frameset cols="50%,*">
<frame src="demo3.2_2.html" noresize>
<frame src="demo1.html" noresize>
</frameset>
</frameset>
</html>
为了使用右边的页面里实现超链接跳转到顶部页面 就修改demo3.2_2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="#d2691e">
<a href="demo1.1.html" target="right">demo1.1.html</a>
<a href="demo2.2.html" target="right">demo2.2.html</a>
<a href="demo2.html" target="right">demo2.html</a>
</body>
</html>
运行效果如下:
框架标签:
< frameset cols=“50%,*”> :纵向分割左边50% 其余全给右边
rows 属性:横向分割
< frame>
内嵌框架
上面我们发现用了框架标签就没有了< body>标签
所以内切框架就是存在于< body>里的
创建demo3.3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="demo3.2_1.html" name="omg"></iframe>
<br>
<a href="demo1.1.html" target="omg">demo1.1.html</a>
<a href="demo2.2.html" target="omg">demo2.2.html</a>
<a href="demo2.html" target="omg">demo2.html</a>
</body>
</html>
运行截图如下:
内嵌框架标签:
< iframe src=“demo3.2_1.html” name=“omg”>
src属性:底下模板是demo3.2_1.html
name属性:关联到超链接a标签中的target
css的作用
美化网页
选择器
demo4.1.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*类选择器*/
.ziti{
font-size: 24px;
color: deepskyblue;
}
/*id选择器*/
#Idxuanzeqi{
font-size: 50px;
color: red;
}
/*标签选择器*/
P{
font-size: 80px;
color: darkblue;
}
/*伪类 鼠标放上去就变大括号里面的设置*/
p:hover{
font-size: 16px;
color: gold;
}
</style>
<body>
<!--使用类选择器-->
<font class="ziti">下午好!快快学习好Java</font>
</br>
<!--使用id选择器-->
<font id="Idxuanzeqi">下午好!快快学习好Java</font>
</br>
<!--使用标签选择器-->
<p>timing侠</p>
</body>
</html>
运行效果:
选择器有:
1.类选择器也就是class选择器
2.id选择器
3.伪类
背景
demo4.2,html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.background1{
background-image: url("img/kebi.jpg");/*背景图片*/
background-color: cyan;/*背景颜色*/
background-repeat: no-repeat;/*不平铺*/
background-position: 100px 100px;/*距离x y轴各100px 图片左顶点为准*/
}
</style>
</head>
<body class="background1">
科比布莱恩特!<br/>
科比布莱恩特!<br/>
科比布莱恩特!<br/>
科比布莱恩特!<br/>
科比布莱恩特!<br/>
科比布莱恩特!<br/>
科比布莱恩特!科比布莱恩特!<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
运行效果:
属性值:
background-image: url(“img/kebi.jpg”);/背景图片/
background-color: cyan;/背景颜色/
background-repeat: no-repeat;/不平铺/
background-position: 100px 100px;/距离x y轴各100px 图片左顶点为准/
边框
demo4.3.html
点线边框:
dotted 点线
虚线边框;
虚线边框属性:
dashed
demo.4.3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
input{
border: 1px dashed red;/*边框大小1px 边框直虚线 颜色红色*/
}
div{
width: 150px;
height: 60px;
border-left: 2px solid red;/*左边框线 大小2px 边框实线 红色*/
border-right: 2px solid black;
border-top: 2px dotted royalblue;
border-bottom: 2px dashed lawngreen;
}
</style>
<body>
输入框:
<input type="text">
<br/>
<div>测边框线</div>
</body>
</html>
运行效果:
文本
demo4.5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
text-align: center;/*文字对齐方式居中*/
text-decoration: underline;/*文字下有下划线 overline上划线 删除线line-through 没有线none*/
line-height: 40px;/*行和行之间的高度*/
letter-spacing: 6px;/*字和字之间的距离*/
text-indent: 80px;/*第一行向后缩进30px*/
}
</style>
</head>
<body>
<p> 我亲爱的Java你下午好不好啊<br/>
我亲爱的Java你下午好不好啊<br/>
我亲爱的Java你下午好不好啊<br/>
我亲爱的Java你下午好不好啊<br/>
我亲爱的Java你下午好不好啊<br/>
我亲爱的Java你下午好不好啊<br/>
我亲爱的Java你下午好不好啊<br/>
我亲爱的Java你下午好不好啊<br/>
我亲爱的Java你下午好不好啊<br/>
我亲爱的Java你下午好不好啊<br/>
我亲爱的Java你下午好不好啊<br/>
我亲爱的Java你下午好不好啊<br/></p>
</body>
</html>
运行图片:
text-align: center;/*文字对齐方式居中*/
text-decoration: underline;/*文字下有下划线 overline上划线 删除线line-through 没有线none*/
line-height: 40px;/*行和行之间的高度*/
letter-spacing: 6px;/*字和字之间的距离*/
text-indent: 80px;/*第一行向后缩进30px*/
字体
demo4.6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
font{
color: darkmagenta;
font-family: 仿宋;/*字体选择*/
font-size: 30px;/*字体大小*/
font-style: italic;/*倾斜*/
font-weight: bold;/*加粗*/
}
</style>
<body>
<font>
JAVA不是JAVA这是巨坑大辣鸡
</font>
</body>
</html>
运行效果:
color: darkmagenta;
font-family: 仿宋;/字体选择/
font-size: 30px;/字体大小/
font-style: italic;/倾斜/
font-weight: bold;/加粗/
列表
demo4.7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
li{
list-style-type: none; /*消除前面的小黑点*/
list-style-image: url("img/考试.png");
list-style-position: inside;
}
</style>
<body>
<ul>
编程
<li>Java</li>
<li>Linux</li>
<li>Python</li>
</ul>
</body>
</html>
运行效果如下:
高宽设置
demo4.8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
border: 6px solid red;
width: 200px;
height: 120px;
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
运行效果如下:
边距
margin 边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
border: 6px solid red;
width: 200px;
height: 120px;
margin-left: 60px; /*考左边60px*/
margin-top: 400px;/*考上边400px*/
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
运行效果如下:
间隙
padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
border: 6px solid red;
width: 200px;
height: 120px;
margin-left: 60px;
margin-top: 400px;
padding-left: 180px;
padding-top: 60px;
}
</style>
</head>
<body>
<div class="one">
Java嘞
</div>
</body>
</html>
运行效果:
布局
横向布局
demo4.9.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
border: 1px solid blue;
width: 400px;
height: 160px;
}
.tow{
border: 1px solid blue;
width: 400px;
height: 160px;
margin-top: 45px;/*上边距*/
}
.three{
border: 1px solid blue;
width: 400px;
height: 160px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="tow"></div>
<div class="three"></div>
</body>
</html>
运行效果如下:
纵向布局
demo5.1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
border: 1px solid blue;
width: 200px;
height: 160px;
float: left;
}
.tow{
border: 1px solid blue;
width: 200px;
height: 160px;
float: left;
margin-left: 20px;/*靠左盒子边距20px*/
margin-right: 40px;/*靠右边盒子40px*/
}
.three{
border: 1px solid blue;
width: 200px;
height: 160px;
float: left;
/*margin-left: 10px;!*靠右盒子边距10px*!*/
}
</style>
</head>
<body>
<div class="one"></div>
<div class="tow"></div>
<div class="three"></div>
</body>
</html>
运行效果如下:
嵌套布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one{
border: 3px solid blue;
width: 200px;
height: 160px;
padding-left: 60px;/*内边距左30px*/
padding-top: 20px;/*内边距上20px*/
}
.tow{
border: 3px solid red;
width: 100px;
height: 60px;
}
.three{
border: 3px solid black;
width: 50px;
height: 30px;
margin-left: 70px;/*右边距70px*/
margin-top: 10px;/*上边距10px*/
}
</style>
</head>
<body>
<div class="one">
<div class="tow"></div>
<div class="three"></div>
</div>
</body>
</html>
运行效果如下: