小菜鸟

响应式设计

很多时候我们的web页面不是在单一设备上显示的，PC端、ipad、手机端都有可能显示，我们需要让页面能够自己响应屏幕变化。

响应式设计有三个重要的方面

• 媒体查询 是一种css语法，可以根据浏览器的特性，一般是屏幕或浏览器容器宽度提供css规则
• 流式布局 是使用em或百分比等相对单位设定页面总体宽度，让布局能够随屏幕大小而缩放
• 弹性图片 是使用相对单位确保图片再大也不会超过其容器

媒体查询

可以使用@media规则或者<link>标签的media属性

使用@media

把css样式嵌到@media规则中

定位元素

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