PSD到自助

Question

我下载了一个.psd参见：http://webtechdesk.com/boot/theme.png

我想转换它在基于引导的响应html主题，谁能帮我解决这个问题。我知道和熟悉网格系统和在引导中制作骨架，但主要的问题是设置相同的背景图像。怎么做？

此外，这个psd有一个滑块显示在标题(你可以看到的形象，男孩和女孩站在一起-并排)。在这个滑块中，有一些是从底部到顶部是圆形的，从顶部是平坦的，如何制作那种滑块呢？

我在google上搜索了一些滑块，但是所有的结果滑块都是矩形的还是方形的？

预先感谢您的帮助。

Answer 1

您可以采用已经设计的网页，这是使用引导结构。然后开始在其中生成/集成您的设计需求。它可以帮助你轻松地开始工作。下面我发现了一些网页布局，看上去类似于您的psd。

http://startbootstrap.com/template-categories/all/

http://startbootstrap.com/template-overviews/full-width-pics/

http://startbootstrap.com/template-overviews/heroic-features/

为了给图像(如您的psd所示)曲线，您可以使用下面的css到div (这可能包含图像)。根据需要调整这些值。

   border-top-left-radius: 2em;
   border-bottom-left-radius: 2em;

Answer 2

您只需要包括引导，创建一个空的css文件和包含后引导。从那以后开始构建你的设计。您有所有的元素在引导您所需要的，只有您需要为您的网站构建模板。

如果需要对某些网格进行操作，可以向HTML中添加额外的类，并赋予该类样式。

示例：

<div class="row">
  <div class="col-md-4 one">.col-md-4</div>
  <div class="col-md-4 two">.col-md-4</div>
  <div class="col-md-4 three">.col-md-4</div>
</div>

在CSS中

.one{
border: 1px solid #f00
}
.two{
border: 1px solid #000
}
.three{
border: 1px solid #f88
}

所有元素都是如此。您是您的设计大师，引导只会帮助您与预定义的风格。你可以添加背景，颜色，字体，样式，摇摆不定。

对于一些额外的选项，您需要编写javascript或jQuery来支持您的设计，但这是针对个人的。您需要了解高级的CSS和一些jQuery的基础知识，才能创建您想要的东西。

此外，对于滑块，您可以添加一些层掩码或使用CSS3边框半径，您需要指出什么是最好的，您需要支持移动设备。