单元3 上机实验作业-JZTXT

1. 图书清单

实验步骤:

header部分使用<header>标签中嵌套 <img> 标签引入图片；两个大的商品模块由类名为items的<div>标签构成，在div.items中使用多个类名为item的<div>标签组成多个商品块。
商品信息中qq图标为gif格式的图片，为了控制不同的文本样式，图书价格信息需要在<div>中嵌套<i>标签。

③在热销教材和精品套系两个模块使用了渐变色。

为每个图书商品添加阴影，当鼠标悬停在每个商品上面时，显示价格等信息的<div>层，该层是半透明的效果，使用“background-color: rgba(88,166,240,0.8);”来实现。

⑤ rgb 表示Red Green Bule 3色，rgba前三个参数表示三色的值混合，最后一个参数0.8 则是指的透明度，1或100% 表示不透明。

代码部分：

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书城</title>
    <link rel="stylesheet" href="./css/book.css">
</head>
<body>
  <header><img src="images/tou.png"  alt=""></header>
    <div class="items">
        <div class="item"><div class="p">热销教材</div></div>
        <div class="item">
            <div class="pic">
                <img src="images/1.png" alt="">
            </div>
            <div class="desc">
             <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="联系卖家" src="images/qq.gif"></a>
             </div>
            </div>
        </div>
        <div class="item">
            <div class="pic">
                <img src="images/3.png" alt="">
            </div>
            <div class="desc">
                <div class="detail"><i>￥36.00</i>[已售7件]
                    <a href="#" ><img border="0" title="联系卖家" alt="联系卖家" src="images/qq.gif"></a>
                </div>
              </div>
        </div>
        <div class="item">
            <div class="pic">
                <img src="images/4.png" alt="">
            </div>
            <div class="desc"> <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="联系卖家" src="images/qq.gif"></a>
            </div>
              </div>
        </div>
        <div class="item">
            <div class="pic">
                <img src="images/5.png" alt="">
            </div>
            <div class="desc"> <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="联系卖家" src="images/qq.gif"></a>
            </div>
            </div>
        </div>
    </div>
     <div class="items">
        <div class="item"><div class="p">精品套系</div></div>
        <div class="item">
            <div class="pic">
                <img src="images/6.png" alt="">
            </div>
            <div class="desc"> <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="" src="images/qq.gif"></a>
            </div>
               </div>
        </div>
        <div class="item">
            <div class="pic">
                <img src="images/7.png" alt="">
            </div>
            <div class="desc"> <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="" src="images/qq.gif"></a>
            </div>
            </div>
        </div>
        <div class="item">
            <div class="pic">
                <img src="images/8.png" alt="">
            </div>
            <div class="desc">
                <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="联系卖家" src="images/qq.gif"></a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="pic">
                <img src="images/9.png" alt="">
            </div>
            <div class="desc"> <div class="detail"><i>￥36.00</i>[已售7件]
                <a href="#" ><img border="0" title="联系卖家" alt="联系卖家" src="images/qq.gif"></a>
            </div>
            </div>
        </div>
    </div>
</body>
</html>

css 部分


body {
    margin: 0;
    padding: 0;
    background-color: #F7F7F7;
}
header,.items{
    margin-bottom: 20px;
    width: 1250px;
    height: 400px;
    padding-left: 20px;
    margin: 10px auto;
}
.items {
    height: 320px;
}
.p {
    background-color: #2A809D;
    height: 320px;
    background-image: linear-gradient(
            to bottom,
            #4b6db9 20%,
            #b2d3ff 80%
    );/*设置该元素背景自上而下的线性渐变*/
    font-family: 'Microsoft Yahei';/*设置字体为微软雅黑*/
    font-size:30px;
    font-weight:bold;
    color:#fff;
    padding-top:40px;
    line-height:30px;/*文本行高为30px*/
}
.item {
    width: 230px;
    height: 300px;
    text-align: center;/*文字水平居中*/
    margin-right: 20px;
    background-color: #FFF;
    float: left;
    position: relative;
    top: 0;
    overflow: hidden;
    transition: all .5s;/*Css3新增动画属性：过渡，all(默认值)指所有属性改变，整个转换过程在0.5s内完成。*/
    box-shadow:  #41a8ff 0px 5px 5px ;/*盒阴影：向下偏移5px模糊值5px颜色为#41a8ff*/
}
.pic {
    margin-top: -15px;
    margin-left: -35px;

}
.desc {
    position: absolute;/*绝对定位*/
    bottom: -100px;
    width: 100%;/*宽度是父元素宽度的100%*/
    height: 100px;
    background-color: #58A6F0;
    transition: all .5s;
    background-color: rgba(88,166,240,0.8);

}
/*当鼠标悬停在该元素时，该元素绝对定位在父元素顶部-5px的位置，并且盒阴影为模糊度15px的#AAA色*/
.item:hover {
    top: -5px;
    box-shadow: 0 0 15px #AAA;
}
/*当鼠标悬停在类名为item的元素上时，该元素的类名为.desc的子元素绝对定位，其底部与父元素底部对齐*/
.item:hover .desc {
    bottom: 0;
}
.detail{
    font-weight: bold;
    font-size: 20px;
   margin-top: 50px;
}
.detail i{color: red;}

