HTML&CSS实验(6)

【实验目的】

  学习布局和动画。

【实验工具】

  浏览器和编辑器。三种可选编辑方式：
  （1）本地调试：记事本
  （2）在线调试：http://172.18.187.11:8080/lab/html6/
  （3）采用Visual Studio或Dreamweaver等具有网页编辑功能的软件。

【屏幕录像】

  Camtasia：在上传实验报告的网站目录“软件下载/屏幕录制”中。

【实验内容】

  1、(wgw.html)设计一个类似下图（四幅）的页面，涉及的字体：宋体、隶书、楷体。标题栏采用position:relative，其中内容采用position:absolute。中间部分的宽度固定。
  (整个网页)

   （上）

   （下）网页滚动时header不动

  （缩窄）中间部分对中

  * 用opacity（取值0~1）模糊化div元素。星星采用transform:rotate()进行旋转。
   要求只修改样式（给出的部分内容仅供参考），不要修改body的内容。
   完成后截屏
   整个网页：

   上：

   下：

  缩窄：

  样式表如下：

 <style>        html {            font-family:宋体;            font-size:20px;        }        h1 {            font-size:36px;        }        body {           background: rgb(243, 243, 243);        }        #header {            background-color: black;            height: 50px;            width: 100%;            top: 0px;            position: fixed;            z-index: 2;        }        #header_inner {            width:980px;            margin: 0 auto;            position: relative;        }            #header_inner img {                margin-top: 5px;                height: 40px;                left: 2px;                position: absolute;                vertical-align: bottom;            }            #header_inner .nav {                float: right;                margin-top: 15px;                font-size: 15px;                right:10px;                position: absolute;                vertical-align: bottom;            }        #title_inner {            width: 980px;            margin: 0 auto;            margin-top: 60px;            border: 1px solid #cfbcbc;            padding: 0 0 0.2% 0;            position: relative;        }            #title_inner .bk {                background: url(images/wgw_main.jpg);                max-width: 980px;                min-width: 300px;                height: 300px;                opacity: 0.3; /* 透明度 */                background-size: cover;                overflow: hidden;            }            #title_inner h1 {                position: absolute;                top: 30px;                left: 375px;            }            #title_inner h2 {                position: absolute;                top: 60px;                left: 650px;                font-size: 15px;            }            #title_inner .author {                position: absolute;                top: 100px;                left: 450px;                width: 80px;                z-index: 3;                box-shadow: 2px 2px 10px #cfbcbc;            }        #title_inner #star1{            transform:rotate(30deg);            position: absolute;            top: 200px;            right: 50px;            width: 30px;        }        #title_inner #star2{            transform:rotate(50deg);            position: absolute;            top: 170px;            right: 100px;            width: 30px;        }        #title_inner #star3{            transform:rotate(0deg);            position: absolute;            top: 150px;            right: 150px;            width: 30px;        }        #title_inner #star4{            transform:rotate(30deg);            position: absolute;            top: 170px;            right: 200px;            width:30px;        }        #title_inner #star5{            transform:rotate(45deg);            position: absolute;            top: 200px;            right:250px;            width: 30px;        }        #title_inner #tj{            position: absolute;            top: 210px;            right: 150px;        }        #article_inner {            background-color :white ;            width: 980px;            margin: auto;            margin-top: 10px;            border: 1px solid #cfbcbc;        }        #article_inner p {            text-indent:2em;            font-family:KaiTi ;            line-height:1.5em;        }    </style>

   2、(dhs.html)只修改样式，用dhs_bk.png做多重背景实现与下图（六幅）类似的三列式布局。网页滚动或浏览器客户区变化时二维码保持在左上角。中间部分始终对中，边栏采用固定宽度。
   （完整）

   （宽、上）

   （宽、下）

   （窄、上）

   （窄、下）

   （最窄、上）

   完成后按上面方式截屏（共六幅）：
   （完整）

   （宽、上）

   （宽、下）

   （窄、上）

   （窄、下）

   （最窄、上）

  样式表如下：

 <style>        #ew{            position:fixed;            float:left;            z-index:2;        }        #container {            background: #c3c3c3;            /*width:100%;*/            max-width: 980px;            min-width: 700px;            margin: 0 auto;        }        #menu {            width: 100%;            height:25px;            background-color:#666666;            text-align :right ;            color: aliceblue;            z-index :3;        }        a{            color:aliceblue;            text-decoration :none;        }        #header {            background-color: #ffcccc;            width: 100%;            height: 250px;            overflow: hidden;            position :relative ;            z-index: 1;        }        #h-textbk {            transform: rotate(20deg);            opacity: 0.2;            margin-top: 15px;            margin-left: 10px;        }        #h-title {            text-shadow: 3px 3px 3px #808080;            position:absolute  ;            font-size: 3rem;            font-family: KaiTi;            font-weight: bolder;            top: 30%;            left: 30%;        }        #h-image {            width: 20%;            position: absolute;            border-radius: 150px /100px;            top: 20%;            right: 7%;        }        #l-aside, #r-aside {            width: 220px;            padding: 20px;        }        #l-aside {            float: left;        }        #r-aside {            float: right;        }        #r-title, #l-title {            background: linear-gradient(to right,white 0%,green 100%);            text-align: center;            font-size :1.2em;            margin-bottom: 10px;            margin-top :-15px;            height :25px;        }        #main {            background: white;            margin: -10px 250px 0 250px;            padding: 15px;        }        #main p{            text-indent :2em;        }        #footer {            border: 1px solid #ffcccc;            background: #ffcccc;            text-align: center;            font-weight: bold;        }        #footer span{text-decoration :underline ;}</style>

   3、(sysu.html)通过增加样式实现与下图和屏幕录像(sysu.mp4)类似的设计（只修改样式）：三个logo在10秒钟内同时匀速绕X轴、Y轴和Z轴旋转一圈（0~360deg）。

   完成后录制sysu.mp4并截屏：

  样式表如下：

 <style>          #d1, #d2, #d3 {              color: #096;              text-shadow: 3px 3px 3px #CCC;              width: 4.2em;              font-family: 楷体;              font-size: 48px;              border: solid 2px #096;          }          #d1 {animation: first infinite linear 10s;}          #d2 {animation: second infinite linear 10s;}          #d3 { animation: third infinite linear 10s; }        @keyframes first{                  0% {transform: rotateX(0);}                  25% { transform: rotateX(90deg); }                  50% { transform: rotateX(180deg); }                  75% { transform: rotateX(270deg);  }                  100% {transform: rotateX(360deg); }          }          @keyframes second {              0% {transform: rotateY(0);}              25% { transform: rotateY(90deg);}              50% { transform: rotateY(180deg);}              75% {transform: rotateY(270deg); }              100% { transform: rotateY(360deg); }          }          @keyframes third {              0% {transform: rotateZ(0); }              25% { transform: rotateZ(90deg); }              50% {transform: rotateZ(180deg);}              75% {transform: rotateZ(270deg);}              100% {transform: rotateZ(360deg);}          }      </style>

   4、(gyy.html) 根据以下截图和屏幕录像（gyy.mp4）做一个类似的设计（只修改样式）：动画总共3秒钟，前1.5秒scale从0.2变化到0.6、opacity从0变化到0.1、…。参考：animation，rotate，translate， border-radius，overflow。

  完成后录制gyy.mp4并截屏：

  样式表如下：

 <style>          #container {              width: 500px;              height: 700px;              margin: 20px auto;              background-color: #fcfbdf;              border: 1px solid #fcfbdf;              position :relative ;          }          #profile {              clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);              width: 200px;              border:1px solid  blue;              overflow: hidden;              position: absolute;              left: 30%;              margin-top: 45%;              animation: myfirst infinite linear;              animation-delay: 1s;              animation-duration: 3s;          }          @keyframes myfirst {              0% {                  transform: rotate(0deg) scale(0.2);                  opacity: 0;              }              50% {                  transform: rotate(180deg) scale(0.6);                  opacity: 0.1;              }              100% {                  transform: rotate(360deg) scale(1);                  opacity: 1;              }          }      </style>

  5、(leaf.html) 根据以下截图和屏幕录像（leaf.mp4）做一个类似的设计（只修改样式）。参考：animation ，translateY， rotateX，rotateY，opacity。

   完成后录制leaf.mp4并截屏：

  样式表如下：

 <style>        .leaf {            width: 40px;            height: 40px;        }        #bk {            width: 600px;            height: 600px;            margin: 0 auto;            padding: 20px;            background :url(images/leaf_bk.jpg) ;            z-index :-2;        }        @keyframes myfirst {            0% {                opacity: 0.1;                transform: translateY(0px) rotate3d(0，1,0,45deg);            }            25% {                opacity: 0.8;                transform: translateY(150px) rotateX(90deg);            }            50% {                opacity: 0.5;                transform: translateY(300px) rotateY(180deg) ;            }            75% {                opacity: 0.8;                transform: translateY(450px) ;            }            100% {                opacity: 0.9;                transform: translateY(600px);            }        }        @keyframes mysecond {            0% {                opacity: 0.7;                transform: translateY(0px) ;            }            25% {                opacity: 0.5;                transform: translateY(150px) rotateX(90deg);            }            50% {                opacity: 0.9;                transform: translateY(300px)  rotate3d(0，1,0,90deg);            }            75% {                opacity: 0.6;                transform: translateY(450px) rotateZ(180deg);            }            100% {                opacity: 0.9;                transform: translateY(600px) ;            }        }        #d1, #d2, #d3, #d4, #d5, #d6, #d7, #d8 {            background: url(images/leaf.gif);            width: 50px;            height: 50px;            position:absolute ;        }        #d1 {            animation: myfirst infinite running linear;            animation-duration: 3s;            left: 10%;        }        #d2 {            animation: mysecond infinite running linear;            animation-duration: 3.5s;            animation-delay: 0.5s;            left: 20%;        }        #d3 {            animation: myfirst infinite running linear;            animation-duration: 4s;            left: 30%;        }        #d4 {            animation: mysecond infinite running linear;            animation-duration: 3.5s;            left: 40%;        }        #d5 {            animation: myfirst infinite running linear;            animation-duration: 4s;            animation-delay: 0.5s;            left: 50%;        }        #d6 {            animation: mysecond infinite running linear;            animation-duration: 3s;            left: 60%;        }        #d7 {            animation: myfirst infinite running linear;            animation-duration: 4s;            animation-delay: 0.5s;            left: 70%;        }        #d8 {            animation: mysecond infinite running linear;            animation-duration: 3s;            left: 80%;        }    </style>

  6、(food.html) 根据以下截图和屏幕录像（food.mp4）做一个类似的设计（只修改样式）。用background-position显示图(food.jpg)的四个部分，用translate做动画。

  完成后录制food.mp4并截屏：

  样式：

   <style>          #container {              background: #eeeeee;              width: 350px;              height: 520px;              margin: auto;              border: 1px solid #eeeeee;          }          #food {              background: white;              width: 250px;              height: 250px;              margin: 90px auto;              margin-left: 80px;              z-index: -1;              border: 1px solid white;          }          #title {              text-align: center;              font-size: 2em;              font-weight: bolder;              margin-top :30px;          }          #description {              text-indent: 2em;              font-family :KaiTi ;              margin-top :30px;              font-size :20px;          }          .part {              display: inline-block;              background-image: url(images/food.jpg);              background-size: 220px 220px;              width: 121px;              height: 121px;          }          #p1 {              background-position: 0px 0px;              animation: myfirst running linear 4s;          }          #p2 {              background-position: 120px 0px;              animation: mysecond running linear 4s;          }          #p3 {              background-position: 0px 120px;              animation: mythird running linear 4s;          }          #p4 {              background-position: 120px 120px;              animation: myfourth running linear 4s;          }            @keyframes myfirst {              0% {                  transform: translate(-50px,-50px);              }              100% {                  transform: translate(0px,0px);              }          }          @keyframes mysecond {              0% {                  transform: translate(50px,-50px);              }              100% {                  transform: translate(0px,0px);              }          }          @keyframes mythird {              0% {                  transform: translate(-50px,50px);              }              100% {                  transform: translate(0px,0px);              }          }          @keyframes myfourth {              0% {                  transform: translate(50px,50px);              }              100% {                  transform: translate(0px,0px);              }          }      </style>

  7、(slides.html) 根据以下截图和屏幕录像（slides.mp4）做一个类似的设计（可以随意修改整个源码）。

   完成后录制slides.mp4并截屏：

   源码：

<!doctype html><html><head>    <title>slides</title>    <style>        #container {            margin:200px auto;            width: 800px;            overflow: hidden;        }        #slideMain {            width: 4000px;        }        .slide {            float: left;            position: relative;            width: 800px;        }        .slides,#slide1 {            animation: myfirst 10s;            animation-iteration-count: infinite;            animation-timing-function:ease-out ;        }        @keyframes myfirst {            0% { transform: translate(0px,0px); }            25% {transform: translate(-800px,0px);}            50% {transform: translate(-1600px,0px); }            75% {transform: translate(-2400px,0px); }            100% { transform: translate(-3200px,0px);            }        }    </style></head><body>    <div id="container">        <div id="slideMain">            <div class="slides">                <img class="slide" src="images/img11.jpg">                <img class="slide" src="images/img12.jpg">                <img class="slide" src="images/img13.jpg">                <img class="slide" src="images/img14.jpg">            </div>            <div id="slide1">                <img class="slide" src="images/img11.jpg">            </div>        </div>    </div></body></html>

【完成情况】

  是否完成了这些步骤？(√完成 ×未做或未完成)
  1 [√ ] 2 [√ ] 3 [√ ] 4 [√] 5 [√] 6 [√] 7[√]

【实验体会】

  （1）在对wgw.html进行样式设置时，需要注意以下几点：
  ①　题目要求网页滚动时header不动，即要采用定位技术，使header相对于浏览器窗口进行定位。
  ②　标题栏采用position:relative，其中的内容采用position:absolute。从而在放大缩小浏览器窗口时，其位置不改变。
  ③　为了使中间部分的宽度固定，要对其采用定宽而不使用百分比，即width: 980px;
  ④　非static元素的位置需要采用样式属性top、left、bottom、right进行设置，为了使各个元素之间的间距固定，这里依旧使用px而不使用百分比进行设置。
  ⑤　（头部的“主页、登录、注册”等）单纯设置float：right，并不会实现预期中的排版，需要额外使用position，最好使用right这一属性。

  （2）在对dhs.html进行样式设置时，我使用的方法是先在container元素里声明一个具有一定宽度范围（ max-width: 980px; min-width: 700px;）的框架，然后将这个框架的最底层颜色变为灰色，然后再对其每一个子元素进行样式设置，需要注意的有以下几点：
  ①　因为在container元素里将整个背景都设为了灰色，所以再在其上添加背景颜色时可以通过z-index来决定谁在上层，谁在下层。
  ②　因为题目要求中间部分始终对中，边栏采用固定宽度。因此边栏的宽度通过px来设定，而中间则自适应。
  ③　同样，标题栏采用position:relative，其中的内容采用position:absolute。从而在放大缩小浏览器窗口时，其位置不改变。
  ④　在将圆形设置为椭圆时，可以用border-radius来进行设置，border-radius: 150px /100px;其中，分母控制y轴，分子控制x轴。

  （3）在对gyy.html进行设计时，对图像运用了clip-path属性（即为图像添加一个裁剪路径）来对图像进行裁剪，使其变为一个菱形。但这个属性有一个缺点：当形状应用这个裁剪路径的时候，我们只能够看到裁剪路径所包含的那部分形状，而裁剪路径以外的形状就被隐藏掉了。实际上就相当于，在这个形状上增加一个镂空的蒙层。因此再对此形状运用border属性时不再有效。

  （4）在对food.html添加属性时，运用到了background-position这个属性，它的其中一个用法为 background-position: x% y%。其中，第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是100% 1 00%。而当用px表示时，左上角表示0px 0px。

  （5）在对slides.html进行样式设置时，为了实现幻灯播放的效果，我引入了第五张图片（即img11.jpg），方便图片的拼接（否则会出现空白格），为了使五张图片在同一行显示，我申请一个宽度为4000px的空间（每张图片宽度800px），然后使图片整体向左平移，而超出的部分则用overflow进行隐藏。