把以下代码添加到css样式里即可修改checkbo样式：
[css] view plain copy
input[type=radio],input[type=checkbox] {
display: inline-block
vertical-align: middle
width: 20px
height: 20px
margin-left: 5px
-webkit-appearance: none
background-color: transparent
border: 0
outline: 0 !important
line-height: 20px
color: #d8d8d8
}
input[type=radio]:after {
content: ""
display:block
width: 20px
height: 20px
border-radius: 50%
text-align: center
line-height: 14px
font-size: 16px
color: #fff
border: 2px solid #ddd
background-color: #fff
box-sizing:border-box
}
input[type=checkbox]:after {
content: ""
display:block
width: 20px
height: 20px
text-align: center
line-height: 14px
font-size: 16px
color: #fff
border: 2px solid #ddd
background-color: #fff
box-sizing:border-box
}
input[type=checkbox]:checked:after {
border: 4px solid #ddd
background-color: #37AF6E
}
input[type=radio]:checked:after {
content: "L"
transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0)
-webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0)
border-color: #37AF6E
background-color: #37AF6E
}
Html5标签：
<!--...--> 定义注释。
<!DOCTYPE> 定义文档类型。
<a> 定义锚。
<abbr> 定义缩写。
<acronym> 定义只取首字母的缩写。
<address> 定义文档作者或拥有者的联系信息。
<applet> 不赞成使用。定义嵌入的 applet。
<area> 定义图像映射内部的区域。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<b> 定义粗体字。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo> 定义文字方向。
<big> 定义大号文本。
<blockquote> 定义长的引用。
<body> 定义文档的主体。
<br> 定义简单的折行。
<button> 定义按钮 (push button)。
<canvas> 定义图形。
<caption> 定义表格标题。
<center> 不赞成使用。定义居中文本。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
首先你这个问题问得不够准确，你说html中有四个盒子，但是你没有说明盒子的关系，它们是嵌套的？并列的？如果是一个一个的嵌套的，例如
<div class="box"
<div>
<div>
<div class="box-content">最里层</div>
</div>
</div>
</div>
像这样的最里面的获取方法有很多种：可以直接给一个类名
.box-content{ text-align:center}
或者通过最外层利用父子关系来选择到他，如：
.box>div>div>div{text-align:center}
或者：.box>div>div>.box-content {text-align:center}
或者：.box .box-content {text-align:center}
方法有很多，其他得你自己研究一下吧
负边距：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>负边距</title>
<style type="text/css">
* {
margin: 0
padding: 0
}
#div1 {
width: 780px
height: 380px
margin: 0 auto
border: 3px solid lightblue
overflow: hidden
margin-top: 10px
}
.box {
width: 180px
height: 180px
margin: 0 20px 20px 0
background: lightgreen
float: left
}
#div2{
margin-right: -20px
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</body>
</html>
实际效果！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）