发表于： 2021-03-23 21:02:41

1 943

今天完成的事情：

1、提交了任务七

2、完成了任务十pc端的制作（响应式网页还没实现）
明天计划的事情：

完成任务十响应式网页

收获：

1、：chcked   CSS 伪类选择器表示任何处于选中状态的radio

匹配任意选中的radio单选框  ：checked{    }

2、：hover 同时让多个元素发生变化

css代码    这里用到了 ~ 兄弟选择符，位置无须紧邻，只需要同层级

.line:hover{
    background-color: #E17D00;
}
.line:hover~.circle{
    background-color: #E17D00;
}
.line:hover~.menu{
    color: #E17D00;
}

html代码

 <div class="box">  
                <div class="line">1</div>
                <div class="circle"></div>
                <div class="menu">1.定制纸箱</div>
            </div>

这样当鼠标指向选择器line时 选择器line、circle、menu三个选择器里的元素同时发生变化

3、修改radio默认样式：

    a、去掉radio默认样式

input[type=radio]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
  

    b、再自定义样式

input[type="radio"]:checked + label { 
    display: inline-block;
    box-sizing: content-box;
    width: 3px;
    height: 3px;
    border: 6px solid #1d7ad9;
    border-radius: 50%;
}
input[type="radio"] + label {
    display: inline-block;
    content: "";
    width: 15px;
    height: 15px;
    border: 1px solid #1d7ad9;
    margin-bottom: 3px;
    border-radius: 50%;
    vertical-align: middle;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

+是相邻兄弟选择器：可选择紧接在另一个元素后的元素且二者有相同的父级

最终效果：

上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1