今天完成的事情

# 完成首页

明天计划的事情

# 完成任务7

遇到的问题：

# 问题一 定位问题

上次游戏栏右侧箭头，需要固定在右侧中部，先尝试用bootstrap布局，较麻烦，于是直接采用绝对定位，相对于白框距离顶部 50%-本身高度一半，距离右边1rem, 发现距离过大，调试发现卡片组件默认padding 15px，改为距右边0.1rem

position: absolute;

right: 0.1rem;

top: calc(50% - 0.5rem);

主体卡片右边的黄色小三角相对于白框，采用相同原理布局

# 问题二 页面极大

解决方法浏览器缩放比例

收获

# 掌握使用bootstrap卡片组件

.card卡片组件是BootStrap 4新增的一组重要样式，它是一一个灵活的、可扩展的内容器，包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。

使用按钮组合，可以把一系列按钮编组在一行里，并通过可选的JavaScript插件(方法)赋予按钮单选、复选等强化行为。

下面是一个具有混合内容并固定了宽度的基本.card卡片使用范例，如果.card卡片如果没有定义宽度，将自然地填满父元素的全宽-利用这个属性，我们可以轻松的订制各种尺寸的卡片。

# css绘制菜单图标，

.menu-icon{

width: 1.2rem;

height: 0.9375rem;            /*高度为border 5倍*/

border-top: 3px solid #fff;

border-bottom: 3px solid #fff;

background-color: #fff;

padding: 3px 0;

background-clip:content-box;
}

上面和下面的线是div的border，中间的线是div的height，中间的height和border间的空白使用padding属性

利用css属性background-clip: border-box(默认值，背景被裁剪到边框盒)|padding-box(背景被裁剪到内边距框)|content-box(背景被裁剪到内容框);

# css绘制黄色箭头

.arrow-right {  /*黄色右向三角形箭头*/

width: 0;

height: 0;

border-bottom: 0.8rem solid transparent; /* 下边框的高 */

border-top: 0.8rem solid transparent; /* 上方边框的高 */

border-left: 1rem solid #fbb435; /* 左边框的长度|宽度，以及背景色 */
}

通过设置宽高为0，设置三个边框形成三角形，三角形在指向的方向垂直的两边, 有巨大的透明边框,而让背面的边框设置为需要的颜色即可。

边框越大，三角形就越大。调整三个边框的长度，就可以构建出各种不同的三角形。

# 伪元素

就像 pseudo classes (伪类)一样， 伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式。 下例中的 ::first-line 伪元素改变段落第一行的文字样式。

/* The first line of every <p> element. */

p::first-line {

  color: blue;

  text-transform: uppercase;
}

注意：与伪元素比较，pseudo-classes 能够用来改变基于状态的元素样式

语法

selector::pseudo-element { property: value; }

所有伪元素

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection

总结

今天成果 http://www.jinjun.wiki/task/css/task7/