css的居中效果、li鼠标悬浮背景颜色从上往下变化、选择器的分类与使用

zhigoo 发布于2019-08-30 14:15 / 2095人阅读

摘要：一居中效果行内垂直居中行内水平居中内块级元素水平居中内块级元素垂直居中二鼠标悬浮背景颜色从上往下变化三选择器的分类与使用核心选择器标签类并且或者层次后代子代下一个兄弟之后所有兄弟属性选择器过滤器配合基本选择器进行筛选选择具有

一 css居中效果
（1）div行内垂直居中

   div li{
        height:30px;
        line-height:30px; 
       }

(2)div行内水平居中

   div li{
       text-align:center;
       }

(3) div内块级元素水平居中

   div p{
        margin：0 auto；
        width:50%;
        }

（4）div内块级元素垂直居中

   div p{
   height:300px;
   line-height:300px;
   }

二、li鼠标悬浮背景颜色从上往下变化

ul li a{
    text-decoration: none;
    color:#ffffdffffd;
    display: block;
    background:linear-gradient(white 50%, #373735 50%);
    background-size: 100% 200%;
    background-position: 0 100%;
    
}
 ul li a:hover{
   background-position: 0 0%;
    color:#000;
    transition: background .3s ease;
    
}

三、选择器的分类与使用
（1）核心选择器

    标签
    类
    id
    并且     p.one#first
    或者        p,.one,#first

(2) 层次

    后代    parent sons
    子代    parent>sons
    下一个兄弟        .one+*
    之后所有兄弟     .one~*

(3) 属性选择器(过滤器)

    配合基本选择器进行筛选
    
    selector[name]
    input[name=username] 选择具有name属性的、并且name的值为val元素
    input[name*=use]选择具有name属性的、并且name的值包含user的元素    
    input[name^=u]选择具有name属性的、并且name的值以val开头的元素
    innput[name$=e]选择具有name属性的、并且name的值以e结尾的元su
    input[name~=username]选择具有name属性的、并且name的值之一为username的元素

(4) 伪类选择器

    配合基本选择器进行筛选
    1) 子元素
        :first-child
        :last-child
        :nth-child()
        :first-of-type
        :last-of-type
        :nth-of-type()
    2) 状态
        :hover
        :active
        :focus
(5) 伪元素选择器
    ::after
        常用于清除浮动，让浮动的子元素将父撑起来。

idc机房托管服务器托管使用js修改背景颜色服务器管理器的使用 html表的背景颜色鼠标悬浮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115888.html

css的居中效果、li鼠标悬浮背景颜色从上往下变化、选择器的分类与使用

摘要：一居中效果行内垂直居中行内水平居中内块级元素水平居中内块级元素垂直居中二鼠标悬浮背景颜色从上往下变化三选择器的分类与使用核心选择器标签类并且或者层次后代子代下一个兄弟之后所有兄弟属性选择器过滤器配合基本选择器进行筛选选择具有一 css居中效果（1）div行内垂直居中 div li{ height:30px; line-height:30px; ...

ideaa 2019-08-05 13:21 评论0 收藏0
文档流&文字&CSS常用命令

摘要：文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排注意事项内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断若想打断上述联结，请使用属性想打断的内联元文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排 sho...

zebrayoung 2019-08-30 14:13 评论0 收藏0
文档流&文字&CSS常用命令

摘要：文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排注意事项内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断若想打断上述联结，请使用属性想打断的内联元文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排 sho...

pingink 2019-08-01 18:43 评论0 收藏0
前端知识点总结——CSS

摘要：父元素没有上边框为子元素设置上外边距时在中嵌套一个子元素设置其尺寸为，并设置其背景颜色设置的上外边距为观察其结果。前端知识点总结——CSS 1.CSS的概述 1.什么是CSS? CSS：Cascading Style Sheets层叠样式表，级联样式表（简称：样式表） 2.作用设置HTML网页元素的样式 3.HTML与CSS的关系 HTML：负责内容的展示 CSS：负责内容（元素）...

nicercode 2019-08-30 14:01 评论0 收藏0
前端硬核面试专题之 CSS 55 问

摘要：前言本文讲解道前端面试的的内容。文章原文地址前端硬核面试专题之问。前端硬核面试专题的完整版在此前端硬核面试专题，包含数据结构与算法。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 前言本文讲解 55 道前端面试的 CSS 的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！注意：文章...

崔晓明 2019-08-30 15:44 评论0 收藏0