千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:长沙千锋IT培训  >  技术要点  >  千锋长沙前端培训分享之给原生HTML变个样

千锋长沙前端培训分享之给原生HTML变个样

来源:千锋教育
发布人:千锋长沙
时间: 2021-12-15 18:02:41

       给原生HTML变个样其实这是一个改变默认HTML元素样式的css,而且不需要添加额外class!在网上其实有很多更改默认样式的css库,但是大多需要添加class,那么多class每次还需要查文档,万一写上头忘记加,一看页面,一个大大的白眼送给自己。

src=http___it-resourse-hare.oss-cn-hangzhou.aliyuncs.com_video_19_01_11_c97f6226f213d14d3fc7917ac5236191.jpg_x-oss-process=style_1aa67468f13711e8849060a44c2c6fbb&refer=http___it-resourse-hare.oss-cn-hangzhou.

其实只需要在自己的项目中引用一个css文件即可,而且提供了三种主题:

1、Automatic:根据页面中设置的prefers-color-scheme自动识别开启深夜模式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">

2、Dark theme:深夜模式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">

3、Light theme:默认的正常白天模式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">

下面我们就来列举一些谷歌中 默认样式 and 美容后 的样式对比

1、一般输入框

<input type="text">

2、只读输入框

<input type="text" readonly placeholder="readonly输入框">

3、禁用输入框

<input type="text" disabled placeholder="disabled输入框">

4、textarea输入框

<textarea placeholder="这是一个textarea"></textarea>

5、单选框

<input id="radioDemo" type="radio"> <label for="radioDemo">单选框</label>

6、复选框

<input id="checkboxDemo" type="checkbox"> <label for="checkboxDemo">复选框</label>

7、按钮

<input type="submit"> <input type="button" value="按钮">

8、滚动条

当然,water.css并不只对以上的内容进行了美化。当我们不想花费太长时间做一个demo页面,但又不想做的太丑时,就可以选择试一试这个css,最重要的是,不需要添加额外class呀!闭眼写就完事了!

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

最新文章NEW

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>