Question

蓝色表数据条目不会保持其宽度。有没有新的html5方式能够实现这一壮举？该行的宽度应与其上方的照片相同。

＆＃13;

  <div class="template" style="text-align:center">
    <table  width="100%" and height="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 align="center">
		<tr>
			<td width='100%' height='100%' bgcolor='#f2f3f4'>
				<div style="text-align: center;">
						<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
				</div>
			</td>
		</tr>
	
<!-- Background photo   -->

	<TABLE width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center">
	<TR>

	    <TD WIDTH="997" HEIGHT="326" 
        background="https://image.ibb.co/dO1HfQ/dog3edit.jpg" style="background-
        image:url(https://image.ibb.co/dO1HfQ/dog3edit.jpg); background-repeat: 
        no-repeat;">

	   <!-- <b>WELCOME TO ROVER! </b> -->
	   <FONT class="titletext" color="white" align="center" style="width: 800px;
	   font-size: 50px;"><b>WELCOME TO ROVER!</b></FONT><br><br> 
	   <FONT class="subtitletext" color="white" align="center" style="width: 
       100px;
	   font-size: 30px;">Ready to get started?</FONT><br><br><br>
	
	   <a href="#"><img src="https://image.ibb.co/nvbiLQ/button.png" 
       alt="Button" border="0"></a>
	
	  </TD>

	</TR>
	<tr>
	    <td width="80%" bgcolor="#blue" style="width:80%">
	    </td>
	</tr>
	</TABLE>
    </table>
    </div>

＆＃13;

Answer 1

＆＃13;

article {
  width: 100%;
}

#banner {
  background: url("https://image.ibb.co/dO1HfQ/dog3edit.jpg") no-repeat no-repeat;
  padding: 25px 0;
}

h1 {
  font-size: 50px;
  margin-bottom: 0;
}

h1, p {
  color: white;
  width: 100%;
  text-align: center;
}

p {
  font-size: 30px;
}

button {
  width: 200px;
  background: #00c55c;
  border: none;
  padding: 12px 24px;
  color: white;
  font-size: 24px;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
  clear: both;
}

#logo {
  background: #f2f3f4;
}

#logo img {
  display: block;
  margin: 0 auto;
  clear: both;
}

＆＃13;

<article>
    
    <section id="logo">
       <img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
    </section>	   
    
    <section id="banner">
      
      <h1>Welcome to Rover!</h1>
      <p>Ready to get started?</p>
      <button>Search Sitters</button>
    
    </section>
    
</article>

＆＃13;

我做这样的事情。没有布局表。如果必须内联，只需在HTML块上方添加<style></style>标记。

Answer 2

对于按钮的背景颜色，我使用了以下网站。

https://flatuicolors.com/

我还把所有内容分成css和html，这样你就可以看到了。没有内联CSS。这是使用表和标题的正确方法。

标题使用<div>标记，因为它会自动将内容推送到新行。不需要破坏标记。破坏标记很少在设计中使用。

此外，我确保您的分隔线为蓝色。

我相信有更好的方法来完成这个没有桌子，但是你说你需要以表格形式，所以这里你去！

table {
  width: 80%;
  border: none;
  text-align: center;
  margin: 0 auto;
  color: white;
}

.background {
background: url('https://image.ibb.co/dO1HfQ/dog3edit.jpg');
}
.titletext {
  font-size: 50px;
}

.subtitletext {
  font-size: 30px;
}

button {
  margin: 10px 0;
  width: 50%;
  border-radius: 15px;
  height: 100px;
  background: #27ae60;
  border: 1px solid rgba(255,255,255,0.8);
  font-size: 20px;
  color: white;
}

button:hover {
  background-color: #2ecc71;
}


.seperator {
  width: 80%;
  background: blue;
}

<TABLE>
  <TR class="background">
    <TD>
      <div class="titletext">WELCOME TO ROVER!</div>
      <div class="subtitletext">Ready to get started?</div>
      <a href="#"><button>Search Sitters</button></a>
    </TD>
  </TR>
  <tr>
    <td class="seperator""></td>
  </tr>
</TABLE>

Answer 3

您正在使用内联css，试试这个：

<TABLE style="width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center"";>

无法更改表格的宽度

3 个答案: