网页娱乐的定位和利润

时间：2014-04-03 01:40:33

标签： css image html css-position

我尝试重新创建网页，作为HTML / CSS培训的一部分。有问题的网页是这样的： enter image description here ，UEI网站（它已经老了，看起来不再那样了。）

下面是我的代码，CSS被引入HTML，因为它是一个单独的项目。以下是我遇到的一些问题，非常感谢任何帮助！

1。）我如何得到我的主要div，包含所有段落和诸如此类的身体中心，以及＆＃34;溢出＆＃34;就像在原版中一样进入页脚？我已经尝试了z索引，但似乎没有做任何事情。

2。）第二个盒子怎么样，＆＃34;开始＆＃34; div根本不会出现？我在定位方面做错了吗？

3。）对于橙色栏中的右箭头，如何调整它以使其不会切掉箭头的底部四分之一？

4.。）如何让导航栏UL的橙色背景不仅仅在文字的周围，而是在原文中显示？

5.。）如何调整底部UEI徽标的大小，使其看起来像原始版本一样小？

非常感谢您的帮助！下面是我到目前为止的代码。我对此很陌生，但请不要犹豫，批评你看到的任何事情：

<!DOCTYPE html>
<html>
<head> 
<style type="text/css">
#wrapper {
 width: 960px;
 margin: 0 auto;
 background: #D6D6D7;
}
#topbanner {
 background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
 height: 131px;
 margin-top: -20px;
}
.menu {
  float: left;
  display: inline-block;
  margin-top: 14px;
  margin-left: 50px;
  color: white;
}
ul {
  background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
  height: 40px;
  margin-left: 266px;
  margin-right: 100px;
  margin-top: 34px;
  width: 560px;
  position: relative;
}
li:hover {
  background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
}
#main {
  background: white;
  width: 788px;
  height: 650px;
  z-index: 10;
  margin-left: 78px;
  position: relative;
  padding-top: 20px;
}
#blackbar {
  background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 75px;
  position: relative;
  padding: 150px 25px 0 25px;
  left: -25px;
}
#whitepeople{
  background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
  background-size: contain;
  width: 50%;
  height: 250px;
  margin-top: -190px;
}
#orangebar {
  background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 75px;
  margin-top: -22px;
  position: relative;
  padding: 150px 25px 0 25px;
  left: -25px;
}
#arrow {
  background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
  position: relative;
  height: 35px;
  width: 100%;  
  margin-left: 375px;
  margin-top: -48px;
}
#box1 {
  background: #CCC;
  height: 450px;
  width: 275px;
  position: relative;
  float: right;
  margin-top: -488px;
  margin-right: 70px;   
  z-index: 5;
}
#start {
  background: url(https://i.imgur.com/rp7lJrE.png) contain;
  height: 75px;
  width: 275px;
  position: relative;
  float: right;
  margin: 0 auto;   
}
#box2 {
  background: #0C3
  height: 450px;
  width: 275px;
  position: relative;
  float: right;
  margin-top: -475px;
  margin-right: 50px;
  z-index: 1;
}
#bottom {
  background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
  height: 200px;
  z-index: 1;
  position: relative;
}
#ueilogo {
  background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
  float: left;
  height: 131px;
  width: 131px;
  padding-left: 45px;
  padding-right: 55px;
  margin-left: 35px;
  margin-right: 35px;
}
#botlogo {
  background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
  background-size: contain;
  height: 150px;
  width: 960px;
  z-index: 5;
  margin: 0 auto;
  position: relative;
}
h2 {
  color: white;
  size: 16px;
  font-family: Times New Roman;
  margin-left: 25%;
  padding-top: 35px;
  position: relative;
}
.banner1{
  color: white;
  font-size: 14px;
  margin-top: -145px;
  margin-left: 65px;
}
.banner2 {
  color: white;
  margin-top: -150px;
  margin-left: 70px;
  padding-top: 9px;
  font-size: 18px;
}
</style>
<title>UEI Mockup</title>
</head>
<body>
<div id="wrapper">
  <div id="topbanner">
      <div id="ueilogo">
      </div>
      <h2>Student Success is Our Success</h2>
        <ul>
          <li class="menu">ABOUT UEI COLLEGE</li>
          <li class="menu">OVERVIEW</li>
          <li class="menu">FINANCIAL AID</li>
        </ul>
  </div>
  <div id="main">
    <div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p>     </div>
  <div id="whitepeople"></div>
    <div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
    <div id="box1"><div id="start"></div></div><div id="box2"></div>
