Question

通过查看webpage，我创建了image（目前仅在桌面模式下工作）。

此时，我能够创建近40-50％的网页，但我不知道如何在背景图像下创建6个方框（附加运动，大学，个人，专业，娱乐，商业）（这家伙站着的地方）。我已将所有CSS和HTML代码都包含在小提琴中。我尝试创建框，但自动它会越过图像的顶部（不知道为什么）。

我尝试将以下一组代码放在导航部分下面，但不幸的是它没有用。

<div class="squares">
<p class="square1">ADDITIONAL SPORT</p>
<p class="square2">COLLEGIATE</p>
<p class="square3">INDIVIDUAL</p>
<p class="square4">PROFESSIONAL</p>
<p class="square5">Additional Sport</p>
<p class="square6">Additional Sport</p>
</div>

让我知道我做错了什么。

Answer 1

试试这个：

<div class="squaresRow">
    <div class="square">ADDITIONAL SPORT</div>
    <div class="square">COLLEGIATE</div>
    <div class="square">INDIVIDUAL</div>
</div>
<div class="squaresRow">
    <div class="square">PROFESSIONAL</div>
    <div class="square">Additional Sport</div>
    <div class="square">Additional Sport</div>
</div>


<style>

.squaresRow {
    width: 100%;
}

.square {
    width: 33%;
    display: inline-block;
    text-align: center;
}

/* adds a margin between the two rows */
.squaresRow:first-child > .square {
    margin-bottom: 2%;
}
</style>

Answer 2

如果你看一下＆＃34;整页＆＃34;查看你可以看到两排正方形。注意：您也可以查看此修订版here。（该代码也纠正了一些次要的HTML和CSS错误。）我在方块周围添加了一个红色边框，仅用于强调，在最终确定此页面时肯定会删除它。

＆＃13;

* {
padding: 0;
margin: 0;
}

.header {
position: relative;
}

.header-background {
  position:relative;
width: 100%;
}

.header-title {
position: absolute;
	top: 0px;
	left: 120px;
 }   

@font-face {
font-family: AvantGarde;
src: url(AvantGarde.woff);
}

h1 {
text-align: center;
font-size: 25px;
font-family: "AvantGarde Demi";
letter-spacing: .24em;
color: rgb(255, 255, 255);
position: absolute;
top: 18vh;
	left: 160px;
	width:100%;
}

p {
font: 27px "Adelle PE";
padding-left: 200px;
text-align: center;
padding-right: 210px;
line-height: 1.236;
letter-spacing: .12em;
-moz-transform: matrix( 0.79000470431452, 0, 0, 0.79518533499854, 0, 0);
-webkit-transform: matrix( 0.79000470431452, 0, 0, 0.79518533499854, 0, 0);
-ms-transform: matrix( 0.79000470431452, 0, 0, 0.79518533499854, 0, 0);
color: rgb(255, 255, 255);
position: absolute;
top:24vh;
	left:0;
	 width:100%;
}

.nav {
position: absolute;
width: 155px;
top: 0px;
bottom: 0px;
left: 0px;
	border-style: solid;
border-right-color: #ff0000;
background-color: #030303;
opacity: 0.5;
height: 1157px;
}


.navbar-logo {
position: relative;
width: 155px;
}

.navbar-tags {
padding: 0;
list-style-type: none;
}

.navbar-icons {
display: inline;
}


.squares {
position:absolute;
left:32vw;
bottom: 0vh;
height:400px;
width: 600px;
border: 1px solid red;
}

.square {
position: absolute;
left:0;
margin:0;padding:0;
background-color: #ccc;
  width: 200px;
  height:200px;
border: 1px solid black;
  }
.square1 {
	position:absolute;
	top:0;
	left:0;
	}
	.square2 {
	posiiton:absolute;
	top:0;
	left: 200px;
	}
	.square3 {
	posiiton:absolute;
	top:0;
	left:400px;
	}
.square4 {
		position:absolute;
	bottom:0;
	left:0;
	}
	.square5 {
		position:absolute;
	bottom:0;
	left: 200px;
	}
	.square6 {
	position:absolute;
	bottom:0;
	left:400px;
	}

.login {
display: inline;
padding-left: 10px;
}

＆＃13;

<div class="header">
    <img class="header-background" src="https://s17.postimg.org/5590nqkyn/dna-image.png">

    <img class="header-title" src="https://s12.postimg.org/5vqt7imb1/northman-wordmark.png" width="400" height="157">
    <h1>OUR DNA</h1>
    <p>Northman was established to provide radically-evolved insurance solutions for the adventure and extreme sport markets. Northman is changing the extreme insurance playing field.</p>
</div>


<div class="nav">

    <img class="navbar-logo" src="https://s12.postimg.org/p1g2nywql/northman-logo.png">
    <ul class="navbar-list">
        <li class="navbar-tags"><a href="#">OUR DNA</a></li>
        <li class="navbar-tags"><a href="#">PROGRAMS</a></li>
					<li class="navbar-tags"><a href="#">RESEARCH</a>/li>
        <li class="navbar-tags"><a href="#">STORIES</a></li>
        <li class="navbar-icons"><i class="fa fa-facebook-square"></i></li>
        <li class="navbar-icons"><i class="fa fa-twitter-square"></i></li>
        

    </ul>
    <div class="squares">
<p class="square square1">ADDITIONAL SPORT</p>
<p class="square square2">COLLEGIATE</p>
<p class="square square3">INDIVIDUAL</p>
<p class="square square4">PROFESSIONAL</p>
<p class="square square5">Additional Sport</p>
<p class="square square6">Additional Sport</p>
</div>

			<a class="login" href="#">Log In</a>
    <a class="login" href="#">Sign Up</a>
			    </div>

＆＃13;

另外，请参阅优秀的相关讨论here

Answer 3

如果您正在使用像Bootstrap这样的CSS框架或像Flex-box这样的CSS工具，那么做一些非常简单的事情。尝试研究这些工具。

但只是使用原始CSS和HTML。尝试。

首先，在您的方块中添加一个类，以便您可以定位所有方格div

.squares {
  position: aboslute; 
  width: 300px; 
}

.square {
  text-align: center;
  margin: 0px;
  background-color: red;
  width:100px;
  height:100px; 
  float: left;
}

<div class="squares">
<p class="square square1">ADDITIONAL SPORT</p>
<p class="square square2">COLLEGIATE</p>
<p class="square square3">INDIVIDUAL</p>
<p class="square square4">PROFESSIONAL</p>
<p class="square square5">Additional Sport</p>
<p class="square square6">Additional Sport</p>
</div>

在html和css中制作方框

3 个答案: