elementplus官网右上角的开关是怎么实现的

html-css017

elementplus官网右上角的开关是怎么实现的,第1张

ElementPlus官网右上角的开关是基于HTML和CSS来实现的。首先,利用HTML中的<input type="checkbox">这个标签来创建一个开关,然后通过CSS中不同的类来设置打开和关闭状态时开关背景图片的样式显示,最后使用JS代码来实现开关状态切换时对其他网页元素的操作。

一个基本的网站包含很多个网页,一个网页由html, css和javascript组成。html是主体,装载各种dom元素;css用来装饰dom元素;javascript控制dom元素。用一扇门比喻三者间的关系是:html是门的门板,css是门上的油漆或花纹,javascript是门的开关;

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

扩展资料

css优先权。

多个css样式可集中在单个html标签里,出现这种情况时,一般按优先权划分:

1、浏览器默认设置 (最低)

2、外部样式表

3、内部样式表(写在html的<head>标签内部)

4、内联样式(写在html的标签里,即style属性)(最高)

css的语法。

css由两个主要部分组成,选择器,一条或多条声明。

选择器是指css样式的名字“.seletor”,名字前面要带上一点“.”。声明是由属性和值组成,给个例子“margin: 0 auto”,冒号前面是属性,后面是值,该例子是定义元素居中显示。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

button {border:0width: 200pxheight: 80pxbackground-color: gainsborocursor: not-allowed}

3、浏览器运行index.html页面,此时通过css实现了按钮的禁用样式。