web前端基础-03-CSS代码汇

CSS常用代码示例

  1. 让div的大小占满整个屏幕
*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    width: 100%;
}
  1. bootstrap 常用的几个代码

    row 类会让元素在一行显示 一个row有12个格子 col后的数字 指的是所占格子数

    .col-xs- 超小屏幕 手机 (<768px)

    .col-sm- 小屏幕 平板 (≥768px)

    .col-md- 中等屏幕 桌面显示器 (≥992px)

    .col-lg- 大屏幕 大桌面显示器 (≥1200px)

<div class="row">
        <div class="hidden-xs col-sm-6 col-md-6 col-lg-6 ">
          <a href="">
              <img src="" />
              <span class=" "></span>
          </a>
      </div>
      <div class="col-xs-6 hidden-sm hidden-md hidden-lg ">
          <a href=" ">
              <img src="" />
              <span class=" "></span>
          </a>
      </div>
 </div>

3.交换两个div位置

.change{
    display: flex;
    flex-direction: row-reverse;
}
.div1, .div2{
    height:auto
}

<div class="row change">
    <div class="div1"> div1 </div>
    <div class="div2"> div2 </div>
</div>
  1. 简单左右晃动效果
.animate_text {
    -webkit-animation: move 2s infinite;
    animation: move 2s infinite;
    position: absolute;
    left: 30%;
    bottom: -5px;
    right: auto;
 }
 @keyframes move{
     0%{margin-left:0;}
     50%{margin-left:50px;}
     100%{margin-left:0;}
 }
 @-webkit-keyframes move{
     0%{margin-left:0;}
     50%{margin-left:50px;}
     100%{margin-left:0;}
 }

5.flex布局大法(pc端表现优秀 mobile有些不兼容)

通常是父元素指定:display:flex 布局,子元素配置flex 特性来布局,个人PC端常用如下:

flex-direction属性决定主轴的方向(即盒子的排列方向)。

.box {
 flex-direction: row | row-reverse | column | column-reverse;
}
依次对应: 横向左起排列 | 横向右起排列 | 竖向上到下 | 竖向下到上

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
依次对应: 左对齐 | 右对齐 | 居中 | 两端对齐,盒子之间的间隔都相等 | 每个盒子两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
依次对应: 起点对齐 | 终点对齐 | 中点对齐 | 与交叉轴两端对齐,轴线之间的间隔平均分布。 |
每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。| 轴线占满整个交叉轴。

flex-wrap属性定义,如果一条轴线排不下,如何换行

box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
依次对应: 默认不换行 | 换行,第一行在上方。|换行,第一行在下方。

HTML

Copy

更多可访问 菜鸟教程指引

个人博客停止维护,部分博客转载到这

  • 彼特城
  • 2020-08-20 11:03:23
本作品采用《CC 协议》,转载必须注明作者和本文链接
滴水穿石,石破天惊----晓疯子
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!