CSS核心样式

2020-10-24  本文已影响0人  安掌门dear

学前体会

本文收集自拉勾教育大前端就业班

CSS常用样式

1.font-weight

2.font-style

3.line-height

4.font综合属性

<p style="font: 14px "宋体";">字号 字体</p>
<p style="font: 14px/28px "宋体";">字号/行高 字体样式</p>
<p style="font: bold italic 14px/28px '宋体';">加粗 斜体 字体大小/行高 字体样式</p>

5.text-align 水平对齐

6.text-decoration文本修饰属性

7.text-indent文本缩进

盒模型

1.width

2.height

3.padding

4.border

5.margin

盒模型属性

清除默认样式

height应用

overflow属性

居中

父子盒模型

margin塌陷现象

标准文档流

微观现象

元素等级、布局元素的分类

显示模式display

脱离标准流

浮动float

浮动的性质

浮动元素依次贴边

浮动元素没有margin塌陷

浮动的元素让出标准流位置

字围现象

清除浮动

伪类

溢出隐藏

CSS伪类选择器

<a>标签的伪类

背景属性

background-color

background-image

background-repeat

background-position

background-attachment

综合写法

background: 图片地址  背景重复   背景定位   背景附着
background: url(image/i.jpg) no-repeat center top fixed #fff; 位置可以互换

文字隐藏方法

text-index需要转化为块级元素才能设置缩进

CSS精灵

背景半透明

背景缩放background-size

定位

定位属性position

偏移量属性

相对定位

绝对定位

祖先级为参考元素

固定定位

定位应用

压盖效果

居中

  1. 在需要居中的方向使用偏移量属性比如：left:50%
  2. 在给绝对定位的子盒子设置一个同方向的margin,属性为负的自身宽度的一半

压盖

轮播图实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    li{
      list-style: none;
    }
    .lunbo{
      position: relative;
      width: 500px;
      height: 750px;
      border: 1px solid chartreuse;
      margin: 0 auto;
    }
    .lunbo .pic li{
      position: absolute;
      display: none;
      top: 0;
      left: 0;
    }
    .lunbo .pic li img{
      width: 500px;
    }
    .lunbo .pic .current{
      display: block;
    }
    .lunbo .btn a{
      text-decoration: none;
      position: absolute;
      top: 50%;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      background-color: rgba(0, 0, 0, 0.3);
      font: 20px/40px "宋体";
      text-align: center;
      color: #000;
      font-weight: bold;
    }
    .lunbo .btn .leftbtn{
      left: 0;
      border-radius: 0 50% 50% 0;
    }
    .lunbo .btn .rightbtn{
      right: 0;
      border-radius: 50% 0 0 50%;
    }
    .lunbo .btn a:hover{
      background-color: rgba(0, 0, 0, 0.6);
    }
    .lunbo .sub{
      position: absolute;
      left: 100px;
      bottom: 50px;
      width: 300px;
    }
    .lunbo .sub li{
      float: left;
      width: 20px;
      height: 20px;
      margin-right: 20px;
      background-color:  rgba(0, 0, 0, 0.3);
      font: 12px/20px "微软雅黑";
      text-align: center;
      border-radius:50%;
      cursor: pointer;    /*光标变成小手*/
    }
    .lunbo .sub .current{
      border: 2px solid snow;
      display: block;
    }
    .lunbo .sub li:hover{
      border: 2px solid snow;
    }
  </style>
</head>
<body>
  <div class="lunbo">
    <ul class="pic" id="pic">
      <li class="current"><img src="lunbo/1.jpg" alt=""></li>
      <li><img src="lunbo/2.jpg" alt=""></li>
      <li><img src="lunbo/3.jpg" alt=""></li>
      <li><img src="lunbo/4.jpg" alt=""></li>
      <li><img src="lunbo/5.jpg" alt=""></li>
      <li><img src="lunbo/6.jpg" alt=""></li>
    </ul>
    <div class="btn">
      <a href="javascript:;" class="leftbtn">&lt;</a>
      <a href="javascript:;" class="rightbtn">&gt;</a>
    </div>
    <ol class="sub" id="sub">
      <li onclick="show(0)">1</li>
      <li onclick="show(1)">2</li>
      <li onclick="show(2)">3</li>
      <li onclick="show(3)">4</li>
      <li onclick="show(4)">5</li>
      <li onclick="show(5)">6</li>
    </ol>
  </div>
  <script>
    var lis=document.getElementById('sub').getElementsByTagName('li')
    var imgs=document.getElementById('pic').getElementsByTagName('li')
    function show(num){
      for(var i=0;i<imgs.length;i++){
        if(i==num){
          imgs[num].className="current"
          imgs[num].style.display="block"
        }else{
          imgs[i].className=""
          imgs[i].style.display=""
        }
      }
    }
  </script>
</body>
</html>

下一篇文章：CSS3新增内容 https://www.jianshu.com/p/99664ca751a9

上一篇 下一篇

猜你喜欢

热点阅读