弘帝响应式网站开发记要

admin

设备分辨率控制：320/768/970/1200，参考来自Bootstrap
栅格深度：1-12

Bootstrap栅格系统对手机、平板电脑、PC电脑的屏幕尺寸设置了不同样式，可以有更多的选择，有下列几种情况：
1. 屏幕设备尺寸大于1200px 选择col-lg
2. 屏幕设备尺寸在970px到1200px 选择col-md
3. 屏幕设备尺寸在768px到970px 选择col-sm
4. 屏幕设备尺寸小于768px 选择col-xs

col-lg-*(大型设备)，col-md-*(中型设备)，col-sm-*(小型设备),col-xs-*(极小型设备)
*号1-12

栅格系统必须在.container容器中，方便获取屏幕大小与边距。

admin

table-striped: 单元格隔行换色，单行为灰色。
table-hover: 单元格悬停时变色。

表单设计
input{ width: 50%; min-width: 200px;}input,textarea{border-radius: 3px; border:1px solid #aaa; padding: 2px;}
input[type=checkbox],input[type=radio],input[type=submit],input[type=reset],input[type=button],button{width:auto; min-width: auto; margin-right:5px;}
input[type=radio],input[type=checkbox]{ width:1.3rem; height: 1.3rem; vertical-align: middle; margin-bottom: 2px;}
input[type=submit],input[type=reset],input[type=button],button{ padding:5px 20px;}
textarea{ width: 100%; min-height: 100px;}

.rows{display: flex; flex-flow:row nowrap;}
.rows:nth-child(2n){background: #f8f8f8;}
.rows .title{ width: 20%; padding: 5px 10px; background: inherit;}
.rows .input{ width: 80%; padding: 5px 10px; border: 0;}
.rows:hover{ background:#72CDE0;}

.rows与.row的区别
.rows用于多行横排
.row用于单行横排

admin

设计器：http://www.colorzilla.com/gradient-editor/

.bg-navyblue-tb

渐变效果

background: #125792;

background: -moz-linear-gradient(top, #125792 1%, #05417f 47%, #04457b 100%);

background: -webkit-linear-gradient(top, #125792 1%,#05417f 47%,#04457b 100%);

background: linear-gradient(to bottom, #125792 1%,#05417f 47%,#04457b 100%);

filter: progidXImageTransform.Microsoft.gradient( startColorstr='#125792', endColorstr='#04457b',GradientType=0);

.bg-navyblue-tb{background: linear-gradient(to bottom, #125792 1%,#05417f 47%,#04457b 100%);}

admin

图片位置内参：E:\网页设计\背景
.bg-colorful-skyblue{background:url(colorful-skyblue.jpg) center;}

背景色卡
.bg-grey{background:#333;}
.bg-grey-1{background:#3c3c3c;}

.bg-black{background:#000}
.bg-black-1{background:#111}

admin

基本语法结构：

*{font-size:14px;}
设置了文字大小为14px像素
Font-size+字体大小数值+单位

单词：font-size
语法：font-size : absolute-size | relative-size | length
取值：xx-small | x-small | small | medium | large | x-large | xx-large
xx-small:最小
x-small:较小
small:小
medium:正常(默认值)，根据字体进行调整
large:大
x-large:较大
xx-large:最大
也可取具体长度单位值

font-size:12px; 设置对象具体字体大小为12px
font-size:xx-small; 设置文字大小为最小
font-size:small; 设置文字字体大小为小
font-size:x-large;设置对象字体大小为较大
font-size:larger;设置对象字体大小为大
font-size:smaller;相对于父容器中字体尺寸进行相对减小
font-size:50%;相对于父容器中字体尺寸进行相应调整为50%大小
font-size:150%;相对于父容器中字体尺寸进行相应调整为150%大小

admin

.container {  width: 100%;  min-width: 992px; padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}
.container-fluid {  width: 100%;  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

admin

.button{ display: inline-block; background:#eaedf1; padding:10px 20px; cursor:pointer;}
.button:hover,.on,[on]{ background:#09C; color:#fff;}
.btns{ display:flex; flex-flow: row wrap;}
.btns a{ display: inline-block; background:#148B95; color:#fff; margin:3px; border-radius: 3px; line-height: 38px; padding:0 20px;}
.btns a:hover{ background:#f00; color:#ff0; cursor:pointer}
.disabled{ color:#888; text-shadow: #fff 1px 1px;}
[disabled],[disabled]:hover{ background:#ccc !important; color:#888 !important; text-shadow: #fff 1px 1px;}

color与background建议放在skin.css里
.button设计思路为无圆角，较大
.btns设计思路为圆角，较小，里面含多个a元素，相当于按纽组
.btn设计思路为圆角，较小
.hover为触发
.on为选中

[disabled]与.disabled的区别
[disabled]适用于按纽，背景变灰色
.disabled适用于任意情况，背景不变