WEB前端 开始学习 7.25

已于 2022-07-26 09:06:19 修改
阅读量197 收藏
点赞数
文章标签： 学习 html css 前端 servlet
于 2022-07-25 20:23:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiangKJZ/article/details/125982476
版权

1.今天开始学习JavaScript，第一天其实什么也没学，新来的老师讲的挺快，前一个知识点还没过脑子，下一个知识点就过来了，对于我这种先前没有任何计算机基础的学生来说，理解起来着实有点不容易。

2.今天没布置作业，下午时间都用来写第二个小项目了，进度还行吧，但后面还有弹性盒子的预习和JavaScript的预习，时间依然很紧张。

3.今天没作业，我就贴今天第二个小任务的进度吧。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>贴吧</title>
  <link rel="stylesheet" href="./贴吧.css" />
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" type="text/css" media="screen"
    href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css" />
  <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.css" />
  <link rel="stylesheet" href="./js/swiper-master 2/package/swiper-bundle.min.css" />
  <script src="./js/swiper-master 2/package/swiper-bundle.min.js"></script>
</head>

<body>
  <header>
    <div class="head-navigation">
      <ul class="head-right">
        <li>
          <a href="#">百度首页</a>
        </li>
        <li>
          <a href="#">我的贴吧<i class="icon ion-arrow-down-b"></i></a>
          <div class="head-xiala1">
            <i class="icon ion-arrow-up-b"></i>
            <ul>
              <li>
                <a href="#">我的贴吧</a>
              </li>
              <li>
                <a href="./个人主页.html">我的商城</a>
              </li>
              <li>
                <a href="#">我的收藏</a>
              </li>
              <li>
                <a href="#">我的网盘</a>
              </li>
              <li>
                <a href="#">我的游戏</a>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a href="#">消息<i class="icon ion-arrow-down-b"></i></a>
          <div class="head-xiala2">
            <i class="icon ion-arrow-up-b"></i>
            <ul>
              <li>
                <a href="#">查看私信</a>
              </li>
              <li>
                <a href="#">查看回复</a>
              </li>
              <li>
                <a href="#">我的收藏</a>
              </li>
              <li>
                <a href="#">查看@提到我</a>
              </li>
              <li>
                <a href="#">查看好友申请</a>
              </li>
              <li>
                <a href="#">查看新粉丝</a>
              </li>
              <li>
                <a href="#">我的收藏</a>
              </li>
              <li>
                <a href="#">我的通知</a>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a href="#">官方号服务中心</a>
        </li>
        <li class="head-member">
          <a href="#"><i class="fa fa-diamond" aria-hidden="true"></i>会员
            <i class="icon ion-arrow-down-b"></i></a>
          <div class="head-xiala3">
            <i class="icon ion-arrow-up-b"></i>
            <ul>
              <li>
                <a href="#"><i class="icon ion-document-text"></i>Y币钱包</a>
              </li>
              <li>
                <a href="#"><i class="icon ion-bag"></i>Y币商城</a>
              </li>
              <li>
                <a href="#"><i class="fa fa-diamond" aria-hidden="true"></i><span>会员商城</span></a>
              </li>

            </ul>
          </div>
        </li>
        <li>
          <a href="#">更多<i class="icon ion-arrow-down-b"></i></a>
          <div class="head-xiala4">
            <i class="icon ion-arrow-up-b"></i>
            <ul>
              <li>
                <a href="#">手机APP</a>
              </li>
              <li>
                <a href="#">应用中心</a>
              </li>
              <li>
                <a href="#">账号设置</a>
              </li>
              <li>
                <a href="#">贴吧设置</a>
              </li>
              <li>
                <a href="#">服务中心</a>
              </li>
              <li>
                <a href="#">问题反馈</a>
              </li>
              <li>
                <a href="#">退出</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <ul class="head-left">
        <li>
          <a href="#">网页</a>
        </li>
        <li>
          <a href="#">资讯</a>
        </li>
        <li>
          <a href="#">视频</a>
        </li>
        <li>
          <a href="#">图片</a>
        </li>
        <li>
          <a href="#">知道</a>
        </li>
        <li>
          <a href="#">文库</a>
        </li>
        <li style="color: rgb(102, 102, 102)">贴吧</li>
        <li>
          <a href="#">地图</a>
        </li>
        <li>
          <a href="#">采购</a>
        </li>
      </ul>
    </div>
    <div class="search">
      <div>
        <img src="./img/搜索框图片/贴吧logo.png" alt="">
      </div>
      <input type="text" placeholder="点击右上角“我的贴吧”，然后点击“”我的商城"><button>进入贴吧</button>
      <button>全吧搜索</button>
    </div>
    <div class="Carousel">
      <div class="Carousel-left">
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#">
                <img src="./img/轮播图图片/安倍.jpg" alt="" w />
                <img src="./img/轮播图图片/新区.jpg" alt="" />
                <img src="./img/轮播图图片/芒果.jpg" alt="" />
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="./img/轮播图图片/英雄联盟.jpg" alt="" />
                <img src="./img/轮播图图片/易烊千玺.jpg" alt="" />
                <img src="./img/轮播图图片/猫猫.png" alt="" />
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="./img/轮播图图片/杭州亚运会.png" alt="" />
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="./img/轮播图图片/龙族.png" alt="" width="250px" />
                <img src="./img/轮播图图片/传奇.jpg" alt="" width="440px" />
              </a>
            </div>
          </div>
          <div class="swiper-pagination"></div>
          <div class="swiper-button-prev prev"></div>
          <div class="swiper-button-next next"></div>
        </div>
        <script>
          var mySwiper = new Swiper(".swiper", {
            autoplay: true,
            loop: true,

            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },

            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        </script>
      </div>
      <div class="Carousel-right">
        <div>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>0</span>
          <span>8</span>
          <span>4</span>
          <span>8</span>
          <span>8</span>
        </div>
      </div>

    </div>
  </header>
  <main>
    <div class="main-left">
      <p>我在贴吧</p>
      <div class="main-left-one">
        <img src="./img/主体左边图片/头像.jpg" alt="" width="80px" style="border: 1px solid rgb(183, 183, 183);;">
        <div>
          <div><i class="icon ion-playstation"></i></div>
          <div><i class="icon ion-disc" style="color: rgb(255,161,69);"></i></div>
          <div><i class="icon ion-ios-game-controller-b" style="color: rgb(255,120,2);"></i></div>
          <p><a href="#" style="color: rgb(136,100,179);">[获取]</a></p>
        </div>
      </div>
      <div class="main-left-two">
        <p><span style="font-size: 13px;font-weight: bold;">爱逛的吧</span><i class="icon ion-gear-b"
            style="color: rgb(172,172,172);"></i></p>
        <button><i class="icon ion-edit"></i><span
            style="color: rgb(139,139,139);font-weight: bold;">一键签到</span></button>
      </div>
      <div class="main-left-third">
        <button>
          <span>抗压背锅</span>
          <span></span>
        </button>
        <button>
          <span>落俗</span>
          <span></span>
        </button>
        <button>
          <span>王者荣耀</span>
          <span></span>
        </button>
        <button>
          <span>lol陪玩</span>
          <span></span>
        </button>
        <button>
          <span>英雄联盟</span>
          <span></span>
        </button>
        <button>
          <span>海贼王</span>
          <span></span>
        </button>
        <button>
          <span>拳愿阿修罗</span>
          <span></span>
        </button>
        <button>
          <span>艾欧尼亚</span>
          <span></span>
        </button>
      </div>
      <button class="main-left-fourth">
        <span>查看更多</span>
      </button>
    </div>
    <div class="main-right">
      <div class="main-right-top">
        <div class="main-right-top-left">
          <img src="./img/主体右边图片/logo.png" alt="">
          <span>热门吧</span>
        </div>
        <div class="main-right-top-right">
          <a href="#">
            <div>
              <i class="icon ion-chevron-left"></i>
            </div>
          </a>
          <span>1/18</span>
          <a href="#">
            <div>
              <i class="icon ion-chevron-right"></i>
            </div>
          </a>
        </div>
      </div>
      <ul class="tubiao">
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div>
              <img src="./img/主体右边图片/图标/1.jpg" alt="" width="62px">
            </div>
            <div>
              <p>抗压背锅吧</p>
              <p><img src="./img/主体右边图片/小头像.png" alt="" width="12px"><span style="font-size: 12px;">381.3w</span></p>
              <p><img src="./img/主体右边图片/人数.png" alt="" width="12px"><span style="font-size: 12px;">10265.7w</span></p>
            </div>
          </a>
        </li>

      </ul>
    </div>
  </main>
</body>

</html>

css样式

body {
  min-width: 1500px;
}

/* head-navigation部分 */
.head-navigation {
  height: 35px;
  border-bottom: 1px solid rgb(232, 232, 232);
}

.head-navigation a {
  color: rgb(51, 51, 51);
}

.head-right {
  width: 502px;
  margin: 0 20px;
  line-height: 35px;
  float: right;

}

.head-left::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 15px;
  background-color: rgb(232, 232, 232);
  position: relative;
  top: 2px;
  left: 20px;
}

