V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
iFat3
V2EX  ›  CSS

[收藏] 这么多 WEB 组件(CSS),攒一个网站够了吧?

  •  
  •   iFat3 · 2018-03-29 09:58:40 +08:00 · 2805 次点击
    这是一个创建于 2429 天前的主题,其中的信息可能已经有所发展或是发生改变。

    1 表单(form)相关

    1.1 输入框(input)

    一个简单的输入框样式,简捷又不夸张。需要约 30 行的 CSS 代码。

    输入框(input)样式图

    演示程序

    1.2 单选多选框(checkbox,radio)

    浏览器内置的 checkbox 及 radio 样式效果太差,本例展示了一个简单大方的单选多选框样式。需要约 25 行的 CSS 代码,额外需要搭配三个 png 小图标。

    单选多选框(checkbox,radio)样式图

    演示程序

    1.3 选择框(select)

    一个简单的选择框样式。需要约 50 行 CSS 代码。

    选择框(select)样式图

    演示程序

    1.4 文件选择框(file)

    一个简单的文件选择框样式。需要约 20 行 CSS 代码,另需 6 行 JavaScript 代码。

    文件选择框(file)样式图

    演示程序

    2 非表单相关

    2.1 按钮 1(button)

    一个平面的的按钮样式,配色方案同 bootstrap。需要约 65 行 CSS 代码。

    按钮 1(button)样式图

    演示程序

    2.2 按钮 2(button)

    一个带 3D 效果的按钮样式。需要约 60 行的 CSS 代码。

    按钮 2(button)样式图

    演示程序

    2.3 模态框(Modal)

    一个简单的模态框样式。纯 CSS 实现,需要约 90 行的 CSS 代码。

    模态框(Modal)样式图

    演示程序

    2.4 导航条 1(navbar)

    一个简单的带二级导航的导航条。需要约 50 行的 CSS 代码。

    导航条 1(navbar)样式图

    演示程序

    2.5 导航条 2(navbar)

    一个带尖角样式的导航条。需要约 50 行的 CSS 代码。

    导航条 2(navbar)样式图

    演示程序

    2.6 面包屑(breadcrumb)

    一个简单的面包屑样式。需要约 70 行的 CSS 代码。

    面包屑(breadcrumb)样式图

    演示程序

    2.7 块引用(blockquote)

    常规的块引用样式,文章排版必需的组件。需要约 30 行的 CSS 代码。

    块引用(blockquote)样式图

    演示程序

    2.8 滑动门(slider)

    一个简单的滑动门组件。需要约 50 行的 CSS 代码,另需约 40 行的 JQuery 代码。

    滑动门(slider)样式图

    演示程序

    2.9 选项卡(tab)

    一个简单的选项卡样式。需要约 60 行 CSS 代码。

    选项卡(tab)样式图

    演示程序

    2.10 分页(Pagination)

    一个常规的分页样式。需要约 50 行 CSS 代码。

    分页(Pagination)样式图

    演示程序

    2.11 响应式表格(table)

    一般网站上表格显示的效果都不理想,本例中提供了一个简单的响应式表格样式。需要约 80 行 CSS 代码。

    响应式表格(table)样式图

    演示程序

    3 说明

    文中所述文字及代码部分汇编于网络( codepen,cssTricks 等)。因时间不足,能力有限等原因,存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围,不适用于实际应用。

    另外各个组件之件没有联系,包括字体及配色甚至布局都是相互独立的。

    Heanes
        1
    Heanes  
       2018-03-29 10:59:16 +08:00
    轮子太多
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1273 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 17:54 · PVG 01:54 · LAX 09:54 · JFK 12:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.