静态页面复习--用网格写一个landing page
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8"> </head> <body> <div class="ui fixed inverted menu"> <a href="#" class="item">Home</a> <a href="#" class="item">About</a> <a href="#" class="item">Other</a> </div> <div class="ui vertical inverted segment"> <div class="ui image"> <img src="images/banner-landing page.jpg" alt="" /> </div> </div> <div class="ui vertical segment"> <div class="ui grid"> <div class="ui ten wide column"> <div class="ui image"> <img src="images/devices2.png" alt="" /> </div> </div> <div class="ui six wide column"> <h2 class="ui header"> <i class="icon star"></i> this is a title </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> </div> <div class="ui vertical very padded inverted segment"> <div class="ui grid"> <div class="ui four wide column"> <div class="ui vertical inverted text menu"> <div class="item"> <h4 class="ui inverted header">Company</h4> </div> <div class="item"> address:cn </div> <div class="item"> tel:00000000 </div> <div class="item"> fax:11111111 </div> </div> </div> <div class="ui four wide column"> <div class="ui vertical inverted text menu"> <div class="item"> <h4 class="ui inverted header">Company</h4> </div> <div class="item"> address:cn </div> <div class="item"> tel:00000000 </div> <div class="item"> fax:11111111 </div> </div> </div> <div class="ui four wide column"> <div class="ui vertical inverted text menu"> <div class="item"> <h4 class="ui inverted header">Company</h4> </div> <div class="item"> address:cn </div> <div class="item"> tel:00000000 </div> <div class="item"> fax:11111111 </div> </div> </div> <div class="ui four wide column"> <div class="ui vertical inverted text menu"> <div class="item"> <h4 class="ui inverted header">Company</h4> </div> <div class="item"> address:cn </div> <div class="item"> tel:00000000 </div> <div class="item"> fax:11111111 </div> </div> </div> </div> </div> </body> </html>
新用到的样式相关源码：
.ui.menu.fixed {
position: fixed;
z-index: 101;
margin: 0em;
width: 100%;
}
.ui.text.menu {
background: none transparent;
border-radius: 0px;
box-shadow: none;
border: none;
margin: 1em -0.5em;
}
.ui.text.menu .item {
border-radius: 0px;
box-shadow: none;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center; //居中对齐弹性对象元素内的某个项
margin: 0em 0em;
padding: 0.35714286em 0.5em;
font-weight: normal;
color: rgba(0, 0, 0, 0.6);
-webkit-transition: opacity 0.1s ease;
transition: opacity 0.1s ease;
}
