CSS Reset:重新设置HTML标签的默认样式。 (1)重设了盒子模型的计算方法 * { box-sizing: border-box; } (2)重设了所有元素的默认字体 14px/1.42857143 "Helvetica Neue" (3)body { margin: 0; color: #333; background-color: #fff;} (4)h1~h6 { font-size: xxpx; margin-top: 20px/10px; margin-botton: 10px;} (5)a { color: #xxxxx; text-decoration: none;}
CSS布局陷阱——子元素的margin-top越界: 若父元素没有上边框/上margin,则第一个子元素的margin-top会越界! 最佳解决方案: .parent2:before { content: ‘ ‘; display: table; } 父元素中所有子元素由于浮动造成的影响,最佳解决方案: parent:after { content: ‘ ‘; display: table; clear: both; }
6.Boostrap提供的全局CSS样式——按钮相关样式 提示:按钮相关的样式可以作用于button/input/a三种元素 .btn 设置了按钮的padding、margin、font、border -------------------------------------------------------------------- .btn-default 设置了按钮的color、background、border Bootstrap五种常用颜色: .btn-warning 警告色(橙黄色)的按钮 .btn-danger 危险色(红色)的按钮 .btn-info 提示色(浅蓝色)的按钮 .btn-success 成功色(绿色)的按钮 .btn-primary 基础色(深蓝色)的按钮 Bootstrap四种大小: .btn-lg 大号按钮(large) 默认 默认大小 .btn-sm 小号按钮(small) .btn-xs 超小号按钮(extra small)
1.全局CSS样式——图片 .img-circle border-radius:50% .img-rounded border-radius:6px; .img-thumbnail border padding .img-responsive max-width display
2.全局CSS样式——文本 .text-warning .text-success .text-danger .text-info .text-primary ------------------- .text-lowercase .text-uppercase .text-capitalize ------------------- .text-left .text-center .text-right 右对齐 .text-justify (两端)调整对齐 --------------------- .bg-warning .bg-success .bg-danger .bg-info .bg-primary ---------------------- .pull-left float: left; .pull-right float: right; .clearfix clear:both; ----------------------- .show display:block; .hidden display:none;
table全局样式 .table width margin-bottom .table>td .table-bordered border:1px solid #ddd; .table-condensed 把单元格的padding有8px改为5px,内容看起来“紧凑”些 .table-striped 条纹状表格,为奇数tr添加了一个浅色的背景色 .table-hover 当鼠标悬停在tr上时,添加浅色的背景色 .table-responsive 响应式表格——屏幕变小时,出现水平滚动条——该class不能用于<table>,只能用于其父元素<div>上! -------------------------------------------------------------- 用在tr和td上的class——WebStorm默认没有提示 .danger 背景色淡红色,且悬停后变为深红色 .warning 背景色淡黄色,且悬停后变为深黄色 .info 背景色淡蓝色,且悬停后变为深蓝色 .success 背景色淡绿色,且悬停后变为深绿色 .active 背景色淡灰色,且悬停后变为深灰色
时间: 2024-10-22 06:56:57