前端css初始化页面代码

本文详细介绍了如何使用CSS代码来清除元素默认样式、调整字体、列表样式、图片处理、按钮行为、链接样式,并展示了常用的布局技巧如居中、对齐和弹性盒子。通过这些代码,可以快速创建一个干净且可维护的前端页面布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

css初始化页面代码

/* 清除元素默认的内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 让所有斜体不倾斜 */
em,
i {
  font-style: normal;
}
/* 去掉列表前面的小点 */
li {
  list-style: none;
}
/* 图片没有边距  去掉图片底侧的空白缝隙 */
img {
  border: 0;
  vertical-align: middle;
}
/* 让button按钮变成小手 */
button {
  cursor: pointer;
}
/* 取消链接下面的下划线 */
a {
  color: #666;
  text-decoration: none;
}
a:hover {
  color: #e33333;
}
button,
input {
  outline: none;
}
body {
  color: #666;
  background-color: #fff;
}
.hide,
.none {
  display: none;
}
/*清除浮动  */
.clearfix::after {
  visibility: hidden;
  clear: both;
  display: block;
  content: '.';
  height: 0;
}
.clearfix {
  *zoom: 1;
}
.p5 {
     padding: 5px;
 }
 .p10 {
     padding: 10px;
 }
 .p15 {
     padding: 15px;
 }
 .p20 {
     padding: 20px;
 }
 .p25 {
     padding: 25px;
 }
 .p30 {
     padding: 30px;
 }
 .pl20 {
     padding-left: 20px;
 }
 .pl10 {
     padding-left: 10px;
 }
 .pt5 {
     padding-top: 5px;
 }
 .pt10 {
     padding-top: 10px;
 }
 .pt20 {
     padding-top: 20px;
 }
 .pr10 {
     padding-right: 10px;
 }
 .pr15 {
     padding-right: 15px;
 }
 .pl15 {
     padding-left: 15px;
 }
 .pb0 {
     padding-bottom: 0px;
 }
 .pb5 {
     padding-bottom: 5px;
 }
 .pb10 {
     padding-bottom: 10px;
 }

 .mt5 {
     margin-top: 5px;
 }
 .mr5 {
     margin-right: 5px;
 }
 .mb5 {
     margin-bottom: 5px;
 }
 .mb8 {
     margin-bottom: 8px;
 }
 .mb15 {
     margin-bottom: 15px;
 }
 .ml5 {
     margin-left: 5px;
 }
 .mt5 {
     margin-top: 5px;
 }
 .mt10 {
     margin-top: 10px;
 }
 .mt15 {
     margin-top: 15px;
 }
 .mr10 {
     margin-right: 10px;
 }
 .mr15 {
     margin-right: 15px;
 }
 .mb10 {
     margin-bottom: 10px;
 }
 .mb30 {
     margin-bottom: 30px;
 }
 .ml10 {
     margin-left: 10px;
 }
 .mt20 {
     margin-top: 20px;
 }
 .mt25 {
     margin-top: 25px;
 }
 .mr20 {
     margin-right: 20px;
 }
 .ml25 {
     margin-left: 25px;
 }
 .mb20 {
     margin-bottom: 20px;
 }
 .mb25 {
     margin-bottom: 25px;
 }
 .ml15 {
     margin-left: 15px;
 }
 .ml20 {
     margin-left: 20px;
 }
 .ml30 {
     margin-left: 30px;
 }
 .fz10 {
     font-size: 10px;
 }
 .fz12 {
     font-size: 12px;
 }
 .fz13 {
     font-size: 13px;
 }
 .fz14 {
     font-size: 14px;
 }
 .fz15 {
     font-size: 15px;
 }
 .fz16 {
     font-size: 16px;
 }
 .fz18 {
     font-size: 18px;
 }
 .fz20 {
     font-size: 20px;
 }
 .fz22 {
     font-size: 22px;
 }
 .fz24 {
     font-size: 24px;
 }
 .fz28 {
     font-size: 28px;
 }
 .fz32 {
     font-size: 32px;
 }
 .fw {
     font-weight: 700;
 }
 .fwNo {
     font-weight: normal;
 }
 .ws-o-to {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 .h1,
 .h2,
 .h3,
 .h4,
 .h5,
 .h6,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: inherit;
     font-weight: 500;
     line-height: 1.1;
     color: inherit;
 }
 .pull-right {
     float: right !important;
 }
 .pull-left {
     float: left !important;
 }
 .ua {
     position: absolute;
 }
  .ub {
     display: flex;
     position: relative;
 }
 .ur {
     position: relative;
 }
 .flex {
     display: -webkit-flex;
     /* Safari */
     -webkit-flex-flow: row;
     /* Safari 6.1+ */
     flex-flow: row;
     /* Safari 6.1+ */
     display: flex;
 }
 .f-inline {
     display: inline-flex
 }
 .f-row {
     flex-direction: row
 }
 .f-row1 {
     flex-direction: row-reverse
 }
 .f-col {
     flex-direction: column
 }
 .f-col1 {
     flex-direction: column-reverse
 }
 /* 排序方式 */
 .center {
     justify-content: center;
     align-items: center
 }
 .f-ac {
     align-items: center
 }
 .f-as {
     align-items: flex-start
 }
 .f-ae {
     align-items: flex-end
 }
 .f-jc {
     justify-content: center;
 }
 .f-js {
     justify-content: flex-start;
 }
 .f-je {
     justify-content: flex-end;
 }
 .f-jb {
     justify-content: space-between;
 }
 .f-column {
     flex-direction: column;
 }
 .f-jsa {
     justify-content: space-around;
 }
 .row-center {
     flex-flow: row wrap;
     justify-content: center;
     align-items: center
 }
 .row-between {
     flex-flow: row wrap;
     justify-content: space-between;
     align-items: center
 }
 .row-around {
     flex-flow: row wrap;
     justify-content: space-around;
     align-items: center
 }
 .col-center {
     flex-flow: column wrap;
     justify-content: center;
     align-items: center
 }
 .col-between {
     flex-flow: column wrap;
     justify-content: space-between;
     align-items: center
 }
 .col-around {
     flex-flow: column wrap;
     justify-content: space-around;
     align-items: center
 }
 .self-start {
     align-self: flex-start;
 }
 .self-stretch {
     align-self: stretch;
 }
 .self-center {
     align-self: center;
 }
 .self-end {
     align-self: flex-end;
 }
 .flex1 {
     flex: 1 !important;
 }
 .flex2 {
     flex: 2 !important;
 }
 .flex3 {
     flex: 3 !important;
 }
 .flex4 {
     flex: 4 !important;
 }
 .flex5 {
     flex: 5 !important;
 }
 .flex6 {
     flex: 6 !important;
 }
 .flex7 {
     flex: 7 !important;
 }
 .flex8 {
     flex: 8 !important;
 }
 .flex9 {
     flex: 9 !important;
 }
 .flex10 {
     flex: 10 !important;
 }
 .w0 {
     width: 0px;
 }
 .w100 {
     width: 100%;
 }
 .h100 {
     height: 100%;
 }
 .h0 {
     height: 0px;
 }
 /* 设置滚动条的样式 -start*/
 ::-webkit-scrollbar {
     width:8px;
     height: 8px;
 }
 /* 滚动槽 */
 ::-webkit-scrollbar-track {
     -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
     border-radius:10px;
 }
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
     border-radius:10px;
     background:rgba(0,0,0,0.1);
     -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
 }
 ::-webkit-scrollbar-thumb:window-inactive {
     background:rgba(0,0,0,0.2);
 }
 /* 设置滚动条的样式 -end*/

 



<think>嗯,用户让我生成一段CSS初始化代码,并且希望用中文回答或者介绍。首先,我需要确认用户的需求是什么。CSS初始化通常是为了消除不同浏览器默认样件的差异,确保网页在不同环境下表现一致。所以,用户可能是在开始一个新项目,想要一个基础的CSS重置代码来作为起点。 接下来,我需要考虑用户可能的背景。可能是前端开发的初学者,或者有一定经验但想优化现有代码的人。他们可能不太清楚该包含哪些常见的重置规则,或者想了解为什么需要这些规则。因此,在回答时不仅要提供代码,还要解释每个部分的作用,这样用户能更好地理解和使用。 然后,我应该回忆常见的CSS重置方案,比如Eric Meyer的reset.css或者Normalize.css,但用户可能需要的是一个简化的版本,而不是完整的库。所以,我需要整理常用的初始化代码片段,包括盒模型的设置、边距重置、列表样式、字体继承等。 同时,要注意现代浏览器的兼容性,比如使用box-sizing: border-box已经成为标准做法,确保元素尺寸计算一致。此外,对于响应式设计,可能还需要包含图片的最大宽度和自适应设置。表单元素的样式重置也很重要,因为不同浏览器对它们的默认样式差异较大。 另外,用户可能希望代码有注释,方便理解每个部分的作用,所以需要添加适当的中文注释。还要考虑是否需要包含一些额外的建议,比如引入Normalize.css作为更全面的解决方案,或者根据项目需求调整某些样式。 最后,确保代码格式正确,使用清晰的缩进和结构,方便用户复制使用。同时,语言要简洁明了,避免使用过于专业的术语,让不同水平的用户都能理解。</think>以下是一段常用的 CSS 初始化代码模板(含中文注释说明): ```css /* ====================== CSS 初始化代码 ====================== */ /* 清除默认内外边距 */ * { margin: 0; padding: 0; box-sizing: border-box; /* 元素尺寸包含边框和填充 */ } /* 设置基础文本样式 */ body { line-height: 1.5; font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; /* 优先使用系统字体 */ -webkit-font-smoothing: antialiased; /* 字体抗锯齿 */ } /* 清除列表样式 */ ul, ol { list-style: none; } /* 清除超链接默认样式 */ a { text-decoration: none; color: inherit; } /* 图片自适应处理 */ img { max-width: 100%; height: auto; display: block; /* 消除图片底部间隙 */ } /* 表格边框合并 */ table { border-collapse: collapse; border-spacing: 0; } /* 表单元素初始化 */ input, button, textarea, select { font: inherit; /* 继承父级字体 */ outline: none; border: none; background: none; } /* 响应式媒体元素 */ audio, video { display: inline-block; } ``` --- **代码特点说明:** 1. **通用选择器**:清除默认边距和设置盒模型 2. **字体优化**:采用系统字体栈提升加载速度 3. **元素重置**:清除列表/链接/表单等元素的默认样式 4. **响应式基础**:图片/媒体元素自适应处理 5. **现代浏览器支持**:包含 `-webkit-font-smoothing` 等优化属性 --- **补充建议**: - 可根据项目需求添加 `:focus-visible` 等现代伪类选择器 - 推荐配合 `Normalize.css`(标准化库)使用 - 移动端项目建议添加 `-webkit-tap-highlight-color: transparent` 消除点击高亮 - 深色模式适配可添加 `color-scheme: light dark;` 声明 建议根据具体项目需求调整初始化内容,现代项目推荐优先使用 `Normalize.css` + 定制化重置的组合方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值