首页 > 其他分享 >5.27学习总结

5.27学习总结

时间:2023-06-10 21:35:33浏览次数:53  
标签:总结 学习 颜色 像素 5.27 实例 按钮 字体大小 边框

CSS 按钮

本章节我们为大家介绍使用 CSS 来制作按钮。


基本按钮样式

 

实例

.button {
背景颜色: #4CAF50; /* 绿色 */
边框:无;
颜色:白色;
填充:15px 32px;
文本对齐:居中;
文字装饰:无;
显示:内联块;
字体大小:16px;
}
尝试一下 »

按钮颜色

    

我们可以使用 属性来设置按钮颜色:background-color

实例

.button1 {背景颜色: #4CAF50; } /* 绿色 */ .button2 {背景颜色: #008CBA; } /* 蓝色 */ .button3 {背景颜色: #f44336; } /* 红色 */ .button4 {背景颜色: #e7e7e7; 颜色:黑色; } /* 灰色 */ .button5 {background-color: #555555; } /* 黑色 */
尝试一下 »

按钮大小

    

我们可以使用 属性来设置按钮大小:font-size

实例

.button1 {字体大小: 10px; } .button2 {字体大小: 12px; } .button3 {字体大小: 16px; } .button4 {字体大小: 20px; } .button5 {字体大小:24px;}
尝试一下 »

圆角按钮

    

我们可以使用 属性来设置圆角按钮:border-radius

实例

.button1 {边框半径: 2px; } .button2 {边框半径: 4px; } .button3 {边框半径: 8px; } .button4 {边框半径: 12px; } .button5 {边框半径:50%;}
尝试一下 »

按钮边框颜色

    

我们可以使用 属性设置按钮边框颜色:border

实例

.button1 { 背景颜色: 白色; 颜色:黑色; 边框:2px 实心#4CAF50; /* 绿色 */ } ...
尝试一下 »

鼠标悬停按钮

    
    

我们可以使用 选择器来修改鼠标悬停在按钮上的样式。:hover

提示: 我们可以使用 属性来设置 “hover” 效果的速度:transition-duration

实例

.button { -webkit-transition-duration: 0.4s; /* 野生动物园 */ 过渡持续时间: 0.4秒; } .按钮:悬停 { 背景颜色: #4CAF50; /* 绿色 */ 颜色: 白色; } ...

标签:总结,学习,颜色,像素,5.27,实例,按钮,字体大小,边框
From: https://www.cnblogs.com/clh628/p/17471971.html

相关文章

  • 5.26学习总结
    CSS图片本章节将为大家介绍如何使用CSS来布局图片。圆角图片实例圆角图片:img {    border-radius: 8px;}尝试一下»实例椭圆形图片:img {    border-radius: 50%;}尝试一下»缩略图我们使用 border 属性来创建缩略图。实例img {    b......
  • 5.29学习总结
    CSS3框大小CSS3 box-sizing 属性可以设置width和height属性中包含了padding(内边距)和border(边框)。浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在数字后面的-webkit-或-moz-为指定浏览器的前缀。属性     box-sizing10.04......
  • 5.28学习总结
    CSS分页实例本章节我们将为大家介绍如何通过使用CSS来创建分页的实例。简单分页如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。以下实例演示了如何使用HTML和CSS来创建分页:CSS实例ul.pagination {    display: inline-block;    paddin......
  • 5.31学习总结
    flex-directionflex-direction 属性指定了弹性子元素在父容器中的位置。语法flex-direction:row|row-reverse|column|column-reverseflex-direction的值有:row:横向从左到右排列(左对齐),默认的排列方式。row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。......
  • 5.30学习总结
    CSS3弹性盒子(FlexBox)弹性盒子是CSS3的一种新的布局模式。CSS3弹性盒(FlexibleBox或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、......
  • 6.1学习总结
    justify-content属性内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(mainaxis)对齐。justify-content语法如下:justify-content:flex-start|flex-end|center|space-between|space-around各个值解析:flex-start:弹性项目向行头紧挨着填......
  • 2023Fiddler抓包学习笔记 -- 环境配置及工具栏介绍
    一、Fiddler介绍Fiddler是位于客户端和服务器端的HTTP代理,常用来抓http数据包,可以监控浏览器所有的http和https流量,查看分析请求数据包和响应数据包,伪造请求和响应等功能。二、下载安装1、下载地址https://www.telerik.com/download/fiddler/fiddler42、一路下一步安装,安装完成后,发......
  • 5.22学习总结
    1.类和对象的抽象理念类和对象的概念是面向对象编程(OOP)的基础。在Python中,面向对象的设计方法提供了一种封装数据和功能的有效方式。它让我们能将现实世界的事物和行为映射到代码中,这种映射更加符合我们人类的认知方式,让我们能以更自然的方式理解和设计复杂的软件系统。类的抽......
  • 第八周总结
    用户场景分析是软件开发过程中的一个重要步骤,它是指通过研究用户在特定情境下的行为和需求来定义需求规格或设计产品。用户场景分析旨在了解用户的需求、行为和情境,以便优化产品设计和开发过程。下面是一些用户场景分析的核心概念和方法。 用户场景 用户场景是指描述用户在......
  • 基于过敏反应的生物信息学相关文献学习报告
    基于过敏反应的生物信息学相关文献学习报告 小组成员及分工:童佩22020080041基于过敏反应的生物信息学预测方法的文本编辑赵昕22020080069资料搜集及前言,结论的文本编辑赵妍22020080070基于过敏反应的生物信息学预测方法的文本编辑周荣咪22020080073基于生物信息学的过敏......