这篇博客详细介绍了如何使用HTML、CSS和JavaScript实现网页的基本样式设置和交互功能。内容包括盒模型、选择器应用、响应式布局以及事件处理。通过实例展示了如何创建一个全屏黑色背景的容器，并设置输入框的样式，同时利用CSS3实现了一个带有旋转45度的勾选标记。此外，还探讨了颜色、字体和浮动布局等关键概念。
* {
margin:0;
padding:0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
text-decoration:none;
list-style:none;
-webkit-touch-callout:none;
-webkit-user-select:none;
-webkit-tap-highlight-color:transparent;
-webkit-appearance:none;
-webkit-font-smoothing:antialiased;
font-family:"microsoft yahei",Arial,Helvetica,sans-serif;
}
.max_box {
width:100%;
height:100%;
background-color:black;
position:absolute;
}
input[type='checkbox'] {
width:0;
}
.wrapper {
width:580px;
height:130px;
margin:100px auto;
padding:0 20px;
}
.wrapper > h3 {
font-size:16px;
color:snow;
}
li {
width:120px;
height:50px;
float:left;
padding:12px 0;
}
li:nth-child(4n+1) ~ li:nth-child(4n+3) {
margin-left:20px;
}
label {
width:125px;
height:32px;
display:block;
cursor:pointer;
}
.check_container {
width:18px;
height:18px;
border:1px solid snow;
float:left;
margin-top:6px;
position:relative;
}
input[type='checkbox']:checked + .check_container:before {
content:'';
position:absolute;
width:3px;
height:10px;
border-right:2px solid snow;
border-bottom:2px solid snow;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
left:6px;
}
input[type='checkbox']:checked + .check_container + span {
color:lightseagreen;
}
h3 + ul label > span {
display:block;
float:left;
width:107px;
height:30px;
line-height:30px;
color:hotpink;
text-align:left;
font-size:16px;
padding-left:12px;
}
扫一扫
1002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
