[成都|内门弟子]JS-韦骁|2023年01月13日的日报-技能树.IT修真院

发表于： 2023-01-13 20:01:07

0 286

关于插件的知识点：

什么是插件？

js插件就是js文件，它遵循一定规范编写，方便展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。

特定：它一般为了解决某个问题而专门存在，功能单一，并且比较小。

插件的使用总结：

1、确认插件实现的功能

2、去官网查看使用说明

3、下载插件

4、打开demo实例文件，查看需要引入的相关文件，并且引入

5、复制demo实例文件中的结构html，样式css以及js代码

使用bootstrap完成的案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <!-- 一定不要忘记引入bootstrap 的样式文件 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- 引入自己的首页样式文件： -->
  <link rel="stylesheet" href="移动端练习css/阿里百秀.css">
  <!--  先引入jqueery js文件-->
  <script src="bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <title>Document</title>
</head>
<body>
<div class="container">
  <div class="row">
    <header class="col-md-2">
      <!-- 上面logo： -->
      <div class="logo">
        <a href="#"><img src="../js2-DOM/图片/猫.jpg" alt="" class="hidden-xs"></a>
        <span class="visible-xs">阿里百秀</span>
      </div>
      <div class="nav">
        <ul>
          <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
          <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
          <li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li>
          <li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
          <li><a href="#" class="glyphicon glyphicon-glass">美食杰</a></li>
        </ul>
      </div>
    </header>


    <article class="col-md-7">
      <!-- 新闻： -->
      <div class="news clearfix">
        <ul>
          <li>
            <a href="#">
              <img src="../js2-DOM/图片/恶魔.jpg" alt="">
              <p>阿里百秀</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../js2-DOM/图片/狗.jpg" alt="">
              <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../js2-DOM/图片/狗.jpg" alt="">
              <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../js2-DOM/图片/狗.jpg" alt="">
              <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../js2-DOM/图片/狗.jpg" alt="">
              <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
            </a>
          </li>
        </ul>
      </div>
      <!-- 发表： -->
      <div class="publish">
        <div class="row">
          <div class="col-sm-9">
            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
            <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
            <p class=" hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
            </p>
          </div>
          <div class="col-sm-3 pic hidden-xs">
            <img src="../js2-DOM/图片/猫.jpg" alt="">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
            <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
            <p class=" hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
            </p>
          </div>
          <div class="col-sm-3 pic hidden-xs">
            <img src="../js2-DOM/图片/狗.jpg" alt="">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
            <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
            <p class=" hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
            </p>
          </div>
          <div class="col-sm-3 pic hidden-xs">
            <img src="../js2-DOM/图片/狗.jpg" alt="">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
            <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
            <p class=" hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
            </p>
          </div>
          <div class="col-sm-3 pic hidden-xs">
            <img src="../js2-DOM/图片/狗.jpg" alt="">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
            <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
            <p class=" hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
            </p>
          </div>
          <div class="col-sm-3 pic hidden-xs">
            <img src="../js2-DOM/图片/猫.jpg" alt="">
          </div>
        </div>
      </div>
    </article>


    <aside class="col-md-3">
      <a href="#" class="banner">
        <img src="../js2-DOM/图片/狗.jpg" alt="">
      </a>
      <a href="#" class="hot">
        <span class="btn btn-primary">热搜</span>
        <h4 class="text-primary">欢迎加入中国博客联盟</h4>
        <p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
      </a>
    </aside>
  </div>
</div>
</body>
</html>

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
a {
    color: #666;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
body {
    background-color: #f5f5f5;
}
.container {
    background-color: #fff;
}

/* 修改 container 最大宽度为 1280  根据设计稿来走 */
@media screen and (min-width: 1280px) {
    .container {
        width: 1280px;
    }
}

/* header */
header {
    padding-left: 0 !important;
}
.logo {
    background-color: skyblue;
}
.logo img {
    display: block;
    margin: 0 auto;
    /* logo图片不需要缩放： */
    max-width: 100%;
}

/* 1.我们如果进入了超小屏幕下，logo 里面的图片就隐藏起来： */
/* 2.我们事先准备好一个盒子 在logo里面，他平时是隐藏起来的，只有在超小屏幕下才显示： */
.logo span {
    display: block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

.nav {
    background-color: #eee;
    border: 1px solid #ccc;
}
.nav a {
    display: block;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    font-size: 16px;
}
.nav a:hover {
    background-color: #fff;
    color: #333;
}
.nav a::before {
    vertical-align: middle;
    padding-right: 5px;
}

/* 当我们进入 小屏幕 还有 超小屏幕的时候 我们 nav 里面的 li 浮动起来，并且宽度为20%： */
@media screen and (max-width: 991px) {
    .nav li {
        float: left;
        width: 20%;
    }
    article {
        margin-top: 10px;
    }
}
/* 当我们进入超小屏幕下时 我们 nav 文字会变成14px： */
@media screen and (max-width: 767px) {
    .nav li a {
        font-size: 14px;
        padding-left: 3px;
    }
    /* 当我们处于超小屏幕 第一个 li 宽度为 100% 剩下的小 li 各占50%： */
    .news li:nth-child(1) {
        width: 100% !important;
    }
    .news li {
        width: 50% !important;
    }
    .publish h3 {
        font-size: 14px;
    }
}

.news li {
    width: 25%;
    float: left;
    height: 128px;
    padding-right: 10px;
    margin-bottom: 10px;
}
.news li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.news li a img {
    width: 100%;
    height: 100%;
}
.news li a p {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    font-size: 12px;
    color: #fff;
    width: 100%;
    height: 41px;
    margin-bottom: 0;
    padding: 5px 10px;
}

.news li:nth-child(1) {
    height: 266px;
    width: 50%;
}

.news li:nth-child(1) p {
    line-height: 41px;
    font-size: 20px;
    padding: 0 10px;
}

.publish {
    border-top: 1px solid #ccc;
}
.publish .row {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}
.pic {
    margin-top: 10px;
}
.pic img {
    width: 100%;
}

.banner img {
    width: 100%;
}

.hot {
    border: 1px solid #ccc;
    display: block;
    margin-top: 20px;
    padding: 0 20px 0;
}
.hot span {
    border-radius: 0;
    margin-bottom: 20px;
}
.hot p {
    font-size: 12px;
}

返回列表

【任务1】 [成都|内门弟子]JS-韦骁 | 2023年01月13日 的日报

评论

分享到

【任务1】 [成都|内门弟子]JS-韦骁 | 2023年01月13日的日报