html - 如何通过表格上的图标保留文本(响应式设计)

标签 html css text html-table responsive

我正在为我的学校论文做一个元素，但我遇到了一些问题。我们需要使我们的网站具有响应能力，尽管我们从未见过这种情况……这非常困难，而且在不使事情变得复杂的情况下，我正在尝试使表格具有响应能力。当我缩小屏幕尺寸时，我现在得到这个: Screenshot

我的 friend 提议这样做，但图标彼此下方比，我认为这是一个不好的解决方法:

<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>

我的代码是这样的atm:

@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+ */
}
<!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>

让表格响应的是这部分:

@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;
  }
}

预先感谢您的帮助。

最佳答案

所以首先要做的是。表格不是响应式的，这就是为什么在当今世界，除非他们确实需要，否则开发人员不会使用表格。而是使用 <div>

我在这里所做的是取下表格并将它们替换为 <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 */
}


检查下面的代码:

@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+ */
}
<!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>

关于html - 如何通过表格上的图标保留文本(响应式设计)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43498073/

上一篇：CSS 连字符未出现在 Firefox 52 中的换行词中

下一篇：html - 如何在多行上均匀划分 UL

相关文章：

html - 垂直菜单 - 子菜单不弹出

html - 将 Logo 、导航和社交图标对齐在一条线上

javascript - 保存为 csv 文件时样式化 html 表

haskell - 组合两个函数以将它们应用于相同的输入

java - 将文件的文本作为字符串返回？

html - 排列用于打印的 css div 元素

wordpress - 第一个 child :first-letter not working in wordpress

html - 当轮播不存在时，边距出现在移动模式下导航栏的两侧

jquery - 如何使用 JQuery 或 CSS 或两者使文本居中？

javascript - 如何使用 JavaScript 代码在 if 条件下使用函数方法？

©2024 IT工具网  联系我们