/*全局定义样式*/
body{
margin: 0px;/*外边距*/
padding: 0px;/*内边距*/
font-size: 12px;/*文字大小*/
line-height: 22px;/*文字行高*/
font-family: "微软雅黑";/*文字字体*/
color: #333;/*文字颜色*/
}
ul,li{
margin: 0px;
padding: 0px;
list-style: none;/*去掉li原默认的点*/
}
a{
color: #333;
text-decoration: none;/*去掉文字下划线*/
}
a:hover{
color: #333;
text-decoration: underline;/*文字添加下划线*/
}
img{
border: 0px;/*border:边框*/
}
margin: auto;/*盒子垂直居中*/
overflow: hidden;/*自由展开*/
margin: 30px 0px;/*外边距:上下为10px 左右为0px*/
display: inline-block;/*传换为行内块元素*/
box-shadow: 0 0 10px #dedede;/*盒子的阴影*/
font-weight: 100;/*文字不加粗*/
border-bottom: 1px solid #dedede;加盒子边框
overflow: hidden;/*自由展开,超出部分隐藏(固定宽、高)*/
display: block;/*转换为快元素*/
outline:none;/*input鼠标出发去掉边框*/
background-size: 30px 30px;/*背景大小:宽度 高度*/
cursor: pointer;/*鼠标触发变为手型*/
position: relative;/*相对定位*/
position: absolute;/*绝对定位*/
border-radius: 5px;/*变圆角*/
position: fixed;/*绝对定位(相对于浏览器绝对定位)*/
outline:none;/*input鼠标出发去掉边框*/
margin: 100px 0px 0px 0px;
/*外边距:上边 左边 下边 右边*/
/*
margin-top:外边距的上边距
margin-right:右边距
margin-bottom:下边距
margin-left:左边距
如果外边距的上下边距和左右边距纸一样,如margin:100px 50px 100px 50px
可简写margin:100px 50px
外边距:上下 左右
内边距同理
*/
text-align: center;/*文字对齐:居中(文字居中对齐)*/
padding: 20px;/*内边距的上下左右为20像素*/
overflow: hidden;/*盒子自由展开,超出部分隐藏(固定宽、高情况下)*/
margin:50px auto;/*盒子上边距50px 左右自动对齐*/
border-radius: 5px;/*变圆角*/
border-bottom: 1px solid #dedede;
/*底部描边:1像素 实线 灰色:*/
padding-bottom: 10px;/*内边距的下边*/
overflow: hidden;/*自由展开*/
display: block;/*行内元素转换为块元素*/
/*说明:行内元素不独占一行,给予定义的宽、高度也不能读取到*/
float: left;/*左浮动*/
text-align: right;/*文字右对齐*/
padding: 0px 10px;/*内边距:上下左右*/
border:1px solid #dedede;/*实线描边*/
outline:none;/*去掉鼠标触发边框*/
cursor: pointer;/*鼠标触发变为手型*/
```
2021-04-26
最新推荐文章于 2024-09-18 09:47:26 发布
这篇博客详细介绍了CSS全局样式定义、元素布局、鼠标交互及元素定位等方面的知识,包括margin、padding、字体设置、浮动、定位等核心概念,并展示了如何实现元素的居中、阴影效果、圆角以及响应式设计。通过这些技巧,可以提升网页的视觉效果和用户体验。
摘要由CSDN通过智能技术生成