<!DOCTYPE html><html><head><metacharset="utf-8"><title>Shopping</title><scripttype="text/javascript"src="js/vue1.js" ></script><linkrel="stylesheet"href="css/semantic.css"media="screen"title="no title"charset="utf-8"><linkhref="https://fonts.googleapis.com/css?family=Oswald|Raleway"rel="stylesheet"><styletype="text/css">body{
font-family:'Raleway', sans-serif;
}.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%;
}</style></head><bodyid="app"><divclass="ui container nav"><divclass="ui borderless text three item menu "><divclass="ui simple dropdown item"style="top: 70%;">{{ demo1.name }}<iclass="dropdown icon"></i><divclass="menu"><aclass="item"v-for="me1 in demo1.body"href="#">{{ me1.name }}</a></div></div><divclass="ui simple dropdown item"style="top: 70%;">{{ demo2.name }}<iclass="dropdown icon"></i><divclass="menu" ><aclass="item"v-for="me2 in demo2.body"href="#">{{ me2.name }}</a></div></div><divclass="ui simple dropdown item"style="top: 70%;">{{ demo3.name }}<iclass="dropdown icon"></i><divclass="menu"><aclass="item"v-for="me3 in demo3.body"href="#">{{ me3.name }}</a></div></div></div></div><divclass="ui basic segment container content"><divclass="ui four column grid"><divclass="column"><divclass="ui image"><imgsrc="images/1.jpg"alt=""></div><pstyle="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p><h4style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4><buttonclass="ui basic black center button">ADD TO CART</button></div><divclass="column"><divclass="ui image"><imgsrc="images/2.jpg"alt=""></div><pstyle="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p><h4style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4><buttonclass="ui basic black center button">ADD TO CART</button></div><divclass="column"><divclass="ui image"><imgsrc="images/3.jpg"alt=""></div><pstyle="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p><h4style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4><buttonclass="ui basic black center button">ADD TO CART</button></div><divclass="column"><divclass="ui image"><imgsrc="images/4.jpg"alt=""></div><pstyle="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p><h4style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4><buttonclass="ui basic black center button">ADD TO CART</button></div><divclass="column"><divclass="ui image"><imgsrc="images/5.jpg"alt=""></div><pstyle="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p><h4style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4><buttonclass="ui basic black center button">ADD TO CART</button></div><divclass="column"><divclass="ui image"><imgsrc="images/6.jpg"alt=""></div><pstyle="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p><h4style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4><buttonclass="ui basic black center button">ADD TO CART</button></div><divclass="column"><divclass="ui image"><imgsrc="images/7.jpg"alt=""></div><pstyle="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p><h4style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4><buttonclass="ui basic black center button">ADD TO CART</button></div><divclass="column"><divclass="ui image"><imgsrc="images/8.jpg"alt=""></div><pstyle="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p><h4style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4><buttonclass="ui basic black center button">ADD TO CART</button></div><divclass="column"><divclass="ui image"><imgsrc="images/9.jpg"alt=""></div><pstyle="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p><h4style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4><buttonclass="ui basic black center button">ADD TO CART</button></div><divclass="column"><divclass="ui image"><imgsrc="images/10.jpg"alt=""></div><pstyle="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p><h4style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4><buttonclass="ui basic black center button">ADD TO CART</button></div><divclass="column"><divclass="ui image"><imgsrc="images/11.jpg"alt=""></div><pstyle="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p><h4style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4><buttonclass="ui basic black center button">ADD TO CART</button></div><divclass="column"><divclass="ui image"><imgsrc="images/12.jpg"alt=""></div><pstyle="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p><h4style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4><buttonclass="ui basic black center button">ADD TO CART</button></div></div></div><script>var vm = new Vue({
el:"#app",
data:{
demo1:{
name:"明星同款",
body:[
{name:"Rihanna"},
{name:"Victoria Beckham"},
{name:"Emma Roberts"},
]
},
demo2:{
name:"精选活动",
body:[
{name:"黑五大促"},
{name:"双十一返场"},
{name:"双十二预热"},
]
},
demo3:{
name:"推荐品牌",
body:[
{name:"Equipment"},
{name:"Everlane"},
{name:"Alexander Wang"},
{name:"Michael Kors"},
]
},
},
})
</script></body></html>