您现在的位置是：首页 > 网站制作 > 前端设计前端设计
个人博客添加响应式全屏切换标签
胜于蓝2020-07-20【前端设计】人已围观
简介Html 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
Html
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<div id="tabs" class="tabs"> <nav> <ul> <li><a href="#section-1" class="icon-shop"><span>Shop</span></a></li> <li><a href="#section-2" class="icon-cup"><span>Drinks</span></a></li> <li><a href="#section-3" class="icon-food"><span>Food</span></a></li> <li><a href="#section-4" class="icon-lab"><span>Lab</span></a></li> <li><a href="#section-5" class="icon-truck"><span>Order</span></a></li> </ul> </nav> <div class="content"> <section id="section-1"> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Sushi Gumbo Beetroot</h3> <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p> </div> <div class="mediabox"> <img src="img/02.png" alt="img02" /> <h3>Pea Sprouts Fava Soup</h3> <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p> </div> <div class="mediabox"> <img src="img/03.png" alt="img03" /> <h3>Turnip Broccoli Sashimi</h3> <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p> </div> </section> <section id="section-2"> <div class="mediabox"> <img src="img/04.png" alt="img04" /> <h3>Asparagus Cucumber Cake</h3> <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p> </div> <div class="mediabox"> <img src="img/05.png" alt="img05" /> <h3>Magis Kohlrabi Gourd</h3> <p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p> </div> <div class="mediabox"> <img src="img/06.png" alt="img06" /> <h3>Ricebean Rutabaga</h3> <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. </p> </div> </section> <section id="section-3"> <div class="mediabox"> <img src="img/02.png" alt="img02" /> <h3>Noodle Curry</h3> <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.Sushi gumbo beet greens corn soko endive gumbo gourd.</p> </div> <div class="mediabox"> <img src="img/06.png" alt="img06" /> <h3>Leek Wasabi</h3> <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p> </div> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Green Tofu Wrap</h3> <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p> </div> </section> <section id="section-4"> <div class="mediabox"> <img src="img/03.png" alt="img03" /> <h3>Tomato Cucumber Curd</h3> <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p> </div> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Mushroom Green</h3> <p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p> </div> <div class="mediabox"> <img src="img/04.png" alt="img04" /> <h3>Swiss Celery Chard</h3> <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. </p> </div> </section> <section id="section-5"> <div class="mediabox"> <img src="img/02.png" alt="img02" /> <h3>Radish Tomato</h3> <p>Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p> </div> <div class="mediabox"> <img src="img/06.png" alt="img06" /> <h3>Fennel Wasabi</h3> <p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p> </div> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Red Tofu Wrap</h3> <p>Green horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p> </div> </section> </div><!-- /content --></div><!-- /tabs --><script src="js/cbpFWTabs.js"></script><script> new CBPFWTabs( document.getElementById( 'tabs' ) );</script> |
Css
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.tabs { position: relative; width: 100%; overflow: hidden; margin: 1em 0 2em; font-weight: 300; }/* Nav */.tabs nav { text-align: center; }.tabs nav ul { padding: 0; margin: 0; list-style: none; display: inline-block; }.tabs nav ul li { border: 1px solid #becbd2; border-bottom: none; margin: 0 0.25em; display: block; float: left; position: relative; }.tabs nav li.tab-current { border: 1px solid #47a3da; box-shadow: inset 0 2px #47a3da; border-bottom: none; z-index: 100; }.tabs nav li.tab-current:before, .tabs nav li.tab-current:after { content: ''; position: absolute; height: 1px; right: 100%; bottom: 0; width: 1000px; background: #47a3da; }.tabs nav li.tab-current:after { right: auto; left: 100%; width: 4000px; }.tabs nav a { color: #becbd2; display: block; font-size: 1.45em; line-height: 2.5; padding: 0 1.25em; white-space: nowrap; }.tabs nav a:hover { color: #768e9d; }.tabs nav li.tab-current a { color: #47a3da; }/* Icons */.tabs nav a:before { display: inline-block; vertical-align: middle; text-transform: none; font-weight: normal; font-variant: normal; font-family: 'icomoon'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; margin: -0.25em 0.4em 0 0; }.icon-food:before { content: "e600"; }.icon-lab:before { content: "e601"; }.icon-cup:before { content: "e602"; }.icon-truck:before { content: "e603"; }.icon-shop:before { content: "e604"; }/* Content */.content section { font-size: 1.25em; padding: 3em 1em; display: none; max-width: 1230px; margin: 0 auto; }.content section:before, .content section:after { content: ''; display: table; }.content section:after { clear: both; }/* Fallback example */.no-js .content section { display: block; padding-bottom: 2em; border-bottom: 1px solid #47a3da; }.content section.content-current { display: block; }.mediabox { float: left; width: 33%; padding: 0 25px; }.mediabox img { max-width: 100%; display: block; margin: 0 auto; }.mediabox h3 { margin: 0.75em 0 0.5em; }.mediabox p { padding: 0 0 1em 0; margin: 0; line-height: 1.3; }/* Example media queries */@media screen and (max-width: 52.375em) {.tabs nav a span { display: none; }.tabs nav a:before { margin-right: 0; }.mediabox { float: none; width: auto; padding: 0 0 35px 0; font-size: 90%; }.mediabox img { float: left; margin: 0 25px 10px 0; max-width: 40%; }.mediabox h3 { margin-top: 0; }.mediabox p { margin-left: 40%; margin-left: calc(40% + 25px); }.mediabox:before, .mediabox:after { content: ''; display: table; }.mediabox:after { clear: both; }} @media screen and (max-width: 32em) {.tabs nav ul, .tabs nav ul li a { width: 100%; padding: 0; }.tabs nav ul li { width: 20%; width: calc(20% + 1px); margin: 0 0 0 -1px; }.tabs nav ul li:last-child { border-right: none; }.mediabox { text-align: center; }.mediabox img { float: none; margin: 0 auto; max-width: 100%; }.mediabox h3 { margin: 1.25em 0 1em; }.mediabox p { margin: 0; }} |
javascript
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
;( function( window ) { 'use strict'; function extend( a, b ) { for( var key in b ) { if( b.hasOwnProperty( key ) ) { a[key] = b[key]; } } return a; } function CBPFWTabs( el, options ) { this.el = el; this.options = extend( {}, this.options ); extend( this.options, options ); this._init(); } CBPFWTabs.prototype.options = { start : 0 }; CBPFWTabs.prototype._init = function() { // tabs elemes this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) ); // content items this.items = [].slice.call( this.el.querySelectorAll( '.content > section' ) ); // current index this.current = -1; // show current content item this._show(); // init events this._initEvents(); }; CBPFWTabs.prototype._initEvents = function() { var self = this; this.tabs.forEach( function( tab, idx ) { tab.addEventListener( 'click', function( ev ) { ev.preventDefault(); self._show( idx ); } ); } ); }; CBPFWTabs.prototype._show = function( idx ) { if( this.current >= 0 ) { this.tabs[ this.current ].className = ''; this.items[ this.current ].className = ''; } // change current this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0; this.tabs[ this.current ].className = 'tab-current'; this.items[ this.current ].className = 'content-current'; }; // add to global namespace window.CBPFWTabs = CBPFWTabs;})( window ); |
Tags：
扫描关注胜于蓝微信|公众号，第一时间获取网站模板更新动态
本文地址：/web/design/3306.html
很赞哦！ ()
上一篇：返回列表
相关文章
随机图文
个人博客添加响应式全屏切换标签
Html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
三步实现滚动条触动css动画效果
现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。只需要
新手在进行CSS网页编码以前需要注意的十个问题
手在进行CSS网页编码以前，往往感觉难以下手，或者丢三忘四，虽然大前端的前端开发教程很丰富，但全面的了解，还需要动手编码，只的通过实际编码，才能提高。有时候CSS熟手，也难免在书写CS
常用的js固定层代码
网页中常会用到固定层这样的效果，可以放广告，可以放标签，可以放关注。 js代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 if ($('#follow-us')){ var followUs
文章评论
当前时间
快速排名
- 网站建设|万词霸屏,企业软文推广,刷下拉框
- 快速排名：不用再等SEO三个月，只需3-7天即可把行业关键词覆盖百度搜索引擎首页，点击不收费，排名报表，真实访问量报表一目了然。
合作加盟
- 扫码请注明来意,否则不会通过
- 填写商户姓名不要带有“超市”,“便利店” ,“百货”等
- 扫码成为快钱代理
- 扫码加站长微信,为您推荐快钱总部负责人
- 快钱POSS机（电签版）
- 1,免押版：签约费率快捷交易0.38%,常规交易0.65%
- 贷记卡单笔≥3000元视为激活
- 2,,有押版：签约快捷交易0.38%,常规交易0.65%
- 激活首刷≥99元,扣除99元系统服务费,多出部分shishi到账
- 电签版ipos参与每月扶持奖励
- 电签版ipos与Mpos单独考核台均
- 30台以上有效激活奖励3000元扶持金
- 当月交易额≥3000元的为活跃用户
点击排行
DIV+CSS开发浏览器的兼容性本站推荐
标签云
猜你喜欢
