每一行的每一個呆在在單行注解
时间: 2024-04-01 13:36:49 浏览: 67
/* 容器样式 */
#container { /* 容器ID选择器 */
display: flex; /* 使用flex布局 */
flex-direction: row; /* 容器内的子元素沿水平方向排列 */
}
/* 菜单样式 */
#menu { /* 菜单ID选择器 */
background-color: #333; /* 背景颜色为深灰色 */
color: #fff; /* 字体颜色为白色 */
width: 200px; /* 宽度为200像素 */
height: 500px; /* 高度为500像素 */
}
#menu ul { /* 菜单下的无序列表样式 */
list-style-type: none; /* 去除默认的列表标记 */
margin: 0; /* 去除默认的外边距 */
padding: 0; /* 去除默认的内边距 */
}
#menu li a { /* 菜单下的链接样式 */
display: block; /* 链接呈块级元素 */
color: #fff; /* 字体颜色为白色 */
padding: 10px 20px; /* 上下内边距为10像素,左右内边距为20像素 */
text-decoration: none; /* 去除下划线 */
}
#menu li a:hover { /* 鼠标悬浮在链接上的样式 */
background-color: #555; /* 背景颜色变为深灰色 */
}
/* 主体内容样式 */
#main { /* 主体内容ID选择器 */
height: 500px; /* 高度为500像素 */
overflow-y: scroll; /* 添加垂直方向滚动条 */
max-width: 1000px; /* 最大宽度为1000像素 */
padding: 20px; /* 上下内边距为20像素,左右内边距为0 */
background-color: #fff; /* 背景颜色为白色 */
box-shadow: 0 2px 4px rgba(0,0,0,.1); /* 添加阴影效果 */
}
/* 表单样式 */
.form-row { /* 表单行样式 */
margin-bottom: 10px; /* 下边距为10像素 */
}
label { /* 表单标签样式 */
display: inline-block; /* 呈行内块级元素 */
width: 120px; /* 宽度为120像素 */
text-align: right; /* 文字右对齐 */
margin-right: 16px; /* 右边距为16像素 */
}
input[type="text"], select, button[type="submit"] { /* 文本框、下拉列表、提交按钮样式 */
width: 300px; /* 宽度为300像素 */
height: 36px; /* 高度为36像素 */
border-radius: 2px; /* 圆角为2像素 */
border: 1px solid #ccc; /* 边框为1像素的灰色实线 */
padding: 6px 12px; /* 上下内边距为6像素,左右内边距为12像素 */
font-size: 14px; /* 字体大小为14像素 */
box-sizing: border-box; /* 内容框模型为border-box */
background-color: #f8f8f8; /* 背景颜色为浅灰色 */
}
/* 提交按钮样式 */
button[type="submit"] { /* 提交按钮选择器 */
background-color: #1E9FFF; /* 背景颜色为深蓝色 */
color: #fff; /* 字体颜色为白色 */
}
/* 下拉列表样式 */
main select { /* 主体内容下的下拉列表选择器 */
appearance: none; /* 去除默认样式 */
-webkit-appearance: none; /* 去除默认样式(兼容Webkit内核浏览器) */
-moz-appearance: none; /* 去除默认样式(兼容Gecko内核浏览器) */
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M 5,0 10,6 H 0 Z"/></svg>'); /* 使用SVG图片作为下拉箭头 */
background-repeat: no-repeat; /* 不平铺 */
background-position-x: calc(100% - 12px); /* 下拉箭头右边距为12像素 */
background-position-y: center; /* 垂直居中 */
}
/* 按钮悬浮样式 */
button[type="submit"]:hover { /* 鼠标悬浮在提交按钮上的样式 */
background-color: #0C7DBE; /* 背景颜色变为深蓝色 */
}
/* 按钮按下样式 */
button[type="submit"]:active { /* 鼠标按下提交按钮的样式 */
background-color: #0B6994; /* 背景颜色变为深蓝色 */
}
/* 图片样式 */
img { /* 图片选择器 */
width: 200px; /* 宽度为200像素 */
height: auto; /* 高度自适应 */
margin-left: 10px; /* 左边距为10像素 */
border: none; /* 去除边框 */
}
阅读全文