css
/*common
* 以下是通用样式部分的注释，这些样式通常会应用在页面多个元素上，用于设置一些基础的页面显示效果和元素外观风格。
*/
body{
    margin: 0;
    /* 将 body 元素的外边距设置为 0，去除页面默认的外边距，使页面内容能从浏览器视口边缘开始布局，方便进行整体的页面设计和元素定位 */
}
table{
    width: 100%;
    /* 设置表格元素的宽度为 100%，使其能占满父元素的宽度，常用于页面中需要自适应宽度的表格布局场景，确保表格能根据所在容器的宽度进行相应伸展 */
}
table td{
    padding: 2px 4px;
    vertical-align: middle;
    /* 为表格中的单元格（td 元素）设置内边距，上下内边距为 2 像素，左右内边距为 4 像素，使单元格内的内容与边框之间有一定间隔；同时设置垂直对齐方式为居中（vertical-align: middle），让单元格内的内容（如文本、图片等）在垂直方向上处于中间位置，提升表格内容布局的美观度和可读性 */
}
a{
    text-decoration: none;
    /* 去除链接（a 元素）的默认下划线装饰效果，使链接文本在页面上显示更加简洁、美观，可根据实际设计需求通过其他方式（如颜色变化等）来体现链接的可点击性 */
}
em{
    font-style: normal;
    /* 将强调（em 元素）的默认斜体字体样式修改为正常字体样式，可能是为了统一文本显示风格，或者根据具体页面设计需要对 em 元素有不同的样式定义 */
}
.border_style1{
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #d3d6da;
    /* 定义一个名为 'border_style1' 的类选择器样式，用于添加具有特定边框效果的元素。设置边框为 1 像素宽的浅灰色（#ccc）实线，添加 5 像素的圆角效果（border-radius）使边框角变得圆润，增加页面元素的美观度；同时添加阴影效果（box-shadow），参数分别表示水平偏移、垂直偏移、模糊半径以及阴影颜色，营造出立体层次感，使元素在页面上更具立体感和视觉效果 */
}

/*module
* 以下是模块相关样式部分的注释，这些样式主要针对页面中不同功能模块的元素进行样式设置，用于构建各个模块的特定布局和外观。
*/
.main{
    margin: 8px;
    overflow: hidden;
    /* 创建一个名为'main' 的类选择器样式，设置外边距为 8 像素，使该元素与周围元素间隔开一定距离；同时设置溢出内容隐藏（overflow: hidden），用于控制内部元素的显示范围，避免出现滚动条或者超出部分不显示等布局情况，常用于作为页面主要内容区域的容器样式设置 */
}

.hot{
    float: left;
    height: 335px;
    /* 将元素设置为左浮动（float: left），使其在父容器内靠左排列，常用于多列布局场景，让该元素与其他浮动元素或非浮动元素共同构成页面的布局结构；同时设置元素的高度为 335 像素，确定其在垂直方向上的尺寸大小 */
}
.drawBoard{
    position: relative;
    cursor: crosshair;
    /* 设置元素的定位方式为相对定位（position: relative），相对定位的元素会相对于其原本在文档流中的位置进行定位调整，方便后续对其内部的绝对定位元素进行布局；同时将鼠标指针样式设置为十字线（cursor: crosshair），通常用于表示该区域可进行一些精准的绘制、选择等操作，从类名推测可能是与绘图相关的区域 */
}
.brushBorad{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 998;
    /* 设置元素的定位方式为绝对定位（position: absolute），绝对定位的元素会相对于最近的已定位祖先元素（如果没有则相对于 body 元素）进行定位，这里将其定位在父元素（可能是相对定位的容器）的左上角（left: 0，top: 0）；设置 z-index 为 998，用于控制元素在页面中的堆叠顺序，数值越大越在上面，确保该元素在合适的层级显示，可能是绘图相关的画板之类的元素，需要显示在特定层级上 */
}
.picBoard{
    border: none;
    text-align: center;
    line-height: 300px;
    cursor: default;
    /* 去除元素的边框（border: none）；设置文本水平居中对齐（text-align: center），常用于包含图片等内容的元素，使其内部内容在水平方向上居中显示；设置行高为 300 像素（line-height: 300px），可用于垂直方向上的内容对齐或撑开元素高度等情况；将鼠标指针样式设置为默认指针（cursor: default），表示该区域没有特殊的交互操作提示 */
}
.operateBar{
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    /* 设置元素的上边距为 10 像素，使其与上方元素隔开一定距离；设置字体大小为 12 像素，调整文本显示大小；设置文本水平居中对齐（text-align: center），可能用于操作按钮、提示信息等元素的容器，使其内部元素在水平方向上居中排列，看起来更加规整 */
}
.operateBar span{
    margin-left: 10px;
    /* 为 'operateBar' 内部的 span 元素设置左边距为 10 像素，使 span 元素之间或与其他相邻元素在水平方向上隔开一定距离，常用于在一行内排列多个相关的文本或图标元素等情况 */
}