.head-right>li {
  font-size: 13px;
  float: left;
  margin: 0 10px;
}

.head-navigation i {
  margin: 0 5px;
  font-size: 15px;
  color: rgb(133, 133, 133);
}

.head-member>a>i:first-of-type {
  font-size: 15px;
  color: orange;
}

.head-left {
  margin: 0 20px;
  line-height: 35px;
  float: right;

}

.head-left>li {
  font-size: 14px;
  float: left;
  margin: 0 10px;
  font-weight: bold;
}

.head-xiala1 {
  width: 70px;
  height: 150px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(195, 195, 195);
  position: absolute;
  top: 36px;
  display: none;
}

.head-xiala1::after {
  content: "";
  width: 0;
  border: 4px solid rgb(255, 255, 255);
  border-color: transparent transparent rgb(255, 255, 255) transparent;
  position: relative;
  bottom: 181px;
  left: 31px;
}

.head-xiala1>i {
  font-size: 15px;
  position: absolute;
  left: 25px;
  top: -21px;
  color: rgb(195, 195, 195);
}

.head-right>li:hover .head-xiala1 {
  display: block;
}

.head-xiala1 li {
  text-align: center;
  height: 30px;
}

.head-xiala1 li>a {
  margin: 0 auto;
}

.head-xiala2 {
  padding: 0 10px;
  height: 250px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(195, 195, 195);
  position: absolute;
  top: 36px;
  right: 270px;
  display: none;
}