‍

2. 多肉商城

‍

实验步骤：

① 页面头部由<header>标签嵌套<img>标签构成，

② 每个商品由<div>标签嵌套<img>标签构成、商品上面的文字层由<div>标签嵌套<h3>和<p>标签构成，

③ 商品列表下方文字由<section>标签嵌套<p>标签构成，页面最下面的部分由<footer>标签嵌套<p>标签和<div>标签构成。

④ “最新肉肉”按钮使用了CSS圆角边框。

⑤ 当鼠标悬停到每个商品上面时，会显示出文字信息的

层，该层上应用了旋转和过渡组合，形成了旋转出现的动画效果，z-index值设置为4000，因为要显示在最上面。

⑥ 商品图片层中间还有两个交汇的三角形的效果。

代码结构

plant.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多肉植物商城</title>
    <link rel="stylesheet" href="./css/plant.css">
</head>
<body>
<header><img src="./images/head.jpg"></header>
<div class="border-radius">最新肉肉</div>
<div class="main">
    <div class="view">
        <img src="./images/1.jpg">
        <div class="hover">
            <h3>多肉仙人掌</h3>
            <p>多肉植物防辐射 肉肉植物花卉绿植盆栽</p>
        </div>
    </div>
    <div class="view">
        <img src="./images/2.jpg">
        <div class="hover">
            <h3>创意组合</h3>
            <p>多肉组合盆栽净化空气办公桌礼物套餐</p>
        </div>
    </div>
    <div class="view">
        <img src="./images/3.jpg">
        <div class="hover">
            <h3>创意组合</h3>
            <p>多肉多肉多肉多肉多肉多肉</p>
        </div>
    </div>
    <div class="view">
        <img src="./images/4.jpg">
        <div class="hover">
            <h3>多肉仙人掌</h3>
            <p>多肉植物防辐射 肉肉植物花卉绿植盆栽</p>
        </div>
    </div>
    <div class="view">
        <img src="./images/5.jpg">
        <div class="hover">
            <h3>创意组合</h3>
            <p>多肉组合盆栽净化空气办公桌礼物套餐</p>
        </div>
    </div>
    <div class="view">
        <img src="./images/6.jpg">
        <div class="hover">
            <h3>创意组合</h3>
            <p>多肉多肉多肉多肉多肉多肉</p>
        </div>
    </div>
    <div class="view">
        <img src="./images/7.jpg">
        <div class="hover">
            <h3>创意组合</h3>
            <p>多肉组合盆栽净化空气办公桌礼物套餐</p>
        </div>
    </div>
    <div class="view">
        <img src="./images/8.jpg">
        <div class="hover">
            <h3>创意组合</h3>
            <p>多肉多肉多肉多肉多肉多肉</p>
        </div>
    </div>
    <section>
        <p>多肉植物（succulent plantA）是指植物的根、茎、叶三种营养器官中叶是肥厚多汁并且具备储藏大量水分功能的植物，也称“黄丽”。其至少具有一种肉质组织，这种组织是一种活组织，除其他功能外，它能储藏可利用的水，在土壤含水状况恶化、植物根系不能再从土壤中吸收和提供必要的水分时，它能使植物暂时脱离外界水分供应而独立生存。据粗略统计，全世界共有多肉植物一万余种，在分类上隶属100余科。</p>
    </section>
    <footer>
        <p style="font-family: 楷体;">偏安一偶  精精生活</p>
        <div class="services">品质保障|七天无理由退换货|特色服务体验</div>
    </footer>
</div>
</body>
</html>

plant.css

body{
    margin: 0;
    padding: 0;
    background-color: #F7F7F7;
}
header{
    text-align: center;
    height: 450px;
    margin-top: 20px;
}
section{
    width: 880px;
    margin: 0 auto;
    background-color: #AAE6DA;
}
section>p{
    font-family: '';
    font-size: 18px;
    color: #ffffff;
    line-height: 30px;
    padding: 20px;
    text-indent: 2em;
}
footer{
    width: 880px;
    margin: 0 auto;
}
footer>p{
    font-size: 35px;
    color: #AAE6DA;
    line-height: 20px;
    padding: 20px;
    text-align: center;
}
.services{
    font-family: 'Microsoft Yahei';
    font-size: 15px;
    color: #374136;
    padding-bottom: 50px;
    text-align: center;
}
.border-radius{
    width: 200px;
    height: 50px;
    margin: 35px auto;
    background-color: #AAE6DA;
    border: 5px solid #ffffff;
    border-radius: 50px;
    font-family: 'Microsoft Yahei';
    font-size: 25px;
    color: #ffffff;
    line-height: 50px;
    text-align: center;
}
.border-radius:hover{
    top: -5px;
    box-shadow: 0 0 15px #AAA;
}
.main{
    width: 880px;
    border: 1px solid #CCC;
    height: 440px;
    margin: 0 auto;
}
.view{
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin: 10px;
    float: left;
}
.hover{
    width: 200px;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 40px;
    left: 0;
    text-align: center;
    color: #ffffff;
    transform: rotate(55deg);
    transition: all 0.5s;
    overflow: hidden;
    height: 0;
    z-index: 4000;
}
.hover h3{
    color: #ffffff;
    border-bottom: 2px solid rgba(76,179,77,0.5);
    padding-bottom: 10px;
}
.view:hover .hover{
    height: 120px;
    transform: rotate(0deg);
}
.view:before{
    content: "";
    position: absolute;
    top: -240px;
    right: 0;
    width: 360px;
    height: 360px;
    background: rgba(133,203,190,0.5);
    transform: rotate(55deg) translateX(60px);
}
.view:hover:before{
    top: 0;
}
view:after{
    content: "";
    position: absolute;
    bottom: -240px;
    left: 0;
    width: 360px;
    height: 360px;
    background: rgba(133,203,190,0.5);
    transform: rotate(55deg) translate(-60px);
    transfrom-origin: 0% 100%;
    transition: all 0.5s ease 0.3s;
}
.view:hover{
    bottom: 0px;
}

