Question

这看起来像一个模糊的问题，但你会在看完之后看到我想要的确切内容，我的设计应该“转换”为静态HTML页面，但我不知道我将如何做到这一点

设计：

http://i.imgur.com/KC3KqLA.png

我正在谈论的曲线是徽标所在的曲线，另一曲线位于底部。

到目前为止（有点凌乱）：

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: Helvetica, Arial, Sans-Serif; line-height: 24px;
	background: #eee url(images/body-bg.jpg) center top no-repeat;
}

#container {
	width: 80%; margin: 0 auto; height:1000px; margin-top: -75px; background-color: blue;
}

#destaques {
	width:100%;
	height: 40%;
	background-color: grey;
}

#header {
    overflow: hidden;
	padding: 0 0 50px 0;
}

#mllcont {
	height:200px;
	background-color: grey;
}

#slidecont {
	height: 650px;
	background-color: red;
}

#squares {
   width:100%;
   height:250px;
}

#divs div { 
        height: 250px; 
        width: 20%; 
        border: 0px solid red; 
        margin-left: 2.5%; 
        margin-right: 2.5%; 
        float: left; /*Here you can also use display: inline-block instead of float:left*/
        background: orange; 
}

	#header h1 {
		float: left;
	}


#content, #footer, #header  {
	height: 100%;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Particle</title>

<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

	<div id="slidecont">

		<div id="mllcont">

			<div id="logo">
			</div>

			<div id="header">
					<ul id="categories">
						<li><a href="#">Menu1</a></li>
						<li><a href="#">Menu2</a></li>
						<li><a href="#">Menu3</a></li>
						<li><a href="#">Menu4</a></li>
					</ul>
			</div>

			<div id="languages">
			</div>

		</div>
		</div>

	<div id="container">

			<div id="squares">
			    <div id="divs">
				      <div>One</div>
				      <div>Two</div>
				      <div>Three</div>
				      <div>Four</div>
			    </div>
			</div>	

			<div id="destaques">

			</div>
			
			<div id="Projetos">

			</div>

	</div>	

		<div id="footer">
			<ul id="credits">
				<li><a href="http://wordpress.org" class="wordpress">Powered by WordPress</a></li>
				<li><a href="http://www.blog.spoongraphics.co.uk" class="spoongraphics">Theme by SpoonGraphics</a></li>
			</ul>
			<p id="back-top"><a href="#header">Back to top</a></p>
		</div>
	</div>


</body>
</html>

Answer 1

您可以使用透明背景图像（.png或.gif）并将它们分配到每个div中的位置，并使用具有z-index层次结构的绝对定位div来实现您所追求的视觉效果，尽管如果网站需要布局代理，那么使用这种方法可以为你做很多工作。

例如，在您选择的图像编辑器中提取顶部曲线（白色位和蓝色位），确保背景透明并正确保存。然后，这只是使用代码的情况：

conf

HTML，以最简单的形式：

//STYLES CSS
.splash{
   background-image:url("icewater.jpg");
   width:1289px;
   height:513px;
   position:relative;
   z-index:1;
}
.top-curved-section{
   position:relative;
   top:0;
   left:0;
   z-index:2;
   background-image:url("blue-white-curve.gif");
   background-repeat:no-repeat;
   background-position:top left;
//Padding to get your logo element to display properly
   padding: 20px 0 0 20px;
//These heights are guesses to force the size of the div for background image
   width:400px;
   height:150px;
}

希望这有助于您的发展。此代码未经测试。您可以使用以下方法为启动页面的底部弯曲部分应用相同的主体：

    <div class="splash">
<div class="top-curved-section">
<img src="yourlogo.png" alt="Your Logo">
</div>
</div>

用曲线制作div？

1 个答案: