0%

定位元素

css中对于元素的定位主要由三个属性控制

  • position 控制页面上元素间的位置关系

    有四个值

    • static 默认,静态定位。按照顺序从上到下堆叠

    • relative 相对定位,相对的是它原来在文档流中的位置。此时就可以使用top、right、bottom、left属性来改变它的位置

    • absolute 绝对定位,使用该值元素就完全脱离了常规文档流,就会相对于顶级元素body来定位。

      默认是相对于顶级元素body来定位,但是如果祖先元素设置为relative ,就会根据该祖先元素来定位

    • fixed 固定定位。固定定位元素不会随着页面滚动而滚动。常见使用为导航栏

  • display 控制元素是堆叠、并排还是不显示。

    可以把块级元素变成行内元素,或者将行内元素变成块级元素

    1
    2
    3
    4
    /* 变为行内元素*/
    p {display:inline;}
    /* 变为块级元素*/
    a {display:block;}
  • float 提供控制的方式,使得元素可以组成多栏布局。可以实现文本环绕图片的效果

    1
    2
    3
    4
    5
    6
    7
    8
    p {
    margin:0;
    }

    img{
    float:left; /* 图片会浮动到左侧,从而让文本可以绕排到右侧*/
    margin:1 4px 4px 0;
    }

伪类

伪类是因为它们与类相似,但实际上没有类会附加到标记中的标签上。伪类分为两种

  • UI伪类 在HTML元素处于某个状态时,为该元素应用CSS样式
  • 结构化伪类 在标记中存在某种结构上的关系时,为相应元素应用CSS样式

UI伪类

最常用的UI伪类的元素是链接。利用UI伪类,链接可以在用户鼠标悬停时改变文本颜色等。

针对链接的伪类有四个

  • link 链接等着用户点击
  • visited 点击过这个链接
  • hover 鼠标指针正悬停在链接上
  • active 链接正在被点击

使用对应的伪类选择符,以hover为例

1
a:hover {color:red;}
阅读全文 »

next主题修改侧边栏icon

next主题中使用的是由 Font Awesome提供的图标,对于国内应用的图标基本都不支持。为了实现侧边栏小图标的展示,只能自己来设置样式了。

iconfont来下载自己需要的icon,选择svg格式下载,并将文件保存在source\images目录下。

next主题提供了自定义样式的口子,在next下的_config.yml配置文件中有custom_file_path,可以用来进行自定义配置

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl

把style的注释放开,然后在对应目录下创建对应的styles.styl

阅读全文 »

MySQL修改自增ID初始值

有时由于历史数据原因,需要修改自增id

1
2
3
4
 -- 查询当前表的自增id
SHOW table STATUS like '表名'
-- 修改自增id
alter table 表名 AUTO_INCREMENT=1000

pygame安装

使用的是python3.x版本

使用pip3进行安装

1
pip3 install pygame