3. 摇晃的桃子

实验步骤：

① 为类名为act_wrapper的<div>标签设置背景图，其中包括桃树树枝的部分。

② 在类名为act_content的<div>标签中嵌套<p>标签，用来添加“摇晃的桃子”文字。

③ 六个桃子使用<span>标签+CSS3精灵技术完成，为了每个桃子的定位，需要在<span>标签外层使用<div>标签。

④ 桃子左右摇晃的效果使用CSS3的动画技术来实现。

代码截图：

peach.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 实现摇晃的桃子动画特性</title>
   <link rel="stylesheet" href="./css/peach.css">
</head>

<body>
    <div class="act_wrapper">
        <div class="act_content">
            <div class="mod_style">
                <p>摇晃的桃子</p>
                <span class="peach peach1 shake1"></span>
                <span class="peach peach2 shake2"></span>
                <span class="peach peach3 shake3"></span>
                <span class="peach peach4 shake4"></span>
                <span class="peach peach5 shake5"></span>
                <span class="peach peach6 shake6"></span>
            </div>
        </div>
        <dic class="act_bg"></dic>
    </div>
</body>

</html>

peach.css

.act_wrapper {
    position: relative;
    z-index: 1;/*元素堆叠顺序,正数表示离用户近*/
    /*元素最小宽度为1000px*/
    min-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}
.act_wrapper .act_content {
    position: relative;
    z-index: 2;
    width: 1000px;
    height: 1200px;
    margin: 0 auto;
    margin-top: -569px;
}
.mod_style {
    position: absolute;
    top: 716px;
    left: 200px;
    width: 870px;
    height: 560px;
}
/*背景图片*/
.act_wrapper .act_bg {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1;
    width: 1920px;
    margin-left: -1350px;
    background: url(../images/bg.jpg) 100% 0 no-repeat;
    height: 750px;
}
p {
    font-family: "微软雅黑";
    font-size: 40px;
    position: absolute;
    top: -100px;
    left: 0px;
}
.peach {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 100px;
    /*设置背景图片*/
    background: url(../images/peach.png) no-repeat 0 0;
}
.peach1 {
    background-position: 0 0;
    top: 100px;
    left: 72px;
}
.peach2 {
    background-position: 0 -115px;/*取peach.png中第几个桃子*/
    top: 39px;
    left: 242px;
}
.peach3 {
    background-position: 0 -215px;
    top: 71px;
    left: 452px;
}
.peach4 {
    background-position: 0 -328px;
    top: 156px;
    left: 261px;
}
.peach5 {
    background-position: 0 -435px;
    top: 256px;
    left: 412px;
}
.peach6 {
    background-position: 0 -545px;
    top: 247px;
    left: 575px;
}
.shake1 {
    animation-duration: 2.5s;
}
.shake2 {
    animation-duration: 3.5s;
}
.shake3 {
    animation-duration: 1.5s;
}
.shake4 {
    animation-duration: 4s;
}
.shake5 {
    animation-duration: 3s;
}
.shake6 {
    animation-duration: 4s;
}
.shake1,.shake2,.shake3,.shake4,.shake5,.shake6 {
    /*播放次数：无限*/
    animation-iteration-count: infinite;
    /*播放动画名称：shake*/
    animation-name: shake;
    /*设置动画速度曲线：以低速度开始和结束*/
    animation-timing-function: ease-in-out;
}
/*定义动画名称：shake*/
@keyframes shake {
    0% {
        transform: rotate(2deg);
        transform-origin: 50% 0;
    }
    20% {
        transform: rotate(10deg);
        transform-origin: 50% 0;
    }
    40% {
        transform: rotate(0deg);
        transform-origin: 50% 0;
    }
    60% {
        transform: rotate(-2deg);
        transform-origin: 50% 0;
    }
    80% {
        transform: rotate(-10deg);
        transform-origin: 50% 0;
    }
    100% {
        transform: rotate(0deg);
        transform-origin: 50% 0;
    }
}