.head-xiala2::after {
  content: "";
  width: 0;
  border: 4px solid rgb(255, 255, 255);
  border-color: transparent transparent rgb(255, 255, 255) transparent;
  position: relative;
  bottom: 270px;
  left: 26px;
}

.head-xiala2>i {
  font-size: 15px;
  position: absolute;
  left: 30px;
  top: -21px;
  color: rgb(195, 195, 195);
}

.head-right>li:hover .head-xiala2 {
  display: block;
}

.head-xiala2 li {
  text-align: left;
  height: 30px;
}

.head-xiala3 {
  height: 110px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(195, 195, 195);
  position: absolute;
  top: 36px;
  right: 90px;
  padding: 0 10px;
  display: none;
}

.head-xiala3::after {
  content: "";
  width: 0;
  border: 4px solid rgb(255, 255, 255);
  border-color: transparent transparent rgb(255, 255, 255) transparent;
  position: relative;
  bottom: 137px;
  left: 36px;
}

.head-xiala3>i {
  font-size: 15px;
  position: absolute;
  left: 40px;
  top: -21px;
  color: rgb(195, 195, 195);
}

.head-right>li:hover .head-xiala3 {
  display: block;
}

.head-xiala3>ul i {
  color: blue;
}

.head-xiala3>ul span {
  color: red;
}

.head-xiala4 {
  height: 240px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(195, 195, 195);
  position: absolute;
  top: 36px;
  right: 10px;
  padding: 0 10px;
  display: none;
}

