zoukankan      html  css  js  c++  java
  • Live2D 看板娘

    概况:整站布局、头部菜单响应式设置、最新消息模块变化、内容模块四三二响应式变化。

    伪类选择器:

      E:nth-of-type(n)  表示E父元素中的第n个字节点,且类型为E
          E:nth-last-of-type(n)表示E父元素中的第n个字节点,且类型为E,从后向前计算
          只匹配在下标出现的选择器

      E:nth-child(n)  表示E父元素中的第n个字节点
          p:nth-child(odd){background:red}/*匹配奇数行*/
          p:nth-child(even){background:red}/*匹配偶数行*/
          p:nth-child(2n){background:red}
          E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算
          选择器需要与元素下标完全匹配

      E:first-child 表示E元素中的第一个子节点
          E:last-child 表示E元素中的最后一个子节点
          E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
          E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
          E:only-child表示E元素中只有一个子节点。注意:子节点不包含文本节点
          E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点

    Bootstrap:简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。(http://www.bootcss.com/)

      使用方法:官网下载引入项目即可使用,注意如果需要根据需求修改bootstrap源码,可以下载用于生产环境的bootstrap。

      可以参考官网全局CSS样式来了解和使用bootstrap。

      本节主要是使用到bootstrap的响应式工具。

      在布局的时候,可以根据网站具体的布局需求来决定使用.container (固定宽度)或 .container-fluid (100% 宽度),如果是通栏类,则使用.container-fluid,如果是固定宽度的则使用.container,可以根据具体的需求来修改源码页面宽度的临界点。

      响应式工具:

      通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。

      

      从 v3.2.0 版本起,形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:

      

      可以根据元素是行内元素、块级元素还是行内块级元素来运用。

  • 相关阅读:
    soj#547 bzoj5046 分糖果游戏
    soj#551 loj#2833 帐篷
    nb哒LCA
    soj#532 set p3175
    p4042 [AHOI2014/JSOI2014]骑士游戏
    p1501 [国家集训队]Tree II
    908G New Year and Original Order
    908D New Year and Arbitrary Arrangement
    EZOJ #258
    EZOJ #257
  • 原文地址:https://www.cnblogs.com/jiangtengteng/p/6213141.html
Copyright © 2011-2022 走看看