本文详细介绍了如何使用HTML框架设计一个具备导航栏、主体内容和底部区域的博客页面。导航栏包含首页、分类、标签、关于我、搜索等功能，并采用可堆叠式菜单适应手机端。页面主体采用网格布局，左侧为博客列表，右侧展示分类和标签。博客列表包括标题、内容、作者、日期和浏览量信息。底部设有二维码、最新博客、联系方式和自我介绍等板块，整体设计简洁且功能齐全。
1 在HTML文件的body引入依赖：
1
2
（二）导航栏的设计
利用该框架中的 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">东送二v哦</h3>
<p class="m-text">k欸你发觉上当了
</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>
底部效果如图
整体效果
首页完毕
扫一扫
909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
