Web实验十 HTML5基础与CSS3应用

嚣张路过的王小明

已于 2023-11-25 11:20:16 修改

阅读量148

点赞数 3

文章标签： html5 css3 前端

于 2023-11-25 10:55:30 首次发布

本文链接：https://blog.csdn.net/qq_70494538/article/details/134611822

版权

一、实验目的：

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代码。

解决方案：

<html>

  <head>

    <style type="text/css">

     button{

       padding-top: 12px;

       padding-bottom: 12px;

       padding-left: 20px;

       padding-right: 20px;

       border-radius: 4px;

       line-height: 14px;

       transition-duration: 1s;

       border: 1px solid;

       cursor: pointer;

     }

     

     .button--default{

      border-color: #dcdfe6;

      color: #606266;

    }



     .button--default:hover{

      border-color: #c6e2ff;

      color: #409eff;

      background-color: #ecf5ff;

    }

    .button--primary{

      color: #fff;

      border-color: #409eff;

      background-color: #409eff;

    }

    .button--primary:hover{

      border-color: #66b1ff;

      background-color: #66b1ff;

    }

    .is-disable{

      cursor: not-allowed;

    }

    .button--default is-disable{

      color: #c0c4cc;

      background-color: #fff;

      border-color: #ebeef5;

    }

    .button--primary is-disable{

      background-color: #a0cfff;

      border-color: #a0cfff;

      color: #fff;

    }

    </style>      

  </head>

  <body>

    <h3>基础用法</h3>

    <p>基础的按钮用法。</p>

    <div>

      <button type="button" class="button--default">

        <span>默认按钮</span>

      </button>

      <button type="button" class="button--primary">

        <span>主要按钮</span>

      </button>

    </div>

    <h3>禁止状态</h3>

    <p>按钮不可用状态。</p>

    <div>

      <button type="button" class="button--default is-disable">

        <span>默认按钮</span>

      </button>

      <button type="button" class="button--primary is-disable">

        <span>主要按钮</span>

      </button>

    </div>

</html>

嚣张路过的王小明

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
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。
复制链接

扫一扫