我搜索了一些时下最好最流行的codepen(仅限于HTML和CSS)。如果你能把它们融入到设计中去，那么就会大大节省很多时间。
在下面的例子中你会看到各式各样的片段，HTML
陈列，登录方式，垂直菜单，甚至时下最流行的主题：扁平化设计(扁平化图像，扁平化按钮形状，扁平化用户界面要素等)。好好欣赏这些精选的代码片段吧，如果现在没时间看完所有的代码例子，那就保存下来以备不时之需吧。
CSS3
Working
Clock
这是一个纯css3时钟。它使用css动画还有图形，没有使用任何图片或者是js
CSS3
Pricing
Table
CSS
Loader
Pure
CSS3
MacBook
Air
with
Thunderbird
Display
and
Keyboard
Button
Concept
CSS3
Loading
Animation
Pure
CSS3
Vertical
Menu
with
Hover
Effect
CSS3
Stamp
effect
using
radial
gradients
I
Love
Blur
Social
Navigation
Login
Calendar
Social
Footer
Parallax
Landscape
CSS3
Thermometer
CSS-Only
Responsive
Layout
with
Smooth
Transitions
Flat
CSS3
Weather
Widget
Flat
Responsive
Sliding
Boxes
Tiny
CSS3
Round
Breadcrumb
CSS3
Hover
Effect
using
:after
Psuedo
Element
Flat
UI
Elements
CSS
Flat
Button
Shapes
UI
Flat
Icons
CSS
给按钮添加css样式的方法：
添加方法：
1、.btn {BORDER-RIGHT: #7b9ebd 1px solid右边线
2、PADDING-RIGHT: 2px内边距 右
3、BORDER-TOP: #7b9ebd 1px solid上边线
4、PADDING-LEFT: 2px内边距 左
5、FONT-SIZE: 12px文字大小
6、BORDER-LEFT: #7b9ebd 1px solid左边线
7、CURSOR: hand鼠标移上去时，变成手形。
8、COLOR: black颜色黑 （表示文字颜色）
9、PADDING-TOP: 2px内边距 上
10、BORDER-BOTTOM: #7b9ebd 1px solid }底边线
扩展资料
CSS样式部分
大小 {font-size: 12px}，x-large(特大) xx-small(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 {font-style: oblique}(偏斜体) italic(斜体) normal(正常)
行高 {line-height: normal}(正常) 单位：PX、PD、EM
粗细 {font-weight: bold}(粗体) lighter(细体) normal(正常)
变体 {font-variant: small-caps}(小型大写字母) normal(正常)
大小写 {text-transform: capitalize}(首字母大写) uppercase(大写) lowercase(小写) none(无)
修饰 {text-decoration: underline}(下划线) overline(上划线) line-through(删除线) blink(闪烁)
常用字体： (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性： (background)
色彩 {background-color: #FFFFFF}
图片 {background-image: url()}
重复 {background-repeat: no-repeat}
滚动 {background-attachment: fixed}(固定) scroll(滚动)
位置 {background-position: left}(水平) top(垂直)
字间距 {letter-spacing: normal} 数值 /*这个属性有用，多实践下*/
对齐 {text-align: justify}(两端对齐) left(左对齐) right(右对齐) center(居中)
