一只小菜鸟的博客学习之路 —— index 页面

准备ING

创建文件夹

一只小菜鸟的博客学习之路 —— index 页面插图

引入前端样式
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<link rel="stylesheet" href="./css/me.css">
引入js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

敲代码ING

导航栏

一只小菜鸟的博客学习之路 —— index 页面插图1

<nav class="ui inverted attached segment">
        <div class="ui container">
            <div class="ui inverted secondary menu m-padded-tb-mini">
                <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>

ui ---> Semantic-UI框架的固定写法

inverted ---> 设置导航栏颜色,如不设置,则导航栏为白色

attached ---> 设置导航栏完全贴合页面,如不设置,则导航栏为圆角

segment --->

secondary --->

teal ---> 设置“Blog”的颜色为蓝色

item --->

i 标签设置图标 ---> "图标名 icon" 固定格式

transparent --->

底部Footer

一只小菜鸟的博客学习之路 —— index 页面插图2

    <footer class="ui inverted vertical segment m-padded-tb-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="./images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px;">
                        </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">用户故事(User Story)</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">Email:[email protected]</a>
                        <a href="#" class="item">QQ:1433360171</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客,会分享关于编程、写作、思考相关的任何内容,希望对来到这里的人有所帮助...
                    </p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright © 2016-2017 Xuhang Desigend by Xuhang</p>
        </div>

vertical --->

center aligned ---> 设置container中的文字居中

grid ---> 同理于“栅格系统”,将每行分为16份

divided ---> 设置竖直的分割线

link list --->

<div class="ui inverted section divider"></div> ---> 设置水平的分割线

<div class="three wide column"> ---> 设置二维码占三份

中间内容——左边博客内容

一只小菜鸟的博客学习之路 —— index 页面插图3

padded --->

horizontal --->

avatar --->

target="_blank" --->

teal basic ---> 设置“认知升级”的边框颜色为蓝色

rounded image ---> 设置头像为圆角图片

中间内容——右边的分类框

一只小菜鸟的博客学习之路 —— index 页面插图4

<div class="ui segments"> --->

<div class="ui fluid vertical menu"> ---> vertical menu表示竖着的菜单;fluid表示填充外层

版权声明:
作者:hanghang
文章:一只小菜鸟的博客学习之路 —— index 页面
链接:https://www.beiwangshan.com/archives/125.html
来源:beiwangshan.com
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>