.head-xiala4::after {
  content: "";
  width: 0;
  border: 4px solid rgb(255, 255, 255);
  border-color: transparent transparent rgb(255, 255, 255) transparent;
  position: relative;
  bottom: 276px;
  left: 16px;
}

.head-xiala4>i {
  font-size: 15px;
  position: absolute;
  bottom: 226px;
  left: 20px;
  color: rgb(195, 195, 195);
}

.head-right>li:hover .head-xiala4 {
  display: block;
}

.search {
  width: 935px;
  margin: 40px auto;
}

.search>div>img {
  width: 135px;
  float: left;
  margin-right: 20px;
  position: relative;
  top: -9px;
}

.search>input {
  float: left;
  width: 536px;
  height: 34px;
  padding-left: 20px;
}

.search button {
  width: 104px;
  height: 40px;
}

.search button:first-of-type {
  border: 1px solid #38F;
  background: #3385ff;
  color: #fff;
}

.search button:last-of-type {
  border: 1px solid #38F;
  background: #fff;
  color: #38F;
}

.Carousel {
  width: 1010px;
  margin: 0 auto;
}

.Carousel-left {
  float: left;
}

/* 轮播图效果 */
.swiper-slide img {
  height: 180px;
}

.swiper {
  height: 230px;
  width: 700px;
  overflow: hidden;
  position: relative;
}

.swiper {
  --swiper-theme-color: #5c54d5;
  --swiper-navigation-color: #d3d3e2;
  --swiper-navigation-size: 30px;
  position: relative;
  top: 0;
  z-index: 1;
}

.swiper-pagination {
  position: absolute;
  bottom: 0px;
}

.swiper .prev {
  position: absolute;
  left: 5px;

}

.swiper .next {
  position: absolute;
  right: 15px;
}

/* 导航栏右侧 */
.Carousel-right {
  float: right;
  width: 308px;
  height: 180px;
  background-image: url(./img/轮播图图片/共有多少吧.png);
}

.Carousel-right>div {
  width: 210px;
  height: 29px;
  position: relative;
  top: 75px;
  padding-left: 60px;
  text-align: center;

}

.Carousel-right>div>span {
  width: 16px;
  height: 23px;
  display: inline-block;
  margin-right: 6px;
  background-color: #fff;
  color: rgb(144, 144, 144);
}

main {
  width: 1010px;
  margin: 0 auto;
  clear: both;

}

.main-left {
  display: inline-block;
  border: 2px solid rgb(183, 183, 183);
  padding: 10px;
  width: 220px;
  background-color: rgb(246,247,251);
  }

.main-left>p {
  margin: 10px;
}

.main-left-one>div {
  display: inline-block;
  vertical-align: top;
}


.main-left-one>div>div:nth-of-type(3) {
  float: left;
}

.main-left-one>div>p {
  float: left;
  position: relative;
  bottom: 20px;
}

.main-left-two {
  margin: 20px 0 10px;
}

.main-left-two>p {
  display: inline-block;
  margin-right: 20px;
}

.main-left-two>button {
  border: 1px solid rgb(133, 133, 133);
  border-radius: 5px;
}

.main-left-two>button:hover {
  background-color: rgb(231, 231, 231);
}

.main-left-third>button {
  font-size: 12px;
  line-height: 35px;
  padding-left: 6px;
  color: #444;
  float: left;
  height: 35px;
  margin-bottom: 3px;
  overflow: hidden;
  width: 84px;
  position: relative;
  margin-left: 8px;
  box-sizing: content-box;
  border-radius: 5px;
  border: 1px solid rgb(201, 201, 201);
}

.main-left-third>button:hover {
  background-color: rgb(231, 231, 231);
}

.main-left-two>button>i {
  color: orange;
  font-size: 20px;
}

.main-left-third>button>span:nth-of-type(1) {
  position: absolute;
  left: 5px;
  bottom: 0px
}

