黑马第8天-CFANZ编程社区

网站图标

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

精灵图

<style>
    .box {
      width: 24px;
      height: 13px;
      background-color: pink;
      margin: 100px auto;
      background-image: url(./topbar.png);
      background-repeat: no-repeat;
      /* 精灵图的关键在于调整位置 */
      background-position: -210px -140px;
    }
    .video {
      width: 90px;
      height: 32px;
      background-image: url(./topbar.png);
      background-repeat: no-repeat;
      background-position: -100px -140px;
    }
  </style>
</head>
<body>
  <div class="box">

  </div>

  <div class="video">

  </div>
</body>

精灵图2

 <style>
    .box {
      width: 66px;
      height: 12px;
      /* 二倍大小的精灵图 */
      background-image: url(./下载.png);
      background-repeat: no-repeat;
      background-size: 86px 150px;
      background-position: 0 -117px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>

字体图标

  <title>Document</title>
  <!-- 引入字体图标的样式 -->
  <!-- <link rel="stylesheet" href="http://at.alicdn.com/t/font_3266790_zb2fa4e5q4d.css"> -->
  <link rel="stylesheet" href="./font_3266790_e6uhn1hhd7h/iconfont.css">
  <style>
    .iconfont {
      font-size: 100px;
      color: red;
    }
  </style>
</head>
<body>
  <!--
    给盒子身上先添加类名 iconfont 这个类名是固定的，不能写错
    再添加具体的某个图标的类名
   -->
  <span class="iconfont icon-user"></span>
</body>

盒子阴影

  <style>
    .box {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      margin: 0 auto;
      font-size: 80px;
      /* x偏移 y偏移 模糊程度 */
      text-shadow: 10px 10px 20px 0px red;
    }
    .box:hover {
      /* x偏移 y偏移 模糊程度 模糊范围 */
      box-shadow: 10px 10px 20px 0px red;
    }
  </style>
</head>
<body>
  <div class="box">
    he
  </div>
</body>

定位的妙用拉宽盒子的宽高

 <style>
    .father {
      width: 300px;
      height: 300px;
      background-color: blue;
      position: relative;
      border: 10px solid #000;
    }
    .son {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">

    </div>
  </div>
</body>

定位的妙用垂直水平居中

 <style>
    .father {
      width: 500px;
      height: 500px;
      background-color: pink;
      position: relative;
    }
    /* 元素垂直水平居中 */
    img {
      /* 首先绝对定位之后4个方向都设置为0 */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /* 然后margin: auto必须要设置 */
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="father">
    <img src="./btn.png" alt="">
  </div>
</body>

定位妙用网页布局

<style>
    * {
      margin: 0;
      padding: 0;
    }
    nav {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 250px;
      background-color: blue;
    }
    header {
      position: absolute;
      top: 0;
      right: 0;
      left: 250px;
      height: 80px;
      background-color: yellow;
    }
    main {
      position: absolute;
      top: 80px;
      left: 250px;
      right: 0;
      bottom: 0;
      background-color: green;
    }
  </style>
</head>
<body>
  <nav></nav>
  <header></header>
  <main></main>
</body>

三栏布局1

<style>
    .left,
    .right {
      color: white;
      width: 200px;
      height: 200px;
      background-color: blue;
    }
    .left {
      float: left;
    }
    .right {
      float: right;
    }

    .center {
      color: white;
      height: 300px;
      background-color: red;
      /* 触发了BFC 不会和浮动的盒子重叠 计算高度时，浮动盒子的高度也会被算上 */
      overflow: hidden;


      /* margin-left: 200px;
      margin-right: 200px; */
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="left">1</div>
    <div class="right">2</div>
    <div class="center">3</div>
  </div>
</body>

三栏布局2

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .left,
    .right {
      color: white;
      width: 200px;
      height: 200px;
      background-color: blue;
    }
    .left {
      float: left;
    }
    .right {
      float: right;
    }

    .center {
      color: white;
      height: 300px;
      background-color: red;
      position: absolute;
      left: 200px;
      right: 200px;
    }

  </style>
</head>

<body>
  <div class="father">
    <div class="left">1</div>
    <div class="right">2</div>
    <div class="center">3</div>
  </div>
</body>

三栏布局3

 <style>
    * {
      margin: 0;
      padding: 0;
    }
    .left,
    .right {
      color: white;
      width: 200px;
      height: 200px;
      background-color: blue;
    }
    .left {
      float: left;
    }
    .right {
      float: left;
    }

    .center {
      float: left;
      color: white;
      height: 300px;
      background-color: red;
      /* 计算宽度 calc是一个计算函数 符号的左右两边一定要加空格*/
      width: calc(100% - 400px);
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="left">1</div>
    <div class="center">3</div>
    <div class="right">2</div>
  </div>
</body>

</html>
</body>

复习选择器

<style>
    /* 选择器 使用哪个方便就用哪个 */
    /* * 类 id 标签 */
    .father .grandson {}

    .son > .grandson {}

    .son,
    .grandson{}

    ul.grandson {}

    ul li:nth-child(1) {}
    ul li:first-child {}

    ul li:nth-of-type(1) {}
    .son > .grandson:not(ul) {
      color: blue;
    }
    .son .grandson:first-child::after {
      display: block;
      content: '最后一个';
    }
    .son .grandson:first-child:hover::after {
      background-color: pink;
    }


  </style>
</head>
<body>
  <div class="father">
    <div class="son">
      儿子的内容
      <section class="grandson">
        孙子的内容
        <ul>
          <li>hello1</li>
          <li>hello2</li>
          <li>hello3</li>
          <li>hello4</li>
          <li>hello5</li>
        </ul>

      </section>
      <section class="grandson">
        孙子的内容
        <ul>
          <li>hello1</li>
          <li>hello2</li>
          <li>hello3</li>
          <li>hello4</li>
          <li>hello5</li>
        </ul>
      </section>
      <ul class="grandson">
        孙女的内容
        <ul>
          <li>hello1</li>
          <li>hello2</li>
          <li>hello3</li>
          <li>hello4</li>
          <li>hello5</li>
        </ul>
      </ul>
    </div>
  </div>
</body>