JavaWeb学习笔记——基础2(CSS&JS)

发表于 | 分类于 | 阅读次数：

了解CSS的概念
了解CSS的引入方式
了解CSS的基本语法和常用的选择器
了解CSS的盒子模型,悬浮和定位.
了解JS的概念 掌握JS的基本语法,数据类型,能够使用JS完成简单的页面交互

任务

  • 使用CSS完成网站首页的美化

  • 使用CSS完成网站注册页面的美化

  • 使用JS完成简单的数据校验

  • 使用JS完成图片轮播效果

导航

| 目标 | 了解CSS的概念 了解CSS的引入方式
了解CSS的基本语法和常用的选择器
了解CSS的盒子模型,悬浮和定位.
了解JS的概念 掌握JS的基本语法,数据类型,能够使用JS完成简单的页面交互. |

使用CSS对首页进行重新布局：

需求分析：

在上次的HTML课程中已经使用表格标签对页面进行布局显示了，但是表格标签有一定的缺陷。实际开发中都会采用DIV+CSS的方式进行布局。使用DIV+CSS重新布局网站的首页：

分析：

技术分析

【HTML的DIV标签】

HTML中有两个块标记：

    <div></div>
    <span></span>

【CSS的概述】

  • 什么是CSS：

Cascading Style Sheets 层叠样式表.

  • CSS的作用：

CSS主要用来修饰HTML的显示.代码复用.将页面元素与样式进行分离.

  • CSS的使用：

语法：

选择器{属性1:属性值;属性2:属性值;..}

<style>
    h2{
        color:red;
        font-size:100px;
    }
</style>

【CSS的引入方式】

  • 行内样式：

直接在html的元素上使用style的属性编写CSS：

<span style="color:#00FF00 ;font-size: 100px;">训练营</span>
  • 内部样式：

在html的\<head>标签中使用\<style>标签来定义CSS

<style>
    span{
        color:blue;
        font-size: 200px;
    }
</style>
  • 外部样式：

将CSS定义成一个.css的文件，在html中将该文件引入到html中

<link href="style.css" rel="stylesheet" type="text/css"/>

【CSS的基本选择器】

CSS的选择器为了更能精确的找个某个元素来设计的

  • 元素选择器：
div{

color: red;

}
  • id选择器：
        <style>
            #d1{
                color: red;
            }
        </style>

    <div id="d1">王凤</div>
***** id通常都是唯一的.
  • 类选择器：
HTML:
<div class="d1">王守义</div>
        <div>王凤</div>
        <div class="d1">王如花</div>

CSS:
        <style>
            .d1{
                color: green;
            }
        </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

选择器:★
	<id选择器>>
		要求:
			html元素必须有id属性且有值   <xxx id="id1"></xxx>
			css中通过"#"引入,后面加上id的值  #id1{...}
	<class选择器
		要求:
			html元素必须有class属性且有值 <xxx class="cls1"/>
			css中通过"."引入,后面加上class的值  .cls1{...}
	<元素选择器>
		直接用元素(标签)名即可   xxx{...}

	
派生的选择器
	<属性选择器★>
		要求:
			html元素必须有一个属性不论属性是什么且有值  <xxx nihao="wohenhao"/>
			css中通过下面的方式使用
				元素名[属性="属性值"]{....}
				例如:
					xxx[nihao="wohenhao"]{....}
	<后代选择器>
		选择器 后代选择器{...}   
<在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式>



了解的选择器
	锚伪类选择器

<锚伪类>
<在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，
这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。>

