如何在桌面上按图标保持文字（响应式设计）

时间：2017-04-19 14:05:58

标签： html css text html-table responsive

我正在研究一个关于学校论文的项目，但我遇到了一些问题。我们需要让我们的网站做出响应，尽管我们从来没有见过这个......这很难，而且没有让事情变得复杂我试图让桌面响应。当我缩小屏幕尺寸时，我现在得到这个： Screenshot

我的朋友建议这样做，但图标低于对方，我认为这是一个糟糕的工作：

＆＃13;
＆＃13; 
<table align="center"">
  <td>
    <tr> <img href="afspraken.html"  src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/reminders_icon@2x.png" class="icon"> </tr>
    </br>
    <tr> <a href="afspraken.html" class="icontext"> Afspraken </a> </tr>
  </td>
  <td>
    <tr>
      <img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/fmf_icon@2x.png" class="icon">
    </tr>
    <br />
    <tr>
      <a href="afspraken.html" class="icontext"> Situaties </a>
    </tr>
  </td>

</table>
＆＃13;
＆＃13;
＆＃13;

我的代码就像这样atm：

＆＃13;
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

html{
  height: 100%;
}

body{
  font-family: 'Fjalla One', sans-serif;
  background: #2C3E50;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-repeat: no-repeat;

}

.container{
  margin: auto;
}


h1{
  text-transform: uppercase;
  font-size: 60px;
  line-height: 47px;
  letter-spacing: 2px;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
  text-align: center;
  line-height: 60px;
}


.title{
  transform: translateX(-50%) rotate(-5deg);
  display: block;
  margin-left:50%;
}











.icon{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
  display: table-cell;
  vertical-align: middle;
  color: white;
  border-radius: 35px;
  width: 180px;
  height: 180px;
  text-align: center;
  /*background: #007991;  /* fallback for old browsers */
  /*background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  /*background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

@media only screen and (max-width: 500px) {
  td {
      float: left;
      margin-right:10px;
      width: 45%;
  }
  td:nth-child(3) {
      clear: left;
  }
  .icon{
    width:100%!important;
    height:100%!important;
    margin-top: 50px;
  }
}

.icon:hover, .icon:focus, .icon:active {
  box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



.icontext{
  text-align: center;
  color: white;
  font-size: 30px;
}



table {
    border-spacing: 60px;
    border-collapse: separate;
}








.contactbtn{
  margin-right: 15px;
  color: white;
  border: 2px solid black;
  border-radius: 35px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
  width: 300px;
  height: 50px;
  text-align: center;
  justify-content: center;

  background: #007991;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
＆＃13; 
<!DOCTYPE html>
<html style="display: block;">
<head>
  <meta charset="UTF-8">
  <title>Knowledge base</title>
  <href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="style.css">
      <script src="script.js" charset="utf-8"></script>

</head>

<body>
  <!--Titel-->
  <section class="container">
  <h1>
    <br />
    <span class="title" >
       <label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
    </span>
    <span class="title" style="color:#f1c83c;">afspraken</span>
  </h1>
</section>


<!--Icoontjes-->
<table align="center">
  <tr>
    <td><a href="afspraken.html"><img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/reminders_icon@2x.png" class="icon"></a></td>
    <td><img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/fmf_icon@2x.png" class="icon"></td>
    <td><img src="controlcenter.png" class="icon"></td>
    <td><img src="Multitaks.png" class="icon"></td>
  </tr>
  <tr>
      <td class="icontext">Afspraken</td>
      <td class="icontext">Situaties</td>
      <td class="icontext">Grenzen</td>
      <td class="icontext">Categoriëen</td>
  </tr>
</table>

<!--Contact-->

</html>
＆＃13;
＆＃13;
＆＃13;

该表的响应性是这一部分：

＆＃13;
＆＃13; 
@media only screen and (max-width: 500px) {
  td {
      float: left;
      margin-right:10px;
      width: 45%;
  }
  td:nth-child(3) {
      clear: left;
  }
  .icon{
    width:100%!important;
    height:100%!important;
    margin-top: 50px;
  }
}
＆＃13;
＆＃13;
＆＃13;

先谢谢你的帮助。

1 个答案:

答案 0 :(得分：1)

首先是第一件事。表没有响应，这就是为什么在今天的世界中，开发人员不使用表，除非他们确实需要它们。而是使用<div> s

我在这里做的是取下桌子并用<div class="icon-div">标签替换它们。 然后我给出了以下样式

.icon-div {
  display: inline-block; /* This makes the div line up and when it reaches the end of the viewport it will fall under the other */
  padding: 20px; /* Just for looks */
}

然后，您可以将其设置为居中和其他所有内容。

<小时/> 我还更改了您的<h1> 

.title{
  transform: /*translateX(-50%)*/ rotate(-5deg); /* Don't need to translate it when you can center it using margin */
  display: block;
  /*margin-left:50%; Took this out as well */
  margin: 0 auto; /* This is the trick to center things on the screen */
}


检查以下代码：

＆＃13;
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body{
  font-family: 'Fjalla One', sans-serif;
  background: #2C3E50;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-repeat: no-repeat;

}

.container{
  margin: auto;
}


h1{
  text-transform: uppercase;
  font-size: 60px;
  line-height: 47px;
  letter-spacing: 2px;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
  text-align: center;
  line-height: 60px;
}


.title{
  transform: rotate(-5deg);
  margin: 0 auto;
  display: block;
}


.icon-div {
  display: inline-block;
  padding: 20px;
}


.icon{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
  display: table-cell;
  vertical-align: middle;
  color: white;
  border-radius: 35px;
  width: 180px;
  height: 180px;
  text-align: center;
  /*background: #007991;  /* fallback for old browsers */
  /*background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  /*background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

@media only screen and (max-width: 500px) {
  td {
      float: left;
      margin-right:10px;
      width: 45%;
  }
  td:nth-child(3) {
      clear: left;
  }
  .icon{
    width:100%!important;
    height:100%!important;
    margin-top: 50px;
  }
}

.icon:hover, .icon:focus, .icon:active {
  box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



.icontext{
  text-align: center;
  color: white;
  font-size: 30px;
}



table {
    border-spacing: 60px;
    border-collapse: separate;
}








.contactbtn{
  margin-right: 15px;
  color: white;
  border: 2px solid black;
  border-radius: 35px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
  width: 300px;
  height: 50px;
  text-align: center;
  justify-content: center;

  background: #007991;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Knowledge base</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="style.css">
      <script src="script.js" charset="utf-8"></script>

</head>

<body>
  <!--Title-->
  <section class="container">
  <h1>
    <br />
    <span class="title" >
       <label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
    </span>
    <span class="title" style="color:#f1c83c;">afspraken</span>
  </h1>
</section>


<!--Icoontjes-->
<div>

  <div class="icon-div">
    <a href="afspraken.html">
      <img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/reminders_icon@2x.png" class="icon">
    </a>
    <span class="icontext">Afspraken</span>
  </div>
  
  <div class="icon-div">
    <img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/fmf_icon@2x.png" class="icon">
    <span class="icontext">Situaties</span>
  </div>
  
  <div class="icon-div">
    <img src="controlcenter.png" class="icon">
    <span class="icontext">Grenzen</span>
  </div>
  
  <div class="icon-div">
    <img src="Multitaks.png" class="icon">
    <span class="icontext">Categoriëen</span>
  </div>
  
</div>

<!--Contact-->
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题