Question

我试图武装我的DIV时遇到了很大的问题，因为我发现这件事并不像看起来那么简单，只是放了一个DIV并在DIV里面另外做了2个你就完成了。下面的图像显示了我希望如何构建页面： SUR1。 surf2：surfleft，surfright。 surf3。 surf4哪里。意思是另一条线，意味着DIV应该是一个接一个的。并且也不能将图像垂直和横向中心放置在冲浪2父母的中间。

＆＃13;

@font-face 
{
    font-family: FONT;
    src: url(Montserrat-Regular.ttf);
}

p.title1
{
	font-size: 2.5em;
	margin: 0;
}

p.title2
{
	font-size: 3em;
}

.i1
{
	height: 400px;
    float: right;
    display: block;
    margin-top: 150px;
	
}

div.surf1
{

	display: block;
	background-image: url("surf1.jpg");
	background-position: center;
	background-size: cover;
	height: 600px;
}

div.surf2 {
    width: fit-content;
    position:absolute;
    background: #41c3ac;
    height: 600px;
}


div.surfleft {
    float:left;
    display: block;
    width: 45%;
    padding-top: 80px;
    height: 600px;
	background: #8C78B1;
 }

div.surfright {
	float: right;
	background: #ff6b57;
 }

div.surf3
{
	background: #ff6b57;
	height: 600px;
}

div.surf4
{
	background: #8C78B1;
	height: 600px;
}

div.text1
{
	padding-top: 100px;
	color: white;
	text-align:center;
	font-size: 2.5em;
}

div.button
{
	text-align: center;
	font-size: 1.5em;
	margin: 0 auto;
	width: 15%;
	padding: 8px;
	border: 2px solid;
	border-color: #e7dd84;
	background-color: rgba(236,229,167,0.2);
	color: #e7dd84;
	transition: 0.35s;

}
div.button:hover
{
	background-color: white;
	color: black;
	border-color: white;
	transition: 0.35s;
}

body
{
	margin: 0;
	font-family: FONT;
	color: white;
}

＆＃13;

<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
	<div class="text1">
		<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
	</div>
    <br><br><br><br><br>
	<div class="button">
		Go to site
	</div>
</div>
<div class="surf2">
	<div class="surfleft">
    	<p class="title1">Interractive games</p>
       	 <ul style="font-size: 1.5em">
        	<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
            <li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>   
          </ul>
     </div>
     <div class="surfright">
     	<img  src="console.png" alt="404 Image not Found" height="400px">
     </div>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>

＆＃13;

Answer 1

请注意，您可以使用正确的宽度值在设计中获得精细边缘。

div.surf1
{
	display: block;
	background-color: #cdcdcd;
	height: 100px;
}

div.surf2 {
    background: #41c3ac;
    height: 100px;
}

div.surfleft {
    float:left;
    display: block;
    width: 50%;
    height: 100px;
	background: #8C78B1;
 }

div.surfright {
	float: right;
    width: 50%
	background: #ff6b57;
 }

div.surf3
{
	background: #ff6b57;
	height: 100px;
}

div.surf4
{
	background: #8C78B1;
	height: 100px;
}

body
{
	margin: 0;
	font-family: FONT;
	color: white;
}

<div class="surf1">
	<div class="text1">Surf 1</div>
</div>
<div class="surf2">
	<div class="surfleft">Surf left</div>
     <div class="surfright">Surf right</div>
</div>
<div class="surf3">Surf 3</div>
<div class="surf4">Surf 4</div>

将DIV安排在正确的位置

1 个答案: