HTML&CSS实验(9)

【实验目的】

  学习常用的三列式布局和两个立体设计。

【实验工具】

  采用记事本编辑，也可以采用Visual Studio、Dreamweaver等具有网页编辑功能的软件打开并编辑页面，或者直接在Eclipse或netbeans下编辑运行。
  或者使用在线试：http://172.18.187.11:8080/lab/html9/

【安全设置】

  如果网页中有xss安全问题，在Chrome下运行在线调试会出现xss审计错误。解决方法是，先关闭所有Chrome窗口，然后找到Chrome程序，并使用以下命令启动Chrome：
  C:\Users\isszym\AppData\Local\Google\Chrome\Application\chrome.exe
    –args –disable-xss-auditor
  也可以在快捷方式中加入参数。

【实验内容】

  1、（layout1.html、layout1a.html）参考源码中给出的部分样式，并在只增改删样式的情况下参考下图及标注的属性（背景颜色bc、高h或宽w）设计一个类似的三列式布局。要求尽量通过类选择器合并样式属性。
  (layout1.html)

  去掉部分颜色后(layout1a.html)：

  完成后截图（两幅）：
  (layout1.html)

  (layout1a.html)

  样式源代码（layout1.html）：

<style>
        * {margin:0;padding:0;font:24px 黑体;}
        li{list-style-type:none}
        body {background:#FF8}
        .clear {clear:both}

        #header_outer,#footer_outer{background-color:#888;}
        .wrapper {margin: auto;width: 980px;}
        #header {height: 200px;background-color: #666;}
        #footer {height: 100px;background-color: #666;}

        #nav_outer{background-color:#AAA;}
        #nav{background-color:#555;height:40px;}
        #main1_outer{background-color:#CFC;}
        .main_l {
            background-color: #A55;
            width: 300px;
            float: left; /*padding:10px;*/
            padding:10px;
        }
        .main_r {
            background-color: #55A;
            width: 310px;
            float: right; /*height:370px;*/
            padding:10px;
        }
        .main_m{
            background-color:#aaaa66;
            height:370px;
            float:none;
            padding:10px;
        }
        .main_m  div {
                margin-left: 320px;
                margin-right: 330px;
        }
        .row1{background-color:#F88;height:140px;}
        .row2{background-color:#88F;height:200px;margin-top:10px;}
        .main_l div:nth-child(2) {height: 220px;}
</style>

  样式源代码（layout1a.html）：

<style>
        * {margin:0;padding:0;font:24px 黑体;}
        li{list-style-type:none}
        .clear {clear:both}

        #header_outer,#footer_outer{background-color:#888;}
        .wrapper {margin: auto;width: 980px;}
        #header {height: 200px;}
        #footer {height: 100px;}

        #nav_outer{background-color:#AAA;}
        #nav{height:40px;}
        #main1_outer{background-color:#CFC;}
        .main_l {
            width: 300px;
            float: left; /*padding:10px;*/
            padding:10px;
        }
        .main_r {
            width: 310px;
            float: right; /*height:370px;*/
            padding:10px;
        }
        .main_m{
            height:370px;
            float:none;
            padding:10px;
        }
        .main_m  div {
                margin-left: 320px;
                margin-right: 330px;
        }
        .row1{background-color:#F88;height:140px;}
        .row2{background-color:#88F;height:200px;margin-top:10px;}
        .main_l div:nth-child(2) {height: 220px;}
    </style>

  2、（layout2.html、layout2a.html）在layout1的基础上，在body中增加一个main部分，并修改样式设计成一个与下图类似的三列式布局。要求尽量通过类选择器合并样式属性。除了下图中标明的属性，其他的属性与原来的main部分的属性一样。

  去掉和修改部分颜色得到：

  完成后截图：
  (layout2.html)

  (layout2a.html)

样式源代码layout2.html)：

<style>
        * {margin:0;padding:0;font:24px 黑体;}
        li{list-style-type:none}
        body {background:#FF8;}
        .clear {clear:both}

        #header_outer,#footer_outer{background-color:#888;}
        .wrapper {margin: auto;width: 980px;}
        #header {height: 200px;background-color: #666;}
        #footer {height: 100px;background-color: #666;}

        #nav_outer{background-color:#AAA;}
        #nav{background-color:#555;height:40px;}
        #main1_outer{background-color:#CFC;}
        #main2_outer {background:#CFF;}  
        .main_l {
            background-color: #A55;
            width: 300px;
            float: left; /*padding:10px;*/
            padding:10px;
        }
        .main_r {
            background-color: #55A;
            width: 310px;
            float: right; /*height:370px;*/
            padding:10px;
        }
        .main_m{
            background-color:#aaaa66;
            height:370px;
            float:none;
            padding:10px;
        }
        .main_m  div {
                margin-left: 320px;
                margin-right: 330px;
        }
        .row1{background-color:#F88;height:140px;}
        .row2{background-color:#88F;height:200px;margin-top:10px;}
        .main_l div:nth-child(2) {height: 220px;}
        .main_m div:nth-child(2) {height: 190px;}
    </style>

样式源代码(layout2a.html)：
   <style>
        * {margin: 0; padding: 0; font: 24px 黑体;}
        li {list-style-type: none }
        .clear { clear: both}

        #header_outer, #footer_outer { background-color: #888;}
        .wrapper { margin: auto; width: 980px; }
        #header {height: 200px;}
        #footer {height: 100px; }

        #nav_outer {background-color: #AAA;}
        #nav { height: 40px;} 
        #main1_outer { background-color: #CFC;}
        #main2_outer {background: #CFF;}  
        .main_l {
            width: 300px;
            float: left; /*padding:10px;*/
            padding: 10px;
        }
        .main_r {
            width: 310px;
            float: right; /*height:370px;*/
            padding: 10px;
        }
        .main_m {
            height: 370px;
            float: none;
            padding: 10px;
        }
        .main_m div {
                margin-left: 320px;
                margin-right: 330px;
            }

        .row1 { background-color: #F88;height: 140px;}
        .row2 { background-color: #88F;height: 200px;margin-top: 10px;}
        .main_l div:nth-child(2) {height: 220px;}
        .main_m div:nth-child(2) {height: 190px; }
    </style>

  3、（选做）通过inset阴影形成凸出和凹陷3D盒子。原来的两个2D盒子如下面第一个图所示。下图(a)到(e)显示了把它们改造为两个3D框架(box-shadow.html)的前五个步骤的结果。除非指出，前五个步骤的投影偏移度和模糊度参考下图进行设置。

（a）先变为渐进颜色：
  box1，box3： 从浅灰色rgb(240,240,240)到白色(rgb(255,255,255))的10%处，后面全部白色。
  box2： 不变。白色，可能会有点看不清。
  box4： 从rgb(82, 207, 235)到 rgb(66, 162, 188)。
  然后变为圆角，参考效果见上面的图。
  完成后截屏：

   增加的样式：

#box1, #box3 {background: linear-gradient(rgb(240,240,240) 0%,rgb(255,255,255) 10%,white);}
#box4 {background: linear-gradient(rgb(82,207,235) 0%, rgb(66,162,188) 100%);}
#box1,#box2,#box3,#box4 {border-radius:2px;}

（b）三个盒子（box1,box2,box3）通过增加一个内嵌（inset）上移（y方向取负值）的阴影变为凸出盒子。上移多少决定了凸出的程度。阴影采用0.5透明度的黑色，其目的是颜色浅一些，并让盒子的颜色透过。参考效果见前面的图。
   完成后截屏：

（c）内盒子（box2）通过增加一个内嵌（inset）下移（y方向取正值）阴影变为凹陷盒子。下移多少决定了凹陷的程度。阴影采用0.1透明度的黑色（颜色更浅）。参考效果见前面的图。
  完成后截屏：

（d）外盒子（box1，box3）增加一个下移（y方向取正值）的阴影。阴影采用0.5透明度的黑色。参考效果见前面的图。
   完成后截屏：

（e）外盒子（box1，box3）都增加一个下移1px的inset白色阴影和一个原位置的1px的黑色阴影。参考效果见上面的图，上面的盒子红色边（左和上是inset造成的（本来是白色），上面的盒子蓝色边（右和下）就是另一个阴影造成的（本来是黑色）。这个主要用于增加一个框，凸出3D效果。
   完成后截屏：

（f）内盒子（box2，box4）也增加一个边框。box2采用下移1px的模糊度为5px的inset黑色阴影（透明度0.1）。box4采用下移1px的模糊度为5px的inset白色阴影（透明度0.2）。最后的效果如下图。

   完成后截屏：

   在（1）的基础上增加的样式：

        /*a增加样式*/
        #box1, #box3 {background: linear-gradient(rgb(240,240,240) 0%,rgb(255,255,255) 10%,white);}
        #box4 {background: linear-gradient(rgb(82,207,235) 0%, rgb(66,162,188) 100%);}
        #box3,#box4 {border-radius:2px;}
        /*b增加样式*/
        #box1,#box2,#box3{box-shadow:inset 0px -1px 5px rgba(0,0,0,0.5);}
        /*c增加样式*/
        #box2{box-shadow:inset 0 3px 5px rgba(0,0,0,0.1)}
        /*de增加样式*/
        #box1, #box3 {box-shadow: inset 0px -7px 5px rgba(0,0,0,0.5),inset 0px 1px 1px rgba(255,255,255,0.5), 0px 0px 7px rgba(0,0,0,0.5);}
        /*f增加样式*/
        #box2{box-shadow:inset 0px 1px 5px rgba(0,0,0,0.1) ;}
        #box4 { box-shadow:inset 0px 1px 5px rgba(255,255,255,0.2)}

（g）用通配符加上box-sizing:border-box。把这两个框通过修改高度宽度、padding、border-radius和立体感的厚度变为下图：

  完成后截屏：

（h）通过box1定义为相对位置，把box3放到里面去，并得到下图：

  完成后截屏：

   在（6）的基础上增加的样式：

        *{box-sizing:border-box;}
        #box1{
            box-sizing: border-box;
            width: 500px;
            height:150px;
            position:relative;
            z-index:-1;

        }
        #box3 {
            position: absolute;
            width: 90px;
            height: 90px;
            padding: 10px;
            top: 45px;
            right: 130px;
            z-index: 1;
        }
        #box3,#box4{border-radius:100% 100%;}

（i）在鼠标悬浮在box4上时背景颜色在0.3秒内用ease-out过渡到rgb(82, 207, 235)（原来是渐变色），cursor取值pointer，此时按钮会闪一下，见shadow-box.mp4
（j）当点击box4时，增加两个嵌入阴影：inset 0px 0px 5px rgba(0,0,0,0.3), inset 0px 3px 4px rgba(0,0,0,0.3)。目的是让按钮上部出现黑色阴影，有按键的感觉，见shadow-box.mp4

   完成后截图：

   样式(box-shadow.html)：

<style>
        body {background-color: seagreen;}
        html { font-size: 16px;}
        #box1 {
            width: 3rem;
            height: 3rem;
            margin: 0 auto;
            padding: 1rem;
            background: rgba(200,200,200,1);
        }
        #box2 {
            height: 100%;
            width: 100%;
            background: white;
        }
        #box3 {
            width: 12rem;
            height: 12rem;
            margin: 0 auto;
            padding: 1rem;
            background: rgba(200,200,200,1);
        }
        #box4 {
            height: 100%;
            width: 100%;
            background: rgb(82, 207, 235);
        }
        /*a增加样式*/
        #box1, #box3 {background: linear-gradient(rgb(240,240,240) 0%,rgb(255,255,255) 10%,white);}
        #box4 {background: linear-gradient(rgb(82,207,235) 0%, rgb(66,162,188) 100%);}
        #box3,#box4 {border-radius:2px;}
        /*b增加样式*/
        #box1,#box2,#box3{box-shadow:inset 0px -1px 5px rgba(0,0,0,0.5);}
        /*c增加样式*/
        #box2{box-shadow:inset 0 3px 5px rgba(0,0,0,0.1)}
        /*d,e增加样式*/
        #box1, #box3 {box-shadow: inset 0px -7px 5px rgba(0,0,0,0.5),inset 0px 1px 1px rgba(255,255,255,0.5), 0px 0px 7px rgba(0,0,0,0.5);}
        /*f增加样式*/
        #box2{box-shadow:inset 0px 1px 5px rgba(0,0,0,0.1) ;}
        #box4 { box-shadow:inset 0px 1px 5px rgba(255,255,255,0.2)}
        /*g,h增加样式*/
        *{box-sizing:border-box;}
        #box1{
            box-sizing: border-box;
            width: 500px;
            height:150px;
            position:relative;
            z-index:-1;

        }
        #box3 {
            position: absolute;
            width: 90px;
            height: 90px;
            padding: 10px;
            top: 45px;
            right: 130px;
            z-index: 1;
        }
        #box3,#box4{border-radius:100% 100%;}
        #box4:hover {
            background: rgb(82,207,235);
            transition: ease-out 0.3s;
            cursor: pointer;
        }
        #box4:active {box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3), inset 0px 3px 4px rgba(0,0,0,0.3);}
    </style>

  4、（选做）通过多重投影实现文字阴影(text-shadow.html)。参考实现：

  其中，box1~box3采用1重投影，box4采用2重投影，box5采用多重投影。
  box5的阴影:
  用原地投影增加边框，2px的黑色阴影，四个灰色阴影，颜色分别为#aaa，#999，#888，#666，模糊度分别为2px、4px、6px、8px。
  做两个透明度为0.5的黑色投影，下移6px和8px，模糊度分别为6px和20px。
  完成后截图：

  样式表如下：

    <style>
        html {font-size:16px;}
        div {
            font-family:微软雅黑;
            background: linear-gradient(to right,#F00, #600 90%);
            margin: 10px auto;
            padding: 10px;
            border-radius: 0.3333rem;
            width: 60rem;
            font-size:4em;
            font-weight:900;
        }
        /*text-shadow: x y z color x>0-右 y>0-下 z*/
        /*第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
        第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
        如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值*/
        #box1 {text-shadow: 1px 1px 1px #f5eeee;}
        #box2 {text-shadow: -1px -1px 1px #0a0a0a;}
        #box3 {text-shadow: 5px 5px 10px #0f0d0d;}
        #box4 {text-shadow: 2px 2px 10px #0f0d0d,2.5px 2.5px 5px #f5eeee;}
        #box5 {text-shadow: 0px 0px 2px black,0px 0px 2px #aaa,0px 0px 4px #999,0px 0px 6px #888,0px 0px 8px #666,0px 6px 6px rgba(0,0,0,0.5),0px 8px 20px rgba(0,0,0,0.5);}   
    </style>

【完成情况】

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

【实验体会】

  本次实验相对来说是比较简单的，只要细心一点基本上就可以完成了，在做第一个实验layout.html的时候需要注意高度的设置，其他的，根据老师的提示一步一步来即可。