web前端开发实验—

一、设计一个网页，页面内容为 “I can designe HTML page!”，背景色为黑色，字体颜色为白色，页面的样式使用内嵌的CSS定义。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>黑底白字</title><style type="text/css">body{background-color: black;}</style>
</head>
<body>
<div>
<div style="color: white;text-align: center">I can designe HTML page!</div>
</div>
</body>
</html>

二、建立democss.html文件，链接到样式表文件style1.css，并修改页面及样式文件，具体要求如下：

1、在style1.css中定义一个名为.title类样式，“字体”是“黑体”，“大小”为“30pt”，修饰为“无”。

2、在style1.css中定义一个名为“.text”类样式，“字体”为“微软雅黑”，大小为“20px”，颜色为“#666666”，修饰为无，行高为“36px”，首行缩进2个字符。

3、在style1.css中定义超级链接的普通状态样式和鼠标悬浮伪类别样式，普通状态“字体”为“宋体”，大小为“15px”，颜色为“green”，文本修饰为none。鼠标悬停时颜色为“red”，文本修饰为“下划线”。

4、在style1.css中定义名为img的样式，其中具体格式包括：四个边的边框值设置成不同的粗细，颜色，线型。

5、为超链接a标记应用2种伪类别，分别是普通状态样式和鼠标指向样式。在style1.css中定义body样式，设置背景颜色为浅蓝色#e9fbff。

6、将.title样式应用到标题文字“古天乐未看剧本即决定加盟《武林怪兽》”上，将.text样式应用到文字“时光网讯……电影《武林怪兽》将于12月21日全国公映。”之上。

democss.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接样式表</title><link href="style.css">
</head>
<body>
<h2 class="title">古天乐未看剧本即决定加盟《武林怪兽》</h2>
<div class="text">时光网讯……电影《武林怪兽》将于12月21日全国公映</div>
<a href="https://www.csdn.net/">CSDN 码农必不可少的学习网站</a><br>
<img  src="data:images/logo.jpg">
</body>
</html>

style.css：

body{background-color: #e9fbff;
}
.title{font-family: 黑体;font-size: 30pt;/*修饰为无*/text-decoration: none;
}
.text{font-family: 微软雅黑;font-size: 20px;color: #666666;text-decoration: none;line-height: 36px;text-indent: 2em;
}
a:link{font-family: 宋体;font-size: 15px;color: green;text-decoration: none;
}
a:hover{color: red;text-decoration: underline;
}img{border-width: 5px 7px 9px 12px ;border-style: dotted solid double dashed ;border-color: pink green palegreen palevioletred;
}

三、使用CSS的绝对定位，定义三行两列网页布局，为每个区域填充不同的颜色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style type="text/css">#juedui{width: 1000px; height: 800px;border: 1px solid black;position: relative;}.qukuai1{width: 1000px;height: 90px;background-color: plum;}.qukuai2{position: absolute;top: 102px;left: 3px;width: 290px;height: 590px;background-color: cornflowerblue;}.qukuai3{position: absolute;width: 700px;height: 590px;top: 102px;left: 302px;background-color: mediumpurple;}.qukuai4{position: absolute;width: 1000px;height: 90px;background-color: brown;top: 700px;}</style></head>
<body>
<div id="juedui"><div class="qukuai1">区块一</div><div class="qukuai2">区块2</div><div class="qukuai3">区块三</div><div class="qukuai4">区块四</div>
</div></body>
</html>

四、通过CSS的相对定位，定义三行两列网页布局，为每个区域填充不同的颜色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style type="text/css">#juedui{width: 1000px; height: 800px;border: 1px solid black;position: relative;}.qukuai1{width: 1000px;height: 90px;background-color: plum;}.qukuai2{position: relative;top: 2px;left: 3px;width: 290px;height: 590px;background-color: cornflowerblue;}.qukuai3{position: relative;width: 700px;height: 590px;top: -590px;left: 302px;background-color: mediumpurple;}.qukuai4{position: relative;height: 90px;top: -585px;background-color: brown;}</style></head>
<body>
<div id="juedui"><div class="qukuai1">区块一</div><div class="qukuai2">区块2</div><div class="qukuai3">区块三</div><div class="qukuai4">区块四</div>
</div></body>
</html>

五、使用浮动定位方式来实现类似于咸阳师范学院网站内页的布局，具体要求如下：

1、在网页文件中定义5个div，名称分别为logo、nav、leftnav、center和cpright。

2、使用position属性为div布局。

3、分别为top、nav、left、content和 cpright盒子中添加文字或图片。

<!DOCTYPE html>
<html>
<head><title>   </title><style type="text/css">html{text-align: center;}body{width: 1000px;text-align: left;margin: 0 auto;}*{padding:0;margin-bottom: 0;}.top{height: 100px;width:100%;background-image: url("images/logodht.jpg");}.banner{width:100%;height:240px;background-image: url("images/banner.jpg");}.thisposition{padding:0;margin: 0;color:#2b2b2b;font-family: 微软雅黑;font-size: 13px;text-indent: 20px;}.left{float:left;width:250px;height: 500px;background-image: url("images/left.jpg");}.right{float:right;width:700px;height:500px;background-image: url("images/right.jpg");}.bottom{height: 24px;width: 100%;background-image: url("images/cpright.jpg");clear: both;}</style>
</head>
<body>
<div class="top"></div>
<div class="banner"></div>
<div class="thisposition">当前位置：首页>机构设置>教学单位</div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom">bottom</div></body>
</html>