阅读量:0
目录
全局设置
html { height: 100%; width: 100%; overflow: hidden; } body { margin: 0%; height: 100%; width: 100%; background-color: rgb(255, 255, 255); }
- 全屏显示:将
height
和width
设置为100%使得html
和body
元素填充整个浏览器窗口,不留任何边距或空间。 overflow: hidden
;确保如果页面内容超出浏览器窗口的大小,超出部分将被隐藏,不会显示滚动条,从而避免内容溢出影响页面布局的整洁性。- 将
body
的margin
设置为0%去除浏览器默认的边距。 background-color
设置为白色,确保页面的背景颜色一致。
样式一致的各个面板
.framework { border: solid; border-top-left-radius: 1px; border-top-right-radius: 1px; border-width: 1px; border-color: rgb(237, 237, 238); } .frameworkTitle { width: 100%; height: 25px; background-color: rgb(237, 237, 238); font-size: 12px; padding-top: 2px; padding-left: 5px; font-weight: bold; font-family: Georgia; } .frameworkBody { width: 100%; height: calc(100% - 25px); }
.framework
类作为父容器,主要负责设置整个面板粗略的样式:圆角、实线、颜色、宽度等等。.frameworkTitle
类在父容器的div
的下面一层div
,主要负责设置标题区域的样式。width: 100%
: 使标题部分宽度占满其父容器的宽度。height: 25px
:设置标题部分的高度为25像素。
.frameworkBody
类也在父容器的div
的下面一层div
,主要负责设置内容区域的样式。width: 100%
:使内容部分宽度占满其父容器的宽度。height: calc(100% - 25px)
:计算内容部分的高度,为父容器高度减去标题的高度,确保内容部分不包含标题的高度。