HTML和CSS入门（6）

来源：互联网发布：熊猫杀姐姐知乎编辑：程序博客网时间：2024/05/19 10:38

1.2D转换（以下属性均要注意兼容性）

水平左右平移:translate(X,Y)

div{            transform: translate(30px,20px);        }

也可以单独定义translateX（px）/translateY（px）

旋转：rotate（deg）

div{            transform: rotate(30deg);/*默认方向是顺时针*/        }

缩放：scale（X轴,Y轴）

div{            transform: scale(2,4);/*没有单位，0-1是缩小，>1是放大*/        }

倾斜：skew（X轴，Y轴）

div{            transform: skew(20deg,40deg);        }

定义旋转中心：transform-origin:right bottom/80% 50%
过渡：transition:名称变化时间速度延迟

div{             transition: transform 1s linear 1s;        }

2.3D转换

rotateX（deg）沿x轴旋转/rotateY（deg）沿y轴旋转
动画：@keyframes

@keyframes 自定义动画名称{from {background: red;}to {background: yellow;}}

也可以这样定义：

@keyframes 自定义动画名称{0% {background: red;}100% {background: yellow;}/*其中可以定义不同时间段的变化，例如25%等等*/}

调用：animation:动画名称变化时间速度延迟循环反向

div{             animation: flash 3s linear 1s infinite alternate;        }

多媒体查询：CSS3根据设置自适应显示。媒体查询可用于检测很多事情。viewport(视窗)的宽度与高度，设备的宽度与高度，朝向(智能手机横屏，竖屏)，分辨率。

<style>        body{            background:pink;        }        @media all and (min-width: 700px){            body{                background:green;            }        }/*屏幕宽度小于700px时会变成粉色*/    </style>

多媒体查询的调用：<link rel="stylesheet" href="" media="all"/>

自定义属性：data-属性名
调用：content:"("attr(data-属性名)")"
二级菜单
有时候因为网页的需要，我们要做的二级菜单的样式如下
未展开时：
展开后：

 <ul>                <li><a href="">我的淘宝</a><i></i>                    <ul>                        <li><a href="">已买到的宝贝</a></li>                        <li><a href="">已卖出的宝贝</a></li>                    </ul>                </li> </ul><!--先写出二级菜单的内容-->

.top-right>ul>li>ul{    position: absolute;    top:32px;    left:0;    border:solid 1px #e5e5e5;    border-top:none;    display: none;/*隐藏*/}.top-right>ul>li:hover>ul{    display: block;/*显示*/    background: #fff;}

弹性盒子

弹性盒子是CSS3的一种新的布局模式。CSS3弹性盒（Flexible Box或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="" media="all"/>    <style>        .flex-container {            display: -webkit-flex;            display: flex;            width: 400px;            height: 250px;            background-color: lightgrey;        }/*弹性容器*/        .flex-item {            background-color: cornflowerblue;            width: 100px;            height: 100px;            margin: 10px;        }/*弹性子元素*/    </style></head><body><div class="flex-container">    <div class="flex-item">flex item 1</div>    <div class="flex-item">flex item 2</div>    <div class="flex-item">flex item 3</div></div></body></html>

样式：这里写图片描述
修改排列方式：

body {    direction: rtl;}/*right to left*/

属性：flex-direction指定了弹性子元素在父容器中的位置。
它的值有：

row：横向从左到右排列，左对齐，默认的排列方式。
row-reverse：反转横向排列，右对齐。
column：纵向排列。
column-reverse：反转纵向排列。

.flex-container {    display: flex;    flex-direction: row-reverse;    width: 400px;    height: 250px;    background-color: lightgrey;}

阅读全文

0 0