引言
任务一
实现如简单两列布局。整个页面宽度为960px，背景颜色为#CFF。左侧盒子宽度为740px，背景颜色为#C9F，右侧盒子宽度为210px，背景颜色为#FCF。左侧和右侧盒子的高度均为300px。如图：
任务二
设计如图所示的简单无序列表，并为每个列表项添加超链接。每个列表项的宽度为50px，高度为30px，列表中的文字在水平和垂直方向上均居中显示，超链接初始状态和访问后的状态均为黑色无下划线，鼠标经过和点击时文字均为白色，无下划线，背景颜色为#BE3948。如图：
任务三
设计如下功能，要求当前页的页码要显示红色背景，其他页页码在鼠标经过时显示红色背景。
环境
- html6
- css
- javascript
- Dreamweaver2020
具体过程
任务一
- 在body标签中添加一个div，设置其class属性为mainBox。在mainBox中添加两个div，其class属性分别为leftBox和rightBox。
<body>
<div class="mainBox">
<div class="leftBox"></div>
<div class="rightBox"></div>
</div>
</body>
- 在页面中定义mainBox、leftBox、rightBox的CSS样式。
<style type="text/css">
.mainBox{
width: 960px;
height:300px;
background-color: #CFF;
}
.leftBox{
width: 740px;
height:300px;
float: left;
background-color: #C9F;
}
.rightBox{
width: 210px;
height:300px;
float: left;
margin-left: 10px;
background-color: #FCF;
}
</style>
-
最后的效果：
任务二
- 在的body中添加一个无序列表。为每一个列表项设置空链接（#）。
<body>
<h3>课程难度</h3>
<ul>
<li><a href="#">全部</a></li>
<li><a href="#">初级</a></li>
<li><a href="#">中级</a></li>
<li><a href="#">高级</a></li>
</ul>
</body>
- 设置对应的css样式
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;/*使列表水平排列*/
}
a:link,a:visited{
display: block;/*将超链接改为块状元素，可以应用宽高属性*/
width: 50px;
text-align: center;
line-height: 30px;/*垂直居中对齐*/
text-decoration: none;/*去掉超链接默认的下划线*/
color: black;/*去掉超链接默认的蓝色*/
}
a:hover,a:active{
background-color:#C00003;
color: white;
}
</style>
-
最后的效果：
任务三
- 在body中插入无序列表和超链接，为当前页面的超链接添加class：currentPage。
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#"><</a></li>
<li><a class="currentPage" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">···</a></li>
<li><a href="#">></a></li>
<li><a href="#">末页</a></li>
</ul>
</body>
- 设置相应的css样式
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;
}
a:link,a:visited{
display: inline-block;/*为了使超链接能适应文字宽度同时又能有边距*/
margin: 6px;
border: 1px solid #E8E8E8;
padding: 5px 12px;
text-align: center;
text-align: center;
text-decoration: none;
color: black;
}
a.currentPage,a:hover,a:active{
background-color:#C00003;
border: none;
padding: 6px 13px;/*去掉边框之后总宽高不变*/
color: black;
}
</style>
-
最后的效果image.png
总结
- 理解block、inline、inline-block的不同
- 通常使用<ul>元素来制作导航栏
