学习笔记02

1、通栏制作

1、确定版心

版心只有宽度、并且内容居中

/* 版心 */
.w {
    width: 1200px;
    margin: 0 auto;
}
.fl {
    float: left;
}
.fr {
    float: right;
}

1、确定一个左盒子和右盒子、分别左右浮动。

2、左边

一个ul标签中有两个li标签、一个是一串文字、另外一个li中存在两个a标签、用到的CSS代码

.style_red {
  color: #c81623;
}
/* 快捷导航模块,行高和高度相同、让文字居中 */
.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}
/* 让li成为块级元素左浮动 */
.shortcut ul li {
  float: left;
}

文字与文字之间的距离使用 隔开即可。

2、右侧内容

如何制作|、把它当初li、带了一点点宽度和背景颜色。

如何制作下箭头、引入外置的css图标库、加一点点格式即可。

/* 选择偶数的小li、偶数里的是数字 */
.shortcut .fr ul li:nth-child(even) {
  width: 1px;
  height: 12px;
  background-color: #666666;
  margin: 9px 15px 0;
}
/* 伪类选择器、给右箭头内容右边加箭头、content */
.arrow-icon::after{
  content: '\e91e';
  font-family: 'icomoon';
  margin-left: 6px;
}