【实验目的】
- 熟悉HTML页面布局的方法
- 掌握CSS用法
【实验内容】
-
查看CSS_EX.html文档利用CSS选择符制作下图所示的静态网页。分析为什么id="BoldText GreenText"不起作用？
<html>
<head>
<meta charset="UTF-8">
<style>
/*类选择符的定义*/
.RedText{color: red;}
.LargeFont{font-size:30px;}
.BoldText{font-weight: bold;}
.GreenText{color:green;}
/*id选择符的定义*/
#BoldText{font-weight: bold;}
#GreenText{color:green;}
</style>
</head>
<body>
<!--同一个类选择符可以被多个标签使用,一个标签也可以同时引用多个类选择器-->
<p class="RedText">段落1,class="RedText",设为红色字体</p>
<div class="LargeFont">这是一个div,class="LargeFont",字体设为30px</div>
<p class="RedText LargeFont">段落2,class="RedText LargeFont",设为红色字体,大小为30px</p>
<!--同一个标签不可以同时引用多个id选择符-->
<p id="BoldText">段落一,id="BoldText",设为加粗字体</p>
<div id="GreenText">这是一个div,id="GreenText",设为绿色字体</div>
<p class="BoldText GreenText">段落二,id="BoldText GreenText",加粗绿色字体</p>
</body>
</html>实验结果：
2.利用CSS中的盒子浮动制作下图所示的静态网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CssFloat</title>
<style type="text/css">
html,body{height: 100%;}/*定义一个页面占整个画面的百分比*/
/*定义left类*/
#left{
font-size:20px;/*定义字体大小*/
background-color:red;/*定义背景颜色为红色*/
float: left;/*定义浮动范围在页面左边*/
width:20%;/*占页面宽度是百分之20*/
height:100%;
}
/*定义content类*/
#content{
text-align:center;
font-size:20px;
background-color:yellow;
float: left;
width:60%;
height:100%;
}
/*定义right类*/
#right{
font-size:20px;
background-color: darkgoldenrod;
width:20%;
float: left;
height:100%;
}
</style>
</head>
<body>
<div id="left">left</div>
<div id="content">content</div>
<div id="right">right</div>
</body>
</html>实验结果：