今天学习了用网格做网站首页。
最终效果如下：
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>
总结：
1.每个标签或者网页元素加上样式就可以成为semantic ui 定义的样子；
2.网页中出新的文字要区分标题和内容，标题用h1~h6 标签，要根据实际显示情况调整大小。内容用p标签。
3.每一个内容和部分都要精细划分后用标签括起来，这样可以直接看到元素的归属。
4.item作为menu 的子项目存在。
网友评论