实训4-9 制作网页焦点图
一、 实训目的
1. 理解元素的浮动，能够为元素设置浮动样式；
2. 熟悉清除浮动的方法，可以使用不同方法清除浮动；
3. 掌握元素的定位，能够为元素设置常见的定位模式；
4. 实训过程中，重点关注：元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性。
二、 案例描述
制作一个HTML5网页焦点图“网页焦点图.html”，默认效果如图1所示。
图1 网页焦点图默认效果
当鼠标移上图1焦点图时，两侧将会出现焦点图切换按钮，效果如图2所示。
图2 鼠标移上焦点图效果
三、 分析效果图
1. 结构分析
观察效果图1不难看出，焦点图模块整体上可以分为3部分：焦点图、切换图标、切换按钮。焦点图可以使用<img>标记；切换图标由6个小图标组成，可以使用无序列表<ul>、<li>搭建结构；焦点图切换按钮可以使用两个<a>标记定义。效果图2对应的结构如图3所示。
图3 焦点图页面结构图
2. 样式分析
控制效果图2的样式主要分为4个部分，具体如下：
（1） 通过<div>对整个页面进行整体控制，需要设置相对定位方式。
驽马铅刀（2） 通过<a>标记控制左右两侧的切换按钮样式及其位置，并设置左浮动样式。
（3） 通过<ul>>整体控制切换图标模块，需要设置绝对定位方式。
（4） 通过<li>控制每一个切换小图标，需要设置每个小图标的显示效果。电动车停放通知
四、 案例实现
1. 常规准备工作
启动Hbuilder，在Hbuilder中新建web项目“实训4-9”，建议建在D盘根目录。
将实训4-9更名为“学号最后两位+姓名-实训4-9”，称为 “实训文件夹”
2. 制作页面结构
在“实训文件夹”中新建HTML页面“网页焦点图.html”
拷贝网页素材图片到相应Img文件夹。
使用HTML标记搭建页面结构，参考代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>网页焦点图</title>
6 </head>
7 <body>
8 <div>
9 <img src="images/11.jpg" alt="网页焦点图">
10 <a href="#"class="left"><</a>
11 <a href="#" class="right">></a>
12 <ul>
13 <li class="max"></li>
14 <li></li>
15 <li></li>
16 <li></li>
17 <li></li>
18 <li></li>
19 </ul>
20 </div>
21 </body>
22 </html>
结构中，通过最外层的<div>对车载音乐页面进行整体控制，并使用<img>标记插入焦点图片。同时，定义class为html个人网页完整代码图片left和 right的两对<a><a>标记，来搭建焦点图左右两侧切换按钮的结构。另外，使用<ul>、<li>搭建切换图标模块的6个小图标。运行以上代码，效果如图4所示。
图4 HTML结构页面效果
3. 定义CSS样式
搭建完页面的结构，接下来为页面添加CSS样式。采用从整体到局部的方式实现图1、图2所示的效果，具体如下。
（1） 在“实训文件夹”中新建一个CSS文件，命名为“网页焦点图.css”
（2） 定义基础样式
首先定义页面的统一样式，具体CSS代码如下：
/*重置浏览器的默认样式*/
*{margin:0; padding:0; border:0; list-style:none;}
/*全局控制*/
a{text-decoration:none; font-size:30px;color:#fff;}
（3） 控制整体大盒子
制作页面结构时，我们定义了一对<div></div>来对网页焦点图模块进行整体控制，设置其宽度和高度固定。由于切换按钮和切换图标需要依据大盒子进行定位，所以需要对其设置相对定位方式。另外，为了使页面在浏览器中居中，可以对其应用外边距属性margin。具体CSS代码如下：
div{ /*整体控制页面*/
width:580px;
height:200px;
margin:50px auto;
position:relative; /*设置相对定位*/
url在线转码 }
css视频教程全集免费（4） 整体控制左右两边的切换按钮
通过效果图2可以看出，当鼠标移上焦点图时，图片两侧会添加焦点图切换按钮，需要为<a>元素应用float属性，并设置宽高、背景。另外，切换按钮显示为圆角、半透明效果，需要对其设置圆角边框样式，并设置背景的不透明度。同时，设置切换按钮中的文本样式。最后，通过“transport和transmitdisplay:none;”设置按钮隐藏。具体CSS代码如下：
a{ /*整体控制左右两边的切换按钮*/
float:left;
width:25px;
height:90px;
line-height:90px;
background:#333;
opacity:0.7; /*设置元素的不透明度*/
border-radius:4px;
text-align:center;
display:none; /*把a元素隐藏起来*/
cursor:pointer; /*把鼠标指针变成小手的形状*/
}
（5） 控制左右两侧切换按钮的位置和状态
由于左右两侧的切换按钮位置不同，需要分别对其进行绝对定位，并设置不同的偏移量。另外，当鼠标移上焦点图时，图片两侧的切换按钮将会显示，需要对其应用“display:block;”样式。具体CSS代码如下：
.left{ /*控制左边切换按钮的位置*/
position:absolute;
left:-12px;
top:60px;
}
.right{ /*控制右边切换按钮的位置*/
position:absolute;
right:-12px;
top:60px;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论