- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在为我的学校论文做一个元素,但我遇到了一些问题。我们需要使我们的网站具有响应能力,尽管我们从未见过这种情况……这非常困难,而且在不使事情变得复杂的情况下,我正在尝试使表格具有响应能力。当我缩小屏幕尺寸时,我现在得到这个:
我的 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/
仅使用POSIX shell 的特性,是否有一个“简单命令”,它什么也不做,也不改变$? 的值。人们通常描述:作为 shell 的无操作命令,但这总是设置 $?为零,所以这不是我想要的。 这是生成 s
我需要保留当前的 GlBlendFunc 以便在我做一些工作后可以恢复它。似乎这不是可以用 GLPushAttrib 保存的属性之一,还有其他类似的方法可以用来保存状态吗? 最佳答案 glGet与
我目前正致力于创建 Fuseki 三重存储浏览器的项目。我需要可视化 TripleStore 中的所有数据并使应用程序可浏览。唯一的问题是 QuerySolution 遗漏了三元组中的“”。 如果我使
我知道没有必要保留委托(delegate),以避免保留循环。我在一次采访中碰巧遇到了一个问题,“如果保留了 appDelegate 会怎样?”。我对此没有答案,并根据我的知识在这里寻求答案。谢谢 最佳
我正在用 C 编写第一个更严肃的程序,但我陷入了困境。我需要将此列表排序为不同的单独文件,因此它看起来像这样: BE30B Berlin 2014-04-02 Gale 02 BE30B Berlin
我有 4 个页面,我使用 ajax 和 historyPopState 在它们之间进行更改。但是有一个问题,因为页面非常不同,它们使用不同的样式表和脚本。我可以一遍又一遍地下载它们,但我想问一下是否有
我有一个表单,其中包含从一个表创建的多行(与其他表没有关系)。当我保存表单时,我所做的每项更改都会保存,但数据库中确实有一个额外的空行。请参阅下文(希望)了解所有必要的信息。 PropertyAddi
我正在编写一个可以在 Canvas 上绘制气泡的应用程序。我有 MainActivity,它的布局是一个简单的 LinearLayout,我将其用作 fragment 的容器。当我在 Canvas 上
我想弄清楚为什么我通过这段代码得到 EXC_BAD_ACESS。我没有线索。谁能帮帮我。 - (void)loadJsonFile:(NSString*)fileName { NSError
我正在编写一个代码,它将遍历单词中的每个单词,在字典中查找它们,然后将字典值附加到计数器。但是,如果我打印计数器,我只会从我的 if 语句中获取最后一个数字(如果有的话)。如果我将 print cou
抱歉,标题有点困惑。 我想隐藏这些选择选项,只在用户选择按钮时显示。一旦用户选择了一个按钮,我希望选择字段将继续显示......但是如果用户选择了不同的按钮,我想从以前的选择中重置所选的选项并炫耀。
>>> t = "first%s\n" >>> t = t %("second") >>> print t firstsecond 无论如何我可以保留最后的“\n”并得到“firstsecond\n”
我试图弄清楚如何更改 if 语句中的变量并使其保持全局不变。 用户输入:!change Hi var A = "Hello" if (msg.content.includes ('!change'))
您好,我有一个关于在重新创建 Activity 时保留 fragment 的问题。我听说一种方法是在 onCreate 方法中使用 setRetainFragment(true) 。问题是——这与跟踪
我想知道是否有人可以帮助我解决下面代码中的内存管理问题。我对 rootController 特别感兴趣,它是在我执行 initWithRootViewController 时被保留还是在窗口 addS
我想确保我在这里正确理解了内存管理。是否有任何特殊原因在这里使用其中一种 assignCurrentDate 方法而不是另一种方法?此外,所有这些都不会导致内存泄漏,对吗? 在 .h 中我们有: NS
我对 Angular2 删除尾部斜杠有疑问。我已经设置了我的 dotnet 核心应用程序来添加它们,但是一旦加载了 js,它们就会被删除。 在 Angular2 中甚至可能吗? (我的客户需要它,所以
local_settings.py 反模式的原因之一是把 SECRET_KEY, AWS设置文件中的键等值有问题: secret 通常应该是这样的: secret !将它们保存在版本控制中意味着拥有存
import('./A'); import('./B'); import('./C'); export class Person {}; A、B 和 C 是纯 JS (es5) 库,它们使用全局 wi
df 是一个测试数据框,其中我只想保留 Hits 列中包含 | 字符的行和行其中包含 hits(即 Hit1、Hit2 等)以及 Hits 列中的空白单元格。 df 从开始 (^) 到结束 ($)
我是一名优秀的程序员,十分优秀!