实验三 使用CSS3
一、实验目的
1、体会HTML编程;
2、掌握CSS3
二、实验内容
- 创建如下图的框架页面,图片任选。下方左侧的菜单导航可以是静态的
- 实现下方页面的css布局。图片任选
要求首页部分的导航条实现当鼠标悬停时的反色显示
1.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>copy</title>
<style type="text/css">
#div001{
background-color: aqua;
}
.div002{
font-size: x-large;
background-color: cadetblue;
}
.button001{
font-size: large;
background-color: blue;
border-bottom: aqua;
border-style: solid;
}
#selection1{
float: left;
width: 33%;
background-color: cadetblue;
}
#selection2{
float: left;
width: 33%;
}
#selection3{
float: right;
width: 33%;
background-color: cornflowerblue;
}
#tuijianwenzhang{
font-size: 30px;
}
</style>
</head>
<body>
<div>
<img src="~M]V7L($21JQXOF8U}FO2{M.png" height="30%" width="100%"/>
</div>
<div id="div001">
<button class="button001">首页导读</button>
<button class="button001">