码迷,mamicode.com
首页 > Web开发 > 详细

HTM、CSS学习总结

时间:2020-03-04 21:13:19      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:ati   break   serve   单词   列表   font   合并   平移   latex   

基础

动作

link 正常
visited 已阅
hover 停留
active 正点

列表

列表:
list-style-type 标号类型
list-style-position 标号位置
list-style-image 图标url("")

表格

表格
border-collaspse:collapse 合并

选择器

选择器
tr:nth-child(odd奇|even偶)

div:nth-child(1);

注意

margin垂直方向会合并

清除图片、a标签空隙
font-size:0;

块状行内

1、块状元素:
独占一行
div/p/h1/ol/ul/table/form
2、行内元素inline:
width、height不能设置
span/a

3、行内块状元素inline-block:
都可以设置
img

clear:both; 左右都不会有浮动元素

盒子

盒子大小:

box-sizing: border-box;

定位

position:
static默认 z-index无效

fixed       相对浏览器窗口

relative    保留原位置
            相对直接父元素
            

absolute    不保留原位置
            相对static定位以外的第一个父元素或者body
            

三层定位:relative、absolute、absolute
两层定位:relative、absolute
z-index:-999

css3

border-top-left-radius:40px 20px; 左上角,
border-radius:20px;

阴影

box-shadow:
inset 水平偏移、垂直偏移、模糊距离、颜色
insct 可选、内部阴影
outset 默认值、外部阴影
traf + ctrl + e
chrome -webkit-
firfox -moz-
opera -o-
ie -ms-

2D

text-shadow:2px 2px 8px #ccc; 水平,垂直,阴影大小,颜色

长单词、URL强行换行

word-wrap:break-word;normal;

字体

@font-face{
font-family:myname;
src:url(‘fonts/myname.ttf‘),
url(‘fonts/myname.eot‘)
}
p{
font-family:myname;
}

3D动作

  • 旋转

    rotataDiv{

    tranform:rotate(30deg); //正30deg
    }

  • 缩放
    tranform:scale(1, 0.5);

  • 平移

    transform:translateX(150px);

  • all

    0%{
    transform:translateZ(0px) scale(1) rotateZ(0deg);
    }

过渡

transition:属性名(all),持续时间,过渡方法
transition-property:all; 对哪个属性进行变换
transitioin-duration 持续时间
transition-timing-function 过度使用的方法(函数)
linear匀速,ease慢快慢,ease-in

animation动画

@keyframes mycolor{
0% {background-color:red;}
30% {background-color:bule}
60% {background-color:yellow;}
100%{background-color:green;}
}
div:hover{
animation:mycolor 5s linear; // n或infinite无数次
//animation-play-state:running|paused;可以设置鼠标悬停时播放和移除暂停
}

3d

transform-style:preserve-3d;

tranform:rotateY(60deg);
x,y,z: z大拇指指向自己
perspective:100px; //舞台,眼睛到舞台的距离,远近不同

方向

x向右,y向下,z向前

HTM、CSS学习总结

标签:ati   break   serve   单词   列表   font   合并   平移   latex   

原文地址:https://www.cnblogs.com/first-bloodlalala/p/12411901.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!