• css的学习1


    这几天在学校就剩下一门课还没考试,所以这几天很闲,有时间就去图书馆淘书,昨天看到一本CSS3,觉得自己的前台做的确实不是很好,就在那儿看会儿,确实没让自己失望,确实不错的一本书,可能是之前觉得自己是.net的学生所以一直都忽略了前台,昨天看到CSS3的时候,确实令自己挺激动的,因为之前自己忽略的自己又想捡回来了,嘻嘻,希望不会晚,看了一点儿,做了点儿小练习


    我看的书是《CSS3实战》


    做了前两个小练习:

    第一个练习觉得用的就是匹配字符串,这是CSS3新增的属性选择器,

    E[foo^"bar"]匹配前缀是“bar”的子字符串;

    E[foo$="bar"]匹配后缀是“bar”的子字符串;

    E[Foo*="bar"]匹配包含“bar”的子字符串;

      用法:

    View Code
    1 a[href^="http:"]{
    2     background:url(image/gold.png) no-repeat left center;
    3     padding-left:18px;
    4 }
    5 a[href$="pdf"]{
    6     background:url(image/pdf.png) no-repeat left center;
    7     padding-left:28px;
    8 }

    第一个是匹配前缀是'http“的链接,如果不是则说明不匹配,不是合适的链接,如果合适就会在左边加一张图片

    第二个是匹配后缀是“pdf”的字符,如果不是则不匹配,合适就会在左边加另一幅图片


    第二个练习用的是结构伪类选择器:是利用文档结构树实现元素过滤即通过文档结构的相互关系来匹配特定的元素,从而减少文档内对class属性和ID属性的定义

    E:nth-child(n)选择所有在其父元素中第n个位置的匹配E的子元素;

    E:nth-last-child(n)选择所有在其父元素中倒数第n个位置的匹配E的子元素;

    用法:

    View Code
    1 tr:nth-child(2n+1){
    2     background-color:#f5fafe;
    3 }
    4 tr:nth-last-child(3){
    5     background-color:#060;
    6 }

    觉得CSS很强大,就是借的这本书没有配套的素材下载,有没有谁有这些素材,可以发给我吗?

  • 相关阅读:
    写在vue总结之前(一)
    前端应该掌握的web基础和网络知识
    sass之为什么要使用预处理器
    ThinkPHP简单的验证码实现
    ajax接收php返回得到一堆html代码
    Bootstrap 4,“未捕获错误:Bootstrap工具提示需要Tether(http://github.hubspot.com/tether/)”
    百度AI开放平台- API实战调用
    最短路径算法—Dijkstra(迪杰斯特拉)算法分析与实现(C/C++)
    C#避免踩坑之如何添加paint事件
    php插入mysql中文数据出现乱码
  • 原文地址:https://www.cnblogs.com/netqin/p/2553323.html
Copyright © 2020-2023  润新知