<style type="text/css">
<!-- 1css层叠样式 5将css样式写在页面里边是为了提升我们的打开速度
width:宽度 height:高度 background: 背景颜色
padding:内边距 margin: 外边距 display:none :隐藏
border-radius:圆角
在行级元素搭配使用: (width:140px; height:32p0x; display: block;)
line-height:行高 (用于文9字垂直方0向居中) text-align: 文字水平方向
text-decoration: 超链接下滑线是否取消
border-shadow:0 (右边阴影层) 0(上边阴影层) 50(阴影的灰度) #141414
text-indent: 0.5em; input框文字缩进 font-weight:文字加粗
z-index: 必须配合定位使用
contentEditable = "true" 可以将div盒子变成输入框
box-shadow:5px (x轴坐标) 5px (y轴坐标) 1em (模糊度) #141414 (颜色)
background:red ; color: #fff;
background:linear-gradient(red,blue); 搭配使用 竖直方向渐变色
background:linear-gradient(red,blue) + 90deg ; 水平方向渐变色
transform:scale(5.0) 放大或缩小 translate(10px,10px) 平移(位移)
position:fixed 针对于窗口
position:absolute 针对body
position:relative 针对于浏览器
-->
*{margin:0px;padding:0px} /* 解决浏览器兼容问题 */
body{background:#966;font-size:12px;font-family: "微软雅黑 ";color:#666}
.show{width:700px;height:350px;background:#c9f;border:12px solid #141414
border-radius:8px;display:none;
position:absolute;margin:300px auto;
z-index: 100;
/*z-index必须配合定位使用 */
}
.btn{padding:8px 20px;border-radius:4px;text-decoration: none;
width:140px;height:32px;display: block;text-align: center;line-height:32px;
border-radius:30px;text-decoration: none;font-size:14px;color:#39b2e2;
cursor: pointer;margin-top:40px;border:1px solid #39b2e2;
}
.btn:hover{background:#39b2e2;color:#fff}
/*阴影层 蒙板 */
.yy{width:100%;height:100%;background:#000;position:absolute;
top:0px;left:0px;z-index:50;display:none;
}
</style>
css样式
最新推荐文章于 2024-08-31 21:39:38 发布