@网上用户
css代码:
<style>
body{
    max-width: 880px; /* 页面最大宽度限制880px */
    margin-top: 10px;    /* 只控制网页内容距离浏览器顶部的空白，数值可调 */
    margin-left: auto;  /* 左边自动，居中用 */
    margin-right: auto; /* 右边自动，居中用 */
    padding-left: 10px; /* 左侧内边距10px，防止内容贴浏览器左边 */
    padding-right: 10px; /* 右侧内边距10px，防止内容贴浏览器右边 */
}

/*全局重置：清空所有默认边距，文字间距紧凑*/
/* 通配符选择器，匹配页面全部元素 */
* {
    margin: 0; /* 清除元素默认外边距 */
    padding: 0; /* 清除元素默认内边距 */
    box-sizing: border-box; /* 盒模型：宽高包含内边距和边框 */
}

/*页面主体居中，最大宽度880px，左右留10px边距防贴边*/
/* body页面主体 */
body{
    max-width: 880px; /* 页面最大宽度限制880px */
    margin: 0 auto; /* 上下外边距0，左右自动，实现水平居中 */
    padding-left: 10px; /* 左侧内边距10px，防止内容贴浏览器左边 */
    padding-right: 10px; /* 右侧内边距10px，防止内容贴浏览器右边 */

}

body {
    margin-top: 10px;    /* 网页内容距离浏览器顶部空白大小，数值越大离顶部越远 */
    margin-left: 0;      /* 网页内容左侧外边距，0=紧贴浏览器左边 */
    margin-right: 0;     /* 网页内容右侧外边距，0=紧贴浏览器右边 */
    padding: 0;          /* 清除body默认内边距，避免浏览器自带多余空白 */
}



/*图片自适应，不超出容器不变形*/
/* img图片标签 */
img{
    max-width:100%; /* 图片最大宽度等于父容器宽度，防止溢出 */
    height:auto; /* 高度自动跟随宽度缩放，保持图片比例不变形 */
    display:block; /* 转为块级元素，消除图片底部自带空白缝隙 */
}

/*链接去掉下划线、加粗、字号20px*/
/* a超链接标签 */
a{
    text-decoration:none; /* 取消链接默认下划线 */
    font-weight:bold; /* 文字加粗 */
    font-size:20px; /* 字体大小设置20像素 */
}

/*列表左缩进，底部留少量间距*/
/* ul无序列表 */
ul{
    margin-left: 22px; /* 列表整体向左缩进22px，显示项目符号 */
    margin-bottom: 18px; /* 列表底部外边距18px，和下方元素拉开距离 */
}

/*页面主体居中，最大宽度888px*/body{max-width:888px;margin:0 auto;}
/*图片自适应，不超出容器不变形*/img{max-width:100%;height:auto;display:block;}
/*链接去掉下划线*/a{text-decoration:none;}


/* 全局通配符，匹配页面所有元素 */
* {
    margin: 0; /* 清除所有元素默认外边距 */
    padding: 0; /* 清除所有元素默认内边距 */
    box-sizing: border-box; /* 盒模型：宽高包含边框+内边距，不会撑大盒子 */
}

/* html根标签 */
html {
    font-size: 16px; /* 设置基准字体大小，rem单位以此为参照 */
    scroll-behavior: smooth; /* 页面滚动平滑跳转 */
}

/* body页面主体 */
body {
    max-width: 880px; /* 页面内容最大宽度限制880px */
    margin: 0 auto; /* 上下外边距0，左右自动，实现整体居中 */
    padding-left: 10px; /* 左侧内边距，小屏防止内容贴浏览器左边缘 */
    padding-right: 10px; /* 右侧内边距，小屏防止内容贴浏览器右边缘 */
    font-family: system-ui; /* 使用系统默认字体，无版权风险 */
    color: #333; /* 页面默认文字深灰色，不刺眼 */
    background-color: #fff; /* 页面背景白色 */
    line-height: 1.6; /* 行高，提升文字可读性 */
}

/* 图片标签 */
img {
    max-width: 100%; /* 图片最大宽度等于父容器，防止溢出 */
    height: auto; /* 高度自动缩放，保持原图比例不变形 */
    display: block; /* 转为块元素，消除图片底部自带空白缝隙 */
    border: none; /* 去掉图片默认边框 */
}

/* 超链接a标签 */
a {
    text-decoration: none; /* 取消链接默认下划线 */
    font-weight: bold; /* 文字加粗 */
    font-size: 20px; /* 字体大小20像素 */
    color: #0066cc; /* 链接默认蓝色 */
}
/* 鼠标悬浮在链接上 */
a:hover {
    color: #ff4400; /* 悬浮文字变为橙红色 */
    text-decoration: underline; /* 悬浮时显示下划线提示 */
}

