HTML 学习笔记

作者: Faith_K | 来源:发表于2019-07-04 14:23 被阅读0次

1 常用的属性

width  宽度
height 高度
color 设置文颜色
font-size 字体大小
border-bottom
background-color 背景颜色
display inline 让块级标签->行内元素 block 让行内元素->块级标签 inline-block行内块级标签
margin 外边距
padding 内边距  padding-left padding-right...
border-radius 圆角 border-top-left-radius  border-top-right-radius...
float 浮动 left 左浮动 right右边浮动
 text-align 文本对齐 
position 是否开启位置改变  relative相对 absolute绝对 fixed 固定
line-height 设置行高
text-decoration  none去除下划线 如果去除不掉  text-decoration: none !important
list-style 设置列表风控
cursor 鼠标移动需要显示的类型
background: url("../images/desktop.png") 设置背景图片 background-repeat  no-repeat关闭平铺
background-size 背景大小
background-attachment 背景滚动 fixed
z-index 视图层级  1 2 3...
transform: scale(1.5) 图片放大一点五呗
transform-origin: bottom center 方向
box-sizing: border-box; 设置盒子伸缩 向内还是向外
vertical-align: middle 设置两个元素中间对齐
border: 1px solid #e0e0e0 设置边框宽度颜色
overflow: hidden  clear: both /*解决高度塌陷问题*/ .clearfix:before .clearfix:after

2 序号选择器

  不区分类型
            :first-child
                选中同级别中第一个标签
            :last-child
                选中同级别中最后一个标签
            :nth-last-child(n)
                选中同级别中倒数第n个标签
            :nth-child(n)
                选中同级别中第n个标签
            :only-child
                选中同级别中唯一子元素标签
 区分类型
            :first-of-type
                选中同级别中同类型第一个标签
            :last-of-type
                选中同级别中同类型最后一个标签
            :nth-of-type(n)
                选中同级别中同类型第n个标签
            :nth-last-of-type(n)
                选中同级别中同类型倒数第n个标签
            :only-of-type
                选中同级别中唯一同类型子元素标签
奇偶选择
            :nth-child(odd)
                选中级别中所有奇数
            :nth-child(even)
                选中同级别中所有的偶数
            :nth-child(xn+y)
                x,y是用户自定义的 n为计数器,从0开始递增选择,  到元素的总个数停止

相关文章

  • HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之基础标签

    HTML5学习笔记之基础标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之音视频标签

    HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记...

  • html

    html学习笔记

  • HTML5基本介绍

    HTML5基本介绍 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 ...

  • HTML5—HTML学习

    HTML学习感想: 下面大致的记录了一写HTML的学习笔记 什么是HTML? HTML 是HyperText Ma...

  • 初学HTML

    学习笔记(四)初学HTML HTML初步认识 HTML是英语HyperText Markup Language的缩...

  • HTML基础学习笔记

    原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...

  • cocos2d-html5 学习笔记​

    # cocos2d-html5 学习笔记

网友评论

    本文标题:HTML 学习笔记

    本文链接:https://www.haomeiwen.com/subject/wmnlhctx.html