.main-left-third>button>span:nth-of-type(2) {
  position: absolute;
  top: 9px;
  right: 5px;
  width: 16px;
  height: 16px;
  background-image: url(./img/主体左边图片/雪碧图.png);
}

.main-left-fourth {
  background-color: #fcfcfc;
  margin: 0 auto;
  width: 188px;
  line-height: 36px;
  border: 1px solid #CCC;
  box-shadow: 0 1px 0 #f3f3f3;
  box-sizing: content-box;
  margin-left: 8px;
  border-radius: 5px;
  border: 1px solid rgb(201, 201, 201);
}
.main-right{
  width: 750px;
  float:right;
  border: 2px solid rgb(201, 201, 201);
  padding: 10px;
  box-sizing: border-box;
}
.main-right-top{
  overflow: hidden;
  margin-bottom: 30px;
}
.main-right-top-left{
  float:left;
}
.main-right-top-left>img{
  width: 18px;
  vertical-align: middle;
}
.main-right-top-left>span{
  font-weight: bold;
}
.main-right-top-right{
  float: right;
}
.main-right-top-right div{
  width: 16px;
  height: 16px;
  background-color:rgb(233,232,235) ;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}
.main-right-top-right div>i{
  font-size: 5px;
  position: relative;
  left: 4px;
  bottom: 4px;
}
.main-right-top-right>span{
  font-size: 10px;
  font-weight: bold;
  color: rgb(148,148,148);
}

.main-right>ul{
  clear: both;
  overflow: hidden;
  }
.main-right>ul>li{
  width: 180px;
  float: left;
margin-bottom: 10px;
}
.main-right>ul>li>a>div:first-of-type{
  float: left;
  border: 1px solid rgb(222,222,222);
}
.main-right>ul>li>a p:first-of-type{
  color: black;
}
.main-right>ul>li>a p:nth-of-type(2)>span{
  color: rgb(148,148,148);
}
.main-right>ul>li>a p:nth-of-type(3)>span{
  color: rgb(148,148,148);
}

