静态页面
top-bar
导航
面包屑导航
搜索
主体布局
列表
分页
标题栏
表格
悬挂式布局
图片底部透明标题
底部悬浮
表单
Jquery效果
tab选项卡
回到顶部
弹框(可关闭)
动态公告标题(单行)
Mobile静态页面
顶部导航(nav-bar)
横排列表(自适应)
手风琴(Accordion)
吊顶
(top-bar)
DEMO
客观里边请!打尖还是住店?
牛肉
女儿红
红茶
烤鸭
烧鸡
复制 html
客观里边请!打尖还是住店?
牛肉
女儿红
红茶
烤鸭
烧鸡
复制 css
/* top-bar */ .top-bar{background-color: #ccc;height: 30px;line-height: 30px;} .top-bar .center{width: 800px;margin: 0 auto;} .top-bar .f-fr ul li{float: left;margin-left: 10px;} .top-bar .f-fr ul li:hover{text-decoration: underline;}
导航
(nav)
DEMO
首页
内容
资讯
帮助
客服
复制 html
首页
内容
资讯
帮助
客服
复制 css
/* nav */ .nav{background-color: #3BB4F2;height: 35px;line-height: 35px;} .nav ul{overflow: hidden;} .nav ul li{float: left;margin-right: 15px;padding: 0 10px;} .nav ul li:hover{background-color: #0E90D2;color: #fff;} .nav ul li a{color: #fff;}
面包屑
(crumbs)
DEMO
首页
>
分类
>
内容
复制 html
首页
>
分类
>
内容
复制 css
/* crumbs */ .crumbs li{float: left;} .crumbs .arrow{margin:3px 5px;color: #999;} .crumbs li a{color: #3BB4F2;}
搜索
(search)
DEMO
搜索
复制 html
搜索
复制 css
/* search-box" */ .search-box{width: 260px;border: 2px solid #3BB4F2;overflow: hidden;} .search-box input,.search-box button{height: 35px;line-height: 35px;} .search-box .search{border: 0;} .search-box .submit{width: 60px;text-align: center;color: #fff;background-color: #3BB4F2;}
主体布局
(layout)
4DEMO
复制 html
复制 css
/* layout */ .layout div{border: 1px solid #3BB4F2;} .layout .f-fl{width: 700px;height: 200px;} .layout .f-fr{width: 200px;height: 200px;}
列表
(list)
DEMO
Whatever is worth doing is worth doing well.
Happiness is a way station between too much and too little.
In love folly is always sweet.
The hard part isn’t making the decision. It’s living with it.
Your happy passer-by all knows, my distressed there is no place hides.
复制 html
Whatever is worth doing is worth doing well.
Happiness is a way station between too much and too little.
In love folly is always sweet.
The hard part isn’t making the decision. It’s living with it.
Your happy passer-by all knows, my distressed there is no place hides.
复制 css
/* list-static */ .list-static ul{border-top: 1px solid #DEDEDE;} .list-static ul li{border-bottom: 1px solid #DEDEDE;height: 35px;line-height: 35px;} .list-static ul li a{color: #5990DA;display: block;} .list-static ul li:hover a{color: #095F8A;}
分页
(pagination)
DEMO
<<
1
2
3
4
5
>>
复制 html
<<
1
2
3
4
5
>>
复制 css
/* pagination */ .pagination-box{text-align: center;} .pagination li{display: inline-block;} .pagination li.disabled a{cursor: not-allowed;pointer-events: none;color: #999;} .pagination li.active a{color: #fff;background-color: #0E90D2; cursor: default;} .pagination li.active:hover a{background-color: #0E90D2;color: #fff;} .pagination li a{padding: 5px 8px;border: 1px solid #DEDEDE;font-size: 12px;color: #0E90D2;} .pagination li:hover a{background-color: #EEE;}
标题栏
(titlebar)
DEMO
栏目标题
更多 >>
复制 html
栏目标题
更多 >>
复制 css
/* titlebar */ .titlebar{border-bottom: 1px solid #DEDEDE;padding-bottom: 5px;} .titlebar h3{padding-left: 5px;border-left: 3px solid #0E90D2;height: 30px;line-height: 30px;} .titlebar .more{font-size: 14px;margin-top: 10px;}
表格
(table)
DEMO
标题
标题
标题
标题
文字
文字
文字
文字
文字
文字
文字
文字
复制 html
标题
标题
标题
标题
文字
文字
文字
文字
文字
文字
文字
文字
复制 css
/* table-box */ .table-box{width: 100%;} .table-box td,.table-box th{border: 1px solid #dedede;padding: 10px;}
悬挂式布局
(suspend)
DEMO
微微一笑很倾城 作者:顾曼
《微微一笑很倾城》是由上海剧酷文化传播有限公司、华策影业有限公司联合出品的爱情片,由赵天宇执导,张一白监制,Angelababy、井柏然领衔出演。
复制 html
微微一笑很倾城 作者:顾曼
《微微一笑很倾城》是由上海剧酷文化传播有限公司、华策影业有限公司联合出品的爱情片,由赵天宇执导,张一白监制,Angelababy、井柏然领衔出演。
复制 css
/* suspend */ .suspend .photo-box{width: 140px;height: 120px;overflow: hidden;} .suspend .photo-box .photo{width: 140px;height: 120px;display: block;overflow: hidden;} .suspend .photo-box .photo img{width: 140px;} .suspend .suspend-info{padding-left: 155px;} .suspend .suspend-info h3 a{white-space: nowrap;-ms-text-overflow: ellipsis;text-overflow: ellipsis;overflow: hidden;width: 230px;} .suspend .suspend-info h3 a:hover{color: #0E90D2;}
图片底部透明标题
(lucency-title)
DEMO
微微一笑很倾城
微微一笑很倾城
微微一笑很倾城
复制 html
微微一笑很倾城
微微一笑很倾城
微微一笑很倾城
复制 css
/* lucency-title */ .lucency-title ul{overflow: hidden;margin-left: -15px;} .lucency-title ul li{float: left;margin-left: 15px;} .lucency-title ul li a{position: relative;} .lucency-title ul li a span{width: 185px;height: 190px;overflow: hidden;display: inline-block;} .lucency-title ul li a span img{width: 185px;-webkit-transition: transform .3s;-moz-transition: transform .3s;-o-transition: transform .3s;} .lucency-title ul li h3{position: absolute;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.5);color: #fff;text-align: center;line-height: 30px;} .lucency-title ul li:hover img{-webkit-transform: scale(1.10);-moz-transform: scale(1.10); transform: scale(1.10);}
固定 定位底部
(footer-fixed)
DEMO
复制 html
复制 css
/* footer-pixed */ .footer-pixed{position: fixed;left:0;right:0;bottom:0;background-color: #FAB001;overflow: hidden;height: 40px;}
form表单
(form)
DEMO
姓名
电话
地区
内容
提交
复制 html
找演示复制
复制 css
/* form-box */ .form-box ul li{height: 35px;line-height: 35px;} .form-box ul li span{display: inline-block;margin-right: 10px;vertical-align: top;} .form-box .submit{display: block;width: 80px;height: 30px;line-height: 30px;text-align: center;background-color: #3BB4F2;color: #fff;border-radius: 5px;}
样式效果
(tab)
DEMO
选项一
选项二
选项三
内容一
内容二
内容三
复制 html
选项一
选项二
选项三
内容一
内容二
内容三
复制 css
/* tab */ .tab ul{overflow: hidden;border: 1px solid #3BB4F2;display: inline-block;} .tab ul li{float: left;cursor: pointer;background-color: #fff;color: #3BB4F2;padding: 5px 20px;} .tab ul li.active{background-color: #3BB4F2;color: #fff;} .tab-list{display: none;}
回到顶部
(back-top)
DEMO
复制到本地测试
复制 html和js
复制 css
/* back-top */ .back-top {position: fixed;line-height:36px;width:36px;bottom:35px;height:36px;cursor:pointer;display:none;background:red;}
弹框(可关闭)
(popup-box)
效果图
复制 html
标题
X
内容
复制 css
/* popup-box */ .popup-box{position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0,0,0,.5);display:none;} .popup-box .popup{background-color: #fff;width: 400px;border-radius: 5px;position: absolute;left: 50%;margin-left: -200px;top: 35%;} .popup-box .head{padding: 10px;} .popup-box .head .colse{color: #0E90D2;font-weight: bold;font-size: 20px;} .popup-box .popup p{padding: 10px 0;} .popup-box .footer{padding: 10px 0;} .popup-box .footer span{cursor: pointer;background-color: #0E90D2;color: #fff;display: inline-block;padding: 5px 8px;margin: 0 10px;}
动态公告标题(单行)
(scroll-text)
DEMO
你是我的小苹果
怎么爱你都不嫌多
红红的小脸温暖我的心窝
种下希望就会收获
复制 html
你是我的小苹果
怎么爱你都不嫌多
红红的小脸温暖我的心窝
种下希望就会收获
复制 css
/* scroll-text */ .scroll-text-box{height: 30px;line-height: 30px;overflow:hidden; position:relative;border: 1px solid #3BB4F2;} .scroll-text,.swap{ line-height:30px; display:inline-block; position:absolute; top:0; left:0;padding-left: 15px;} .swap{top:30px;}
样式效果
(nav-bar)
DEMO
< 返回
标题标题标题...
复制 html
< 返回
标题标题标题...
复制 css
/* nav-bar */ .nav-bar{overflow: hidden;background-color: #3BB4F2;text-align: center;height: 35px;line-height: 35px;padding: 0 15px;color: #fff;} .nav-bar .back{float: left;color: #fff;}
样式效果
(row-list)
DEMO
复制 html
复制 css
/* row-list */ .row-list ul{overflow: hidden;margin-left: -1%;} .row-list ul li{float: left;width: 24%;margin-left: 1%;text-align: center;}
样式效果
(accordion)
DEMO
新闻中心
>
新闻
新闻
新闻
关于我们
>
我们
我们
我们
复制 html
新闻中心
>
新闻
新闻
新闻
关于我们
>
我们
我们
我们
复制 css
/* accordion */ .accordion-box .accordion-title{height: 25px;} .accordion-box .accordion-content{display: none;} .accordion-on i{transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg);} //accordion $(".accordion-title").click(function(){ $(this).toggleClass("accordion-on").siblings(".accordion-title").removeClass("accordion-on"); // 修改数字控制速度, slideUp(500)控制卷起速度 $(this).next(".accordion-content").slideToggle(500).siblings(".accordion-content").slideUp(500); });
样式效果
(top-bar)
DEMO
复制 html
复制 css