3.4
2017-04-20 本文已影响6人
syeturing
<!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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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">
</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>