a:link {color: #FF0000}	/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。




选择器使用小结:
id选择器:一个元素(标签)
class选择器:一类元素 
元素选择器:一种元素
属性选择器:元素选择器的特殊用法
使用的时候注意:(了解)

<若多个样式作用于一个元素的时候
	不同的样式,会叠加
	相同的样式,最近原则>

<若多个选择器作用于一个元素的时候
	越特殊优先级越高 id优先级最高 > 属性选择器 > class选择器> 元素选择器>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
		</title>
		
		
		<style>
			#divId1{
				background-color: teal;
				width: 50%;
			}
			#divId2{
				background-color: crimson;
			}
			.divCls1{
				background-color: darkturquoise;
			}
			div{
				background-color: rosybrown;
			}
			div[att="divatt1"]{
				background-color: tomato;
			}
			span{
				background-color: lawngreen;
			}
			span[att="spanatt1"]{
				background-color: mediumaquamarine;
			}
				
		</style>
		
		<link rel="stylesheet" href="css/l2.css"  type="text/css" />
		
	</head>
	</head>
	<body>
		<div id="divId1">花蝴蝶夫人</div>
		<div class="divCls1">换个地方好感动</div>
		<div>股份及回复</div>
		<div att="divatt1">更符合规范化</div>
		<span >过分很过分1</span>
		<span att="spanatt1">过分很过分2</span>
		<span class="divCls1">过分很过分3</span>
		<span att="spanatt1" class="divCls1" id="divId2">过分很过分4</span>
		<span att="spanatt1" class="divCls1" >过分很过分5</span>
		越特殊优先级越高 id优先级最高 > 属性选择器 > class选择器> 元素选择器
	</body>
</html>

【CSS的悬浮】

  • CSS的float属性：

float属性中常用取值:

  • Left :悬浮到左边

  • Right :悬浮到右边

使用clear属性清除浮动：

  • Left ：清除左侧浮动

  • Right ：清除右侧浮动

  • Both ：清除两侧的浮动

步骤分析：

  • 创建一个外层的div元素

  • 在div中创建代表每块区域div

  • 在每块div引入需要的元素的内容

代码实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="../css/main.css" rel="stylesheet" type="text/css" />
        <style>
            .content{
                border:1px solid blue;
                height: 600px;
                background: url(../img/regist_bg.jpg);
                margin: 10px 0px;
            }
        </style>
    </head>
    <body>
        <!-- 创建一个整体的DIV -->
        <div>
            <div>
                <div class="top">
                    <img src="../img/logo2.png" height="48"/>
                </div>
                <div class="top">
                    <img src="../img/header.png"  height="48"/>
                </div>
                <div class="top" style="padding-top: 10px;height: 40px;">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
            <!--清除浮动-->
            <div class="clear"></div>
            <!-- 菜单部分的DIV-->
            <div class="menu">
                <ul>
                    <li style="display: inline;">首页</li>
                    <li style="display: inline;">电脑办公</li>
                    <li style="display: inline;">手机数码</li>
                    <li style="display: inline;">鞋靴箱包</li>
                </ul>
            </div>

            <div class="content">
                <div style="position: absolute;left:400px;top:150px;background-color: white;border:5px solid gray;width: 700px;height: 500px;">
                    <h3>用户注册</h3>
                    <form>
                                            <table width="100%" height="100%" border="0" align="center" cellspacing="10">
                                                <tr>
                                                    <td>用户名</td>
                                                    <td><input type="text" name="username" placeholder="请输入用户名"/></td>
                                                </tr>
                                                <tr>
                                                    <td>密码</td>
                                                    <td><input type="password" name="password"/></td>
                                                </tr>
                                                <tr>
                                                    <td>确认密码</td>
                                                    <td><input type="password" name="repassword"/></td>
                                                </tr>
                                                <tr>
                                                    <td>性别</td>
                                                    <td><input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女</td>
                                                </tr>
                                                <tr>
                                                    <td>Email</td>
                                                    <td><input type="text" name="email"/></td>
                                                </tr>
                                                <tr>
                                                    <td>姓名</td>
                                                    <td><input type="text" name="name"/></td>
                                                </tr>
                                                <tr>
                                                    <td>生日</td>
                                                    <td><input type="text" name="birthday"/></td>
                                                </tr>
                                                <tr>
                                                    <td>验证码</td>
                                                    <td><input type="text" name="checkcode" size="10"/></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2"><input type="submit" value="注册" style="background: url(../img/register.gif);"/></td>
                                                </tr>
                                            </table>
                                            </form>
                </div>
            </div >

            <div>
                <img src="../img/footer.jpg" />
            </div>
            <div align="center">
                <a href="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>
                    <a href="">联系我们</a>
                    <a href="">招贤纳士</a>
                    <a href="">法律声明</a>
                    <a href="link.html">友情链接</a>
                    <a href="">支付方式</a>
                    <a href="">配送方式</a>
                    <a href="">服务声明</a>
                    <a href="">广告声明</a>
                    <br/>
                    Copyright © 2005-2016 传智商城 版权所有 
            </div>
        </div>
    </body>
</html>

