JAVA HTMLCSSJS DAY02
1 CSS使用示例
1.1 问题
使用CSS设置HTML文档的样式。
1.2 方案
CSS使用有3种方式：
1.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
创建文件夹day02和css，如下图：
图-1
在css下创建c1.css，代码如下：
/*定义外部样式表*/
p {
background-color:silver;
}
在day02下创建demo1.html，代码如下：
<!-- CSS使用示例 -->
<!DOCTYPE html>
<html>
<head>
<title>CSS使用示例</title>
<meta charset="utf-8" />
<!--定义内部样式表 -->
<style type="text/css">
h2 {
color:red;
}
</style>
<!--引用外部样式表 -->
<link rel="stylesheet" type="text/css" href="../css/c1.css" />
</head>
<body>
<!--内联方式 -->
<h1 style="color:blue;">CSS的使用</h1>
<!--内部样式表 -->
<h2>CSS有3种用法</h2>
<!--外部样式表 -->
<p>1.内联方式。</p>
<p>2.内部样式表。</p>
<p>3.外部样式表。</p>
</body>
</html>
步骤二：测试
使用浏览器打开demo1.html，效果如下图：
图-2
1.4 完整代码
本案例的完整代码如下所示：
c1.css完整代码如下：
/*定义外部样式表*/
p {
background-color:silver;
}
demo1.html完整代码如下：
<!-- CSS使用示例 -->
<!DOCTYPE html>
<html>
<head>
<title>CSS使用示例</title>
<meta charset="utf-8" />
<!-- 定义内部样式表 -->
<style type="text/css">
h2 {
color:red;
}
</style>
<!-- 引用外部样式表 -->
<link rel="stylesheet" type="text/css" href="../css/c1.css" />
</head>
<body>
<!-- 内联方式 -->
<h1 style="color:blue;">CSS的使用</h1>
<!-- 内部样式表 -->
<h2>CSS有3种用法</h2>
<!-- 外部样式表 -->
<p>1.内联方式。</p>
<p>2.内部样式表。</p>
<p>3.外部样式表。</p>
</body>
</html>
2 CSS规则特性
2.1 问题
创建HTML文档，验证CSS规则特性。
2.2 方案
CSS规则特性：
2.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
在dau02下创建demo2.html，代码如下：
<!-- CSS规则特性 -->
<!DOCTYPE html>
<html>
<head>
<title>CSS规则特性</title>
<meta charset="utf-8" />
<style type="text/css">
/* 继承性 */
body {
font-family: '微软雅黑','文泉驿正黑';
}
/* 层叠性 */
h1 {
color:red;
}
h1 {
background-color:silver;
}
/* 优先级 */
p {
color:red;
}
p {
color:blue;
}
</style>
</head>
<body>
<h1>AAA</h1>
<p>BBB</p>
</body>
</html>
步骤二：测试
使用浏览器打开demo2.html，效果如下图：
图-3
2.4 完整代码
本案例的完整代码如下所示：
demo2.html完整代码如下：
<!-- CSS规则特性 -->
<!DOCTYPE html>
<html>
<head>
<title>CSS规则特性</title>
<meta charset="utf-8" />
<style type="text/css">
/* 继承性 */
body {
font-family: '微软雅黑','文泉驿正黑';
}
/* 层叠性 */
h1 {
color:red;
}
h1 {
background-color:silver;
}
/* 优先级 */
p {
color:red;
}
p {
color:blue;
}
</style>
</head>
<body>
<h1>AAA</h1>
<p>BBB</p>
</body>
</html>
3 管理员列表-1
3.1 问题
定义管理员列表页面的整体布局。
3.2 方案
使用分区元素定义页面布局。
3.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
在day02下创建img文件夹，导入页面所需图片，如下图：
图-4
在day02下创建admin_list.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
div {
border:1px solid #000;
}
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo"></div>
<!--导航区 -->
<div id="nav"></div>
<!--主体区 -->
<div id="main">
<!--内容区 -->
<div class="content">
<!--操作区 -->
<div class="operate"></div>
<!--数据区 -->
<div class="data"></div>
<!--分页区 -->
<div class="pages"></div>
</div>
</div>
<!--版权区 -->
<div id="footer"></div>
</body>
</html>
步骤二：测试
使用浏览器打开admin_list.html，效果如下图：
图-5
3.4 完整代码
本案例的完整代码如下所示：
admin_list.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
div {
border:1px solid #000;
}
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo"></div>
<!-- 导航区 -->
<div id="nav"></div>
<!-- 主体区 -->
<div id="main">
<!-- 内容区 -->
<div class="content">
<!-- 操作区 -->
<div class="operate"></div>
<!-- 数据区 -->
<div class="data"></div>
<!-- 分页区 -->
<div class="pages"></div>
</div>
</div>
<!-- 版权区 -->
<div id="footer"></div>
</body>
</html>
4 管理员列表-2
4.1 问题
为管理员列表页面设置背景。
4.2 方案
使用background-color设置背景色；
使用background-image设置背景图片。
4.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：修改文件
修改admin_list.html，为页面设置背景，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
div {
border:1px solid #000;
}
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
#cold_bold /* 2.设置页面背景 */
#cold_boldbody {
#cold_boldbackground-color:#0EA8D8;
#cold_bold }
#cold_bold #logo {
#cold_boldbackground-image:url('../img/top_bg.png');
#cold_bold }
#cold_bold #main {
#cold_boldbackground:url('../img/content_bg.png') repeat-x top;
#cold_bold }
#cold_bold #nav {
#cold_boldbackground-color:#0488BB;
#cold_bold }
#cold_bold .content {
#cold_boldbackground-color:#e8f3f8;
#cold_bold }
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo"></div>
<!--导航区 -->
<div id="nav"></div>
<!--主体区 -->
<div id="main">
<!--内容区 -->
<div class="content">
<!--操作区 -->
<div class="operate"></div>
<!--数据区 -->
<div class="data"></div>
<!--分页区 -->
<div class="pages"></div>
</div>
</div>
<!--版权区 -->
<div id="footer"></div>
</body>
</html>
步骤二：测试
使用浏览器打开admin_list.html，效果如下图：
图-6
4.4 完整代码
本案例的完整代码如下所示：
admin_list.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="utf-8" />
<style type="text/css">
/* 1.设置页面整体布局 */
body {
margin:0;
padding:0;
}
div {
border:1px solid #000;
}
#logo {
width:960px;
height:61px;
margin:0 auto;
}
#nav {
width:100%;
height:91px;
}
#main {
width:100%;
height:410px;
margin:0 auto;
padding:10px 0 0 0;
}
#footer {
width:960px;
height:50px;
margin:0 auto;
}
.content {
width:950px;
height:390px;
border:5px solid #8ac1db;
margin:0 auto;
}
.operate {
width:910px;
height:40px;
margin:0 auto;
}
.data {
width:910px;
height:310px;
margin:0 auto;
}
.pages {
width:910px;
height:40px;
margin:0 auto;
}
/* 2.设置页面背景 */
body {
background-color:#0EA8D8;
}
#logo {
background-image:url('../img/top_bg.png');
}
#main {
background:url('../img/content_bg.png') repeat-x top;
}
#nav {
background-color:#0488BB;
}
.content {
background-color:#e8f3f8;
}
</style>
</head>
<body>
<!-- logo区 -->
<div id="logo"></div>
<!-- 导航区 -->
<div id="nav"></div>
<!-- 主体区 -->
<div id="main">
<!-- 内容区 -->
<div class="content">
<!-- 操作区 -->
<div class="operate"></div>
<!-- 数据区 -->
<div class="data"></div>
<!-- 分页区 -->
<div class="pages"></div>
</div>
</div>
<!-- 版权区 -->
<div id="footer"></div>
</body>
</html>