本文详细介绍了如何使用SemanticUI框架构建一个功能齐全的博客网站，包括首页导航栏的设计，采用stackable menu实现响应式布局，以及页面主体的网格布局，将内容分为博客列表和侧边栏，侧边栏包含分类、标签等模块。同时，页面底部的footer也进行了设计，划分了二维码、最新博客、联系方式和自我介绍等区域。整个设计注重用户体验和视觉美感，实现了良好的信息组织和交互体验。
-----------------页面设计-----------------
（一）Semantic UI的引入及依赖导入
index.html(首页)
在HTML文件的head导入该框架的CSS文件如下：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
在HTML文件的body引入依赖：
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
（二）导航栏的设计
利用该框架中的 segment 元素设计导航栏，使用container 作为包容器，使用stackable menu 实现手机端的可堆叠式菜单栏
导航栏功能分为 首页、分类、标签、关于我、搜索五部分
segment 原本的颜色为白色，此处为了美观，使用 inverted 进行颜色反转
<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini">
<div class="ui container">
<div class="ui inverted secondary stackable menu">
<h2 class="ui teal header item">Blog</h2>
<a href="#" class="item"><i class="home icon"></i>首页</a>
<a href="#" class="item"><i class="idea icon"></i>分类</a>
<a href="#" class="item"><i class="tags icon"></i>标签</a>
<a href="#" class="item"><i class="info icon"></i>关于我</a>
<div class="right item">
<div class="ui icon inverted transparent input">
<input type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
</div>
</div>
</div>
</nav>
效果如图
（三）页面中间内容设计
.中间分为左右两部分，使用框架中的 grid 进行布局，grid 控件一共分为16部分，左边为博客列表，占11份；剩下的5分为右边的分类、标签等功能。
<!--页面主体-->
<div class="m-padded-tb-large m-container">
<div class="ui container">
<div class="ui stackable grid">
<!--主体左边-->
<div class="eleven wide column">
<!--左边头部-->
<div class="ui top attached segment">
<!--左边头部拆分为两部分-->
<div class="ui middle aligned two column grid">
<div class="column">
<!--左边-->
<h3 class="ui teal header">博客</h3>
</div>
<!--右边-->
<div class="right aligned column">
共<h2 class="ui orange header m-inline-block m-text-thin">14</h2>篇
</div>
</div>
</div>
<!--博客列表list-->
<div class="ui attached segment">
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<!--list left 博客标题和内容-->
<div class="eleven wide column">
<h3 class="ui header">叽里呱啦</h3>
<p class="m-text">叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
</p>
<div class="ui stackable grid">
<!--list left bottom left 用户名、日期、浏览量-->
<div class="eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="F:\桌面\like\SAM_0098.JPG" alt="" class="ui avatar image">
<div class="content"><a href="" class="header">这是作者</a></div>
</div>
<div class="item"><i class="calendar icon"></i>年-月-日</div>
<div class="item"><i class="eye icon"></i>这是浏览量</div>
</div>
</div>
<!--list left bottom right 认知升级-->
<div class="right aligned five wide column">
<a href="" target="_blank"
class="ui teal basic label m-padded-tiny m-text-thin">这是标签</a>
</div>
</div>
</div>
<!--list right 这里是图片-->
<div class="five wide column">
<a href="#" target="_blank">
<img src="../static/images/demo.JPG" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<!--list left 博客标题和内容-->
<div class="eleven wide column">
<h3 class="ui header">叽里呱啦</h3>
<p class="m-text">叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
</p>
<div class="ui stackable grid">
<!--list left bottom left 用户名、日期、浏览量-->
<div class="eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="F:\桌面\like\SAM_0098.JPG" alt="" class="ui avatar image">
<div class="content"><a href="" class="header">这是作者</a></div>
</div>
<div class="item"><i class="calendar icon"></i>年-月-日</div>
<div class="item"><i class="eye icon"></i>这是浏览量</div>
</div>
</div>
<!--list left bottom right 认知升级-->
<div class="right aligned five wide column">
<a href="" target="_blank"
class="ui teal basic label m-padded-tiny m-text-thin">这是标签</a>
</div>
</div>
</div>
<!--list right 这里是图片-->
<div class="five wide column">
<a href="#" target="_blank">
<img src="../static/images/demo.JPG" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<!--list left 博客标题和内容-->
<div class="eleven wide column">
<h3 class="ui header">叽里呱啦</h3>
<p class="m-text">叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
</p>
<div class="ui stackable grid">
<!--list left bottom left 用户名、日期、浏览量-->
<div class="eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="F:\桌面\like\SAM_0098.JPG" alt="" class="ui avatar image">
<div class="content"><a href="" class="header">这是作者</a></div>
</div>
<div class="item"><i class="calendar icon"></i>年-月-日</div>
<div class="item"><i class="eye icon"></i>这是浏览量</div>
</div>
</div>
<!--list left bottom right 认知升级-->
<div class="right aligned five wide column">
<a href="" target="_blank"
class="ui teal basic label m-padded-tiny m-text-thin">这是标签</a>
</div>
</div>
</div>
<!--list right 这里是图片-->
<div class="five wide column">
<a href="#" target="_blank">
<img src="../static/images/demo.JPG" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
</div>
<!--注意jio下-->
<div class="ui bottom attached segment">
<div class="ui middle aligned two column grid">
<div class="column">
<a href="" class="ui teal basic mini button">上一页</a>
</div>
<div class="right aligned column">
<a href="" class="ui teal basic mini button">下一页</a>
</div>
</div>
</div>
</div>
<!--right 右侧的top-->
<div class="five wide column">
<!--分类-->
<div class="ui segments">
<!--header-->
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column"><i class="idea icon"></i>分类</div>
<div class="right aligned column"><a href="" target="_blanck">More</a><i
class="angle double right icon"></i></div>
</div>
</div>
<!--list-->
<div class="ui teal segment">
<div class="ui fluid vertical menu">
<a href="" class="item">
Blog
<div class="ui teal basic left pointing label">1</div>
</a>
<a href="" class="item">
Blog
<div class="ui teal basic left pointing label">1</div>
</a>
<a href="" class="item">
Blog
<div class="ui teal basic left pointing label">1</div>
</a>
<a href="" class="item">
Blog
<div class="ui teal basic left pointing label">1</div>
</a>
<a href="" class="item">
Blog
<div class="ui teal basic left pointing label">1</div>
</a>
<a href="" class="item">
Blog
<div class="ui teal basic left pointing label">1</div>
</a>
</div>
</div>
</div>
<!--标签-->
<div class="ui segments m-margin-top-large">
<!--header-->
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column"><i class="tags icon"></i>标签</div>
<div class="right aligned column"><a href="" target="_blanck">More</a><i
class="angle double right icon"></i></div>
</div>
</div>
<!--内容list-->
<div class="ui teal segment">
<a href="#" target="_blanck" class="ui tag label m-margin-tb-tiny">
Blog <div class="detail">1</div>
</a>
<a href="#" target="_blanck" class="ui tag label m-margin-tb-tiny">
Blog <div class="detail">1</div>
</a>
<a href="#" target="_blanck" class="ui tag label m-margin-tb-tiny">
Blog <div class="detail">1</div>
</a>
<a href="#" target="_blanck" class="ui tag label m-margin-tb-tiny">
Blog <div class="detail">1</div>
</a>
<a href="#" target="_blanck" class="ui tag label m-margin-tb-tiny">
Blog <div class="detail">1</div>
</a>
<a href="#" target="_blanck" class="ui tag label m-margin-tb-tiny">
Blog <div class="detail">1</div>
</a>
</div>
</div>
<!--最新推荐-->
<div class="ui segments m-margin-top-large">
<!--header-->
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column"><i class="tags icon"></i>最新推荐</div>
</div>
</div>
<!--博客list-->
<div class="ui segment">
<a href="" target="_blanck" class="m-black m-text-thin">Blog</a>
</div>
<div class="ui segment">
<a href="" target="_blanck" class="m-black m-text-thin">Blog</a>
</div>
<div class="ui segment">
<a href="" target="_blanck" class="m-black m-text-thin">Blog</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
此时整体效果如图：
页面底部
页脚依然采用 grid ，分为二维码（3份）、最新博客（3份）、联系方式（4份）、自我介绍（6份）四个部分
二维码使用 img 插入，最新博客及联系方式采用 a 标签，自我介绍使用 p 标签
最后使用 p 标签加入Copyright 等内容即可
<!--底部footer-->
<footer class="ui inverted vertical segment m-padded-massive">
<div class="ui center aligned container">
<div class="ui inverted divided grid">
<div class="three wide column">
<div class="ui inverted link list">
<div class="item">
<img src="../static/images/demo.jpg" class="ui rounded image" alt="" style="width: 110px">
</div>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header m-text-spaced m-text-lined m-opacity-mini">最新博客</h4>
<div class="ui inverted link list">
<a href="#" class="item">Blog</a>
<a href="#" class="item">Blog</a>
<a href="#" class="item">Blog</a>
</div>
</div>
<div class="four wide column">
<h4 class="ui inverted header m-text-spaced m-text-lined m-opacity-mini">联系我</h4>
<div class="ui inverted link list">
<a href="#" class="item">Email：Blog</a>
<a href="#" class="item">QQ：Blog</a>
<a href="#" class="item">微博：Blog</a>
</div>
</div>
<div class="six wide column">
<h4 class="ui inverted header m-text-spaced m-text-lined m-opacity-mini">My Blog</h4>
<p class="m-opacity-mini m-text-lined">BlogBlogBlogBlogBlogBlogBlogBlogBlogBlogBlogBlogBlog</p>
</div>
</div>
<div class="ui inverted section divider "></div>
<p class="m-text-thin m-text-spaced m-text-lined m-opacity-mini">Copyright © 2020 Designed by Blog</p>
</div>
</footer>
底部效果如图
整体效果
6806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
