一,css的盒子模型
–1,概述
margin:外边距,盒子和盒子之间的距离
–margin:10px 上下左右都是10
–margin-left:10px 左是10
–margin-right:10px 右是10
–margin-top:10px 上是10
–margin-bottom:10px 下是10
border:盒子的边框 – border:2px solid red
padding:内边距,盒子里的内容和盒子边框的距离
–padding:10px 上下左右都是10
–padding-top:10px 上是10
–padding-bottom:10px 下是10
–padding-left:10px 左是10
–padding-right:10px 右是10
width/height:盒子里的内容的宽度和高度
–2,练习1
顾客联
请您留意取餐账单号
自取顾客联
永和大王（北三环西路店）
010-62112313
–结账单–
账单号：P000009
账单类型：食堂
人数：1
收银员：张静
开单时间：2018-04-17 07:24:11
结账时间：2018-04-17 07:24:22
<hr />
<table>
<tr>
<td>数量</td>
<td width="105px">品项</td>
<td>金额</td>
</tr>
<tr>
<td>1</td>
<td>
油条豆浆套餐<br />
1 X --非矾油条<br />
1 X --现磨豆浆
</td>
<td>7.0</td>
</tr>
</table>
<hr />
<table>
<tr>
<td>支付宝花呗一元早餐 1</td>
<td>-3.0</td>
</tr>
<tr>
<td>合计</td>
<td>4.0</td>
</tr> <tr>
<td>支付宝</td>
<td>1.0</td>
</tr>
<tr>
<td>支付宝补贴</td>
<td>3.0</td>
</tr>
</table>
<hr />
<div class="note">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
</body>
</html>
--3,改造
--将html代码和css代码分离,方便后期的代码维护,提高css代码的复用性
--创建1.css文件
/* 统一风格 */
body{/* 标签名选择器 */
font-size: 10px;/* 统一字号 */
width: 300px;/* 宽度 */
}
.hello{/* 选中网页中,所有class=hello的元素,给指定元素字号加大 */
font-size: 20px; /* 覆盖了body的设置*/
margin-top: 10px;/* 上边距,设置盒子间的外边距 */
}
/* 选中网页中,所有id=hi的元素,设置居中效果 */
#hi{
/* text-align: center; 文字居中 */
padding-left: 66px;/* 设置内边距 */
}
/* 设置文字首行缩进,上边距 */
.note{
text-indent: 20px;/* 首行缩进 */
padding-top: 20px;/* 上边距,内边距,内容和边框的距离 */
}
--改造html文件,将css文件引入到html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>永和大王小票</title>
<!-- link引入外部的css文件,好处是:分离HTML代码和css代码
rel属性用来指定要引入进来的 文件的类型
href属性用来指定 文件的位置(相对路径)
-->
<link rel="stylesheet" href="1.css" />
</head>
<body>
<!-- 自带换行的效果 div p br -->
<div>顾客联</div>
<div class="hello">请您留意取餐账单号</div>
<div id="hi">自取顾客联</div>
<div>永和大王（北三环西路店）</div>
<div>010-62112313</div>
<div id="hi">--结账单--</div>
<div class="hello">账单号：P000009</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 width="105px">品项</td>
<td>金额</td>
</tr>
<tr>
<td>1</td>
<td>
油条豆浆套餐<br />
1 X --非矾油条<br />
1 X --现磨豆浆
</td>
<td>7.0</td>
</tr>
</table>
<hr />
<table>
<tr>
<td>支付宝花呗一元早餐 1</td>
<td>-3.0</td>
</tr>
<tr>
<td>合计</td>
<td>4.0</td>
</tr> <tr>
<td>支付宝</td>
<td>1.0</td>
</tr>
<tr>
<td>支付宝补贴</td>
<td>3.0</td>
</tr>
</table>
<hr />
<div class="note">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
</body>
</html>
--4,练习2
--创建html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<!-- 在HTML中,引入外部的css文件 rel指定文件类型 href指定文件路径-->
<link rel="stylesheet" href="zhuce.css"/>
</head>
<body>
<!-- 用户注册的数据需要提交给服务器入库,所以需要form -->
<form method="get" action="#"> <!-- 指定提交数据的方式-->
<table>
<h2 style="padding-left: 130px;font-size:30px;">用户注册</h2>
<tr>
<td>
<input type="text" placeholder="用户名" class="a"/>
</td>
</tr>
<tr>
<td class="xiao">
支持中文、字母、数字、“-”、“_”的组合，4-20个字符
</td>
</tr>
<tr>
<td>
<input type="password" placeholder="设置密码" class="a" />
</td>
</tr>
<tr>
<td class="xiao">
建议使用数字、字母和符号两种以上的组合，6-20个字符
</td>
</tr>
<tr>
<td>
<input type="password" placeholder="确认密码" class="a" />
</td>
</tr>
<tr>
<td class="xiao">
两次密码输入不一致
</td>
</tr>
<tr>
<td>
<input type="password" placeholder="验证手机" class="a"/>
或
<a href="#"> 验证邮箱</a>
</td>
</tr>
<tr>
<td id="note">
我已阅读并同意
<a href="#">《京淘用户注册协议》</a>
</td>
</tr>
<tr>
<td>
<!-- type类型必须是submit才能提交数据 -->
<input id="btn" type="submit" value="立即注册" />
</td>
</tr>
</table>
</body>
</html>
--创建zhuce.css文件
/* 语法:选择器{样式1;样式2;样式3;} */
/* 统一网页风格 */
body{
font-family: "宋体";/* 统一字体 */
font-size: 15px;/* 统一字号 */
width: 500px;/* 统一宽度 */
padding-left: 100px;/* 设置左边距 */
}
/*修饰所有input的样式 */
.a{
height: 20px;/* 高度 */
width: 300px;/* 宽度 */
padding: 15px;/* 调整内容和边框的距离,内边距 */
font-size:20px ;/* 字号变大 */
margin: 10px;/* 调整盒子间的距离,外边距 */
}
/* 修饰所有的提示信息 */
.xiao{
font-size: 8px;/* 字体变小 */
color: grey;/* 字的颜色 */
padding-left: 30px;/* 左边距 */
}
/* 修饰同意 */
#note{
height: 60px;/* 高度 */
text-indent: 60px;/* 首行缩进 */
font-size: 17px;/* 字号变大 */
}
/* 修饰立即注册按钮 */
#btn{
background-color: #E64346;/* 背景色 */
font-size: 25px;/* 字号变大 */
color: white;/* 字的颜色 */
width: 360px;/* 设置宽度 */
height: 50px;/* 设置高度 */
border: #E64346;/* 设置边框 */
}
二,JS
–1,概述
用来加强用户和网站的交互
js的好处:安全,跨平台,语法灵活
–2,语法
<!-- 在HTML网页中,嵌入js代码 -->
<script>
//定义函数的语法: function 函数名(参数列表){ 函数体 }
function method(){
alert(100);// 在网页上弹框
// js里的数据类型:基本类型number string boolean null undefined + 复杂
alert(1.5+2.5); //number类型
alert("hello");//string类型
alert('hello');//string类型
alert(true);//boolean类型
alert(null);//null类型
//js里的变量语法:: var 变量名 = 变量值;
var x = 10;
alert(x); //整数的10
x = 1.1 ;
alert(x); //小数的1.1
x = "jack" ;
alert(x); //字符串的jack
x = false ;
alert(x); //布尔的false
}
</script>
</head>
<body>
<!-- 事件驱动,可以给元素添加各种事件
onclick属性,表示,点击事件
-->
<a href="#" onclick="method();">点击触发js</a>
</body>
</html>
–
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
