背景图+盒子模型+浮动+变形

最新推荐文章于 2022-01-04 11:30:33 发布

Mode Cheng

最新推荐文章于 2022-01-04 11:30:33 发布

阅读量487

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_43885080/article/details/84672180

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

代码	功能
background-image：url（“ ”）	引入背景图
background-repeat: no-repeat	不平铺
background-repeat-x	横向平铺
background-repeat-y	纵向平铺
background-size：	可以加像素、百分比改变图片大小，容易拉伸
cover	让当前背景图恰好覆盖当前容器，图片不能拉伸，图片可能丢失一部分
contain	让当前容器恰好容纳当前背景图，图片不拉伸，容器可能会有空白
background-position：10px 10px	将背景图上下左右移动

有些代码可以合写成一个

<div></div>
<style>
    div{
        width: 100px;
        height: 100px;
        background: url("img") no-repeat 10px 10px;
        background-size: contain;
    }
</style>

#盒子模型

margin后像素代表的含义：

10px	上下左右
10px 10px 10px	上左右下
10px 10px 10px 10px	上右下左

border 边框

Soiled	实线
Dashed	虚线
Double	双边框
border-radius	5px 10px 15px 20px/5px 10px 15px 20px（左上角右上角右下角左下角 X/Y）

简单的动画效果

overflow: hidden	超出隐藏
cursor	pointer鼠标变手-+
hover	鼠标覆盖
transparent	颜色透明
dv:active{}	鼠标点击
background:fixed	固定值背景图
优先级Z-index：	默认0

鼠标放到div1上 div2会...
<style>
    #div1:hover #div2{}
</style>
<div id="div1">
    <div id="div2"></div>
</div>

浮动+清除浮动

标准流
非标准流

float：left	左浮动
float：right	右浮动
clear：left	清除左浮动
clear：both	全清除

清除浮动是增加兄弟节点，给兄弟节点加clear

用列表做页码
<style>
        li{
            list-style: none;
            float: left;
            background-color: lightgray;
            margin-left: 10px;
            font-size: 12px;
            padding:10px 15px ;
            border-radius: 5px;
            /*鼠标放上去变手*/
            cursor: pointer;
        }
        li:hover{
            background-color: orange;
            color: white;
        }
</style>
    
<ul>
    <li>首页</li>
    <li>上一页</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>下一页</li>
    <li>末页</li>
</ul>

定位

定位	position
相对定位	relative（相对于原来本身的位置定位，其所占的空间会保留）
绝对定位	absolute（相对于第一个采取定位的父元素来定位，其原来的位置不会保留）
固定位置	fixed（相对于浏览器屏幕）