.drawToolbar{
    float: right;
    width: 110px;
    height: 300px;
    overflow: hidden;
    /* 将元素设置为右浮动（float: right），使其在父容器内靠右排列，与其他左浮动或非浮动元素共同构成多列布局；设置宽度为 110 像素，高度为 300 像素，确定其在水平和垂直方向上的尺寸大小；设置溢出内容隐藏（overflow: hidden），用于控制内部元素的显示范围，避免出现滚动条或者超出部分不显示等布局情况，可能是用于放置绘图工具相关的操作栏容器样式设置 */
}
.colorBar{
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    /* 设置元素的上边距为 10 像素，使其与上方元素隔开一定距离；设置字体大小为 12 像素，调整文本显示大小；设置文本水平居中对齐（text-align: center），可能是用于展示颜色选择相关元素的容器样式，使其内部的颜色块等元素在水平方向上居中排列 */
}
.colorBar a{
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid #1006F1;
    border-radius: 3px;
    box-shadow: 2px 2px 5px #d3d6da;
    opacity: 0.3;
    /* 将链接（a 元素）设置为块级元素显示（display: block），使其独占一行，方便进行样式布局和交互操作设置；设置宽度为 10 像素，高度为 10 像素，确定元素的尺寸大小，可能用于表示颜色小块；添加 1 像素宽的蓝色（#1006F1）边框，设置 3 像素的圆角效果，添加阴影效果，营造出立体层次感；设置透明度为 0.3（opacity: 0.3），使颜色块呈现出半透明效果，常用于颜色选择区域的颜色样本展示样式设置 */
}
.sectionBar{
    margin-top: 15px;
    font-size: 12px;
    text-align: center;
    /* 设置元素的上边距为 15 像素，使其与上方元素隔开一定距离；设置字体大小为 12 像素，调整文本显示大小；设置文本水平居中对齐（text-align: center），可能是用于展示与绘图相关的某个功能分区（从类名推测）元素的容器样式，使其内部相关元素在水平方向上居中排列 */
}
.sectionBar a{
    display: inline-block;
    width: 10px;
    height: 12px;
    color: #888;
    text-indent: -999px;
    opacity: 0.3;
    /* 将链接（a 元素）设置为内联块级元素显示（display: inline-block），使其既具有块级元素可以设置宽高的特点，又能像内联元素一样在一行内排列；设置宽度为 10 像素，高度为 12 像素，确定元素的尺寸大小；设置文本颜色为灰色（#888），通过 text-indent: -999px 将文本缩进很大的距离，使其在页面上不显示出来（可能是通过背景图片等方式来展示相应的功能图标）；设置透明度为 0.3，使其呈现半透明效果，可能用于表示不同功能选项的图标样式设置，通过不同的背景图片来区分不同功能 */
}
.size1{
    background: url('images/size.png') 1px center no-repeat ;
    /* 定义一个名为'size1' 的类选择器样式，设置背景图片为指定路径（'images/size.png'）下的图片文件，使其在元素内部从左边距 1 像素、垂直居中（center）的位置开始显示，且不重复平铺（no-repeat），从类名推测可能是用于表示某种绘图尺寸相关的图标样式，通过不同的背景图片位置来区分不同尺寸选项 */
}
.size2{
    background: url('images/size.png') -10px center no-repeat;
    /* 与'size1' 类似，也是设置背景图片为 'images/size.png'，但图片显示位置从左边距 -10 像素、垂直居中的位置开始，用于表示另一种绘图尺寸相关的图标样式 */
}
.size3{
    background: url('images/size.png') -22px center no-repeat;
    /* 同样设置背景图片为 'images/size.png'，图片显示位置从左边距 -22 像素、垂直居中的位置开始，作为又一种绘图尺寸相关的图标样式 */
}
.size4{
    background: url('images/size.png') -35px center no-repeat;
    /* 设置背景图片为 'images/size.png'，图片显示位置从左边距 -35 像素、垂直居中的位置开始，用于区分不同的绘图尺寸相关图标样式 */
}

.addImgH{
    position: relative;
    /* 设置元素的定位方式为相对定位，为其内部的绝对定位元素提供定位基准，从类名推测可能是与添加图片相关的元素容器，后续可在这个相对定位的基础上进行更精确的元素布局 */
}
.addImgH_form{
    position: absolute;
    left: 18px;
    top: -1px;
    width: 75px;
    height: 21px;
    opacity: 0;
    cursor: pointer;
    /* 设置元素的定位方式为绝对定位，相对于最近的已定位祖先元素（这里就是相对定位的 'addImgH' 元素）定位到左边距 18 像素、上边距 -1 像素的位置；设置宽度为 75 像素，高度为 21 像素，确定元素的尺寸大小；设置透明度为 0（opacity: 0），使其初始状态为完全透明不可见，可能是用于隐藏实际的文件上传等表单元素，但又能通过设置为可点击（cursor: pointer）来触发添加图片的相关操作，通过一些交互逻辑使其在合适的时候变为可见状态 */
}
.addImgH_form input{
    width: 100%;
    /* 设置 'addImgH_form' 内部的 input 元素宽度为 100%，使其占满父元素的宽度，常用于表单输入框等元素，确保输入框能根据所在容器的宽度进行自适应伸展，方便用户输入相关信息 */
}

