今日内容概要:
CSS
1、css的简介
2、css和html的结合方式(四种结合方式)
代码:
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
background-color:gray;
color:white;
}
</style>
</head>
<body>
<div style="background-color:red;color:green;">天之道,损有余而补不足,是故虚胜实,不足胜有余。</div>
<div>变化之由表,死生之兆彰,不谋而遗迹自同,</div>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
background-color:green;
color: red;
}
</style>
</head>
<body>
<div>其意博,其理奥,其趣深,天地之象分,阴阳之候列。</div>
</body>
</html>
/*
div
*/
div {
background-color: gray;
color: black;
}
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
@import url(div.css);
</style>
</head>
<body>
<div>变化之由表,死生之兆彰,不谋而遗迹自同,</div>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<link rel="stylesheet" type="text/css" href="div.css" />
</head>
<body>
<div>变化之由表,死生之兆彰,不谋而遗迹自同,</div>
</body>
</html>
3、css的基本选择器(三种)
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
background-color: red;
}
p {
background-color: green;
}
</style>
</head>
<body>
<div>变化之由表,死生之兆彰,不谋而遗迹自同,1111</div>
<p>勿约而幽明斯契,稽其言有微,验之事不忒,诚可谓至道之宗,</p>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*div.haha {
background-color: yellow;
}
p.haha {
background-color: yellow;
}*/
.haha {
background-color: orange;
}
</style>
</head>
<body>
<div class="haha">变化之由表,死生之兆彰,不谋而遗迹自同,1111</div>
<p class="haha">变化之由表aaaaaaaaaa</p>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*div#hehe {
background-color: gray;
}
p#hehe {
background-color: gray;
}*/
#hehe {
background-color: #333300;
}
</style>
</head>
<body>
<div id="hehe">故动则有成,犹鬼神幽赞,而命世奇杰,时时间出焉</div>
<p id="hehe">aaaaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
#hehe1 {
background-color: orange;
}
.haha1 {
background-color: green;
}
div {
background-color: red;
}
</style>
</head>
<body>
<div class="haha1" id="hehe1" style="background-color: gray;">故动则有成,犹鬼神幽赞,而命世奇杰,时时间出焉</div>
<div>aaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
4、css的扩展选择器
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div p {
background-color: green;
}
</style>
</head>
<body>
<div><p>CSS的扩展选择器</p></div>
<p>WWWWWWWWWWWWWWWWWWWWWW</p>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div,p {
background-color: orange;
}
</style>
</head>
<body>
<div>QQQQQQQQQQQQQQQQQ</div>
<p>AAAAAAAAAAAAAAAAAAAAAAA</p>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*原始状态*/
a:link {
background-color: red;
}
/*悬停状态*/
a:hover {
background-color: green;
}
/*点击状态*/
a:active {
background-color: blue;
}
/*点击之后的状态*/
a:visited {
background-color: gray;
}
</style>
</head>
<body>
<a href="http://www.sina1.com.cn" target="_blank">CSS概述和与HTML的结合方式超链接一</a>
</body>
</html>
5、css的盒子模型
<html>
<head>
<title>HTML示例}</title>
<style type="text/css">
div {
width: 200px;
height: 100px;
border: 2px solid blue;
}
#div12 {
border-right: 2px dashed yellow;
}
</style>
</head>
<body>
<div id="div11">AAAAAAAAAAAAAAA</div>
<div id="div12">BBBBBBBBBBBBBBB</div>
<div id="div13">CCCCCCCCCCCCCCC</div>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height: 100px;
border: 2px solid blue;
}
#div22 {
padding: 20px;
}
#div23 {
padding-left: 30px;
}
</style>
</head>
<body>
<div id="div21">AAAAAAAAAAAAAAA</div>
<div id="div22">BBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div id="div23">CCCCCCCCCCCCCCC</div>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
border: 2px solid blue;
}
#div32 {
margin: 20px;
}
#div33 {
margin-left : 30px;
}
</style>
</head>
<body>
<div id="div31">AAAAAAAAAAAAAAA</div>
<div id="div32">BBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div id="div33">CCCCCCCCCCCCCCC</div>
</body>
</html>
6、css的布局的漂浮
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height:150px;
border: 2px solid blue;
}
#div41 {
float : left;
}
#div42 {
float:left;
}
</style>
</head>
<body>
<div id="div41">AAAAAAAAAAAAAAA</div>
<div id="div42">BBBBBBBBBBBBBBB</div>
<div id="div43">CCCCCCCCCCCCCCC</div>
</body>
</html>
7、css的布局的定位
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height:150px;
border: 2px solid blue;
}
#div51 {
background-color: red;
position:absolute;
top: 80px;
left: 120px;
}
#div52 {
background-color: green;
width: 250px;
height:150px;
}
#div53 {
background-color: orange;
}
</style>
</head>
<body>
<div id="div51">AAAAAAAAAAAAAAA</div>
<div id="div52">BBBBBBBBBBBBBBB</div>
<div id="div53">CCCCCCCCCCCCCCC</div>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height:150px;
border: 2px solid blue;
}
#div51 {
background-color: red;
position: relative;
top: 80px;
left:120px;
}
#div52 {
background-color: green;
}
#div53 {
background-color: orange;
}
</style>
</head>
<body>
<div id="div51">AAAAAAAAAAAAAAA</div>
<div id="div52">BBBBBBBBBBBBBBB</div>
<div id="div53">CCCCCCCCCCCCCCC</div>
</body>
</html>
8、案例 图文混排案例
** 图片和文字在一起显示
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
#imgtex11 {
width: 500px;
height: 400px;
border:2px dashed orange;
}
#img11 {
/*float:left;*/
float:right;
}
#tex11 {
color: green;
}
</style>
</head>
<body>
<div id="imgtex11">
<div id="img11"><img src="aa.jpg" width="250" height="200"/></div>
<div id="tex11">奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
标格亦资于</div>
</div>
</body>
</html>
9、案例 图像签名
** 在图片上面显示文字
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
#tex21 {
position: absolute;
top: 50px;
left: 30px;
color: red;
}
</style>
</head>
<body>
<div id="img21"><img src="aa.jpg" width="450" height="350"/></div>
<div id="tex21">这是很多美女</div>
</body>
</html>
Javascript
1、javascript的简介
2、js和html的结合方式(两种)
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//向页面弹出一个框,显示内容
alert("aaaa");
</script>
</body>
</html>
1.js
//单行注释
/*多行注释*/
alert("bbbbbb");
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript" src="1.js">
alert("ccccccc");
</script>
</body>
</html>
ccccccc不会弹出来
3、js的原始类型和声明变量
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript" >
//定义一个字符串
var str = "123";
//alert(str);
//alert(typeof(str))
//定义数字
var mm = 123;
//alert(mm);
//alert(typeof(mm));
//定义boolean类型
var flag = true;
//alert(flag);
alert(typeof(flag));
</script>
</body>
</html>
4、js的语句
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//if语句
var a = 5;
if(a == 5) {
alert("5");
} else {
alert("6");
}
//switch语句
/*var b = 60;
switch(b) {
case 3:
alert("3");
break;
case 6:
alert("6");
break;
default:
alert("other");
}*/
//while循环
/*var i = 5;
while(i>1) {
alert(i);
i--;
}*/
//for循环
/*for(var mm=0;mm<=3;mm++) {
alert(mm);
}*/
</script>
</body>
</html>
5、js的运算符
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
/*var j = 123;
alert(j/1000*1000); */
// j/1000*1000 在java里面得到结果是 0
// 在js里面不区分整数和小数,123/1000=0.123 * 1000 = 123
//字符串的操作
var str = "abc"; //提示NaN:表示不是一个数字
//alert(str+1); //在java里面操作的结果是 4561 ,在js里面还是 4561
alert(str-1); //相减时候,执行减法的运算
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//boolean操作
var flag = true; //等于1
//alert(flag+1);
var flag1 = false; //等于0
//alert(flag1+1);
// == 和 === 区别
/*var aa = "5";
if(aa === "5") {
alert("5");
} else {
alert("other");
}*/
document.write("aaaaaaaaaa");
document.write("<br/>");
document.write("bbbbbbbbbbbbb");
document.write("<hr/>");
</script>
</body>
</html>
6、实现99乘法表(输出到页面上)
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
document.write("<table border='1' bordercolor='blue'>");
//循环行 9
for(var i=1;i<=9;i++) {
document.write("<tr>");
//循环列
for(var j=1;j<=i;j++) {
document.write("<td>");
//运算
document.write(j+"*"+i+"="+i*j);
document.write("</td>");
}
//document.write("<br/>");
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
7、js的数组
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//定义数组第一种方式
var arr = [1,2,"3"];
//alert(arr);
alert("length: "+arr.length);
//第二种方式定义数组
var arr1 = new Array(3);
arr1[0] = "a";
arr1[1] = "b";
arr1[2] = "c";
//alert(arr1);
//第三种方式定义数组
var arr2 = new Array(6,7,8);
//alert(arr2);
var arr3 = new Array(5);
alert("arr3: "+arr3.length);
</script>
</body>
</html>
8、js的函数
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//使用第一种方式创建函数
function test() {
alert("qqqqq");
}
//调用方法
//test();
//定义一个有参数的方法 实现两个数的相加
function add1(a,b) {
var sum = a+b;
alert(sum);
}
//add1(2,3);
//有返回值的效果
function add2(a,b,c) {
var sum1 = a+b+c;
return sum1;
}
alert(add2(3,4,5));
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//第二种方式创建函数
var add3 = function(m,n) {
alert(m+n);
}
//调用方法
//add3(5,6);
//第三种方式创建函数
var canshu = "x,y";
var fangfati = "var sum;sum=x+y;return sum;";
var add4 = new Function(canshu,fangfati);
alert(add4(3,5));
</script>
</body>
</html>
9、js的全局变量和局部变量
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var aa = 10;
alert("在方法外部调用aa: "+aa);
//定义一个方法
function test1() {
alert("在方法内部调用aa: "+aa);
}
test1();
</script>
<script type="text/javascript">
alert("在另外一个script标签使用: "+aa);
</script>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
function test11() {
var nn = 10;
alert("在方法内部: "+nn);
}
test11();
alert("方法外部: "+nn);
</script>
</body>
</html>
10、script标签放在的位置
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
<script type="text/javascript">
//alert("aaaa");
var input1 = document.getElementById("nameid");
alert(input1.value); //SCRIPT5007: 无法获取属性“value”的值: 对象为 null 或未定义
</script>
</head>
<body>
<input type="text" name="name" id="nameid" value="aaa"/>
</body>
</html>
11、js的重载
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
function add11(a,b) {
return a+b;
}
function add11(a,b,c) {
return a+b+c;
}
function add11(a,b,c,d) {
return a+b+c+d;
}
alert(add11(2,2)); //NaN
alert(add11(2,2,3)); //NaN
alert(add11(2,2,4,5)); // 13
</script>
</body>
</html>