无懈可击的Web设计

按有用程度 按页码先后 最新笔记

• 

  第249页

  L.ost (World's End No Girlfriend)

  第2章（接上） 给导航条<a>设置display:block,使之变成块级元素，前后带有换行符。(inline，此元素会被显示为内联元素，元素前后没有换行符) 第3章 不要把高度定死，让横向延伸到页面组件能够纵向自由扩张。 当开始构建页面时，先考虑好用哪些HTML对象才能更好的体现其意义。 运用反向浮动（float:left;float:right）,很容易实现内容分别置于容器两端的效果。 一个浮动的组件必须要有明确的宽度值 background: url(... (更多)

  第2章（接上）

  给导航条<a>设置display:block,使之变成块级元素，前后带有换行符。(inline，此元素会被显示为内联元素，元素前后没有换行符)

  第3章

  不要把高度定死，让横向延伸到页面组件能够纵向自由扩张。

  当开始构建页面时，先考虑好用哪些HTML对象才能更好的体现其意义。

  运用反向浮动（float:left;float:right）,很容易实现内容分别置于容器两端的效果。

  一个浮动的组件必须要有明确的宽度值

  background: url(img) repeat-x top left. 背景横向平铺，从（左，上）角开始。

  tips:

  避免在HTML中写不必要的图片代码，而通过CSS设置背景图片来引入。

  当一个容器包含的内容量未知时，可以使用两张背景图片以便容器能够扩展和收缩。

  第4章 浮动对象

  发现一个特点，每章开头就会吐槽一个网站的设计。

  <dl>中的<dt>和<dd>，<dd>自动缩进.

  <letter-spacing>设置字母间距 <line-height>设置行间距

  除了是用clear的方法，还可以将元素的外容器也设置为浮动，以便随着浮动对象的大小而伸展。

  第5章

  用图片设置圆角边框。

  第6章

  为了确保在没有图片的情况下依然可读，在任何可能使用图片的地方设置同样的背景颜色。没有CSS的状态下，要保持网站的可读性就很困难了。

  第7章

  表格有关

  <table>的cellspacing = '0'或者 CSS中的border-collapse属性来消除表格单元各间距。

  positon属性：relative将元素相当原来的位置做调整，absolute将元素根据父容器的坐标来做绝对调整。

  第8章 流动的布局

  "gutters"指的是文本栏之间的间距，在流动的栏宽设计中，gutter的设置就变得很困难。

  有两种解决办法：用margin把宽度设为百分比的形式，或者在元素内添加一个<div>来设定margin 和 padding

  常用的布局

  .wrapper{
      margin: 0 auto;
      min-width: 980px;
      max-width: 1200px;
      background: url(/img/bg.png) repeat-y 70% 0; 
  }
  .header{}
  .content{
      float: left;
      width: 70%;
  }
  .content div{
      padding-right: 40px;
  }
  .sidebar{
      float: right;
      width: 30%;
  }
  .sidebar div{
      padding: 20px;
  }
  .footer{
      clear:both;
  }
  

  第9章

  构造一个完整的网站

  用伪类:after在容器后插入一个字符（content），用来清除浮动。

  dl:after{
      content: ".";
      display: block;
      clear: both;
      visibility: bidden;
      height: 0;
  }
  

  (收起)

  2011-08-24 15:07:11   回应

  收藏

  推荐
• 

  第32页

  L.ost (World's End No Girlfriend)

  1.灵活的文字 为保证页面文字大小的统一性，在body中设置文字大小。 font-size有四种类别，长度单位（em,ex,px,pt...）；相对大小（larger,smaller）；百分比；绝对大小（x-small,small,medium,large...）与浏览器决定。 2.导航栏 常用<ul>,<li>来创建顶部导航，因为浮动（float）的<li>脱离了原来的文档,无法撑起外围的<ul>，需要把<ul>也设为float。 (更多)

  1.灵活的文字

  为保证页面文字大小的统一性，在body中设置文字大小。

  font-size有四种类别，长度单位（em,ex,px,pt...）；相对大小（larger,smaller）；百分比；绝对大小（x-small,small,medium,large...）与浏览器决定。

  2.导航栏

  常用<ul>,<li>来创建顶部导航，因为浮动（float）的<li>脱离了原来的文档,无法撑起外围的<ul>，需要把<ul>也设为float。 (收起)

  2011-08-23 10:57:33   回应

  收藏

  推荐

• 

  第32页

  L.ost (World's End No Girlfriend)

  1.灵活的文字 为保证页面文字大小的统一性，在body中设置文字大小。 font-size有四种类别，长度单位（em,ex,px,pt...）；相对大小（larger,smaller）；百分比；绝对大小（x-small,small,medium,large...）与浏览器决定。 2.导航栏 常用<ul>,<li>来创建顶部导航，因为浮动（float）的<li>脱离了原来的文档,无法撑起外围的<ul>，需要把<ul>也设为float。 (更多)

  1.灵活的文字

  为保证页面文字大小的统一性，在body中设置文字大小。

  font-size有四种类别，长度单位（em,ex,px,pt...）；相对大小（larger,smaller）；百分比；绝对大小（x-small,small,medium,large...）与浏览器决定。

  2.导航栏

  常用<ul>,<li>来创建顶部导航，因为浮动（float）的<li>脱离了原来的文档,无法撑起外围的<ul>，需要把<ul>也设为float。 (收起)

  2011-08-23 10:57:33   回应

  收藏

  推荐
• 

  第249页

  L.ost (World's End No Girlfriend)

  第2章（接上） 给导航条<a>设置display:block,使之变成块级元素，前后带有换行符。(inline，此元素会被显示为内联元素，元素前后没有换行符) 第3章 不要把高度定死，让横向延伸到页面组件能够纵向自由扩张。 当开始构建页面时，先考虑好用哪些HTML对象才能更好的体现其意义。 运用反向浮动（float:left;float:right）,很容易实现内容分别置于容器两端的效果。 一个浮动的组件必须要有明确的宽度值 background: url(... (更多)

  第2章（接上）

  给导航条<a>设置display:block,使之变成块级元素，前后带有换行符。(inline，此元素会被显示为内联元素，元素前后没有换行符)

  第3章

  不要把高度定死，让横向延伸到页面组件能够纵向自由扩张。

  当开始构建页面时，先考虑好用哪些HTML对象才能更好的体现其意义。

  运用反向浮动（float:left;float:right）,很容易实现内容分别置于容器两端的效果。

  一个浮动的组件必须要有明确的宽度值

  background: url(img) repeat-x top left. 背景横向平铺，从（左，上）角开始。

  tips:

  避免在HTML中写不必要的图片代码，而通过CSS设置背景图片来引入。

  当一个容器包含的内容量未知时，可以使用两张背景图片以便容器能够扩展和收缩。

  第4章 浮动对象

  发现一个特点，每章开头就会吐槽一个网站的设计。

  <dl>中的<dt>和<dd>，<dd>自动缩进.

  <letter-spacing>设置字母间距 <line-height>设置行间距

  除了是用clear的方法，还可以将元素的外容器也设置为浮动，以便随着浮动对象的大小而伸展。

  第5章

  用图片设置圆角边框。

  第6章

  为了确保在没有图片的情况下依然可读，在任何可能使用图片的地方设置同样的背景颜色。没有CSS的状态下，要保持网站的可读性就很困难了。

  第7章

  表格有关

  <table>的cellspacing = '0'或者 CSS中的border-collapse属性来消除表格单元各间距。

  positon属性：relative将元素相当原来的位置做调整，absolute将元素根据父容器的坐标来做绝对调整。

  第8章 流动的布局

  "gutters"指的是文本栏之间的间距，在流动的栏宽设计中，gutter的设置就变得很困难。

  有两种解决办法：用margin把宽度设为百分比的形式，或者在元素内添加一个<div>来设定margin 和 padding

  常用的布局

  .wrapper{
      margin: 0 auto;
      min-width: 980px;
      max-width: 1200px;
      background: url(/img/bg.png) repeat-y 70% 0; 
  }
  .header{}
  .content{
      float: left;
      width: 70%;
  }
  .content div{
      padding-right: 40px;
  }
  .sidebar{
      float: right;
      width: 30%;
  }
  .sidebar div{
      padding: 20px;
  }
  .footer{
      clear:both;
  }
  

  第9章

  构造一个完整的网站

  用伪类:after在容器后插入一个字符（content），用来清除浮动。

  dl:after{
      content: ".";
      display: block;
      clear: both;
      visibility: bidden;
      height: 0;
  }
  

  (收起)

  2011-08-24 15:07:11   回应

  收藏

  推荐

• 

  第249页

  L.ost (World's End No Girlfriend)

  第2章（接上） 给导航条<a>设置display:block,使之变成块级元素，前后带有换行符。(inline，此元素会被显示为内联元素，元素前后没有换行符) 第3章 不要把高度定死，让横向延伸到页面组件能够纵向自由扩张。 当开始构建页面时，先考虑好用哪些HTML对象才能更好的体现其意义。 运用反向浮动（float:left;float:right）,很容易实现内容分别置于容器两端的效果。 一个浮动的组件必须要有明确的宽度值 background: url(... (更多)

  第2章（接上）

  给导航条<a>设置display:block,使之变成块级元素，前后带有换行符。(inline，此元素会被显示为内联元素，元素前后没有换行符)

  第3章

  不要把高度定死，让横向延伸到页面组件能够纵向自由扩张。

  当开始构建页面时，先考虑好用哪些HTML对象才能更好的体现其意义。

  运用反向浮动（float:left;float:right）,很容易实现内容分别置于容器两端的效果。

  一个浮动的组件必须要有明确的宽度值

  background: url(img) repeat-x top left. 背景横向平铺，从（左，上）角开始。

  tips:

  避免在HTML中写不必要的图片代码，而通过CSS设置背景图片来引入。

  当一个容器包含的内容量未知时，可以使用两张背景图片以便容器能够扩展和收缩。

  第4章 浮动对象

  发现一个特点，每章开头就会吐槽一个网站的设计。

  <dl>中的<dt>和<dd>，<dd>自动缩进.

  <letter-spacing>设置字母间距 <line-height>设置行间距

  除了是用clear的方法，还可以将元素的外容器也设置为浮动，以便随着浮动对象的大小而伸展。

  第5章

  用图片设置圆角边框。

  第6章

  为了确保在没有图片的情况下依然可读，在任何可能使用图片的地方设置同样的背景颜色。没有CSS的状态下，要保持网站的可读性就很困难了。

  第7章

  表格有关

  <table>的cellspacing = '0'或者 CSS中的border-collapse属性来消除表格单元各间距。

  positon属性：relative将元素相当原来的位置做调整，absolute将元素根据父容器的坐标来做绝对调整。

  第8章 流动的布局

  "gutters"指的是文本栏之间的间距，在流动的栏宽设计中，gutter的设置就变得很困难。

  有两种解决办法：用margin把宽度设为百分比的形式，或者在元素内添加一个<div>来设定margin 和 padding

  常用的布局

  .wrapper{
      margin: 0 auto;
      min-width: 980px;
      max-width: 1200px;
      background: url(/img/bg.png) repeat-y 70% 0; 
  }
  .header{}
  .content{
      float: left;
      width: 70%;
  }
  .content div{
      padding-right: 40px;
  }
  .sidebar{
      float: right;
      width: 30%;
  }
  .sidebar div{
      padding: 20px;
  }
  .footer{
      clear:both;
  }
  

  第9章

  构造一个完整的网站

  用伪类:after在容器后插入一个字符（content），用来清除浮动。

  dl:after{
      content: ".";
      display: block;
      clear: both;
      visibility: bidden;
      height: 0;
  }
  

  (收起)

  2011-08-24 15:07:11   回应

  收藏

  推荐
• 

  第32页

  L.ost (World's End No Girlfriend)

  1.灵活的文字 为保证页面文字大小的统一性，在body中设置文字大小。 font-size有四种类别，长度单位（em,ex,px,pt...）；相对大小（larger,smaller）；百分比；绝对大小（x-small,small,medium,large...）与浏览器决定。 2.导航栏 常用<ul>,<li>来创建顶部导航，因为浮动（float）的<li>脱离了原来的文档,无法撑起外围的<ul>，需要把<ul>也设为float。 (更多)

  1.灵活的文字

  为保证页面文字大小的统一性，在body中设置文字大小。

  font-size有四种类别，长度单位（em,ex,px,pt...）；相对大小（larger,smaller）；百分比；绝对大小（x-small,small,medium,large...）与浏览器决定。

  2.导航栏

  常用<ul>,<li>来创建顶部导航，因为浮动（float）的<li>脱离了原来的文档,无法撑起外围的<ul>，需要把<ul>也设为float。 (收起)

  2011-08-23 10:57:33   回应

  收藏

  推荐