CSS风格与我想要的相去甚远

时间：2017-02-21 22:20:24

标签： html css

我是CSS的新手，几天前就开始学习如何编写代码。有了Photoshop的经验，我已经研究过它的复制CSS＆＃34;功能，这正是我想要的。虽然我不得不做一些改变。

我使用Adobe Dreamweaver编写HTML和CSS代码。

这是我在Photoshop上设计的并希望它看起来像：

Photoshop Design

以下是在最新版本的Chrome上观看时的实际情况：

Html preview

我认为大部分问题都来自未设置的图像尺寸，但正如您所看到的，前景和按钮看起来与我的设计截然不同。这是我的代码，从HTML和CSS开始（因为我无法弄清楚如何将HTML和CSS粘贴到两个单独的块中，我将在HTML之后包含CSS：

＆＃13;
＆＃13; 
@charset "UTF-8";
.Background {
  background-image: url("http://i.imgur.com/0T9Q95B.png");
  position: absolute;
  left: 0px;
  top: 0px;
  width: auto;
  height: auto;
  z-index: 1;
}

.Foreground {
  background-image: url("http://i.imgur.com/bAGM5wo.png");
  position: absolute;
  left: 468px;
  top: -25px;
  width: 986px;
  height: 1153px;
  z-index: 2;
}

.Button6.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  position: absolute;
  left: 1063px;
  top: 755px;
  width: 331px;
  height: 159px;
  z-index: 9;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  position: absolute;
}

.Button5.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  position: absolute;
  left: 529px;
  top: 755px;
  width: 331px;
  height: 159px;
  z-index: 8;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  position: absolute;
}

.Button4.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  position: absolute;
  left: 1063px;
  top: 449px;
  width: 331px;
  height: 159px;
  z-index: 7;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  position: absolute;
}

.Button3.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  position: absolute;
  left: 529px;
  top: 449px;
  width: 331px;
  height: 159px;
  z-index: 6;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  position: absolute;
}

.Button2.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  position: absolute;
  left: 1063px;
  top: 173px;
  width: 331px;
  height: 159px;
  z-index: 5;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  position: absolute;
}

.Button1.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  position: absolute;
  left: 529px;
  top: 173px;
  width: 331px;
  height: 159px;
  z-index: 4;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  position: absolute;
}
＆＃13; 
<body class="Background">
  <div class="Foreground">
    <button class="Button1 ButtonTxt" type="button">Button1</button>
    <button class="Button2 ButtonTxt" type="button">Button2</button>
    <button class="Button3 ButtonTxt" type="button">Button3</button>
    <button class="Button4 ButtonTxt" type="button">Button4</button>
    <button class="Button5 ButtonTxt" type="button">Button5</button>
    <button class="Button6 ButtonTxt" type="button">Button6</button>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

希望你们中的一些人有耐心帮助我，我只是想知道我做错了什么以及我如何解决它，你真的不需要修复我的代码，链接我需要的信息也会有所帮助。

3 个答案:

答案 0 :(得分：1)

你走了，希望这可以帮助你开始。

* {margin:0;padding:0;}
body {
  background: navy;
  border: solid black;
  border-width: 4em 0;
  padding: 1em 0;
}
.Foreground {
  background: blue;
  margin: auto;
  max-width: 600px;
  width: 90%;
  padding: 3em 1em 0;
  overflow: auto;
  box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}
button:nth-child(odd) {
  float: left;
  clear: left;
}
button:nth-child(even) {
  float: right;
}
button {
  margin: 0 0 3em;
  background: #09c;
  border: 0;
  color: #fff;
  text-transform: uppercase;
  padding: 2em;
  font-weight: bold;
  text-shadow: 0 2px 3px rgba(0,0,0,0.3);
  font-size: 1.5em;
}

@media (max-width: 500px) {
  button:nth-child(odd), button:nth-child(even) {
    float: none;
  }
  .Foreground {
    text-align: center;
  }
}
<html>