LiangKJZ
关注
web前端面试题及答案整理（一）
顛沛流離的小時光
07-28 3474
web前端、HTML、CSS、JavaScript、DOM
web前端日常更新 7.25
m0_72174649的博客
07-25 153
今天实现的是名人名言，希望能够得到一些建议。谢谢
web前端的日常更新7.25
m0_72174711的博客
07-25 98
作业精灵背景图的介绍
7.25 web前端-淘宝首页设计
执笔绘江山的博客
07-25 9482
hello everybody，许久不见，甚是想念，关于我为什么四天没更新博客的原因就是本次文章的标题，没错，我们老师布置了项目设计，而我这个大怨种选择了淘宝首页这个页面内容多的，以至于我这个小白敲了四天才完成，那么，今天就来给大家分享一下我完成这个项目的过程吧（事先声明我的作品还原度并没有百分之百达到，做的不好请大家勿喷（QAQ）），下面先给大家做一个最终结果展示：...
web前端1+x（初级）理论（158道单选题含答案）
热门推荐
m0_69034993的博客
11-13 3万+
17、A文件夹与B文件夹是同级文件夹，其中A下有1.htm和2.htm文件，B下有3.htm和4.htm文件，现在我们希望在1.html文件中创建超链接，链接到4.htm，应该在1.htm页面代码中如何描述链接内容？18、< a id=”img” href=“**.jpg” title=“大连” >新闻< /a>，获取a元素title的属性值的方法是（C）。”，下列()语句能正获取系统当前时间的小时值。104.在 JavaScript 中 alert( "12">"9" ) 的运行结果正确的是（A ）。
第一篇 1+X考证 Web前端测试题（含答案解析）
灵魂学者的博客
04-03 1万+
第一篇 1+X考证测试题（含答案与解析）
Python之简易Web框架搭建
ncu5509121083的博客
06-29 2119
Python简易Web搭建之模板替换，路由映射，数据更新，日志记录........
2021年前端最新笔试百题
战场小包的博客
11-20 1万+
2021年前端最新笔试百题，题目来源牛客网在线试题，题目都是各大互联网大公司所出题目，质量可以保证，希望能帮到大家
2020-web前端-JavaScript基础笔记
itwangyang520的博客
10-08 620
====================================================================================================================================================== ==================================================================== JavaScript =========================
前端面试题第三套
艾夏SEO
12-15 2690
前端面试题第三套1.关于angularjs说法，错误的是 BA.前端MVC，极大降低前端开发的耦合 B.极大丰富了DOM操作 C.实现了数据双向绑定 D.实现了依赖注入 2.如何把7.25四舍五入为最接近的整数 DA.round(7.25) B.Rnd(7.25) C.Math.rnd(7.25) D.Math.round(7.25) 3.下面关于CSS布局的描述，不正确的是 DA.块级元素实际
Zabbx6.0(学习笔记)
weixin_46706540的博客
07-17 2903
zabbix6.0学习笔记
前端面试---笔试记录
weixin_49175902的博客
04-28 2821
今天上午去参加了一场国企的笔试面试。到中午的时候，通知笔试成绩合格。紧接着就是下午的面试。面试时是两位面试官，轮番吊打我，然后告诉我回家等通知，愉悦（ganga）的气氛就在此时凝固了。总之，面完出来，觉得自己这些年啥也没学会。和面试官say byebye以后拖着没有知识的脑袋回家了。下面总结一下今天的五十道笔试题。都是单选，每题2分，这里就不附正确答案了，题目比较基础，都自己尝试着做一下吧，就当是给正在找工作的小朋友们加点菜吧。 1、哪个元素表示给定范围内的标量值？ A.option B.meter C.l
社会实践（二）暑期计划
yangshiting84的博客
07-04 223
为接下来的暑期做好规划，主要调查了前端开发的市场需求内容并做分析，找好学习资源，深入学习
shader 案例学习笔记之将坐标系分成4个象限
最新发布
localhost
09-13 144
坐标系被分成了4个单元格，每个单元格都有唯一的索引，后续就可以根据索引去渲染。
UEFI学习笔记（五）：EDK II PCD的概念、类型、使用
qq_44189622的博客
09-11 797
如果在BIOS里面有一些模块是binary方式集成进来的而这些binary又需要用到PCD（用于Binary Release），那么这些Binary集成的要用到的PCD就必须要设置为。PCD的值存在memory里面，下次启动时，上次更改的值丢失了，每次启动都是从default值开始。是存在VPD空间的（在FLASH上，只读），一般是出厂配置。如果platform是从源码build出来的，没有binary在里面的时候，PCD用的都是。作用域在一个模块中（模块级的），可以在Binary Level进行修改。
Redis 入门 - 五大基础类型及其指令学习
IT规划师
09-11 720
学习Redis基础类型：字符串、集合、有序集合、列表、哈希，每种类型有各自的特点和常用指令。掌握这些基础是熟练使用Redis的关键。更多指令需自行尝试。
计算几何学习
网安小白
09-12 353
学习计算几何过程中对经典算法的记录
区块链学习笔记2--区块链技术的形成 以太坊
weixin_61074128的博客
09-10 350
以太坊的定义：以太坊是运行在一个计算机网络中的软件，他确保数据以及智能合约的小程序可以在没有宗信协调者的情况下，被所有网络中的计算机复制和处理。以太坊的改进： 交易速度加快；pow+pos算法，逐步向pos算法过渡；智能合约：不受人为因素影响，没有黑幕；比特币的出现让经济贸易变得简单，而比特币系统的不足，也同样被人诟病。于是出现了致力解决比特币不足的“V神”。以太坊的愿景是创建一个无法停止，抗屏蔽（审查）和自我维持的去中心化世界计算机。比特币的不足：交易速度慢；仅仅完成了货币的去中心化。
ssrp7.25由来
01-13
ssrp7.25的由来可以追溯到很久以前，当时一群热爱探索和表达的年轻人聚在一起，探讨着如何用文字和图像来传达自己的想法和情感。在这个过程中，他们不断尝试新的表达方式，积极追求创新和突破。在不断的探索和实践中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值