1
HTML/CSSをASP.NETに転送する際に問題が発生しています。 HTMLでは、私のアイコンは4つのアイコンから1行、モバイルデバイスでは2x2行で表示されました。今では、実際にコピーしたHTMLに、/>終了タグを変更するなどの小さな変更が加えられました。しかし今はPC上に2行2列を表示していますが、4行のアイコンで1行にする必要があります。私はまだ学生であり、これにはかなりのノブですので、私の論文のために助けてくれてありがとう。事前に感謝します。 （以下のコード）HTML/CSS以外のアイコンを表示するASP.NET
@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/[email protected]" 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/[email protected]" 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>
新しいCSSやHTMLにあなたのオリジナルのCSSやHTMLを比較し、違いを発見？ – mason
それは純粋なコピー貼りです、私は何も変更していない、いくつかの終了タグのみ –
あなたは何も変更しなかったと仮定すると、彼らは同じだろう。チェックする唯一の他の方法は、ブラウザが古い/キャッシュされたバージョンのリソースを使用していないことを確認することです。 – mason