• 高级选择器,边角,文本设置,和a的四大伪类选择器。图片精灵,模块定位,reset


    高级选择器

    通过父类到子类,兄弟选择,相邻选择器,位置选择器,多类,群组

    div >(父到子)p     div   p 到后代   p,div

    .div+.p              .div~.p

    li:nth-child(3)表示第三个元素是li的话

    li:body ul  nth-child(3)  在body ul下 第三个元素是li的话

    优先级伪类等同于class都小于id 都小于内联式 小于!impotant

    reset 清除系统默认设置

    常用的 

    p,body,h1,h2,h3,h4,h5,h6{margin=0}

    ul{margin=0,padding=0,list-style:none}

    a{text-decoration:none ,color:black}

    模块位置

    div{margin: 0 auto}

    margin-left:auto

    margin-left:(100%-self)/2

    边角

    左上右下,不足取对边

    border-radius:50%

    文本

    文字:颜色 字族 字重 大小/行高

    text-align: center; # 水平居中方式
    color: red; # 字体颜色
    font: 900 30px/120px "STSong"; # 字重 大小/行高 字族

    # 了解
    # em(自身->父->html) | rem(html)
    text-indent: 2em;

    font-size:50px;
    font-weight:bold; font-family: "楷体";
    /*line-height: 200px; text-align:center ;*/
    text-indent: 1em;
    text-decoration:overline; underline linethrough

    a 四个伪类选择器

    :link

    :hover鼠标提示

    :visited访问后

    :active 转链接时

    div {
    background: url("img/bg.png") no-repeat 10px 20px;
    图片地址 不平铺 x轴偏移 y轴偏移
    }
    精灵图操作本质: 控制背景图片的位置
    backgroud-position-x
    backgroud-position-y
    div:hover {
    backgroud-position-y: -20px;
    }

  • 相关阅读:
    zookeeper安装和使用
    一个最简单的Dubbo入门框架
    Dubbo Admin管理平台搭建
    Docker容器入门实践
    vue 项目安装 (入门)
    测试任何对象的某个特性是否存在 兼容js
    用户代理字符串检测呈现引擎、平台、Windows操作系统、移动设备和游戏系统 js
    React
    React (4) -- Conditional Rendering
    React (5) -- Lists and Keys
  • 原文地址:https://www.cnblogs.com/wrqysrt/p/10283923.html
Copyright © 2020-2023  润新知