盒子模型
1,概述
CSS把HTML里的元素看做是一个一个的盒子.
内边距padding: 一个盒子里的现象,内容和边框的距离
外边距margin: 盒子和盒子间的距离
边框border:是指盒子可以设置边框
测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 小票</title>
<style>
/* 统一网页的风格 */
body{
width: 300px;/* 宽度 */
}
/* 加大字号 */
.a{
font-size: 30px;
}
/* 文字居中 */
.b{
/* text-align:center ; */
margin-left: 80px;/* 左 内边距 */
}
/* 设置首行缩进 */
#readme{
text-indent: 30px;
}
/* 设置图片居中 */
img{
margin-left: 20px;
}
/* 设置水平线: 宽度 虚线 红色*/
hr{
border:1px dashed red;
}
</style>
</head>
<body>
<div>顾客联</div>
<div class="a">请您留意取餐账单号</div>
<div class="b">自取顾客联</div>
<div>永和大王(北二环西路店)</div>
<div>010-62112313</div>
<div class="b">--结账单--</div>
<div class="a">账单号:P00000009</div>
<div>账单类型:食堂</div>
<div>人数:1</div>
<div>收银员:张静</div>
<div>开单时间:2018-04-17 07:24:11</div>
<div>结账时间:2018-04-17 07:24:22</div>
<hr />
<table>
<tr>
<td>数量</td>
<td>品项</td>
<td>金额</td>
</tr>
<tr>
<td>1</td>
<td>
油条豆浆套餐<br />
1X--油条<br />
1X--现磨豆浆(热/甜)
</td>
<td>7.00</td>
</tr>
</table>
<hr />
<table>
<tr>
<td width="180px">支付宝花呗一元早餐</td>
<td>-3.00</td>
</tr>
<tr>
<td>合计</td>
<td>4.00</td>
</tr>
<tr>
<td>支付宝</td>
<td>1.00</td>
</tr>
<tr>
<td>支付宝补贴</td>
<td>3.00</td>
</tr>
</table>
<hr />
打印时间:2018-04-17 07:24:22
<hr />
<div id="readme">
根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。
</div>
<div>
<img src="2.png"/>
</div>
<div>官网：www.yonghe.com.cn</div>
<div>加盟热线：86-21-60769397 或 86-21-60769002</div>
</body>
</html>
测试第二种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>永和门店系统</title>
<link rel="stylesheet" type="text/css" href="1.css"/>
<style type="text/css">
</style>
</head>
<body>
<table border="" cellspacing="0" cellpadding="0" align="c">
<tr >
<td id="p9">
<h3>顾客联</h3>
<p id="p1">请您留意取餐账单号</p>
<div class="c">自取顾客联</div>
<div id="P2">永和大王(北二环西路店)</div>
<div id="P2">010-62112313</div>
<div class="c">
--结账单--
</div>
<p id="p1">账单号：p0000009</p>
<div id="P2">
账单类型：食堂
</div>
<div id="P2">
人数：1
</div>
<div id="P2">收银员：张静</div>
<div id="P2">开单时间:2018-04-17 07:24:11</div>
<div id="P2">开单时间:2018-04-17 07:24:22</div>
<hr class="a" >
<a id="P2">数量 项目</a> <a class="b">金额</a>
<div >
<a>1</a>
<a class="e">油条豆浆套餐</a> <a id="P3">7.00</a>
</div>
<div>
<a class="d">1X--油条</a>
</div>
<div>
<a class="d">1X--现磨豆浆(热/甜)</a>
</div>
<hr class="a">
<div id="P2">
<div >
<a id="p4">支付宝花呗一元早餐</a> <a class="f">-3.00</a>
</div>
<div>
<a id="p4">合计</a> <a class="g">4.00</a>
</div>
<div>
<a id="p4">支付宝</a> <a class="h">1.00</a>
</div>
<div>
<a id="p4">支付宝补贴</a> <a class="i">3.00</a>
</div>
<hr class="a">
<div id="P2"><div>打印时间：2018-04-17 07:24:38</div></div>
<hr class="a">
<div class="note">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，<br>如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指<br>引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持<br>小票平整。</div>
<img src="OIP-C.jpg" width="250px" class="t">
<div>官网：www.yonghe.com.cn</div>
<div>加盟热线：86-21-60769397 或 86-21-60769002</div>
<div> </div>
</td>
</tr>
</table>
</body>
</html>
HTMLCSS综合案例
创建1.css文件
/* 统一网页的风格 */
body{
width: 300px;/* 宽度 */
}
/* 加大字号 */
.a{
font-size: 30px;
}
/* 文字居中 */
.b{
/* text-align:center ; */
margin-left: 80px;/* 左 内边距 */
}
/* 设置首行缩进 */
#readme{
text-indent: 30px;
}
/* 设置图片居中 */
img{
margin-left: 20px;
}
/* 设置水平线: 宽度 虚线 红色*/
hr{
border:1px dashed red;
}
改造html文件,引入css文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 小票</title>
<!-- link把外部CSS文件引入到这个网页中
rel是指文件的类型(stylesheet是固定值是样式表)
href是指定文件的位置
-->
<link rel="stylesheet" href="1.css"/>
</head>
<body>
<div>顾客联</div>
<div class="a">请您留意取餐账单号</div>
<div class="b">自取顾客联</div>
<div>永和大王(北二环西路店)</div>
<div>010-62112313</div>
<div class="b">--结账单--</div>
<div class="a">账单号:P00000009</div>
<div>账单类型:食堂</div>
<div>人数:1</div>
<div>收银员:张静</div>
<div>开单时间:2018-04-17 07:24:11</div>
<div>结账时间:2018-04-17 07:24:22</div>
<hr />
<table>
<tr>
<td>数量</td>
<td>品项</td>
<td>金额</td>
</tr>
<tr>
<td>1</td>
<td>
油条豆浆套餐<br />
1X--油条<br />
1X--现磨豆浆(热/甜)
</td>
<td>7.00</td>
</tr>
</table>
<hr />
<table>
<tr>
<td width="180px">支付宝花呗一元早餐</td>
<td>-3.00</td>
</tr>
<tr>
<td>合计</td>
<td>4.00</td>
</tr>
<tr>
<td>支付宝</td>
<td>1.00</td>
</tr>
<tr>
<td>支付宝补贴</td>
<td>3.00</td>
</tr>
</table>
<hr />
打印时间:2018-04-17 07:24:22
<hr />
<div id="readme">
根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。
</div>
<div>
<img src="2.png"/>
</div>
<div>官网：www.yonghe.com.cn</div>
<div>加盟热线：86-21-60769397 或 86-21-60769002</div>
</body>
</html>
创建2.css文件
/* 1.修饰input框 宽度高度 内边距 外边距 字号 */
.a{
width: 330px;
height: 40px;
}
/* 2.修饰提示文字 字号 颜色 缩进 */
.b{
font-size: 5px;
color: gray;
text-indent: 10px;
}
/* 3.立即注册的按钮 背景色 字的颜色 字号 边框的颜色 居中*/
button{
background-color: red;
border-color: red;
color: white;
text-align: center;
width: 330px;
height: 50px;
font-size:25px ;
}
/* 4.居中的用户注册 */
h1{
/* text-align: center; */
margin-left: 100px;
}
创建html文件,并引入2.css文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<!-- 引入外部的css文件 -->
<link rel="stylesheet" href="2.css"/>
</head>
<body>
<form>
<table>
<tr>
<td>
<h1>用户注册</h1>
</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="用户名" name="user"/>
</td>
</tr>
<tr>
<td class="b">支持中文、字母、数字、“-”、“_”的组合，4-20个字符</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="设置密码" name="pwd"/>
</td>
</tr>
<tr>
<td class="b">建议使用数字、字母和符号两种以上的组合，6-20个字符</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="确认密码" name="repwd"/>
</td>
</tr>
<tr>
<td class="b">两次密码输入不一致</td>
</tr>
<tr>
<td>
<input class="a" type="number" placeholder="验证手机" name="tel"/>
或
<a href="#">验证邮箱</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
我已阅读并同意
<a href="#">《京淘用户注册协议》</a>
</td>
</tr>
<tr>
<td>
<button type="submit">立即注册</button>
</td>
</tr>
</table>
</form>
</body>
</html>
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
