如何在CSS中构建3列布局

by 詹妮弗凯恩

CSS布局要求您将您的网站布局视为一个整体，然后将它们组合在一起。了解如何使用CSS构建简单的3列布局。

09年01月

绘制您的布局

J Kyrnin

您可以在纸上或图形程序中绘制布局。如果您已经有了线框或更广泛的设计，请将其简化为构成该网站的基本框。本文附带的这种设计在主要内容区域有三列，以及页眉和页脚。如果仔细观察，可以看到三列的宽度不相等。

绘制完布局后，可以开始考虑尺寸。此示例设计将具有以下基本维度：

不超过900像素宽
左边20像素排水沟
列与行之间为10 px
250px，300px和300px宽的列
顶行高150px
底行是100px高

09年02月

编写基本的HTML / CSS并创建一个容器元素

由于这个页面将是一个有效的HTML文档，因此从一个空的HTML容器开始

<！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> Untitled Document </ html> title> </ head> <body> </ body> </ html> <p> 添加基本CSS样式以<a href="https://zhcn.eyewated.com/%E4%BD%BF%E7%94%A8css%E6%9D%A5%E6%B6%88%E9%99%A4%E4%BD%A0%E7%9A%84%E8%BE%B9%E8%B7%9D%E5%92%8C%E8%BE%B9%E7%95%8C/">将页边距，边框和填充置零</a> 。虽然对于新文档还有其他<a href="https://zhcn.eyewated.com/%E4%BD%BF%E7%94%A8%E6%AD%A4css%E5%A4%87%E5%BF%98%E5%8D%95%E4%BA%86%E8%A7%A3%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8/">标准的CSS样式</a> ，但这些样式是获得干净布局所需的最少量样式。将它们添加到文档的头部： </p> <style type =“text / css”> html，body {margin：0px; padding：0px; border：0px; } </ style> <p> 要开始构建布局，请放入一个容器元素。有时候可能会稍后摆脱容器，但对于大多数固定宽度的布局，使用容器元素可以更轻松地跨不同的Web浏览器进行管理。所以在身上放这个： </p> <div id =“container”> </ div> <p> 在CSS样式表中，放入： </p> ＃容器 { } <p> <strong>09年3月</strong> </p> <h3> 样式容器 </h3><p> 容器定义了网页内容的宽度，以及外部的任何边距和内部的填充。对于本文档，容器宽度为870像素，左侧有20像素的排水槽。水槽设置为边缘样式，但容器上的填充被清零以防止任何元素与容器一样宽。 </p> #container {width：870px; 保证金：0 0 0 20px; / *右上方左下角* / padding：0; } <p> 如果现在保存文档，则很难看到容器，因为它没有任何内容。如果您添加占位符文本，您将能够更清楚地看到容器元素。 </p> <p> <strong>09年9月4日</strong> </p> <h3> 为标题使用标题标签 </h3><p> 您如何决定样式化标题行取决于其中的内容。如果标题行只是有一个标志图形和标题，那么使用标题标签（<h1>）比使用<div>更有意义。您可以像设计div一样设计标题的样式，并避免使用无关标签。 </p> <p> 标题行的HTML位于容器的顶部，如下所示： </p> <h1>我的标题行</ h1> <p> 然后，在上面设置样式，在底部添加一个红色边框，以便您可以看到它的结束位置，边距和填充已被清零，宽度设置为100％，高度设置为150px： </p> #container h1 {margin：0; 填充：0; 宽度：100％; height：150px; 向左飘浮; border-bottom：＃c00 solid 3px; } <p> 不要忘记用float：left; 属性。编写CSS布局的关键是浮动一切 - 甚至是与容器宽度相同的东西。这样，你总是知道元素将在页面上的位置。 </p> <p> <a href="https://zhcn.eyewated.com/%E4%BB%80%E4%B9%88%E6%98%AFcss%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%9F/">CSS后代选择器</a>仅将样式应用于#container元素内的H1元素。 </p> <p> <strong>09年05月05日</strong> </p> <h3> 获得三列，从建立两列开始 </h3><p> 当您使用CSS构建三列布局时，您需要将布局分成两组。因此，对于这种三列布局，中间和右列，并将其分组并放置在左列的左列中，其中左列为250px宽，右列为610px宽（两列各300列，加上他们之间的沟槽10px）。 </p> <p> HTML看起来像这样： </p> <div id =“col1”> <p> Velit esse cillum dolore ut enim ad minim veniam，lorem ipsum dolor sit amet。在随时随地进行实践的情况下进行的实践eu fugiat nulla pariatur。 Velit esse cillum dolore ullamco labouris nisi ut aliquip ex ea commodo consequat。</ p> </ div> <div id =“col2outer”> <p>请将您的意见发送给我们，我们会尽快处理。 Ut labore et dolore magna aliqua。 Velit esse cillum dolore eu fugiat nulla pariatur。</ p> </ div> <p> 列中的占位符文本使得它们在测试时更加明显。 CSS看起来像这样： </p> #container＃col1 {width：250px; 向左飘浮; } #container＃col2outer {width：610px; float：right; 保证金：0; 填充：0; } <p> 左侧的列浮动到左侧，而另一个浮到右侧。因为两列的总宽度都是860像素，所以它们之间有一个10像素的装订线。 </p> <p> <strong>09年06月</strong> </p> <h3> 在宽第二列内添加两列 </h3><p> 要创建三列，请在较宽的第二列内添加两个div，就像在上一步中在容器列内添加了2个div一样。 HTML看起来像这样： </p> <div id =“col2outer”> <div id =“col2mid”> <p>请注意，vennam，sed do eiusmod tempor incididunt ullamco labouris nisi。 Ut labore et dolore magna aliqua。 Velit esse cillum dolore eu fugiat nulla pariatur。</ p> </ div> <div id =“col2side”> Nam libero tempore，quia voluptas sit aspernatur dicta sunt explicabo。 Ullam corporis suscipit laboriosam，magnam aliquam quaerat voluptatem。 Itaque earum rerum hic tenetur a sapiente delectus，sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore。</ p> </ div> </ div> <p> 这个CSS看起来像这样： </p> ＃col2outer＃col2mid {width：300px; 向左飘浮; }＃col2outer＃col2side {width：300px; float：right; } <p> 由于这两个300px宽的盒子在610px宽的盒子内，因此它们之间将再次有一个10px的装订线。 </p> <p> <strong>09年7月</strong> </p> <h3> 添加在页脚中 </h3><p> 现在页面的其余部分都是样式的，您可以添加页脚。使用带有“页脚”标识的最后一个div，并添加内容以便您可以看到它。您还可以在顶部添加边框，以便您知道它的起始位置。 </p> <p> HTML： </p> <div id =“footer”> <p>版权所有©2017 </ p> </ div> <p> CSS： </p> #container #footer {float：left; 宽度：870px; border-top：＃c00 solid 3px; } <p> <strong>09年08月08日</strong> </p> <h3> 添加您的个人风格和内容 </h3><p> 现在你已经完成了布局，你可以开始添加你自己的个人风格和内容。请记住，页眉和页脚上的边框被添加以显示布局部分，而不是专门用于设计。 </p> <p> <strong>09年9月9日</strong> </p> <h3> 最终的HTML / CSS </h3><p> 这是整个文档，HTML和CSS： </p> <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns =“http ：//www.w3.org/1999/xhtml“> <head> <meta http-equiv =”Content-Type“content =”text / html; charset = utf-8“/> <title> Untitled Document </ html> title> <style type =“text / css”> html，body {margin：0px; padding：0px; border：0px; } #container {width：870px; 保证金：0 0 0 20px; / *右上方左下角* / padding：0; background-color：#fff; } #container h1 {margin：0; 填充：0; 宽度：100％; height：150px; 向左飘浮; border-bottom：＃c00 solid 3px; } #container＃col1 {width：250px; 向左飘浮; } #container＃col2outer {width：610px; float：right; 保证金：0; 填充：0; }＃col2outer＃col2mid {width：300px; 向左飘浮; }＃col2outer＃col2side {width：300px; float：right; } #container #footer {float：left; 宽度：870px; border-top：＃c00 solid 3px; 我的标题行</ h1> <div id =“col1”> <p> </ div> </ <div id =“col2outer”> <p> </ div> <div id =“col2mid”> <p> Nam libero tempore。</ p> </ div> </ div> <div id =“footer”> <p> Copyright©2008 </ p> </ div> </ div> </ body> </ html> </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8html%E5%92%8Ccss%E5%88%9B%E5%BB%BA%E5%88%B6%E8%A1%A8%E7%AC%A6%E5%92%8C%E9%97%B4%E8%B7%9D/"> <amp-img src="https://exse.eyewated.com/pict/e5b045620d0733ff-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8html%E5%92%8Ccss%E5%88%9B%E5%BB%BA%E5%88%B6%E8%A1%A8%E7%AC%A6%E5%92%8C%E9%97%B4%E8%B7%9D/">如何使用HTML和CSS创建制表符和间距</a></h3> <div class="amp-related-meta"> 网页设计与开发 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E7%94%A8span%E6%A0%87%E7%AD%BE%E5%92%8Ccss%E6%9B%B4%E6%94%B9word%E7%9A%84%E9%A2%9C%E8%89%B2/"> <amp-img src="https://exse.eyewated.com/pict/64f1762bf05131d8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E7%94%A8span%E6%A0%87%E7%AD%BE%E5%92%8Ccss%E6%9B%B4%E6%94%B9word%E7%9A%84%E9%A2%9C%E8%89%B2/">如何用Span标签和CSS更改Word的颜色</a></h3> <div class="amp-related-meta"> 网页设计与开发 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/css%E7%BB%A7%E6%89%BF%E7%9A%84%E6%A6%82%E8%BF%B0/"> <amp-img src="https://exse.eyewated.com/pict/357261af990f3b51-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/css%E7%BB%A7%E6%89%BF%E7%9A%84%E6%A6%82%E8%BF%B0/">CSS继承的概述</a></h3> <div class="amp-related-meta"> 网页设计与开发 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8css%E6%9B%B4%E6%94%B9%E7%BD%91%E9%A1%B5%E4%B8%8A%E7%9A%84%E5%AD%97%E4%BD%93/"> <amp-img src="https://exse.eyewated.com/pict/2290be1f74fa346f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8css%E6%9B%B4%E6%94%B9%E7%BD%91%E9%A1%B5%E4%B8%8A%E7%9A%84%E5%AD%97%E4%BD%93/">如何使用CSS更改网页上的字体</a></h3> <div class="amp-related-meta"> 网页设计与开发 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/import%E5%92%8Ccss%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F/"> <amp-img src="https://exse.eyewated.com/pict/e1ef7baeb7f72ff1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/import%E5%92%8Ccss%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F/">@import和CSS之间的区别是什么？</a></h3> <div class="amp-related-meta"> 网页设计与开发 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E5%9C%A8css%E4%B8%AD%E6%9E%84%E5%BB%BA3%E5%88%97%E5%B8%83%E5%B1%80/"> <amp-img src="https://exse.eyewated.com/pict/4b2ea51168c33485-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E5%9C%A8css%E4%B8%AD%E6%9E%84%E5%BB%BA3%E5%88%97%E5%B8%83%E5%B1%80/">如何在CSS中构建3列布局</a></h3> <div class="amp-related-meta"> 网页设计与开发 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E9%80%9A%E8%BF%87css%E4%BD%BF%E7%94%A8xml/"> <amp-img src="https://exse.eyewated.com/pict/9c85ee5d99d440a0-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E9%80%9A%E8%BF%87css%E4%BD%BF%E7%94%A8xml/">如何通过CSS使用XML</a></h3> <div class="amp-related-meta"> 网页设计与开发 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E4%BD%BF%E7%94%A8%E6%A0%B7%E5%BC%8F%E7%B1%BB%E5%92%8Cid/"> <amp-img src="https://exse.eyewated.com/pict/79cf98f373862f58-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E4%BD%BF%E7%94%A8%E6%A0%B7%E5%BC%8F%E7%B1%BB%E5%92%8Cid/">使用样式类和ID</a></h3> <div class="amp-related-meta"> 网页设计与开发 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E4%BA%86%E8%A7%A3css%E6%B5%AE%E5%8A%A8/"> <amp-img src="https://exse.eyewated.com/pict/26ae6d06d2733294-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E4%BA%86%E8%A7%A3css%E6%B5%AE%E5%8A%A8/">了解CSS浮动</a></h3> <div class="amp-related-meta"> 网页设计与开发 </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>See Newest</h2> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/gizmo-%E5%85%8D%E8%B4%B9voip%E5%91%BC%E5%8F%AB%E5%88%B060%E4%B8%AA%E5%9B%BD%E5%AE%B6/"> <amp-img src="https://exse.eyewated.com/pict/be4da8b4e39c3024-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/gizmo-%E5%85%8D%E8%B4%B9voip%E5%91%BC%E5%8F%AB%E5%88%B060%E4%B8%AA%E5%9B%BD%E5%AE%B6/">Gizmo - 免费VoIP呼叫到60个国家</a></h3> <div class="amp-related-meta"> 电子邮件和消息 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/ipad-mini%E4%B8%8E%E8%A7%86%E7%BD%91%E8%86%9C%E6%98%BE%E7%A4%BA%E5%99%A8%E4%B8%8Ekindle-fire-hdx-8-9%E8%8B%B1%E5%AF%B8/"> <amp-img src="https://exse.eyewated.com/pict/c88708c10e59316b-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/ipad-mini%E4%B8%8E%E8%A7%86%E7%BD%91%E8%86%9C%E6%98%BE%E7%A4%BA%E5%99%A8%E4%B8%8Ekindle-fire-hdx-8-9%E8%8B%B1%E5%AF%B8/">IPad Mini与视网膜显示器与Kindle Fire HDX 8.9英寸</a></h3> <div class="amp-related-meta"> 产品评论 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E6%97%A0%E5%90%88%E5%90%8C%E6%9D%BF%E7%90%83%E9%A2%84%E4%BB%98%E8%B4%B9%E6%97%A0%E7%BA%BF%E8%AE%A1%E5%88%92/"> <amp-img src="https://exse.eyewated.com/pict/00f5124cc31c3320-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E6%97%A0%E5%90%88%E5%90%8C%E6%9D%BF%E7%90%83%E9%A2%84%E4%BB%98%E8%B4%B9%E6%97%A0%E7%BA%BF%E8%AE%A1%E5%88%92/">无合同板球预付费无线计划</a></h3> <div class="amp-related-meta"> 购买指南 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E5%B0%86%E6%97%B6%E9%97%B4%E6%9C%BA%E5%99%A8%E5%A4%87%E4%BB%BD%E7%A7%BB%E8%87%B3%E6%96%B0%E7%A1%AC%E7%9B%98%EF%BC%88os-x-leopard%EF%BC%89/"> <amp-img src="https://exse.eyewated.com/pict/d75e94d0a26833e8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E5%B0%86%E6%97%B6%E9%97%B4%E6%9C%BA%E5%99%A8%E5%A4%87%E4%BB%BD%E7%A7%BB%E8%87%B3%E6%96%B0%E7%A1%AC%E7%9B%98%EF%BC%88os-x-leopard%EF%BC%89/">将时间机器备份移至新硬盘（OS X Leopard）</a></h3> <div class="amp-related-meta"> 苹果电脑 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E7%A7%BB%E5%8A%A8%E8%AE%A1%E7%AE%97%E8%AE%BE%E5%A4%87/"> <amp-img src="https://exse.eyewated.com/pict/0153744909213150-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E7%A7%BB%E5%8A%A8%E8%AE%A1%E7%AE%97%E8%AE%BE%E5%A4%87/">移动计算设备</a></h3> <div class="amp-related-meta"> 网络搜索 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E4%B8%8Ewindows-7%E7%94%B5%E8%84%91%E5%85%B1%E4%BA%ABos-x-lion%E6%96%87%E4%BB%B6/"> <amp-img src="https://exse.eyewated.com/pict/a293fe5b0d95347b-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E4%B8%8Ewindows-7%E7%94%B5%E8%84%91%E5%85%B1%E4%BA%ABos-x-lion%E6%96%87%E4%BB%B6/">与Windows 7电脑共享OS X Lion文件</a></h3> <div class="amp-related-meta"> 苹果电脑 </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>Sapid posts</h2> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/windows-vista%E5%91%BD%E4%BB%A4%E6%8F%90%E7%A4%BA%E7%AC%A6%E5%91%BD%E4%BB%A4%EF%BC%88%E7%AC%AC3%E9%83%A8%E5%88%86%EF%BC%89/"> <amp-img src="https://exse.eyewated.com/pict/af51f2dacca1379a-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/windows-vista%E5%91%BD%E4%BB%A4%E6%8F%90%E7%A4%BA%E7%AC%A6%E5%91%BD%E4%BB%A4%EF%BC%88%E7%AC%AC3%E9%83%A8%E5%88%86%EF%BC%89/">Windows Vista命令提示符命令（第3部分）</a></h3> <div class="amp-related-meta"> 视窗 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E9%80%89%E6%8B%A9%E4%B8%80%E4%B8%AA%E4%B8%BB%E9%94%AE/"> <amp-img src="https://exse.eyewated.com/pict/a8257d7c1ede304d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E9%80%89%E6%8B%A9%E4%B8%80%E4%B8%AA%E4%B8%BB%E9%94%AE/">选择一个主键</a></h3> <div class="amp-related-meta"> 软件 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E5%9C%A8facebook%E4%B8%8A%E7%BC%96%E8%BE%91%E6%80%A7%E5%88%AB%E8%BA%AB%E4%BB%BD%E7%8A%B6%E6%80%81/"> <amp-img src="https://exse.eyewated.com/pict/51ec70333202373e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E5%9C%A8facebook%E4%B8%8A%E7%BC%96%E8%BE%91%E6%80%A7%E5%88%AB%E8%BA%AB%E4%BB%BD%E7%8A%B6%E6%80%81/">如何在Facebook上编辑性别身份状态</a></h3> <div class="amp-related-meta"> 社交媒体 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/netflix%E6%B5%81%E5%AA%92%E4%BD%93%E9%80%89%E6%8B%A9/"> <amp-img src="https://exse.eyewated.com/pict/ec5d39ecab713454-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/netflix%E6%B5%81%E5%AA%92%E4%BD%93%E9%80%89%E6%8B%A9/">Netflix流媒体选择</a></h3> <div class="amp-related-meta"> 软件和应用程序 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%8B%96%E6%94%BE%E5%8A%9F%E8%83%BD%E5%9C%A8gmail%E4%B8%AD%E6%A0%87%E8%AE%B0%E9%82%AE%E4%BB%B6/"> <amp-img src="https://exse.eyewated.com/pict/9e93c8f424143587-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%8B%96%E6%94%BE%E5%8A%9F%E8%83%BD%E5%9C%A8gmail%E4%B8%AD%E6%A0%87%E8%AE%B0%E9%82%AE%E4%BB%B6/">如何使用拖放功能在Gmail中标记邮件</a></h3> <div class="amp-related-meta"> 电子邮件和消息 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E5%9C%A8ipad%E4%B8%8A%E4%BD%BF%E7%94%A8photon-flash-player/"> <amp-img src="https://exse.eyewated.com/pict/65506350273b35cf-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E5%9C%A8ipad%E4%B8%8A%E4%BD%BF%E7%94%A8photon-flash-player/">如何在iPad上使用Photon Flash Player</a></h3> <div class="amp-related-meta"> IPad的 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E4%B8%BAword%E6%96%87%E6%A1%A3%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAthumb%E7%B4%A2%E5%BC%95/"> <amp-img src="https://exse.eyewated.com/pict/122da8d2169533d1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E4%B8%BAword%E6%96%87%E6%A1%A3%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAthumb%E7%B4%A2%E5%BC%95/">如何为Word文档创建一个Thumb索引</a></h3> <div class="amp-related-meta"> 软件 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E5%AD%A6%E4%B9%A0%E5%AE%89%E8%A3%85%E9%80%82%E7%94%A8%E4%BA%8Elinux%E7%9A%84google%E5%9C%B0%E7%90%83%E7%9A%84%E6%AD%A3%E7%A1%AE%E6%96%B9%E6%B3%95/"> <amp-img src="https://exse.eyewated.com/pict/49cc8b126e033d28-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E5%AD%A6%E4%B9%A0%E5%AE%89%E8%A3%85%E9%80%82%E7%94%A8%E4%BA%8Elinux%E7%9A%84google%E5%9C%B0%E7%90%83%E7%9A%84%E6%AD%A3%E7%A1%AE%E6%96%B9%E6%B3%95/">学习安装适用于Linux的Google地球的正确方法</a></h3> <div class="amp-related-meta"> Linux的 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E6%9B%B4%E6%94%B9android-wear%E8%AE%BE%E5%A4%87%E4%B8%8A%E7%9A%84%E8%A1%A8%E7%9B%98/"> <amp-img src="https://exse.eyewated.com/pict/3d2c760efaa5358c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E5%A6%82%E4%BD%95%E6%9B%B4%E6%94%B9android-wear%E8%AE%BE%E5%A4%87%E4%B8%8A%E7%9A%84%E8%A1%A8%E7%9B%98/">如何更改Android Wear设备上的表盘</a></h3> <div class="amp-related-meta"> 穿戴式 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/pcm%E9%9F%B3%E9%A2%91%E5%9C%A8%E5%AE%B6%E5%BA%AD%E5%BD%B1%E9%99%A2/"> <amp-img src="https://exse.eyewated.com/pict/fa1a4bc7bf9c34e0-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/pcm%E9%9F%B3%E9%A2%91%E5%9C%A8%E5%AE%B6%E5%BA%AD%E5%BD%B1%E9%99%A2/">PCM音频在家庭影院</a></h3> <div class="amp-related-meta"> 家庭电影院 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/d-link-di-524%E9%BB%98%E8%AE%A4%E5%AF%86%E7%A0%81/"> <amp-img src="https://exse.eyewated.com/pict/550a90079d1231cf-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/d-link-di-524%E9%BB%98%E8%AE%A4%E5%AF%86%E7%A0%81/">D-Link DI-524默认密码</a></h3> <div class="amp-related-meta"> 互联网和网络 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E4%BD%BF%E7%94%A8readyboost%E5%8A%A0%E9%80%9Fwindows-7/"> <amp-img src="https://exse.eyewated.com/pict/9c6db2767af02fbe-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E4%BD%BF%E7%94%A8readyboost%E5%8A%A0%E9%80%9Fwindows-7/">使用ReadyBoost加速Windows 7</a></h3> <div class="amp-related-meta"> 视窗 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/adwaremedic%EF%BC%9A%E6%B1%A4%E5%A7%86%E7%9A%84mac%E8%BD%AF%E4%BB%B6%E9%80%89%E6%8B%A9/"> <amp-img src="https://exse.eyewated.com/pict/0b73888f1e683383-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/adwaremedic%EF%BC%9A%E6%B1%A4%E5%A7%86%E7%9A%84mac%E8%BD%AF%E4%BB%B6%E9%80%89%E6%8B%A9/">AdwareMedic：汤姆的Mac软件选择</a></h3> <div class="amp-related-meta"> 软件和应用程序 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/5%E7%A7%8D%E6%9C%80%E4%BD%B3%E7%9A%84android%E9%A3%9F%E7%89%A9%E5%92%8C%E9%A4%90%E5%8E%85%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/"> <amp-img src="https://exse.eyewated.com/pict/eb19abd27f583293-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/5%E7%A7%8D%E6%9C%80%E4%BD%B3%E7%9A%84android%E9%A3%9F%E7%89%A9%E5%92%8C%E9%A4%90%E5%8E%85%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/">5种最佳的Android食物和餐厅应用程序</a></h3> <div class="amp-related-meta"> Android的 </div> </div> </div> <div class="amp-related-content"> <a href="https://zhcn.eyewated.com/%E7%83%AD%E9%97%A8%E7%83%AD%E9%97%A8mozilla-thunderbird%E6%8A%80%E5%B7%A7%EF%BC%8C%E6%8A%80%E5%B7%A7%E5%92%8C%E6%95%99%E7%A8%8B/"> <amp-img src="https://exse.eyewated.com/pict/6cc8d7ba96ab2f18-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E7%83%AD%E9%97%A8%E7%83%AD%E9%97%A8mozilla-thunderbird%E6%8A%80%E5%B7%A7%EF%BC%8C%E6%8A%80%E5%B7%A7%E5%92%8C%E6%95%99%E7%A8%8B/">热门热门Mozilla Thunderbird技巧，技巧和教程</a></h3> <div class="amp-related-meta"> 电子邮件和消息 </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://zhcn.eyewated.com/%E8%A7%86%E9%A2%91%E5%8D%A1%E4%B8%AD%E7%9A%84cuda%E5%86%85%E6%A0%B8/">视频卡中的CUDA内核</a></h3> <div class="amp-related-meta"> 视窗 </div> </div> </div> </div></article> <footer class="amp-wp-footer"> <div class="amp-wp-footer-inner"> <a href="#" class="back-to-top">Back to top</a> <p class="copyright"> © 2024 zhcn.eyewated.com </p> <div class="amp-wp-social-footer"> <a href="#" class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="#" class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="#" class="jeg_google-plus"><i class="fa fa-google-plus"></i> </a><a href="#" class="jeg_pinterest"><i class="fa fa-pinterest"></i> </a><a href="" class="jeg_rss"><i class="fa fa-rss"></i> </a> </div> </div> </footer> <div id="statcounter"> <amp-pixel src="https://c.statcounter.com/12022999/0/02d06b5d/1/"> </amp-pixel> </div> </body> </html>