Web实验十 HTML5基础与CSS3应用

一、实验目的：

1、掌握HTML5页面结构组成元素

2、掌握HTML5新增页面元素

3、掌握HTML5新增的表单属性

4、了解CSS3新特性

二、实验内容：

1、完成以下效果的网页设计：

网页效果图

在这里插入图片描述

2、网页设计要求如下：

（1）文字分别使用h3和p标签实现。

（2）所有按钮默认的边框半径为4px，上下填充为12px，左右填充为20px，行间距为14px，边框线长度为1，边框线样式为solid。样式过渡时间为1s。

（3）对于基础用法中的按钮，默认按钮的边框颜色为#dcdfe6，字体颜色为#606266。当鼠标放在默认按钮上时，字体颜色为#409eff，边框颜色为#c6e2ff，背景颜色为#ecf5ff。主要按钮的字体颜色为#fff，背景颜色和边框颜色为#409eff。当鼠标放在主要按钮上时，边框颜色和背景颜色为#66b1ff。鼠标放在默认按钮和主要按钮上时，鼠标变成手型。

（4）对于禁止状态中的按钮，默认按钮的字体颜色为#c0c4cc，背景颜色为#fff，边框颜色为#ebeef5。主要按钮的边框颜色和背景颜色为#a0cfff，字体颜色为#fff。鼠标放在禁止按钮的按钮上时，鼠标变成禁止图标，除此以外不会发生任何样式的改变。

（5）根据提供的HTML代码编写CSS样式，不允许更改HTML代码。

三、实验步骤及结果：

1、参照页面展示效果编写HTML代码。

代码展示

<html>
  <head>
    <style type="text/css">
      .button {
        border-radius: 4px;
        padding: 12px 20px;
        line-height: 14px;
        border: 1px solid;
        transition: 1s;
      }

      .button--default {
        border-color: #dcdfe6;
        color: #606266;
      }

      .button--default:hover {
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
        cursor: pointer;
      }

      .button--primary {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
      }

      .button--primary:hover {
        border-color: #66b1ff;
        background-color: #66b1ff;
        cursor: pointer;
      }

      .is-disable:hover {
        color: #c0c4cc;
        background-color: #fff;
        border-color: #ebeef5;
        cursor: not-allowed;
        background-image: none
      }

      .is-disable.button--primary {
        border-color: #a0cfff;
        background-color: #a0cfff;
        color: #fff;
      }
    </style>      
  </head>
  <body>
    <h3>基础用法</h3>
    <p>基础的按钮用法。</p>
    <div>
      <button type="button" class="button button--default">
        <span>默认按钮</span>
      </button>
      <button type="button" class="button button--primary">
        <span>主要按钮</span>
      </button>
    </div>
    <h3>禁止状态</h3>
    <p>按钮不可用状态。</p>
    <div>
      <button type="button" class="button button--default is-disable">
        <span>默认按钮</span>
      </button>
      <button type="button" class="button button--primary is-disable">
        <span>主要按钮</span>
      </button>
    </div>
</html>

标签

Web实验十 HTML5基础与CSS3应用