/* 无序列表ul */
ul {
    margin-left: 22px; /* 列表整体向左缩进22px，显示圆点符号 */
    margin-bottom: 18px; /* 列表底部外边距，和下方元素拉开距离 */
    list-style-type: disc; /* 列表符号：实心圆点 */
}
/* 有序列表ol */
ol {
    margin-left: 22px; /* 列表向左缩进 */
    margin-bottom: 18px; /* 底部外边距 */
    list-style-type: decimal; /* 列表符号：数字序号 */
}
/* 列表项li */
li {
    margin-bottom: 6px; /* 每个列表项底部间距 */
}

/* 段落p标签 */
p {
    margin-bottom: 16px; /* 段落底部外边距，段落之间留白 */
    font-size: 16px; /* 段落文字大小 */
}

/* h1一级标题 */
h1 {
    font-size: 32px; /* 字号32px */
    font-weight: bold; /* 加粗 */
    margin-top: 20px; /* 顶部外边距 */
    margin-bottom: 16px; /* 底部外边距 */
}
/* h2二级标题 */
h2 {
    font-size: 26px; /* 字号26px */
    font-weight: bold; /* 加粗 */
    margin-top: 18px; /* 顶部外边距 */
    margin-bottom: 14px; /* 底部外边距 */
}
/* h3三级标题 */
h3 {
    font-size: 22px; /* 字号22px */
    font-weight: bold; /* 加粗 */
    margin-top: 16px; /* 顶部外边距 */
    margin-bottom: 12px; /* 底部外边距 */
}
/* h4四级标题 */
h4 {
    font-size: 20px; /* 字号20px */
    font-weight: bold; /* 加粗 */
    margin-top: 14px; /* 顶部外边距 */
    margin-bottom: 10px; /* 底部外边距 */
}

/* 行内强调文字em */
em {
    font-style: italic; /* 文字斜体 */
}
/* 加粗文字strong */
strong {
    font-weight: bold; /* 文字加粗 */
}

/* 分割线hr */
hr {
    height: 1px; /* 线条高度1px */
    background-color: #ddd; /* 线条浅灰色 */
    border: none; /* 清除默认边框 */
    margin: 20px 0; /* 上下外边距20px，左右0 */
}

/* 代码块code */
code {
    font-family: monospace; /* 等宽代码字体 */
    background-color: #f5f5f5; /* 浅灰背景 */
    padding: 2px 6px; /* 上下内边距2px，左右6px */
    border-radius: 3px; /* 圆角3px */
}

/* 容器盒子 .box */
.box {
    width: 100%; /* 宽度100%填满父容器 */
    padding: 16px; /* 四周内边距16px */
    margin: 16px 0; /* 上下外边距16px，左右0 */
    border: 1px solid #eee; /* 1px浅灰色实线边框 */
    border-radius: 6px; /* 圆角6px */
    background: #fafafa; /* 盒子背景浅灰白 */
}

/* 按钮 .btn */
.btn {
    display: inline-block; /* 行内块，支持宽高又不独占一行 */
    padding: 8px 16px; /* 上下内边距8px，左右16px */
    background-color: #2277dd; /* 按钮蓝色背景 */
    color: #fff; /* 按钮文字白色 */
    border: none; /* 清除边框 */
    border-radius: 4px; /* 圆角4px */
    cursor: pointer; /* 鼠标悬浮变成手型 */
    font-size: 16px; /* 文字大小 */
}
/* 按钮悬浮效果 */
.btn:hover {
    background-color: #1166cc; /* 悬浮加深背景色 */
}

/* 清除浮动 .clearfix */
.clearfix::after {
    content: ""; /* 伪元素内容为空 */
    display: block; /* 转为块元素 */
    clear: both; /* 清除左右浮动 */
    visibility: hidden; /* 隐藏元素 */
    height: 0; /* 高度设0 */
}

/* 浮动左 */
.fl {
    float: left; /* 元素向左浮动 */
}
/* 浮动右 */
.fr {
    float: right; /* 元素向右浮动 */
}

/* 文字居中 */
.text-center {
    text-align: center; /* 文字水平居中 */
}
/* 文字居左 */
.text-left {
    text-align: left; /* 文字靠左对齐 */
}
/* 文字居右 */
.text-right {
    text-align: right; /* 文字靠右对齐 */
}

/* 隐藏元素，保留占位 */
.vis-hidden {
    visibility: hidden; /* 元素不可见，空间保留 */
}
/* 彻底隐藏元素，不占空间 */
.display-none {
    display: none; /* 元素直接移除文档流，不占位 */
}

/* 响应式：屏幕宽度小于768px（手机端） */
@media (max-width:768px) {
    body {
        max-width: 100%; /* 手机端取消最大宽度限制 */
    }
    h1 {
        font-size: 26px; /* 手机缩小一级标题字号 */
    }
    h2 {
        font-size: 22px; /* 手机缩小二级标题字号 */
    }
    a {
        font-size: 18px; /* 手机缩小链接字号 */
    }
}


hr{
    margin:2px 0; /* 上下外边距改成2px，缩小间距，数字可以自己调：0、1、2、3 */
    border: none; /* 清除hr默认自带全部边框，浏览器原生hr上下有边框，会变粗 */
    border-top:1px solid #999; /* 只保留顶部1px灰色实线，就是我们看到那条分割线 */
}



</style>