一、网页布局
网页头部
网页内容部分
网页尾部
了解：
HTML新增的语义标签，语义标签可以让页面的结构更清晰，主要是给搜索引擎来使用，一般低版本浏览器不支持，目前最多应用最多的是在移动端
<body>
<!-- 头部开始 -->
<header class="header">
<div class="header-top">
<div class="center header-top-content"></div>
</div>
<div class="center nav"></div>
</header>
<!-- 头部结束 -->
<!-- 主体部分开始 -->
<section class="min">
<div class="center banner"></div>
<div class="center banner-item"></div>
</section>
<!-- minend -->
<!-- footer start -->
<div class="footer"></div>
<!-- enderfooter -->
</body>二、圆角和阴影
<style type="text/css">
.item{
width: 200px;
height: 200px;
border: 1px solid red;
/*角圆化*/
border-radius: 100px;
/*border-radius: 10px 30px 50px 70px;*/
/*
阴影
水平偏移位置 垂直偏移位置 模糊程度 扩散范围 阴影的颜色 insert内阴影
*/
box-shadow: 3px 3px 10px gold inset;
/*过度*/
transition: all 3s;
}
.item:hover{
border-radius:0px;
/*旋转*/
transform: rotate(150deg);
/*位移*/
/*transform: translate(100px,100px);*/
/*缩放*/
/*transform: scale(3);*/
}
</style>三、javascript简介
JavaScript是一个客户端脚本语言，是在运行在客户端，由浏览器内核来去解析
BOM浏览器对象模型，DOM文档对象模型，ECMAScript JS规范
四、JS的三种引入方式
<body>
<!-- 行间事件 -->
<button onclick="alert('来快活')">点我</button>
<a href="javascript:alert('我来了')">来吧</a>
<a href="javascript:;" onclick="alert('我等你')">我就到</a>
<!-- 嵌入式
通过script标签将js代码嵌入到文档-->
<script type="text/javascript">
alert('ok');
</script>
<!-- 外链式
通过script标签的src属性引入外部js文件，如果使用外部js文件，那么此标签的的js代码将不会再执行-->
<script type="text/javascript" src="./js/demo00js.js">
alert('啦啦啦');
</script>
<!-- 常用js输出方式 -->
<script>
// 在浏览器中弹出框显示内容，会阻碍程序的运行
alert('alert xxx');
// 再页面中显示内容
document.write('document xxx')
// 在控制台输出内容，最常用的输出方式
console.log('console xxx')
</script>
</body>五、JS的变量
使用关键字var声明变量
命名规范：
由数字字母下划线组成，不能以数字开头，尽量要有意义，不能使用关键字，严格区分大小写
六、JS基本数据类型
数值类型：数字，小数，NaN（not a number）
字符串：只要是使用引号引起来的都是字符串
布尔类型：true false
对象类型：var obj={key：val，key：val}
数组：var arr=[1,2,3]
函数类型 function fun（形参）{代码段}
未定义 undefined
<script type="text/javascript">
var a=1;
var b=1.2;
console.log(a,b);
// 检测变量类型
var res=typeof(a);
console.log(res);
// 字符串
var str1='123';
var str2="123";
var str3='hello",world"';
// 布尔值
var bool=true;
console.log(bool);
// 对象类型
var obj={
name:'xgg',
age:18,
say:function(){
alert('awsl');
}
}
// 数组
var arr=['大桥','小乔','貂蝉'];
console.log(obj,typeof(obj));
console.log(arr,typeof(arr));
console.log(null,typeof(null));
// 函数
var func=function(){
console.log('function');
}
console.log(func,typeof(func));
// 未定义类型undefined
var v=undefined;
var x;
console.log(v,typeof(v));
console.log(x);
</script>七、数据类型转换
<script type="text/javascript">
// 字符串强制转换成数值
// Number 只要字符串中有一个非数字的字符，就返回NaN，不包含第一个小数点
// var str1='123';
// var str1='123ab';
// var str1='123.1';
// var str1='123.1.1';
// var str1='a123';
// var res=Number(str1);
// console.log(res,typeof(res));
// parseInt(),从前往后读取，到第一个非数字为止，如果第一个字符是非数字表示字符，直接返回NaN
// parseInt和parseFloat类似只不过会检测第一个小数点
// console.log(parseInt(str1),typeof(parseInt(str1)));
// console.log(parseFloat(str1),typeof(parseFloat(str1)))；
// 转化成布尔类型为false 0,0.0，NaN,'',null undefined
// Boolean()
// var num1=0.0;
// var num1=NaN;
// var num1='';
// var num1=null;
// var num1=undefined;
console.log(Boolean(num1));
</script>强制数据类转换 是人为的
将字符串类型转换成属值类型
Number（）只能转纯数字表示的字符串，否则直接返回NaN
parseInt（）整型，从前往后读，一直取到非数值表示的字符为止，如果第一字符就是非数字表示的字符，直接返回NaN
parseFloat（）和parseInt相似
隐式数据型转化是程序自发的，程序人员无法干扰
八、常用运算符
算术运算 + - * / % ++ --
字符串运算 +
赋 = += -= *= %=
比 > < >= <= == != ===全等 !==
逻 && || !
九、流程控制及循环结构
<script>
// 单分支
// var age = 8;
// if(age>=18){
// alert('ok你可以出入一些场所啦');
// }else{
// alert('你不能观看此影片，需要在家人陪同下观看');
// }
// 多分之
var age = '25';
if(age<12){
console.log('骚年,你狠牛啊');
}else if(age<18){
console.log('青年，你好骚啊');
}else if(age<40){
console.log('你好强啊');
}else{
console.log('在家下下棋，喝喝茶');
}
// switch case 当判断成功后 后面的条件不在判断直接执行
// 条件判断使用的是===
var num = '1';
switch(num){
case 1:
console.log('你刚出生啊');
break;
case 18:
console.log('你终于成年啦');
break;
case 28:
console.log('你终于要结婚啦');
break;
case 90:
console.log('你要下课啦');
break;
default:
console.log('你是神仙吗');
}
// 循环
var num = 0;
// while num<=10:
// print(num)
// num+=1
while(num<=10){
console.log(num);
num++;
}
// for in 一般使用来遍历对象
// 当便利对象时 临时变量拿到的是对象的属性
// 如果遍历的是数组 临时变量拿到的是索引值
var obj = {name:'澳龙',age:16,gender:'男'}
for(i in obj){
console.log(obj[i]);
}
var arr = ['鲁智深','小龙女','郭靖'];
for(i in arr){
console.log(arr[i]);
}
// 单纯的for循环
var arr = ['叶问','李小龙','王二狗'];
console.log(arr.length) // 检测数组的长度
for(var i=0;i<arr.length;i++){
if(i==0){
// continue;
break;
}
console.log(arr[i]);
}
// do while 不论循环条件是否成立 先执行一次 然后在去判断是否循环
// var a = 0;
// do{
// console.log(a);
// a++;
// }while(a>10)
</script>
1062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
