CSS-PureCss样式开发
1-开发说明
2-参考网址
3-代码模板
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 Pure.css 样式表 --><link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure.css"><title>使用 Pure.css 的示例页面</title>
</head><body><!-- 页面标题 --><h1 class="pure-u-1">欢迎使用 Pure.css</h1><!-- 按钮 --><a href="https://www.purecss.cn/" class="pure-button pure-button-primary">pure-css中文网链接</a><a href="https://pure-css.github.io/" class="pure-button pure-button-primary">pure-css官网链接</a><!-- 段落内容 --><p class="pure-u-1">Pure.css 是一个轻量级的 CSS 框架，它提供了一系列简单而实用的 CSS 类，可用于快速构建响应式的网页布局。</p><!-- 按钮 --><a href="#" class="pure-button pure-button-primary">点击这里</a><!-- 布局 --><div class="pure-g"><div class="pure-u-1-3"><p>Thirds</p></div><div class="pure-u-1-3"><p>Thirds</p></div><div class="pure-u-1-3"><p>Thirds</p></div></div><!-- 自定义按钮 --><div><style>.button-success,.button-error,.button-warning,.button-secondary {color: white;border-radius: 4px;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);}.button-success {background: rgb(28, 184, 65);/* this is a green */}.button-error {background: rgb(202, 60, 60);/* this is a maroon */}.button-warning {background: rgb(223, 117, 20);/* this is an orange */}.button-secondary {background: rgb(66, 184, 221);/* this is a light blue */}</style><button class="button-success pure-button">Success Button</button><button class="button-error pure-button">Error Button</button><button class="button-warning pure-button">Warning Button</button><button class="button-secondary pure-button">Secondary Button</button>
</div>
</body></html>
