2021-10-23个人博客项目知识点记录

个人博客项目知识点记录

前端界面展示部分

由于前端部分采用了前端开发框架Semantic UI，因此这里主要记录一下在项目开发过程中所用到的知识点。

1.html + css + js 复习

• css 元素选择器
  • 类选择器

   <h1 class="important">
   This heading is very important.
   </h1>
   <p class="important">
   This paragraph is very important.
   </p>
  

 .important {color:red;}

在上面的代码中，两个元素的 class 都指定为 important：第一个标题（ h1 元素），第二个段落（p 元素）。
如果只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器.

p.important {color:red;}

只有段落显示为红色文本时，选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。

<p class="important warning">
This paragraph is a very important warning.
</p>

假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;

• ID选择器
  ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。ID选择器与类选择器不同之处在于：类选择器可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素，而且它还可以应用到更多元素。
  • ID 选择器只能在文档中使用一次：与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。（这里可以理解为html中id是唯一标识的）
  • 不能使用 ID 词列表：不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
  • ID 能包含更多含义：每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则

#mostImportant {color:red; background:yellow;

这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的 ID 值）：

<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

• 属性选择器
  属性选择器可以根据元素的属性及属性值来选择元素。

img[alt] {border: 5px solid red;}

可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：

planet[moons] {color:red;}

这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

2. Semantic UI框架学习

在使用此框架时，需要在html文件中引入以下代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>

同时在写前端时，可能会用到自己定义的css样式，因此先引入

<link rel="stylesheet" href="./static/css/me.css">

• 导航栏
  首页要达到的效果：
  

<nav class="ui inverted attached segment m-padded-tb-mini">
        <div class="ui container">
<!--            stackable可堆叠，方便移动端-->
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">Blog</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i> 归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i> 关于我</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui inverted icon transparent input">
                        <input type="text" placeholder="Search...">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>

代码解读：

<nav class="ui inverted attached segment m-padded-tb-mini">

nav: 代表导航栏
使用此框架功能，需要在class前标注ui
inverted: 让标题栏背景颜色由白色变为黑色
attached: 不加这个形容词，导航栏无法完全填充原本位置，会有圆角部分无法填充
segment: 基础分段。如果去掉就没有导航栏的黑色背景界面了。
m-padded-tb-mini：自定义上下间距样式，加上后缩小了黑色背景框的高度。

<div class="ui container">

在主流的前端框架中都会有容器的概念，但是在Semantic-UI中，如果要定义容器需要通过class=“ui container”，定义容器后，浏览器会根据不同的像素值判断当前网格的显示大小。semantic ui 提供容器 container 来快速实现固定宽度居中，使用container不需要任何grid

<div class="ui inverted secondary stackable menu">

secondary: 如果不加这个形容词，首页·分类·标签中间会有很明显的标志白线分区标志
menu: 表明为菜单样式
具体搭配形式可见以下链接：
link
stackable：这个形容词挺有意思，我们设计的前端展示界面不仅需要在电脑端展示，也需要在手机端展示，当缩小到手机尺寸时，首页·分类·标签需要由横向菜单变为纵向菜单形式。

<h2 class="ui teal header item">Blog</h2>

teal : 颜色
header: 导航栏的标题
item: 导航栏条目，若没有，则Blog与后面几个名称不存在包含关系

<a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
               <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
               <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a>
               <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i> 归档</a>
               <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i> 关于我</a>
               <div class="right m-item item m-mobile-hide">
                   <div class="ui inverted icon transparent input">
                       <input type="text" placeholder="Search...">
                       <i class="search link icon"></i>
                   </div>
               </div>

transparent ： 搜索栏底色为深色，若去掉则为白色的搜索框
m-mobile-hide: 这里是定义在手机端的功能，当界面缩小到指定手机尺寸，这几个首页·分类·标签会被隐藏
在自制css代码如下：

/*手机端隐藏*/
.m-mobile-show {
    display: none !important;
}
/*768px为最小缩小尺寸*/
@media screen and (max-width: 768px){
    .m-mobile-hide {
        display: none !important;
    }
    .m-mobile-show {
        display: block !important;
    }

当正常电脑尺寸时，不显示图标，
!important：表示比默认级别高，如果不加，则功能不会生效

<!--        指定图标可展开内容 menu toggle是利用jquery制造点击按钮出来隐藏的菜单功能-->
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>

toggle : 按钮可以格式化为开关
m-mobile-show: 自定义css格式，只有当界面宽度缩小到手机宽度时，才会显示出来。
sidebar icon：点击按钮生成侧边栏展示效果

<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide')
    })
</script>

这里选中menu的toggle，当界面缩小到手机界面时，触发（click），选择标签为m-item的首页·分类·标签进行隐藏操作，即缩小到手机尺寸，这几个板块会被收纳到一个按钮，点击之后会展开内容

博客详情页与博客首页导航栏一致

博客分类页唯一的不同在于

分类这个有被选择的样式，这是在代码里加入了active

<a href="#" class="active m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>

后面几个页面也都是active的位置发生了变化

• 内容栏
  首页内容页
  
  

    <div class="m-container m-padded-tb-big">
<!--        ui container可以适应屏幕，很好包裹元素-->
        <div class="ui container">
            <div class="ui stackable grid">

class=“m-container m-padded-tb-big”: 根据自定义规定格式
ui container可以适应屏幕，很好包裹元素-
stackable 表明手机页面大小，原本以左右列位置存放的会堆叠为上下结构
ui grid： 将整体几面可分为16列，之后左边博客和右边按11:5的比例进行切分


在左边的博客内容区域top-/-bottom为整体进行头部-内容-尾部结构划分
attached是保证这三部分可以合在一起，不写则会以板块的形式相互独立以较大间隙分开。

内容部分设计到一些样式的细小之处，之后有时间会系统结合Semantic-ui框架进行详细介绍。这里暂时省略。

• 底部
  

<footer class="ui inverted vertical segment m-padded-tb-massive">

inverted : 不加这个形容词，则会没有黑色背景
vertical：不加这个形容词，无法充满底部横向位置

divided: 用于底部上半界面四个部分之间的分界线
divider: 用于上下端之间的分界线
stackable: 手机端堆叠效果
上半界面代码如下：

<div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="./static/images/wechat.jpg" class="ui rounded image" style="width: 100px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <p class="m-opacity-mini m-text-thin m-text-spaced ">这是我的个人博客，会分享关于写作、编程、思考相关的内容，希望可以给来到这里的人有所帮助。。。</p>
                </div>
            </div>

上下之间的分界线与下部分内容代码如下：

<div class="ui inverted section divider"></div>
          <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright  ©2020-2021 Blog Desigh by LH</p>

同时介绍一下博客封面背景图的css代码

body {
   background: url("../images/bp2.png");
}

因为作用域是整个页面，所以在body之前不需要加.