Question

我正在尝试为作业创建购物网站，并且我的索引CSS3出现问题。

我的第二部分（“开放链接”的背景）不是一个块，而是一个整页。例如，我的图片只能部分查看，其余部分隐藏在
我的“Open Link”按钮有缺陷，我目前无法添加任何类型的设计，因为它与它所在的部分混淆（EG框不起作用，它们只是错误
我甚至创建了我想要正确方法的布局吗？

body{
    	margin: 0px;
    	padding: 0px;
    	font-family: tahoma;
    }
    
    ul{
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    	background-color: #363377;
    	border-bottom: 1px solid white;
    	
    }
    
    #design-top{
    	width: 100%;
    	height: 40%;
    	*background-color: #575594;
    	border-bottom: 1px solid white;
    	
    	background-image: url(../img/bg2.jpg);
    	background-size: cover;
    	background-size: 100%;
    	background-repeat: no-repeat;
    	
    }
    
    #design-bottom{
    	background-color: #333;
    	height: 56%;
    }
    
    #startbtn{
    	text-decoration: none;
    	color: white;
    }
    
    span{
    	display: block;
    	vertical-align: middle;
    	padding-top: 150px;
    	text-align: center;
    }
    
    
    #left{
    	float: left;
    	border-right:solid 1px #fff;
    }
    
    #right{
    	float: right;
    }
    
    li a{
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    #left:hover, #right:hover{
    	background-color: #555;
    }

 <html>
	<head>
		<title>Design</title>
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<script type="text/javascript" src="javascript/js.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
	</head>

	<body>
		<ul>
			<li id="left"><a href="#home">Company</a></li>
			<li id="left"><a href="#home">Sales</a></li>
			<li id="left"><a href="#home">About</a></li>
			<li id="left"><a href="#home">Contact</a></li>
			<li id="right"><a href="">Cart</a></li>
			<li id="right"><a href=""><?php echo $_SERVER['REMOTE_ADDR']; ?></a></li>
		</ul>
		
		<div id="design-top">
		
			<span><a href="" id="startbtn"><h1>Open Store</h1></a></span>
		
		</div>
		
		<div id="design-bottom">
			
		</div>
	
	</body>
    </html>

Answer 1

您正在寻找垂直居中的open store文字。如果是这样，你可以这样做。

我已在代码中标记了更改。

https://jsfiddle.net/8m5m8627/3/

body {
  margin: 0px;
  padding: 0px;
  font-family: tahoma;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #363377;
  border-bottom: 1px solid white;
}

#design-top {
  width: 100%;
  height: 150px; /*40%;*/
  background-color: #575594;
  border-bottom: 1px solid white;
  background-image: url(../img/bg2.jpg);
  background-size: cover;
  background-size: 100%;
  background-repeat: no-repeat;
  display: table; /*added*/
}

#design-bottom {
  background-color: #333;
  height: 56%;
}

#startbtn {
  text-decoration: none;
  color: white;
}

span {
  /*display: block;*/
  /*padding-top: 150px;*/
  text-align: center;
  vertical-align: middle;
  display: table-cell; /*added*/
}

#left {
  float: left;
  border-right: solid 1px #fff;
}

#right {
  float: right;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#design-top h1 { /*added*/
  margin: 0;
}

#left:hover,
#right:hover {
  background-color: #555;
}

<html>
  <head>
    <title>Design</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="javascript/js.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
  
    <ul>
      <li id="left"><a href="#home">Company</a></li>
      <li id="left"><a href="#home">Sales</a></li>
      <li id="left"><a href="#home">About</a></li>
      <li id="left"><a href="#home">Contact</a></li>
      <li id="right"><a href="">Cart</a></li>
      <li id="right">
        <a href="">
          <?php echo $_SERVER['REMOTE_ADDR']; ?>
        </a>
      </li>
    </ul>

    <div id="design-top">
      <span><a href="" id="startbtn"><h1>Open Store</h1></a></span>
    </div>

    <div id="design-bottom">
    </div>

  </body>
</html>

为什么我的CSS表现如此？

1 个答案: