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;
}
依次对应: 默认不换行 | 换行,第一行在上方。|换行,第一行在下方。

更多可访问 菜鸟教程指引

彼特城博客
请先登录后发表评论
  • latest comments
  • 总共0条评论