- 引入依赖
samatic ui官网引入CDN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<!-- 头部cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
</head>
<body>
<!-- 在https://www.jsdelivr.com引入 jQuery-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 尾部引入cdn -->
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
</body>
</html>
2.导航页面
<!--------------------- 导航 ---------------------------------------->
<!-- “attached”补齐圆角 “inverted”为“反转”效果 -->
<nav class="ui attached inverted segment">
<!-- container为“适当大小的容器” -->
<div class="ui container">
<!-- menu为菜单 具体的用法详情“https://zijieke.com/semantic-ui/collections/menu.php”-->
<!-- secondary样式为“去除分割线，将菜单内容统一到同一水平线上” -->
<div class="ui inverted secondary menu">
<!-- teal为颜色 header为标题样式 用法详情“https://zijieke.com/semantic-ui/elements/header.php” -->
<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="idea icon"></i>归档</a>
<a href="#" class="item"><i class="tags icon"></i>标签</a>
<a href="#" class="item"><i class="info icon"></i>关于我</a>
<!-- 使用right aligned将放搜索框的菜单栏右对齐 -->
<div class="right aligned item">
<!-- transparent样式可以将搜索框黑化，inverted在这里的作用是将黑化的搜索图标反转 -->
<div class="ui icon inverted transparent input">
<input type="text" placeholder="Search……"/>
<i class="search icon"></i>
</div>
</div>
</div>
</div>
</nav>
3.在搜索框中加图标的方式
<div class="ui icon input">
<input type="text" placeholder=""/>
<i class="search icon"></i>
</div>
4.底部页面
<footer class="ui inverted attached segment m-padded-big">
<!-- 在container容器中使用center aligned 可以将容器内所有的元素居中 -->
<div class="ui center aligned container">
<div class="ui inverted divided grid">
<div class="three wide column">
<img src="./static/images/二维码.png" class="item" style="width: 100px;" >
</div>
<div class="three wide column">
<!---使用inverted link样式可将列表中的字体亮度调暗 -->
<div class="ui inverted link list">
<h4 class="m-text-thin">最新博客</h4>
<a href="#" class="item">用户故事</a>
<a href="#" class="item">用户故事</a>
<a href="#" class="item">用户故事</a>
</div>
</div>
<div class="three wide column">
<div class="ui inverted link list">
<h4 class="m-text-thin">最新博客</h4>
<a href="#" class="item">用户故事</a>
<a href="#" class="item">用户故事</a>
<a href="#" class="item">用户故事</a>
</div>
</div>
<div class="seven wide column">
<h4 class="m-text-thin">关于我</h4>
<p class="m-opacity m-text-thin m-text-spacing">这是我看的个人博客，会分享归于变差呢个写作思考，相关的的任何东西，希望可以开到这热的有</p>
</div>
</div>
<div class="ui divider"></div>
<div class="ui inverted segment m-padded-large">
<p class="m-opacity m-text-thin m-text-spacing">Copyright@2016-2020Lirenmi Designed by Lirenmi</p>
</div>
</div>
</footer>
5.截至目前为止自定义的css样式
/* --------如果发现自定义样式不能被应用需要做如下检查------------ */
/* --------1.检查路径是否正确------------ */
/* --------2.在CSS文件里是否“多写或少写”“括号和符号”“多余的字母或标点符号”------------ */
/* -------------padding内部间距------------------- */
/* 较小的内部间距 */
.m-padded-mini{
padding-top: 0.5em !important;
padding-bottom: 0.5em !important;
}
/* 内部间距 */
.m-padded-large{
padding-top: 2em !important;
padding-bottom: 2em !important;
}
/* 较大的内部间距 */
.m-padded-big{
padding-top: 5em !important;
padding-bottom: 5em !important;
}
/* ----------------text--------------------- */
/* 字体亮度 */
.m-opacity{
opacity: 0.7!important;
}
/* 字体间隔 */
.m-text-spacing{
letter-spacing: 1px !important;
}
.m-text-spacing-large{
letter-spacing: 2px !important;
}
/* 字体粗细度 */
.m-text-thin{
font-weight: 300 !important;
}
/* 行间距 */
.m-text-lined{
line-height: 1.8 !important;
}
/* -----------margin外部间距-------------- */
.m-margin-mini{
margin-top: 0.5em !important;
margin-bottom: 0.5em !important;
}
/* 稍大的外部边距 */
.m-margin-lr-tiny{
margin-left: 1em !important;
margin-right: 1em !important;
}
/* 底部的外部边距 */
.m-margin-bottom{
margin-bottom: 3em !important;
}
/* 较大的外部间距 */
.m-margin-large{
margin-top: 3em !important;
margin-bottom: 3em !important;
}
/* ----------自定义换行------------- */
.m-inline-block{
display: inline-block !important;
}
截至目前的效果
6.使用<div class="ui grid">组件可以将容器内的区域一共分割为十六分
<div class="ui segment">
<div class="ui container">
<!-- 通过"ui grid"将此区域分成 11比5-->
<div class="ui grid">
<div class="eleven wide column">
<div class="ui orange segment">
</div>
</div>
<div class="five wide column">
<div class="ui orange segment">
</div>
</div>
</div>
</div>
</div>
7.class="ui two column grid"此组件可将某区域分为两列
<div class="ui two column grid">
<div class="column">
<h2 class="ui teal header">博客</h2>
</div>
<div class=" right aligned column ">
<!-- 由于h2有自动换行的属性，所以这里需要自定义取消自动换行的功能 -->
共<h2 class="ui orange header m-inline-block">14</h2>页
</div>
</div>
**效果图
8.basic样式可以是按钮边线化
<div class="ui bottom attached segment">
<div class="ui two column grid">
<div class="column">
<!-- 浅绿色边线框 -->
<a href="#" class="ui teal basic button m-padded-mini">上一页</a>
</div>
<div class=" right aligned column ">
<a href="#" class="ui teal basic button m-padded-mini">下一页</a>
</div>
</div>
</div>
**效果图
9.中间内容的“左边部分”
<!----------------整体中间左边----------------------------------->
<div class="eleven wide column">
<!-- 顶部 -->
<div class="ui top attached segment">
<div class="ui two column grid">
<div class="column">
<h2 class="ui teal header">博客</h2>
</div>
<div class=" right aligned column ">
<!-- 由于h2有自动换行的属性，所以这里需要自定义取消自动换行的功能 -->
共<h2 class="ui orange header m-inline-block">14</h2>页
</div>
</div>
</div>
<!-- 内容-->
<div class="ui attached segment">
<div class="ui grid">
<!-- 内容左边 -->
<div class="eleven wide column">
<h3>最近在干嘛呢</h3>
<p class="m-text-spacing m-text-spacing-large">这是我看的个人博客，会分享归于变差呢个写作思考，相关的的任何东这是我看的个人博客这是我看的个人博客，会分享归于变差呢个写作思考，相关的的任何东这是我看的个人博客</p>
<div class="ui grid">
<div class="eleven wide column">
<!-- horizontal样式可以将竖向的列表变为横向 -->
<div class="ui horizontal link list">
<div class="item">
<img src="static/images/阿金斯.jpg" class="ui avatar image" >
</div>
<div class="item">
<i class="calendar icon"></i>2021-3-19
</div>
<div class="item">
<i class="eye icon"></i>22222
</div>
</div>
</div>
<div class="five wide column">
<a href="#" class="ui teal button">认知升级</a>
</div>
</div>
</div>
<!-- 内容右边 -->
<div class="center aligned five wide column">
<img src="static/images/斯科特.jpg" style="width: 150px;">
</div>
</div>
</div>
<!-- 底部 -->
<div class="ui bottom attached segment">
<div class="ui two column grid">
<div class="column">
<a href="#" class="ui teal basic button m-padded-mini">上一页</a>
</div>
<div class=" right aligned column ">
<a href="#" class="ui teal basic button m-padded-mini">下一页</a>
</div>
</div>
</div>
</div>
<!----------------整体中间右边----------------------------------->
<div class="five wide column">
<div class="ui segment">
</div>
</div>
</div>
</div>
</div>
**效果图
10.在一个标签里面添加一个“右对齐的数字”使用<div class="detail">
<a href="#" class="ui teal basic label m-margin-mini m-margin-lr-tiny">
思维认知
<div class="detail">45</div>
</a>
**效果图
11.在vertical将横向的菜单变为垂直方向 fluid将菜单充满容器 ；
同时在menu的item中添加div就会自动div中的元素右对齐
<div class="ui fluid vertical menu">
<div class="item">
思维认知
<div class="ui teal basic left pointing label">
55
</div>
</div>
</div>
**效果图
12.使用secondary属性可以将某个区域变暗
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="ui column">
<i class="ui idea icon"></i>分类
</div>
<div class="ui right aligned column">
<a href="#" class="ui teal">more</a>
</div>
</div>
</div>
**效果图
13.使用<h4 class="ui horizontal divider m-margin-large">可以将文字放在分割线中间
**效果图
14.使用<div class="ui centered card">放二维码区域
<h4 class="ui horizontal divider m-margin-large">扫码关注</h4>
<div class="ui centered card" style="width: 150px;">
<img src="static/images/二维码.png" class="ui rounded image" >
</div>
**效果图片
15.中间内容的“右边部分”
<!----------------整体中间右边----------------------------------->
<div class="five wide column">
<!----------------分类------------------>
<div class="ui segments m-margin-bottom">
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="ui column">
<i class="ui idea icon"></i>分类
</div>
<div class="ui right aligned column">
<a href="#" class="ui teal">more</a>
</div>
</div>
</div>
<div class="ui segment">
<!-- vertical将横向的菜单变为垂直方向 fluid将菜单充满容器 -->
<!-- 在menu的item中添加div就会自动div中的元素右对齐 -->
<div class="ui fluid vertical menu">
<div class="item">
思维认知
<div class="ui teal basic left pointing label">
55
</div>
</div>
<div class="item">
思维认知
<div class="ui teal basic left pointing label">
55
</div>
</div>
</div>
</div>
</div>
<!----------------标签------------------>
<div class="ui segments m-margin-bottom">
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="ui column">
<i class="ui idea icon"></i>分类
</div>
<div class="ui right aligned column">
<a href="#" class="ui teal">more</a>
</div>
</div>
</div>
<div class="ui segment">
<a href="#" class="ui teal basic label m-margin-mini m-margin-lr-tiny">
思维认知
<div class="detail">45</div>
</a>
<a href="#" class="ui teal basic label m-margin-mini m-margin-lr-tiny">
思维认知
<div class="detail">45</div>
</a>
</div>
</div>
<!-----------------最新博客---------- -->
<div class="ui segments m-margin-bottom">
<div class="ui secondary segment">
<i class="info icon"></i>
最新博客
</div>
<div class="ui segment">
<a href="#" class="">思维认知底层逻辑</a>
</div>
<div class="ui segment">
<a href="#" class="">思维认知底层逻辑</a>
</div>
</div>
<!---------------- 分割线 --------------------->
<h4 class="ui horizontal divider m-margin-large">扫码关注</h4>
<div class="ui centered card" style="width: 150px;">
<img src="static/images/二维码.png" class="ui rounded image" >
</div>
</div>
**最终效果图
扫一扫
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
