HTML&CSS实验(5)

最新推荐文章于 2022-06-21 18:06:24 发布

Pseudo_Programmer

最新推荐文章于 2022-06-21 18:06:24 发布

阅读量7.1k

点赞数 4

分类专栏：移动web应用设计文章标签：移动web应用设计

本文链接：https://blog.csdn.net/Pseudo_Programmer/article/details/78526785

版权

本次实验主要涉及HTML&CSS的样式定义，包括颜色、字体、文本格式、盒模型等。通过一系列实验，如HSL颜色实验、渐变阴影、网页布局等，深入理解CSS3的新特性，并探讨了不同浏览器对样式的兼容性问题。

摘要由CSDN通过智能技术生成

【实验目的】

学习颜色、字体、文本格式化和盒模型的样式定义。

【实验工具】

浏览器和编辑器。三种可选编辑方式：
（1）本地调试：记事本
（2）在线调试：http://172.18.187.11:8080/lab/html5/
（3）也可以采用Visual Studio或Dreamweaver等具有网页编辑功能的软件打开页面（在教学网站的软件下载处可以下载）。

【实验内容】

1、HSL颜色实验。利用http://172.18.187.11:8080/lab/html5/colorHSL.html滑动hue得到颜色相似的圆形，然后调整saturation、lightness、alpha后，截取圆形并填上hsla值和RGB值：

说明hue的取值特点：hue是色调，取值范围为0~360，颜色依次为红橙黄绿青蓝紫，其中0-红色；50-橙色；100-黄色；150-绿（每51一级，0和360都表示红色）。

2、(circle.html)分别采用径向渐变、线性渐变、半透明双重阴影实现下面三个类似的圆形：

截屏浏览器(ctrl+alt+PrintScreen)：

样式表如下：

  <style>
      div {
          border: solid 1px black;
          width: 80px;
          height: 80px;
          float: left;
          margin: 20px;
          border-radius:40px;
      }
      #test1 {
          background-image :radial-gradient(100px 80px at 20px 40px,white,blue 70%) ;
       }

      #test2 {
          background-image :linear-gradient(to right,white 0%,blue 60%) ;
       }

      #test3 {
          background-color: hsla(340,100%,50%,1);
          box-shadow: 6px 8px 30px #837f7f, inset -6px -8px 50px #494040;
       }
   </style>

3、通过设置样式实现类似下图的网页（paragraph.html）：

完成后保存网页（paragraph.html）并截屏：

样式表如下：

  <style>
      html {
        font-size:  20px;

      }
      div{
          padding:0 100px 0 100px;
          margin: auto;
      }
      h1,h2 {
          text-align :center;
      }
      p{
          text-indent:3em;
      }
   </style>

4、用white-space实现类似下图的页面（white-space.html）：

完成后保存网页（white-space.html）并截屏：

样式表如下：

 <style>
        h1,p{
            text-align :center;
        }
        p{
            white-space :pre;
        }
 </style>

5、用盒模型实现类似下图的页面（box.html）：

完成后保存网页（box.html）并截屏：

样式表如下：

 <style>
        html {
            font-size: 18px;
        }
        div{
            border:solid black;
            padding:20px;
            margin:20px 50px 20px 50px;
        }
        h1{
            text-align :center;
        }
        h1+p{
            border :solid blue;
        }
        h1+p~p{
            border:dashed  red
        }
        p {
            padding: