今天學習了用網(wǎng)格做網(wǎng)站首頁。
最終效果如下：
Landing page
我的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first landing page</title>
<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title">
</head>
<body>
<div class="ui fixed inverted menu">
<a href="#" class="item">Home</a>
<a href="#" class="item">About</a>
<a href="#" class="item">Others</a>
</div>
<div class="ui vertical basic segment">
<div class="ui image">
<img src="images/banner.jpg" alt="" />
</div>
</div>
<div class="ui vertical basic segment">
<div class="ui grid">
<div class="ten wide column">
<div class="ui image">
<img src="images/devices2.png" alt="" />
</div>
</div>
<div class="six wide column">
<h2 class="ui header">
<i class="icon car"></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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</p>
</div>
</div>
</div>
<div class="ui vertical inverted very padded segment">
<div class="ui grid">
<div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h3 class="ui inverted header">company</h3>
</div>
<div class="item">
telephone
</div>
<div class="item">
telephone
</div>
<div class="item">
telephone
</div>
</div>
</div>
<div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h3 class="ui inverted header">company</h3>
</div>
<div class="item">
telephone
</div>
<div class="item">
telephone
</div>
<div class="item">
telephone
</div>
</div>
</div>
<div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h3 class="ui inverted header">company</h3>
</div>
<div class="item">
telephone
</div>
<div class="item">
telephone
</div>
<div class="item">
telephone
</div>
</div>
</div>
<div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h3 class="ui inverted header">company</h3>
</div>
<div class="item">
telephone
</div>
<div class="item">
telephone
</div>
<div class="item">
telephone
</div>
</div>
</div>
</div>
</div>
</body>
</html>
總結(jié)：
1.每個標簽或者網(wǎng)頁元素加上樣式就可以成為semantic ui 定義的樣子；
2.網(wǎng)頁中出新的文字要區(qū)分標題和內(nèi)容，標題用h1~h6 標簽，要根據(jù)實際顯示情況調(diào)整大小。內(nèi)容用p標簽。
3.每一個內(nèi)容和部分都要精細劃分后用標簽括起來，這樣可以直接看到元素的歸屬。
4.item作為menu 的子項目存在。
