logo头像

叩首问路,码梦为生

读书笔记系列(5)——响应式Web设计-HTML5和CSS3实战

1. 一句话概括响应式设计

如果要用一句话概括响应式网页设计,我觉得它是针对任意设备对网页内容进行完美布局的一种显示机制.相反,如果需要根据不同设备提供特定的内容和功能,那就需要一个真正的“手机版”网站.这种情况下,手机版网站会提供与桌面版网站完全不同的用户体验.

2. CSS reset 网站

3. CSS 网格系统

4. 地标角色属性

role=”” 针对文档结构的各部分分别有如下的地标角色:

  • application:用来定义用作网页应用的区域;
  • banner:用来定义一个站点级别(而不是某个特定文档的)的区域.如网站的头部和logo;
  • complementary:一个对页面主要区域进行补充说明的区域;
  • contentinfo:与页面主要内容相关的信息区域,例如页脚的网站版权信息区域;
  • form:定义表单,但是如果表单用于搜索,请使用search来替代;
  • main:页面的主体内容;
  • navigation:链向当前文档或相关文档的导航链接;
  • search:一个用于搜索的区域。

5. 导航栏使用 table 显示模式

1
2
3
4
5
6
7
8
9
nav{
display: table;
}
nav ul{
display: table-row;
}
nav ul li{
display: table-cell;
}

这样做可以保证如果有另外的列表项追加进来,同样会自动地调整它们之间的间距。最后,使用 CSS3 选择器将最后一个列表项的文字置为右对齐,将第一个列表项的文字置为左对齐。

1
2
3
4
5
6
nav ul li:last-child {
text-align: right;
}
nav ul li:first-child {
text-align: left;
}

6. 在响应式设计中使用自定义 @font-face 字体的注意事项

唯一需要注意的,是在响应式设计中使用该技术时要考虑到字体文件大小。有些字体可能会非常庞大,如果你想保持网站的高性能,请注意控制自定义字体的文件尺寸。

7. 浮雕文字效果

1
text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);

不要模糊,不要水平阴影,仅在垂直方向设置 1 或 2 像素的”白影”即可。

8. 让整个屏幕飞舞

1
*{ transition: all 1s; }

9. CSS3 实现 3D 变形效果

在父级元素上设置透视,这样就开启了 3D 场景

1
.father{ -webkit-perspective: 200; }

透视的值越大,就表示你的视点与 3D 场景之间的景深越大。因此,如果想要一点隐约的 3D 效果,就增大透视值;如果想要非常明显的 3D 效果,则减小透视值。

延续父元素的透视

1
.son{ -webkit-transform-style: perserve-3d; -webkit-transition: 1s; }

.father 类中添加的透视声明只会应用到其第一个子元素上。因此,为了延续父元素的透视,我们给 .son 元素设定了 preserve-3d (这样可以设置一个 3D 场景)。

当鼠标悬停在 .father 模块上时,我们给 .son 这个 div 添加一个翻转效果

1
.father:hover .son{ -webkit-transform: rotateY(180deg); }

当海报翻转之后隐藏在其背面内容

1
.face { position: absolute; -webkit-backface-visibility: hidden; }

.face 必须使用绝对定位,这样海报才能盖在 .back 这个 div 的上面

给 .back 加上 rotateY

1
.back { -webkit-transform: rotateY(180deg); }

不加这句的话,.back 这个 div 就会显示在正面海报之上。最终的 HTML 结构以及 CSS 样式如下:

1
2
3
4
5
6
7
8
9
10
<section class="Qcontainer">
<div class="film">
<div class="face front">
<img src="img/goonies.jpg" alt="The Goonies" />
</div>
<div class="face back">
<h5>HOT!</h5>
</div>
</div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.Qcontainer {
height: 100%;
width: 28%;
position: relative;
-webkit-perspective: 800;
float: left;
margin-right: 2%;
}

.film {
width: 100%;
height: 15em;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}

.Qcontainer:hover .film {
-webkit-transform: rotateY(180deg);
}

.face {
position: absolute;
-webkit-backface-visibility: hidden;
}

.back {
width: 66%;
height: 127%;
-webkit-transform: rotateY(180deg);
background: #3b3b3b;
background: -webkit-linear-gradient(top,
rgba(0,0,0,0.65) 0%
rgba(0,0,0,0) 100%);
padding: 15%;
}

10. list(及对应的 datalist 元素)

list 属性以及对应的 datalist 元素可以让用户在输入框中开始输入值的时候,显示一组备选值。下面是一个包含在 div 中的使用 list 属性及对应 datalist 元素的代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
<div>
<label for="awardWon">Award Won</label>
<input id="awardWon" name="awardWon" type="text" list="awards">
<datalist id="awards">
<select>
<option value="Best Picture"></option>
<option value="Best Director"></option>
<option value="Best Adapted Screenplay"></option>
<option value="Best Original Screenplay"></option>
</select>
</datalist>
</div>

list 属性中的值(awards)同时也是 datalist 元素的 id。这样就可以让 datalist 与输入项关联起来。虽然将 option 包裹在 select 中不是必需的,但这样做便于为老版本浏览器提供降级方案。

支付宝打赏 微信打赏

听说赞过就能年薪百万