- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在尝试将 HTML/CSS 传输到 ASP.NET 时遇到问题。在 HTML 中,我的图标显示在 1 行中,来自 4 个图标,对于移动设备,显示在 2x2 行中。现在我实际上是在复制粘贴 HTML 并做一些小改动,比如更改/> 结束标记。但现在它在 PC 上也显示 2x2 行,而它应该是 1 行和 4 个图标。我仍然是一名学生并且在这方面非常菜鸟,所以我很感激你的帮助,因为它是为了我的论文。提前致谢。 (下面的代码)
@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;
}
form {
width:500px;
margin:0 auto;
margin-bottom: 50px;
}
.search {
width: 300px;
height: 30px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
border-radius: 7px;
text-align: center;
color: white;
outline: none;
}
.btnsearch {
width: 50px;
height: 31px;
border-radius: 0px 7px 7px 0px;
position:relative;
border:2px solid #207cca;
background-color:#207cca;
color:#fafafa;
left: -10px;
}
.btnsearch:hover {
background-color:#fafafa;
color:#207cca;
}
.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;
margin-bottom: 20px;
/*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: 480px) {
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;
}
.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: 100px;
height: 30px;
text-align: center;
justify-content: center;
margin-top: 50px;
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;
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+ */
}
.contactbtn:hover, .contactbtn:focus, .contactbtn:active {
box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Schoolreglement_FORM.index1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Knowledge base</title>
<link href="style.css" rel="stylesheet" />
<script src="JavaScript.js"></script>
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />-->
</head>
<body>
<form id="form1" runat="server">
<!--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>
<!--Zoekbalk-->
<section align="center">
<input type="text" placeholder="Zoek iets op..." class="search"/>
<input type="button" value="Zoek" class="btnsearch"/>
</section>
<!--Icoontjes-->
<div style="text-align: center;">
<div class="icon-div" style="display: inline-block;">
<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-->
<div style="text-align: center;">
<input type="button" value="contact" class="contactbtn"/>
</div>
</form>
</body>
</html>
最佳答案
form {
/* width: 500px; */ remove the width from form
margin: 0 auto;
margin-bottom: 50px; }
关于html - ASP.NET 显示的图标不同于 HTML/CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43524338/
我的Angular-Component位于一个flexbox(id =“log”)中。可以显示或隐藏flexbox。 我的组件内部有一个可滚动区域,用于显示日志消息。 (id =“message-li
我真的很困惑 有一个 phpinfo() 输出: MySQL 支持 启用 客户端 API 版本 5.5.40 MYSQL_MODULE_TYPE 外部 phpMyAdmin 显示: 服务器类型:Mar
我正在研究这个 fiddle : http://jsfiddle.net/cED6c/7/我想让按钮文本在单击时发生变化,我尝试使用以下代码: 但是,它不起作用。我应该如何实现这个?任何帮助都会很棒
我应该在“dogs_cats”中保存表“dogs”和“cats”各自的ID,当看到数据时显示狗和猫的名字。 我有这三个表: CREATE TABLE IF NOT EXISTS cats ( id
我有一个字符串返回到我的 View 之一,如下所示: $text = 'Lorem ipsum dolor ' 我正在尝试用 Blade 显示它: {{$text}} 但是,输出是原始字符串而不是渲染
我无法让我的链接(由图像表示,位于页面左侧)真正有效地显示一个 div(包含一个句子,位于中间)/单击链接时隐藏。 这是我的代码: Practice
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 4 年前。 Improve this ques
最初我使用 Listview 来显示 oracle 结果,但是最近我不得不切换到 datagridview 来处理比 Listview 允许的更多的结果。然而,自从切换到数据网格后,我得到的结果越来越
我一直在尝试插入一个 Unicode 字符 ∇ 或 ▽,所以它显示在 Apache FOP 生成的 PDF 中。 这是我到目前为止所做的: 根据这个基本帮助 Apache XSL-FO Input,您
我正在使用 node v0.12.7 编写一个 nodeJS 应用程序。 我正在使用 pm2 v0.14.7 运行我的 nodejs 应用程序。 我的应用程序似乎有内存泄漏,因为它从我启动时的大约 1
好的,所以我有一些 jQuery 代码,如果从下拉菜单中选择了带有前缀 Blue 的项目,它会显示一个输入框。 代码: $(function() { $('#text1').hide();
当我试图检查 Chrome 中的 html 元素时,它显示的是 LESS 文件,而 Firefox 显示的是 CSS 文件。 (我正在使用 Bootstrap 框架) 如何在 Chrome 中查看 c
我是 Microsoft Bot Framework 的新手,我正在通过 youtube 视频 https://youtu.be/ynG6Muox81o 学习它并在 Ubuntu 上使用 python
我正在尝试转换从 mssql 生成的文件到 utf-8。当我打开他的输出 mssql在 Windows Server 2003 中使用 notepad++ 将文件识别为 UCS-2LE我使用 file
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我正在尝试执行单击以打开/关闭一个 div 的功能。 这是基本的,但是,点击只显示 div,当我点击“关闭”时,没有任何反应。 $(".inscricao-email").click(function
假设我有 2 张卡片,屏幕上一次显示一张。我有一个按钮可以用其他卡片替换当前卡片。现在假设卡 1 上有一些数据,卡 2 上有一些数据,我不想破坏它们每个上的数据,或者我不想再次重建它们中的任何一个。
我正在使用 Eloquent Javascript 学习 Javascript。 我在 Firefox 控制台上编写了以下代码,但它返回:“ReferenceError:show() 未定义”为什么?
我正在使用 Symfony2 开发一个 web 项目,我使用 Sonata Admin 作为管理面板,一切正常,但我想要做的是,在 Sonata Admin 的仪表板菜单上,我需要显示隐藏一些菜单取决
我试图显示一个div,具体取决于从下拉列表中选择的内容。例如,如果用户从列表中选择“现金”显示现金div或用户从列表中选择“检查”显示现金div 我整理了样本,但样本不完整,需要接线 http://j
我是一名优秀的程序员,十分优秀!