扩展：

CSS的其他的选择器：

【CSS的其他选择器】

  • 属性选择器

选中带有某个属性的元素：

<style>
        input[type="text"]{
            background-color: yellow;
        }

        input[type="password"]{
            background-color: green;
        }
    </style>
  • 层次选择器：

父选择器 子孙选择器 { }

<style>
        #d1 div{
            color: red;
        }
    </style>
  • 伪类选择器：

主要用来描述超链接

<style>
        a:link{
            color:blue;
            font-size: 40px;
        }
        a:visited{
            color: red;
            font-size: 40px;
        }
        a:hover{
            color: green;
            font-size: 100px;
        }
        a:active{
            color: brown;
            font-size: 200px;
        }
    </style>

使用DIV+CSS对注册页面进行布局：

需求分析：

使用DIV+CSS对注册页面进行布局。更加灵活！

分析：

技术分析：

【CSS的盒子模型】

设置盒子的外边距：margin

  • Margin-top

  • Margin-right

  • Margin-bottom

  • Margin-left

设置盒子的内边距：padding

  • Padding-top

  • Padding-right

  • Padding-bottom

  • Padding-left

步骤分析：

  • 创建一个整体div元素

  • 在里面创建5个分别代表某个部分的DIV

  • 在每个部分中完成单独内容的显示

代码实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="../css/main.css" rel="stylesheet" type="text/css" />
        <style>
            .content{
                border:1px solid blue;
                height: 600px;
                background: url(../img/regist_bg.jpg);
                margin: 10px 0px;
            }
        </style>
    </head>
    <body>
        <!-- 创建一个整体的DIV -->
        <div>
            <div>
                <div class="top">
                    <img src="../img/logo2.png" height="48"/>
                </div>
                <div class="top">
                    <img src="../img/header.png"  height="48"/>
                </div>
                <div class="top" style="padding-top: 10px;height: 40px;">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
            <!--清除浮动-->
            <div class="clear"></div>
            <!-- 菜单部分的DIV-->
            <div class="menu">
                <ul>
                    <li style="display: inline;">首页</li>
                    <li style="display: inline;">电脑办公</li>
                    <li style="display: inline;">手机数码</li>
                    <li style="display: inline;">鞋靴箱包</li>
                </ul>
            </div>

            <div class="content">
                <div style="position: absolute;left:400px;top:150px;background-color: white;border:5px solid gray;width: 700px;height: 500px;">
                    <h3>用户注册</h3>
                    <form>
                                            <table width="100%" height="100%" border="0" align="center" cellspacing="10">
                                                <tr>
                                                    <td>用户名</td>
                                                    <td><input type="text" name="username" placeholder="请输入用户名"/></td>
                                                </tr>
                                                <tr>
                                                    <td>密码</td>
                                                    <td><input type="password" name="password"/></td>
                                                </tr>
                                                <tr>
                                                    <td>确认密码</td>
                                                    <td><input type="password" name="repassword"/></td>
                                                </tr>
                                                <tr>
                                                    <td>性别</td>
                                                    <td><input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女</td>
                                                </tr>
                                                <tr>
                                                    <td>Email</td>
                                                    <td><input type="text" name="email"/></td>
                                                </tr>
                                                <tr>
                                                    <td>姓名</td>
                                                    <td><input type="text" name="name"/></td>
                                                </tr>
                                                <tr>
                                                    <td>生日</td>
                                                    <td><input type="text" name="birthday"/></td>
                                                </tr>
                                                <tr>
                                                    <td>验证码</td>
                                                    <td><input type="text" name="checkcode" size="10"/></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2"><input type="submit" value="注册" style="background: url(../img/register.gif);"/></td>
                                                </tr>
                                            </table>
                                            </form>
                </div>
            </div >

            <div>
                <img src="../img/footer.jpg" />
            </div>
            <div align="center">
                <a href="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>
                    <a href="">联系我们</a>
                    <a href="">招贤纳士</a>
                    <a href="">法律声明</a>
                    <a href="link.html">友情链接</a>
                    <a href="">支付方式</a>
                    <a href="">配送方式</a>
                    <a href="">服务声明</a>
                    <a href="">广告声明</a>
                    <br/>
                    Copyright © 2005-2016 传智商城 版权所有 
            </div>
        </div>
    </body>
</html>

扩展：

扩展属性：

