学生实训课题报告 Web应用实战 Web应用程序开发 实践练习二.doc

Web应用程序开发

实践练习二

专业：

专业：电子商务

班级：电商2201

姓名：马彧硕

学号：0902220115

实践练习1CSS特性

一相关知识点

在CSS中，要想将CSS样式应用于特定的HTML标签，首先需要找到该目标标签。CSS选择器的作用就是从HTML页面中找出特定的某类元素。伪选择器不是直接对应HTML中定义的元素，而是向选择器增加特殊的效果。伪选择器比较特殊，分为伪元素(对象)选择器和伪类选择器两种。伪类可以看作以选中元素为基准点，此元素的一些状态或属性。

动画是使元素从一种样式逐渐变化为另一种样式的效果。CSS3可以创建动画，它可以取代许多网页动画图像、Flash动画和JavaScript实现的效果。@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。@keyframes创建动画，用百分比来规定变化发生的时间，0%是动画的开始，100%是动画的完成，为了得到最佳的浏览器支持，应该始终定义0%和100%选择器。@keyframes创建的动画，需要绑定到一个选择器，在选择器中规定动画的名称和动画的时长，否则动画不会有任何效果。

二练习目的

熟悉伪元素选择器和伪类选择器，掌握box-shadow和animation的使用。

三练习题

参见shopping文件夹中的index.html，按照下面要求改进index.css。（请参考《CSS特性》）

将服装列表中的奇数项图片圆角边框设为50%。

为服装列表中的偶数项图片添加阴影。

为风车图片(windmill.png)添加旋转动画。

index.css代码：

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{

margin:0;

padding:0;

}

/*清理默认li样式*/

li:nth-child(odd)img{

border-radius:50%

}

li:nth-child(2n)img{

box-shadow:5px5px5pxgrey

}

/*单数圆角边框50%，偶数灰色阴影*/

ul{

list-style:none;

}

/*显示为块级元素*/

img{

display:block;

}

/*清理左右浮动*/

.clear:after{

content:;

display:block;

clear:both;

}

.box{

width:100%;

}

.box.con{

width:1375px;

margin:0auto;

}

.box.conul{

padding-top:30px;

}

/*设置为左浮动*/

.box.conulli{

float:left;

width:250px;

margin:022px22px0;

border:1pxsolid#eee;

}

.box.conulliimg{

margin:15pxauto0;

}

.box.conullip{

padding:15px;

}

/*鼠标进入添加1像素的红色实线*/

.box.conulli:hover{

border:1pxsolidred;

}

.box2{

overflow:hidden;

width:400px;

margin:30pxauto;

}

.box2img{

width:100%;

display:block;

}

@keyframesrotate{

0%{-webkit-transform:rotate(0deg);}

25%{-webkit-transform:rotate(90deg);}

50%{-webkit-transform:rotate(180deg);}

75%{-webkit-transform:rotate(270deg);}

100%{-webkit-transform:rotate(360deg);}

}

.img1{animation:rotate0.5slinearinfinite;}

/*风车旋转*/

页面执行效果(截图)：

实践练习2网页布局

一相关知识点

通常做弹出菜单的时候会用到定位，父元素设置为相对定位position:relative，