3.4

<!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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容