2

我正在尝试让网页具有与 livingsocial 及其登录页面相同的设置。基本上中间有一个大 div，里面包含其他东西。

看看他们的 css，我发现他们使用了很多基于网格的设计

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9,    
.grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16
{
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
}

我对 CSS 完全没有了解，我正在寻找一个框架的帮助来让自己的事情变得更轻松。

问题

  • 生活社交也使用 CSS 框架吗？
  • 如果我想获得一个像 livingsocial 这样的网络模板，那么哪个框架是我最好的选择？我查看了蓝图 CSS，但他们的演示页面看起来不像我想要的
  • 今天我遇到了语义网格 css 系统（http://semantic.gs/），但再次无法理解如何/做什么来制作像生活社交这样的骨架。
  • 任何关于如何使用该框架的好的教程都会有很大帮助。
4

3 回答 3

2

回答您的问题：

  • 生活社交也使用 CSS 框架吗？：

看起来是这么回事。这些.grid_x东西是你在基于网格的框架中找到的东西，其中有很多。

  • 如果我想获得一个像 livingsocial 这样的网络模板，那么哪个框架是我最好的选择？我查看了蓝图 CSS，但他们的演示页面看起来不像我想要的

在深入研究框架之前，请先学习 CSS 的基础知识。了解框架的作用以及哪个框架适合您的需求总是很好的。如果您不了解所需框架的语言的基础知识，您将不会知道这一点。谷歌搜索会得到大量的 CSS 教程，但我特别喜欢这个网站：http ://css-tricks.com/

  • 今天我遇到了语义网格 css 系统（http://semantic.gs/），但再次无法理解如何/做什么来制作像生活社交这样的骨架。

再次，学习 CSS 的基础知识。一旦你从框架或网格开始，一切都会变得清晰。

  • 任何关于如何使用该框架的好的教程都会有很大帮助。

我可以给另一个建议吗？使用http://compass-style.org/作为框架。它拥有所有基础工具，可以相对轻松地创建网站，还提供帮助来让您的排版、div 对齐、图标精灵和网格正确。此外，它已经解决了 CSS 的所有跨浏览器问题。

教程可以在这里找到：http ://compass-style.org/help/

于 2011-08-23T22:14:48.660 回答
0

看起来他们只是使用 float:left 和 float:right 将两个 div 并排放置。

所以，如果你有；

<div style="float:left">Left div</div>
<div style="float:right">Right div</div>

它们将彼此相邻出现。

然后在这两个 div 中放置其他内容，例如更多 div。

每次添加另一个 div 时，都需要使用 css 放置它。

.div1 { margin-top:20px; padding-left:30px }

这就是您如何在 LivingSocial 中放置内容的方式。

将它们全部放置可能有点棘手，但是一旦完成，就很容易在屏幕上移动项目并跟随内容。

我希望这有帮助

编辑

如果你真的不想涉足 css 的世界，那么不妨看看http://themeforest.net/看看有没有你可以购买的主题

于 2011-08-23T22:10:08.213 回答
0

我认为 Semantic 是一个不错的选择，它也具有响应性，因此如果您想让您的网站与支持 HTML5 的设备上的不同移动设备屏幕宽度兼容，建议您更好地了解 Semantic。

您可以在此处阅读有关响应式网页设计的更多信息： http ://www.alistapart.com/articles/responsive-web-design/

关于 Semantic 需要记住的一件事是它是一个 LessCSS 实现，在此处查看有关 LessCSS 的更多信息：http: //lesscss.org/ LessCSS 为您的网站样式打开大门，所以花点时间学习它，相信我，它是值得。

另外，看看今天发布在 SmashingMagazine 上的这篇文章：http: //coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/ 它可能会回答一些问题你的问题。

我强烈建议订阅 Smashing Magazine 的 RSS 提要，它是学习 Web 开发最新趋势和技术的最佳选择。

最后，学习 Semantic 的最佳选择是下载它，让它运行并剖析它，它应该带有一个演示。在http://semantic.gs/的页面上还有一个教程部分。

于 2011-08-23T22:18:18.490 回答