html Del Mar全宽主页部分

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html Del Mar全宽主页部分相关的知识,希望对你有一定的参考价值。

<script>
  	$(document).ready(function() {

  		//// FULL-WIDTH HOMEPAGE SECTIONS
  		$('.homepage #content > section').removeClass().addClass('container-fluid');
  		$('.homepage div.section, .homepage #suggested, .homepage #additional').wrapInner('<div class="container"></div>');
  		$('.homepage #suggested, .homepage #additional').appendTo('.homepage article .section_boxes > div > div').addClass('section');
  		$('.homepage .clear').remove();

	});

</script>

<style>
	.homepage #content .section:nth-child(even) {
		background-color: #c4bcb8;
	}

	.homepage #content .section:nth-child(odd) {
		background-color: #d8d2cf;
	}

	.homepage .section_boxes .section {
		margin-top: 0;
		margin-bottom: 0;
		padding: 60px 0;
	}

	.homepage h1,
	.homepage #suggested h2 {
		margin-top: 0;
	}

	.homepage #content .container-fluid {
		padding: 0;
	}
	
	/*** Remove if using Del Mar Starter or Del Mar Bootstrap 3 Starter ***/
	.section_Boxes .delmar-3box {
		width: 100%;
	}

	.delmar-3box img {
		max-width: 100%;
		width: auto !important;
		padding: 15px !important;
		height: auto;
	}
	
	.delmar-3box h2, .delmar-3box div{
		padding-right: 15px;
		padding-left: 15px;
	}
	
	@media all and (min-width:768px){
		.section_Boxes .delmar-3box {
			width: 33.3333333%;
		}
	}
	
	@media all and (max-width:768px){
		.SideBySide .boxside {
			width: 100%;
			text-align: center;
		}
		.section_SideBySide .no-img-mask {
			width: 100%;
		}
	}

	#content .container-fluid > article {
		padding-bottom: 0;
	}

</style>

以上是关于html Del Mar全宽主页部分的主要内容,如果未能解决你的问题,请参考以下文章

html Del Mar高级主管

html Del Mar高级页脚

html Del Mar w / Bootstrap 3 Starter

css Del Mar按钮

css Del Mar CSS Starter

css 恒定接触全宽:这将使CC嵌入形式在主页上更加全宽并堆叠在小部件上