<head>
  <meta charset="utf-8">
  <title>Index</title>
  <link href="CSS/index.css" rel="stylesheet" type="text/css">
</head>

<body class="Background">
  <div class="Foreground">
    <button class="Button1 ButtonTxt" type="button">Button1</button>
    <button class="Button2 ButtonTxt" type="button">Button2</button>
    <button class="Button3 ButtonTxt" type="button">Button3</button>
    <button class="Button4 ButtonTxt" type="button">Button4</button>
    <button class="Button5 ButtonTxt" type="button">Button5</button>
    <button class="Button6 ButtonTxt" type="button">Button6</button>
  </div>
</body>

</html>

答案 1 :(得分：1)

简单的flexbox应该可以轻松解决这个问题。您只需向自己的.Foreground课程中添加4个弹性属性即可删除所有position: absolute，left和right按钮的属性。

HTML将保持不变

<强> CSS 

.Foreground {
  background-image: url("http://i.imgur.com/bAGM5wo.png");
  background-repeat: no-repeat;
  width: 986px;
  height: 1153px;
  z-index: 2;
  display: flex; //added
  flex-wrap: wrap; //added
  align-items: center; //added
  justify-content: space-around; //added
}

＆＃13;
＆＃13; 
.Foreground {
  background-image: url("http://i.imgur.com/bAGM5wo.png");
  background-repeat: no-repeat;
  width: 986px;
  height: 1153px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.Button6.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  width: 331px;
  height: 159px;
  z-index: 9;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
}
.Button5.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  width: 331px;
  height: 159px;
  z-index: 8;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
}
.Button4.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  width: 331px;
  height: 159px;
  z-index: 7;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
}
.Button3.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  width: 331px;
  height: 159px;
  z-index: 6;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
}
.Button2.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  width: 331px;
  height: 159px;
  z-index: 5;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
}
.Button1.ButtonTxt {
  background-image: url("http://i.imgur.com/uJS8WOO.png");
  width: 331px;
  height: 159px;
  z-index: 4;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: left;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
}
＆＃13; 
<div class="Foreground">
			<button class="Button1 ButtonTxt" type="button">Button1</button>
			<button class="Button2 ButtonTxt" type="button">Button2</button>
			<button class="Button3 ButtonTxt" type="button">Button3</button>
			<button class="Button4 ButtonTxt" type="button">Button4</button>
			<button class="Button5 ButtonTxt" type="button">Button5</button>
			<button class="Button6 ButtonTxt" type="button">Button6</button>
	</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

我希望这就足够了

我还试图让你的代码更灵活，所以你不必在那里重复很多相同的css属性。

＆＃13;
＆＃13; 
  @charset "UTF-8";

  * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    background-color: #024068;
  }

  .foreground {
    background-color: #03609B;
    width: 400px;
    margin: 0 auto;
    height: 500px;
  }

  button {
    background-color: #5FA4D0;
    font-size: 20px;
    text-transform: uppercase;
    color: #FFF;
    height: 60px;
    width: 40%;
    margin: 30px 10px;
    border: none;
    text-shadow: 0 2px 3px rgba(0,0,0, 0.2);
    -webkit-box-shadow: 1px 1px 5px 0 #333;
    box-shadow: 1px 1px 5px 0 #333;
  }

  button:nth-child(odd) {
    float: left;
    clear: left;
  }
  button:nth-child(even) {
    float: right;
  }
＆＃13; 
    <div class="foreground">
  			<button class="button1 ButtonTxt" type="button">Button1</button>
  			<button class="button2 ButtonTxt" type="button">Button2</button>
  			<button class="button3 ButtonTxt" type="button">Button3</button>
  			<button class="button4 ButtonTxt" type="button">Button4</button>
  			<button class="button5 ButtonTxt" type="button">Button5</button>
  			<button class="button6 ButtonTxt" type="button">Button6</button>
  	</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题