Web前端---响应式室内家具网页设计（HTML+CSS+JS），CSS清除默认样式

/* 清除默认样式，建立统一的基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 确保元素的宽高包含边框和内边距 */
}
 
body {
    font-family: 'Open Sans', sans-serif; /* 设置默认字体 */
    background-color: #f8f8f8; /* 设置背景色 */
    color: #333; /* 设置文本颜色 */
    line-height: 1.4; /* 设置行高 */
}
 
/* 清除列表默认样式 */
ul, ol {
    list-style: none;
}
 
/* 图片自适应容器 */
img {
    max-width: 100%;
    height: auto;
    display: block; /* 移除图片下方的空白间隙 */
}
 
/* 链接默认样式（去下划线和改变颜色） */
a {
    text-decoration: none;
    color: #333;
}
 
/* 按钮样式 */
button {
    cursor: pointer;
    border: none; /* 移除默认边框 */
    background-color: transparent; /* 移除默认背景色 */
}
 
/* 输入框样式 */
input {
    border: 1px solid #ccc; /* 边框样式 */
    padding: 8px; /* 内边距 */
    border-radius: 4px; /* 圆角边框 */
}
 
/* 下拉菜单样式 */
select {
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    -webkit-appearance: none; /* 移除iOS默认样式 */
       -moz-appearance: none; /* 移除Firefox默认样式 */
            appearance: none; /* 移除标准浏览器默认样式 */
    background-color: #f8f8f8; /* 设置背景色 */
}
 
/* 修改placeholder的颜色和 transparency */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ccc;
    opacity: 1; /* 修复旧版本Safari的透明度问题 */
}
 
input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #ccc;
    opacity: 1;
}
 
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #ccc;
    opacity: 1;
}
 
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #ccc;
}

这段代码展示了如何清除默认的HTML和CSS样式，并建立一个统一的基础样式。它移除了标准边距和默认的列表样式，确保图片自适应其容器，去除了链接的下划线，并为按钮和输入框设置了基本样式。此外，它还修正了部分浏览器对placeholder的渲染问题。这样的样式文件可以确保跨浏览器的一致性，并为后续的页面开发提供稳定的基础。