cs骨骼创建完成后修改参数_使用骨骼构建响应式布局：完成

最新推荐文章于 2024-09-17 23:15:58 发布

daique1908

最新推荐文章于 2024-09-17 23:15:58 发布

阅读量198

点赞数

文章标签： python css java html javascript ViewUI

cs骨骼创建完成后修改参数

在本系列以前的截屏视频中，我们涉及了很多领域，并使用Skeleton样板构建了响应（或自适应）布局。现在该完成所有最后的细节了。可以说是任何网站构建中最耗时的部分！

在这三个截屏过程中，我们将研究嵌套列，灵活的视频嵌入，Skeleton的表单元素和选项卡。我们将充实所有缺少的标记，并完成随附CSS。有很多要讨论的话题；一个多小时的镜头要吸收，所以您可能需要做好心理准备。

嵌套列

我们之前已经研究了Skeleton的十六列结构，以及如何通过一些选择的媒体查询来改变样式。现在，我们将看看将列彼此嵌套时会发生什么。

或者，下载视频，或通过iTunes或YouTube订阅Webdesigntuts +屏幕录像！

侧边栏

是时候在侧边栏添加一些肉了。我们将添加所有必要的标记，然后开始设计各个部分的样式。在执行此操作的同时，我们将快速讨论Skeleton的表单样式，并为图标获取一些Web字体。

或者，下载视频，或通过iTunes或YouTube订阅Webdesigntuts +屏幕录像！

灵活的视频

如果您对灵活的网页设计非常重视，则需要知道如何处理灵活的嵌入式内容。在本视频中，我们将介绍使视频内容具有弹性。关于该主题还有更多要讨论的内容，但是这种基本方法是一个很好的开始。

讨论完这些内容后，我们将快速讨论Skeleton的标签，此外，我们还将添加一些促销横幅，这些横幅根据所使用的媒体查询而有所不同。

或者，下载视频，或通过iTunes或YouTube订阅Webdesigntuts +屏幕录像！

灵活的嵌入

灵活嵌入的主题非常有趣。在这里，为您进行剖析，是您需要开始的基本片段。首先标记：

<!--
first we'll need a container for our video,
the 'restraining' element.
-->
<div class="embed">

	<!--  
	here's your embedded content,
	whatever it may be..
	-->
	<iframe></iframe>

</div><!--end embed-->

然后是样式：

/*
firstly we deal with the container element
making it relatively positioned
and defining its height proportionally
to its width - giving us a 16:9 ratio
*/
.embed {
	position: relative;
	padding: 0;
	padding-bottom: 56.25%; /* 16:9 ratio*/
	height: 0;
	overflow: hidden;
}

/*
then we make the actual embedded content 
behave in terms of its dimensions
and its position within the container
*/
.embed iframe,
.embed object,
.embed embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

注意：在截屏视频中，我将.embed容器的height设置为56.25％，我应该将其设置为零（嘿，我很累。。）在大多数情况下，这不会有任何有害影响，但是我认为值得一提:)