/*scrawl遮罩层
* 以下是关于涂鸦遮罩层相关样式部分的注释，用于设置遮罩层在页面上的显示效果、位置以及透明度等属性，以实现特定的视觉遮挡和提示功能。
*/
.maskLayerNull{
    display: none;
    /* 将元素设置为隐藏状态（display: none），不显示在页面上，从类名推测可能是在不需要遮罩层显示时应用的样式，用于控制遮罩层的显示隐藏逻辑 */
}
.maskLayer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    background-color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: 300px;
    z-index: 1000;
    /* 设置元素的定位方式为绝对定位，使其相对于 body 元素（因为没有更近的已定位祖先元素）定位到页面的左上角（top: 0，left: 0），并设置宽度和高度都为 100%，使其占满整个页面的可视区域；设置透明度为 0.7（opacity: 0.7），使其呈现半透明效果，背景颜色为白色（#fff），用于在页面上覆盖一层半透明的白色遮罩；设置文本水平居中对齐（text-align: center），字体加粗（font-weight: bold），行高为 300 像素（line-height: 300px），可能用于在遮罩层上显示一些提示信息等内容；设置 z-index 为 1000，确保遮罩层在页面的最上层显示，遮挡住下方的元素，起到遮罩提示的作用 */
}

/*btn state
* 以下是按钮不同状态相关样式部分的注释，通过设置不同类名下的按钮元素样式，用于区分按钮在不同交互状态（如可点击、不可点击等）下的外观显示差异，如背景图片、文本颜色、鼠标指针样式等方面的变化。
*/
.previousStepH.icon{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('images/undoH.png');
    cursor: pointer;
    /* 将类名为 'previousStepH' 内部的 '.icon' 元素（可能是用于表示按钮图标部分的元素）设置为内联块级元素显示（display: inline-block），使其可以设置宽高且能在一行内排列；设置宽度为 16 像素，高度为 16 像素，确定元素的尺寸大小；设置背景图片为指定路径（'images/undoH.png'）下的图片文件，用于显示特定的图标；将鼠标指针样式设置为指针（cursor: pointer），表示该元素可点击，从类名推测可能是表示“上一步”操作按钮在可点击的高亮状态下的图标样式 */
}
.previousStepH.text{
    color: #888;
    cursor: pointer;
    /* 将类名为 'previousStepH' 内部的 '.text' 元素（可能是用于表示按钮文本部分的元素）设置文本颜色为灰色（#888），将鼠标指针样式设置为指针（cursor: pointer），表示该部分文本所在的按钮整体在这个状态下是可点击的，与前面的图标部分共同构成“上一步”操作按钮在可点击高亮状态下的样式 */
}
.previousStep.icon{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('images/undo.png');
    cursor: default;
    /* 与 'previousStepH.icon' 类似，设置为内联块级元素显示，尺寸为 16 像素宽和 16 像素高，设置背景图片为 'images/undo.png'，但将鼠标指针样式设置为默认指针（cursor: default），表示该元素不可点击，从类名推测可能是表示“上一步”操作按钮在不可点击的普通状态下的图标样式 */
}
.previousStep.text{
    color: #ccc;
    cursor: default;
    /* 将类名为 'previousStep' 内部的 '.text' 元素设置文本颜色为更浅的灰色（#ccc），鼠标指针样式设置为默认指针（cursor: default），表示该部分文本所在的按钮整体在这个状态下是不可点击的，与前面的图标部分共同构成“上一步”操作按钮在不可点击普通状态下的样式 */
}


.clearBoardH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/emptyH.png');cursor: pointer;}
.clearBoardH .text{color:#888;cursor:pointer;}
.clearBoard .icon{display: inline-block;width:16px;height:16px;background-image: url('images/empty.png');cursor:default;}
.clearBoard .text{color:#ccc;cursor:default;}

.scaleBoardH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/scaleH.png');cursor: pointer;}
.scaleBoardH .text{color:#888;cursor:pointer;}
.scaleBoard .icon{display: inline-block;width:16px;height:16px;background-image: url('images/scale.png');cursor:default;}
.scaleBoard .text{color:#ccc;cursor:default;}

.removeImgH .icon{display: inline-block;width:16px;height:16px;background-image: url('images/delimgH.png');cursor: pointer;}
.removeImgH .text{color:#888;cursor:pointer;}
.removeImg .icon{display: inline-block;width:16px;height:16px;background-image: url('images/delimg.png');cursor:default;}
.removeImg .text{color:#ccc;cursor:default;}

.addImgH .icon{vertical-align:top;display: inline-block;width:16px;height:16px;background-image: url('images/addimg.png')}
.addImgH .text{color:#888;cursor:pointer;}
/*icon
*/
.brushIcon{display: inline-block;width:16px;height:16px;background-image: url('images/brush.png')}
.eraserIcon{display: inline-block;width:16px;height:16px;background-image: url('images/eraser.png')}