</div>
<div id="bottom"><div id="botlogo"></div></div>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分：0)

请记住，我是一个完整的css菜鸟。如果我正确理解了一些问题...... 取代

background: url(https://i.imgur.com/rp7lJrE.png) contain;

与

 background: url('https://i.imgur.com/rp7lJrE.png') no-repeat;

另外，你忘了关闭声明

background: #0C3;

造型方框2

要适合箭头，请缩小字体，更改边距或使用字体。他们看起来很大但水平缩小了。

以下是更新后的代码：

<!DOCTYPE html>
<html>
<head> 
<style type="text/css">
 #wrapper {
 width: 960px;
 margin: 0 auto;
 background: #D6D6D7;
}
#topbanner {
 background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
 height: 131px;
 margin-top: -20px;
}
.menu {
  float: left;
  display: inline-block;
  margin-top: 14px;
  margin-left: 50px;
  color: white;
}
ul {
  background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
  height: 40px;
  margin-left: 266px;
  margin-right: 100px;
  margin-top: 34px;
  width: 560px;
  position: relative;
}
li:hover {
   background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
 }
 #main {
  background: white;
  width: 788px;
  height: 650px;
  z-index: 10;
  margin-left: 78px;
  position: relative;
  padding-top: 20px;
}
#blackbar {
  background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 75px;
  position: relative;
  padding: 150px 25px 0 25px;
  left: -25px;
}
#whitepeople{
  background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
  background-size: contain;
  width: 50%;
  height: 250px;
  margin-top: -190px;
}
#orangebar {
  background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 75px;
  margin-top: -22px;
  position: relative;
  padding: 150px 25px 0 25px;
  left: -25px;
}
#arrow {
  background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
  position: relative;
  height: 35px;
  width: 100%;  
  margin-left: 340px;
  margin-top: -46px;
}
#box1 {
  background: #CCC;
  height: 450px;
  width: 275px;
  position: relative;
  float: right;
  margin-top: -488px;
  margin-right: 70px;   
  z-index: 5;
}
#start {
  background: url('https://i.imgur.com/rp7lJrE.png') no-repeat;
  height: 75px;
  width: 275px;
  position: relative;
  float: right;
  margin: 0 auto;   
}
#box2 {
  background: #0C3;
  height: 450px;
  width: 275px;
  position: relative;
  float: right;
  margin-top: -475px;
  margin-right: 50px;
  z-index: 1;
}
#bottom {
  background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
  height: 200px;
  z-index: 1;
  position: relative;
}
#ueilogo {
  background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
  float: left;
  height: 131px;
  width: 131px;
  padding-left: 45px;
  padding-right: 55px;
  margin-left: 35px;
  margin-right: 35px;
}
#botlogo {
  background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
  background-size: contain;
  height: 150px;
  width: 960px;
  z-index: 5;
  margin: 0 auto;
  position: relative;
}
h2 {
  color: white;
  size: 16px;
  font-family: Times New Roman;
  margin-left: 25%;
  padding-top: 35px;
  position: relative;
}
.banner1{
  color: white;
  font-size: 14px;
  margin-top: -145px;
  margin-left: 65px;
}
.banner2 {
  color: white;
  margin-top: -150px;
  margin-left: 65px;
  padding-top: 9px;
  font-size: 17px;
}
</style>
<title>UEI Mockup</title>
</head>
<body>
<div id="wrapper">
    <div id="topbanner">
        <div id="ueilogo">
        </div>
        <h2>Student Success is Our Success</h2>
        <ul>
            <li class="menu">ABOUT UEI COLLEGE</li>
            <li class="menu">OVERVIEW</li>
            <li class="menu">FINANCIAL AID</li>
        </ul>
    </div>
    <div id="main">
         <div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p>         </div>
        <div id="whitepeople"></div>
        <div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>

        <div id="box1"><div id="start"></div></div>
        <div id="box2"></div>
    </div>
    <div id="bottom"><div id="botlogo"></div></div>
