美文网首页
3.4

3.4

作者: syeturing | 来源:发表于2017-04-20 00:19 被阅读6次
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Shopping</title>
        <link rel="stylesheet" href="css/semantic.css"  media="screen" title="no title" charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">
        <script type="text/javascript" src='js/vue1.js'></script>
    </head>
    <body id="app">
        <style type="text/css">
            body {
            font-family: 'Raleway', sans-serif;
            }

            .ui.center.aligned.masthead.container{
                position: absolute;
                top:100px;
            }

            .one.column.row{

            }

            .ui.top.demo.ui.segment.push.visible{
                margin-top:0px;
            }

            .ui.container.nav {
            width: 500px;
            }
            .ui.simple.dropdown:hover > .menu{
            top: 70%!important;
            }
            .ui.basic.segment.container.content {
            width: 850px;
            }

            .ui.basic.black.center.button {
            position: relative;
            transform: translate(-50%,0);
            left:50%;
            }
            .ui.center.aligned.masthead.container {
            width: 820px;
            }

        </style>

        <div class="ui center aligned masthead container">
            <div class="ui text left floated menu">
                <button v-on:click="navgation.show = !navgation.show" class="ui black button" style="opacity:0.7;">分类</button>
            </div>

        </div>
        <div class="ui top demo ui segment push visible"  v-if="navgation.show">
        <!-- <div class="ui top demo sidebar ui segment push visible"> -->
            <div class="ui center aligned page grid">
                <div class="one column row">
                    <div class="sixteen wide column">
                        <h3 class="ui header">分类</h3>

                    </div>
                </div>
                <div class="three column divided row">
                    <div class="column">
                        <a href="#">
                            <i class="suitcase icon" style="color:#B2DDC9"></i>
                            <span style="color:black">Man</span>
                        </a>
                    </div>
                    <div class="column">
                        <a href="#">
                            <i class="heart icon" style="color:#F3B0AE"></i>
                            <span style="color:black">Woman</span>
                        </a>
                    </div>
                    <div class="column">
                        <a href="#">
                            <i class="game icon" style="color:#FEE789"></i>
                            <span style="color:black">Child</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>


        <div class="ui container nav">
            <div class="ui borderless text three item menu ">
                <div class="ui simple dropdown  item" style="top: 70%;">
                    明星同款
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item" href="#">Taylor Swift</a>
                        <a class="item" href="#">Rihanna</a>
                        <a class="item" href="#">Victoria Beckham</a>
                        <a class="item" href="#">Emma Roberts</a>
                    </div>
                </div>
                <div class="ui simple dropdown  item" style="top: 70%;">
                    精选活动
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item" href="#">黑五大促</a>
                        <a class="item" href="#">双十一返场</a>
                    </div>
                </div>
                <div class="ui simple dropdown  item" style="top: 70%;">
                    推荐品牌
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item" href="#">Equipment</a>
                        <a class="item" href="#">Everlane</a>
                        <a class="item" href="#">Michael Kors</a>
                        <a class="item" href="#">Alexander Wang</a>
                        <a class="item" href="#">Massimo Dutti</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui basic segment container content">
              <div class="ui four column grid">
                  <div class="column">
                      <div class="ui image">
                          ![](images/1.jpg)
                      </div>
                      <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                      <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                      <button class="ui basic black center button">ADD TO CART</button>
                  </div>
                  <div class="column">
                      <div class="ui image">
                          ![](images/2.jpg)
                      </div>
                      <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                      <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                      <button class="ui basic black center button">ADD TO CART</button>
                  </div>
                  <div class="column">
                      <div class="ui image">
                          ![](images/3.jpg)
                      </div>
                      <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                      <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                      <button class="ui basic black center button">ADD TO CART</button>
                  </div>
                  <div class="column">
                      <div class="ui image">
                          ![](images/4.jpg)
                      </div>
                      <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                      <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                      <button class="ui basic black center button">ADD TO CART</button>
                  </div>
                  <div class="column">
                      <div class="ui image">
                          ![](images/5.jpg)
                      </div>
                      <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                      <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                      <button class="ui basic black center button">ADD TO CART</button>
                  </div>
                  <div class="column">
                      <div class="ui image">
                          ![](images/6.jpg)
                      </div>
                      <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                      <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                      <button class="ui basic black center button">ADD TO CART</button>
                  </div>
                  <div class="column">
                      <div class="ui image">
                          ![](images/7.jpg)
                      </div>
                      <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                      <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                      <button class="ui basic black center button">ADD TO CART</button>
                  </div>
                  <div class="column">
                      <div class="ui image">
                          ![](images/8.jpg)
                      </div>
                      <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                      <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                      <button class="ui basic black center button">ADD TO CART</button>
                  </div>
                  <div class="column">
                      <div class="ui image">
                          ![](images/9.jpg)
                      </div>
                      <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                      <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                      <button class="ui basic black center button">ADD TO CART</button>
                  </div>
                  <div class="column">
                      <div class="ui image">
                          ![](images/10.jpg)
                      </div>
                      <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                      <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                      <button class="ui basic black center button">ADD TO CART</button>
                  </div>
                  <div class="column">
                      <div class="ui image">
                          ![](images/11.jpg)
                      </div>
                      <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                      <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                      <button class="ui basic black center button">ADD TO CART</button>
                  </div>
                  <div class="column">
                      <div class="ui image">
                          ![](images/12.jpg)
                      </div>
                      <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                      <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                      <button class="ui basic black center button">ADD TO CART</button>
                  </div>

              </div>
           </div>
       <script>
           var vm = new Vue({
                el:"#app",
                data:{

                    navgation:{
                        show:false,
                    },
                }
           })
       </script>
    </body>
</html>

    相关文章

      网友评论

          本文标题：3.4

          本文链接：https://www.haomeiwen.com/subject/iarkzttx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|3.4|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！