[郑州|结业弟子]JS-王薇霖|2020年06月10日的日报-技能树.IT修真院

发表于： 2020-06-10 21:10:03

1 1099

今天完成的事情：

学习了sass的规则

嵌套：

避免重复书写使用嵌套更方便快捷

#content {

article {

h1 { color: #333 }

p { margin-bottom: 1.4em }

}

aside { background-color: #EEE }

}

/* 编译后 */

#content article h1 { color: #333 }

#content article p { margin-bottom: 1.4em }

#content aside { background-color: #EEE }

一个给定的规则块，既可以像普通的css那样包含属性，又可以嵌套其他规则块

#content {

background-color: #f5f5f5;

aside { background-color: #eee }

}

/* 编译后 */

#content { background-color: #f5f5f5 }

#content aside { background-color: #eee }

关于任务10的改变单元框样式

清空默认样式：

input[type="radio"]{

outline: none 清空单选框，点击时蓝色默认边框

-webkit-appearance: none 清空单选框默认边框

display: inline-block; 设置成行内元素

vertical-align: baseline; 将支持valign特性的对象的内容与基线对齐

设置点击前样式：

input[type="radio"]::before{}

设置点击后样式：

input[type="radio"]:checked::before{}

完整代码：

input[type="radio"]{
    height: 22px;
    width: 17px;
    margin: 3px 5px 0 25px;
    border: 1px solid #fbfcff;
    display: inline-block;
    -webkit-appearance: none;
    outline: none;
    
}
input[type="radio"]::before{
    height: 16px;
    width: 16px;
    content: "";
    position: absolute;
    border: 1px solid #666666;
    border-radius: 50%;
}
input[type="radio"]:checked::before{
    width: 16px;
    height: 16px;
    background: #1d7ad9;
    border: 1px solid #1d7ad9;
    content: "\2022";
    color:#fbfcff;
    font-size: 15px;
    line-height: 11px;
    text-align: center;
}