0
웹 브라우저에서 볼 때 내 웹 사이트를 단일 열로 변환하는 CSS 미디어 쿼리를 만들려고합니다. (현재 3 열) 내가 지금까지 무엇을 가지고, 나는 "돈 t은 하나를위한 모바일 web versionCSS 단일 열 미디어 쿼리
코드 전에 현재 내 웹 사이트의 생각
* {
\t box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: row;
margin: 0;
text-align:center;
}
.col-1 {
\t background: #D7E8D4;
\t flex: 1;
\t background-image: url('white.jpg');
\t text-align:center;
}
.col-2 {
\t padding: 4px;
\t display: flex;
\t flex-direction: column;
\t flex: 5;
\t text-align: center;
\t font-family: "Arial Black";
\t font-size: 20pt;
\t background-color: #FFFF82;
}
}
.col-3 {
\t border-style: solid;
\t display: flex;
\t flex-direction: column;
\t flex: 5;
\t text-align: center;
}
.content {
display: flex;
flex-direction: row;
}
.content > main {
flex: 3;
min-height: 60vh;
text-align:center;
border-style: solid;
}
.content > side {
background: gray;
flex: 1;
text-align:center;
border-style: solid;
}
header, footer {
background: #FFDB4A;
height: 30vh;
text-align:center
}
aside, article {
border-style:solid
}
header {
\t padding: 1em;
\t background-image: url('acnl.jpg');
}
.Footer {
\t font-family: "Arial";
\t font-size: 14pt;
\t position: absolute;
\t right: 0;
\t bottom: -100px;
\t left: 0;
\t padding: 1rem;
\t background-color: #efefef;
\t text-align: center;
\t height: 100px;
}
p {
white-space: normal;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li a {
\t display: block;
\t color: #731F02;
\t padding: 8px 16px;
\t text-decoration: none;
\t background-color: #53FF53;
\t font-size: 25px;
\t font-family: "Arial Black";
}
li a:hover {
background-color: #FF99CC;
color: #002200;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
@media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 1)
{
\t \t
\t header {
\t \t display:none;
\t \t }
\t
\t .col-2{
\t \t text-align:left;
\t \t }
\t .col-3 {
\t \t width: 100%;
\t }
\t footer {
\t \t display:none;
\t \t \t }
\t body {
\t \t float:left;
\t \t
\t \t
\t }
\t .col-1 {
\t \t text-align:left;
\t \t display:list-item
\t }사진 올바른 생각 의 사이트의 페이지
<!doctype html>
<title>Program 7</title>
<link href="cartyCSS.css" rel="stylesheet" type="text/css">
<body>
<nav class="col-1"><ul>
\t <li><a href="index.html">Home</a></li>
\t <li><a href="about.html">About</a></li>
\t <li><a href="QRcodes.html">QR codes</a></li>
\t </ul><br>
\t <img alt="gift" height="238" longdesc="floating present" src="Present.gif" width="250"></nav>
<div class="col-2">
\t <header class="col-3">
\t \t <img alt="acnl" height="160" longdesc="acnl logo" src="Animal_Crossing_Logo.png" width="240">
\t \t <img alt="leaf" height="160" longdesc="acnl leaf" src="leaf.png" width="160"></header>
<main class="content">
<article class="col-2">This is one of the many villagers you can get<br>
\t \t <img alt="Fauna" height="265" longdesc="villiager" src="Fauna.png" width="200"></article>
<aside class="col-3"><p>Animal Crossing is a community simulation video game
\t \t series developed and published by Nintendo, in which the human player
\t \t lives in a villiage inhabited by anthropomorphic animals, carrying out
\t \t various activities including fishing, bug catching, fossil hunting, etc.
\t \t The series is notable for its open ended gameplay and extensive use of
\t \t the game systems internal clock and calender to simulate real passage of
\t \t time.</p> <br>First Release: Animal Crossing; April 14, 2001 <br></aside>
</main>
\t <footer class="Footer">Victoria Carty<br>
\t
\t \t <a href="mailto:[email protected]">
\t \t [email protected]</a><br>
\t \t Beginning Web Programming | ITSE-1311-NT1-17/FA
\t \t </footer>
</div>
</body>바닥 글과 풍선 gif도 숨기고 싶습니다. 내비게이션 버튼 아래 이 게시물에 추가 할 유용한 정보가 무엇인지 잘 모르십니까?
당신은 당신의 웹 사이트에 대한 링크를 제공 할 수 있습니다 첨부 된 그림의 도움으로 CSS가 완성되지 않았습니다. –
위의 전체 CSS 시트 추가, 서버에없는 파일 일뿐입니다. –