</div>
</body>
</html>

另外，很好的工作命名div白人。洛尔。

答案 1 :(得分：0)

等于图片。 

   <div id="wrapper">
      <div id="topbanner">
          <div id="ueilogo"></div>
          <h2>Student Success is Our Success</h2>
            <ul>
              <li class="menu">ABOUT UEI COLLEGE</li>
              <li class="menu"> OVERVIEW </li>
              <li class="menu">FINANCIAL AID</li>
            </ul>
      </div>
      <div id="main">
        <div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p>     </div>
      <div id="whitepeople"></div>
        <div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
        <div id="box1"><div id="start"></div></div><div id="box2"></div>
    </div>
    <div id="bottom"><div id="botlogo"></div></div>
    </div>

CSS 

*{
    margin: 0;
    padding: 0;
}
#wrapper {
 display: table;
 width: 960px;
 margin: 0 auto;
 background: #D6D6D7;
}
#topbanner {
 background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
 width: 100%;
 height: 131px;
}
#ueilogo {
  background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
  float: left;
  height: 131px;
  width: 131px;
  padding-left: 45px;
  padding-right: 55px;
  margin-left: 35px;
  margin-right: 35px;
}
ul {
  background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
  height: 40px;
  list-style: none;
  margin-left: 266px;
  margin-top: 34px;
  width: 600px;
}
.menu {
  padding: 1px 20px;
  margin-top: 13px;
  float: left;
  color: white; 
}
li:hover {
  padding: 1px 20px;
  background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
  background-size: 100% 100%;
}    

#main {
  background: white;
  width: 788px;
  height: 650px;
  z-index: 10;
  margin-left: 78px;
  position: absolute;
  padding-top: 20px;
  border-bottom-right-radius:6px;
  border-bottom-left-radius:6px;
}
#blackbar {
  background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 75px;
  position: relative;
  padding: 150px 21px 0 25px;
  left: -23px;
}
#whitepeople{
  background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
  background-size: contain;
  width: 50%;
  height: 250px;
  margin-top: -190px;
}
#orangebar {
  background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 75px;
  margin-top: -22px;
  position: relative;
  padding: 150px 25px 0 25px;
  left: -25px;
}
#arrow {
  background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
  position: relative;
  height: 35px;
  width: 100%;  
  margin-left: 375px;
  margin-top: -30px;
}
#box1 {
  background: #CCC;
  height: 450px;
  width: 275px;
  position: relative;
  float: right;
  margin-top: -490px;
  margin-right: 70px;  
  border-radius: 5px;
  z-index: 5;
}
#start {
  background: url(https://i.imgur.com/rp7lJrE.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  height: 32px;
  width: 292px; 
}
#box2 {
  background: #8dc73f;
  height: 441px;
  width: 275px;
  position: relative;
  float: right;
  margin-top: -470px;
  margin-right: 61px;
  border-radius: 5px;
  z-index: 1;
}
#bottom {
  background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
  margin-top: 620px;
  height: 200px;
  position: relative;
}
#botlogo {
  background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
  background-size: contain; 
  position: absolute;
  height: 150px;
  width: 788px;
  z-index: 5;
  margin-left: 78px;
  bottom: 0;
}
h2 {
  color: white;
  size: 16px;
  font-family: Times New Roman;
  margin-left: 25%;
  padding-top: 35px;
  position: relative;
}
.banner1{
  color: white;
  font-size: 14px;
  margin-top: -145px;
  margin-left: 65px;
}
.banner2 {
  color: white;
  margin-top: -150px;
  margin-left: 70px;
  padding-top: 9px;
  font-size: 18px;
}
相关问题
最新问题