引入外部的css的文件
<link rel="stylesheet" href="1.css"/>
创建css文件
.a{
width: 350px;
height: 30px;
}
#btni{
background-color: #0000FF;
color: white;
border-color: #0000FF;
width: 80px;
height: 30px;
}
#btni2{
background-color: #ff55ff;
color: white;
border-color: #ff55ff;
width: 80px;
height: 30px;
}
练习
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="2.css"/>
</head>
<body>
<div class="a">用户注册</div>
<div><input class="b" type="text" name="user" id="" placeholder="用户名" /></div>
<div class="c">支持中文、字母、数字、“-”、“_”的组合,4-20个字符</div>
<div><input class="b" type="password" name="pwd" placeholder="设置密码"/></div>
<div class="c">建议使用数字、字母和符号两种以上的组合,6-20字符</div>
<div><input class="b" type="password" name="pwd2" placeholder="确认密码"/></div>
<div class="c">两次密码输入不一致</div>
<div><input class="b" type="number" name="number" placeholder="验证手机" />或<a id="d" href="#">验证邮箱</a></div>
<div class="e"><input class="f" type="checkbox" name="yes" />我已经阅读并同意<a href="#">《京淘用户注册协议》</<></a></div>
<div class="h">
<button type="submit">立即注册</button>
</div>
</body>
</html>
CSS
.a{
padding-block: 15px;
font-size: 30px;
width: 400px;
height: 50px;
text-align: center;
font-weight: 500;
}
.b{
font-size: 20px;
height: 50px;
width: 350px;
margin: 20px;
padding-left: 10px;
}
.c{
opacity: 50%;
padding-left: 40px;
font-size: 5px;
}
#d{
padding-left: 15px;
}
.e{
padding-left: 40px;
padding-top: 10px;
width: 400px;
height: 50px;
font-size: 5px;
padding-right: 5px;
}
.f{
width: 30px;
}
button{
width: 360px;/* 宽度 */
height: 40px;/* 高度 */
background-color: red;/* 背景色 */
border-color: red;/* 边框颜色 */
color: white;/* 文字颜色 */
font-size: 20px;/* 文字字号 */
}
.h{
width: 50px;
padding-left: 10px;
opacity: 75%;
}
静态网页的动态网页
动态网页
顾名思义就是让网站动起来
JavaScript的概念
什么是JS
- HTML定义网页的内容H5
- CSS规定网页的布局CSS3
- JavaScript瑟吉欧下面挖没孩子的交互ES6
全称JavaScript,是一种弱类型语言,同其他语言一样,有它自身的语法,数据类型,表达式,算术运算符等。
JS是一门 基于对象 和 事件驱动 的 脚本语言 ,通常用来提高网页与用户的交互性。
JS的特点
1,js是一门直译式的语言,不需要像java一样的编译过程.
2.js是弱类型的语言,底层会自动类型转换.
3.增强了用户的交互性,跨平台.
4.js代码出现的位置:行内JS,内部JS,外部JS
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试js</title>
</head>
<body>
<div onclick="alert('欢迎来到div')">我是div</div>
<span ondblclick="alert('欢迎来到span')">我是span</span>
<div onmouseenter="alert('欢迎加入div2')">我是div2</div>
<div onmouseleave="alert('你离开了div3')">我是div3</div>
</body>
</html>
onclick//单击时弹窗
ondblclick//双击时弹窗
onmouseenter//鼠标移到指定位置时弹窗
onmouseleave//鼠标移开指定位置时弹窗
JS语法
1.数据类型&变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js语法</title>
<script>
var x = 1;
var y = 2;
var t = y;
var y = x;
var x = t;
alert(x+","+y)
var a = 1;
a = 1.8;
alert(a);//number
a = true;
a = "你好";
alert('你好');//string
alert('hello')//string
alert(2.4+3.6);//6,number
alert(false);
alert()
</script>
</head>
<body>
</body>
</html>
JS的变量定义,JS是弱类型的语言,通过var定义变量
JS的数据类型: 基础(number/string/boolean/null/undefined) + 复杂
2.运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js语法</title>
<script>
//三元运算符
var c =10;
var d = 5;
var e = c > d ? c : d;
alert(e)
alert(1 == 1);//true
alert(1 != 1);//false
alert(1 == '1');//true 只比值
alert(1 === '1');//false 比较类型和值
var b = 2;
b *= 2;//b=b+2
alert(b);
//算数运算符: / % ++ --
var a = 12;
alert(a / 5); //2.4
alert(a % 5); //余2
// alert(a++);//12
// alert(++a);//14
a = a++;
alert(a);//12
a = a+++a; //a+ ++a; 12+13=25
alert(a);
</script>
</head>
<body>
</body>
</html>
JS语句
1.分支机构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JS语句</title>
<script type="text/javascript">
//分支机构sw
day = 1;
switch(day){//在java里,switch参数的数据类型只能有
//byte int char short String
case 1 : alert('星期一');break;
case 2 : alert('星期二');break;
case 3 : alert('星期三');break;
case 4 : alert('星期四');break;
case 5 : alert('星期五');break;
case 6 : alert('星期六');break;
case 7 : alert('星期日');break;
}
//分支结构 if...else
if (!true) {
alert(100);
}
var scores = 98;
if (scores => 80 && scores <= 100) {
alert('优秀')
} else if (scores => 60 && scores < 80) {
alert('中等')
} else if (scores => 0 && scores < 60) {
alert('不及格')
} else {
alert('输入有误')
}
</script>
</head>
<body>
</body>
</html>
2.循环结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Js语句</title>
<script>
//while循环结构
//while(true){//死循环
}
let a = 1;
let days = 0;
let money = 100000000;
while(money>1){
days++;
money=money/2;
}
console.log(days);
while(a<11){
a++;
console.log(a+"~~~~");
a++;
}
for(let i = 1;i<=100;i++){
if(i % 2 == 0 ){
console.log(i);
}
}
//bug:for循环里定义的变量,竟然在循环外也能用!!!
//原因:定义的变量没有作用域的概念,使用let定义变量!!!
//var没有作用域,let严格的规定了作用域
//console.log(i+"=====");
for(var i = 1;i<11;i++){
//alert(i);
console.log(i);
}
</script>
</head>
<body>
</body>
</html>