b站小而美-页面开发-首页_2021-05-15

最新推荐文章于 2024-08-15 11:09:11 发布

关爷的发园

最新推荐文章于 2024-08-15 11:09:11 发布

阅读量221

点赞数

分类专栏：学习留档文章标签： html css java

本文链接：https://blog.csdn.net/weixin_42042774/article/details/116849749

版权

学习留档专栏收录该内容

6 篇文章 0 订阅

订阅专栏

小而美博客系统-学习留档

b站学习链接：https://www.bilibili.com/video/BV1KJ411D7bW?p=5&spm_id_from=pageDriver

-------------------------------------------------------------------------------------------------------------------------

使用软件：WebStorm 2021.1.1 x64

引用框架：semanticUI

Semantic UI 网址：https://semantic-ui.com/

引用框架：jquery

jquery网址：https://www.jsdelivr.com/

页面开发-首页-1

创建工程，创建如下包与主页的html

移动端的预览设置

<meta name="viewport" content="width=device-width,initial-scale=1.0">

引用资源

Semantic UI 网址：https://semantic-ui.com/

点击【菜单】在【配置】里面找到CDN，直接使用它提供的CDN这个资源。

CDN？？

把css拷过来放在<head></head>里，把js拷过来放在<body></body>里。

由于Semantic UI是基于jquery的，所以还需要再引用一下jquery

jquery网址：https://www.jsdelivr.com/

把js拷过来放在<body></body>里，用<script src='网址'></script>

以上，引用资源。

开始构建页面，先写好结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!移动端的预览设置>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
<!--导航-->
<nav>

</nav>

<!--中间内容-->
<div>

</div>

<!--底部-->
<footer>
    
</footer>

<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>
</body>
</html>

做导航

从导航开始做，因为使用 semanticUI，所以有现成的组件可以使用。

segment是个分段样式（默认基本是白色普通分段样式）

分段样式
标准分段	ui segment
翻转分段	ui inverted segment
依附	ui attached segment
带颜色的分段	ui red segment
右对齐	ui right aligned segment
居中对齐	ui center aligned segment
左对齐	ui left aligned segment

分段样式参考文章：https://blog.csdn.net/lianghecai52171314/article/details/107889041

方框容器参考文章：https://blog.csdn.net/lianghecai52171314/article/details/107881427

<!--导航  m-padded-td-mini css的me中自定义-->
<nav class="ui inverted attached segment m-padded-td-mini">
    <!--ui container标准方框容器,搭配其他组件一起使用-->
    <div class="ui container">
        <!--菜单栏  ui menu，中间也可以叠加样式-->
        <div class="ui inverted menu">
            <h2 class="ui teal header item">Blog</h2>
            <!--<a> 标签定义超链接,用于从一张页面链接到另一张页面-->
            <!--a href="#" 时表示一个空链接，点击时链接停留在当前页面，相当于刷新当前页面，有时使用该方法实现刷新本页面功能。-->
            <a href="#" class="item"><i class="home icon"></i>首页</a><!--i.home.icon +Tab 添加类的快捷键 -->
            <a href="#" class="item"><i class="idea icon"></i>分类</a><!--icon标就是一堆小图标-->
            <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 inverted icon transparent input"><!--transparent透明属性，inverted icon给图表翻转颜色，不然黑色背景看不见了-->
                    <!--<input> 标签规定用户可输入数据的输入字段-->
                    <input type="text" placeholder="Search...">
                    <!--在搜索框里面加icon,所以在div.ui.icon.input里面。link属性，链接样式-->
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>

</nav>

css

.m-padded-td-mini{
    /*元素的上内边距，em是相对长度单位，一个em就是14个像素*/
    /*由于semantic UI都是封装好的样式，如果想自定义，就需要写!important去提高级别覆盖寄存的样式*/
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;/*!important提高级别*/
}

导航样式图

以上，导航头结束。

做底部

container容器可参考文章链接：https://blog.csdn.net/lianghecai52171314/article/details/107881427

grid 可参考文章链接：https://blog.csdn.net/qq_43496316/article/details/107311930

<!--底部-->
<footer>
    <div class="ui inverted vertical segment m-padded-td-massive"><!--vertical消除两边的圆角。m-padded-td-massive自定义底部css样式-->
        <div class="ui center aligned container"><!--center aligned 容器对齐方式：居中对齐-->
            <div class="ui inverted divided grid"><!--grid网格,分成 16等分。inverted divided翻转分割条的颜色-->
                <div class="three wide column"><!--column网格的列--><!--row网格的行-->
                   <div class="ui inverted link list">
                       <div class="item"><!--item??为啥加上这句图片位置 就改变了？？？-->
                           <img src="./static/images/WeChat.jpg" class="ui rounded image" alt="" style="width: 110px"><!--rounded图片是钝角的。style设置了图片的宽度，px是像素单位-->
                       </div>
                   </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spacing">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item m-text-thin m-text-spacing">用户故事</a>
                        <a href="#" class="item m-text-thin m-text-spacing">刻意练习</a>
                        <a href="#" class="item m-text-thin m-text-spacing">失败要趁早</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spacing">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item m-text-thin m-text-spacing">Email:123456@qq.com</a>
                        <a href="#" class="item m-text-thin m-text-spacing">QQ:123456</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spacing">Blog</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item m-opacity-mini m-text-thin m-text-spacing">离开地球表面的阳光彩虹小白马</a>
                    </div>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spacing m-opacity-mini">---------------copyright--------------</p>
        </div>
    </div>
</footer>

.m-padded-td-mini{
    /*元素的上内边距，em是相对长度单位，一个em就是14个像素*/
    /*由于semantic UI都是封装好的样式，如果想自定义，就需要写!important去提高级别覆盖寄存的样式*/
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;/*!important提高级别*/
}
.m-padded-td-massive{
    padding-top: 5em !important;
    padding-bottom: 5em !important;/*!important提高级别*/
}

/*--------------text---------------*/
.m-text-thin{
    font-weight: 300 !important;
}

/*字的间距*/
.m-text-spacing{
    letter-spacing: 1px !important;
}

/*行间距*/
.m-text-lined{
    line-height: 1.8 !important;
}

/*透明度*/
.m-opacity-mini{
    opacity: 0.8 !important;
}

以上，底部结束。

关爷的发园

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
b站小而美-页面开发-首页_2021-05-15

小而美博客系统-学习留档b站学习链接：https://www.bilibili.com/video/BV1KJ411D7bW?p=5&spm_id_from=pageDriver-------------------------------------------------------------------------------------------------------------------------使用软件：WebStorm 2021.1.1 x64引用框架：sem
复制链接

扫一扫

专栏目录