【列表属性】

ul li{

list-style-image: url(../img/reg4.gif);

}

【颜色取值】

  • 英文取值：

color：red

  • 十六进制数：

color：#ff0000

  • Rgb方式：

color：rgb(255,0,0)

使用JS完成简单的数据的校验

需求分析：

使用JS完成对注册页面进行简单的数据的非空校验。在提交表单的时候，不可以出现用户名，密码是空的情况。

分析：

技术分析：

HTML骨架，CSS美化，JS可以使页面动起来。

【JavaScript的概述】

  • 什么是JavaScript：

运行在浏览器端的脚本语言.

JS的组成：

ECMAScript：语法，语句.

BOM:浏览器对象

DOM:Document Object Model.操作文档中的元素和内容.

  • 在哪些地方使用JS

JS增加用户和网站交互

  • 如何使用JS

语法：

  • 区分大小写

  • 语法要求不是特别严格

  • 变量是弱变量类型

    • var i = 3;

    • var s = “aa”;

  • JS代码需要写在\<script>\</script>

【JS的数据类型】

  • 原始类型：

  • string

  • number

  • boolean

  • undefined

  • null

  • 引用类型：

基于对象而不是面向对象.内置对象.对象类型的默认值是null.

【JS的运算符和语句】

运算符与Java中一致.

  • 全等于 === ：类型和值都一致返回true

语句与Java一致：

【JS的输出】

  • alert()

向页面中弹出一个提示框！！

  • innerHTML:

向页面的某个元素中写一段内容，将原有的东西覆盖

  • document.write();

向页面中写内容

步骤分析：

  • JS都是由事件触发的，第一步确定事件。

on…

  • JS的事件都会触发一个函数，编写一个函数。

  • JS获得操作的对象的元素。

document.getElementById(“”);

  • JS修改这个元素的属性或值。

代码实现：

<script>
        // 第一步确定事件：onsubmit
        // 第二步编写触发函数：
        function checkForm(){
            // 第三步：通过ID获得元素
            var uValue = document.getElementById("username").value;
            // alert(uValue);
            if(uValue == ""){
                alert("用户名不能为空！");
                return false;
            }

            // 校验密码
            var pValue = document.getElementById("password").value;
            if(pValue == ""){
                alert("密码不能为空！");
                return false;
            }

            // 校验确认密码
            var rpValue = document.getElementById("repassword").value;
            if(rpValue != pValue){
                alert("两次密码输入不一致！");
                return false;
            }

            // 校验邮箱：使用正则表达式：
            var eValue = document.getElementById("email").value;
            if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                alert("邮箱格式不正确！");
                return false;
            }
        }
    </script>

使用JS完成首页上轮播图片效果：

需求分析：

在网站的首页上图片的轮播，现在页面中图片是静止的。让图片隔5秒自动切换。

分析：

技术分析：

【修改图片的路径】

获得图片，修改图片的src的属性。

document.getElementById(“img1”).src=”2.jpg”;

【JS中定时操作】

查看BOM中的window对象：

  • setInterval() :隔多少毫秒之后，执行一段代码。重复执行。

  • setTimeout() :隔多少毫秒之后，执行一段代码。

清除定时：

  • clearInterval() :清除setInterval的定时操作。

  • clearTimeout() : 清除setTimeout的定时操作。

示例代码：

function init(){

// window.setTimeout(“alert(‘aaa’)”,5000);

window.setInterval(“alert(‘bbb’)”,5000);

}

步骤分析：

  • 步骤一：使用页面加载的事件触发一个函数

  • 步骤二：在函数中设置定时：setInterval设置定时，5秒之后（切换图片-定义一个函数）

  • 步骤三：编写切换图片的函数

  • 步骤四：在函数中获得图片的元素

  • 步骤五：修改图片的src的属性

代码实现：

<script>
        function init(){
            // 设置定时
            setInterval("changeImg()",5000);
        }

        // 定义一个全局变量
        var i = 1;

        function changeImg(){
            // 获得图片的元素：
            var img1 = document.getElementById("img1");

            if(i == 3){
                i =1;
            }else{
                i++;
            }

            // 修改图片的src的属性
            img1.src = "../img/"+i+".jpg";
        }
    </script>
-------------本文结束感谢您的阅读-------------
感谢您的支持，我会继续努力的!
0%