0
저는 웹 사이트를 코딩 해 왔지만 오늘은 문제가있는 페이지를 발견했습니다. 이전의 디자인에서는 다양한 크기로 작동했지만이 크기로는 작동하지 않았습니다. 누구든지 더 큰 화면을 위해 더 적절한 디자인을 얻는 방법을 알고 있습니까?더 큰 화면에 맞게 웹 사이트를 최적화하는 방법은 무엇입니까?
/* Linked with index.html */
/* All elements having a color:red in the same element as a rgba color, the color:red is only used for fallbacks for older/browsers not supporting rgba. */
@import url(http://fonts.googleapis.com/css?family=Titillium+Web);
html,
body {
background-color: #262626;
font-family: 'Titillium Web', sans-serif;
background-repeat: repeat-x;
width: auto;
min-width: 1000px;
}
.backtocv {
margin-left: 30px;
}
h1 {
margin-left: 15px;
margin-right: 15px;
}
h2 {
margin-left: 15px;
margin-right: 15px;
}
h3 {
margin-left: 15px;
margin-right: 15px;
}
p {
margin-left: 15px;
margin-right: 15px;
max-width: 750px;
width: auto;
height: auto;
}
.overlay {
background-color: rgb(0, 0, 0);
/* Fall-back for browsers not supporting RGBA */
background-color: rgba(0, 0, 0, 0.7);
border: 6px solid rgba(30, 30, 30, 0.8);
border: 6px solid rgb(30, 30, 30);
/* Fall-back for browsers not supporting RGBA */
-webkit-background-clip: padding-box;
background-clip: padding-box;
min-width: 515px;
width: auto;
}
.toptitle {
color: black;
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
.toptitlename {
color: white;
}
.toptitlenameparent {
background-color: red;
background: -webkit-linear-gradient(#8F0000, #720000);
margin-top: -10px;
padding-left: 15px;
}
.toptitleparent {
background-color: white;
margin-top: -10px;
padding-left: 15px;
}
.swedishflag {
margin-left: 5px;
}
.ukflag {
width: auto;
height: auto;
max-width: 30px;
max-height: 30px;
margin-left: 10px;
}
.placeholder {
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
.copyright {
font-size: 11px;
text-align: bottom;
color: white;
}
.normalhr {
margin-left: 0%;
width: 70%;
size: 1%;
}
.facebook {
width: auto;
height: auto;
max-width: 30px;
max-height: 30px;
margin-left: 30px;
}
.twitter {
width: auto;
height: auto;
max-width: 30px;
max-height: 30px;
margin-left: 7px;
}
.newslist {
text-decoration: none;
margin-left: 1017px;
list-style-type: none;
color: white;
width: auto;
max-width: 950px;
}
.externallist {
color: white;
text-decoration: none;
list-style-type: none;
width: auto;
max-width: 950px;
margin-left: 550px;
}
.leftpic {
display: block;
max-width: 300px;
max-height: 300px;
height: auto;
width: auto;
margin-left: 50px;
margin-top: -100px;
border: 1px solid white;
}
.newsheader {
color: red;
right: -1130px;
position: relative;
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
a:link {
text-decoration: none;
color: white;
}
a:visited {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: none;
color: white;
}
a:active {
text-decoration: none;
color: white;
}
.externalheader {
color: red;
margin-top: -110px;
margin-left: 590px;
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
.afterinfobar {
margin-top: -1px;
}
.abouttitle {
color: red;
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
.aboutinfo {
color: white;
width: auto;
max-width: 750px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="indexstyle.css" rel="stylesheet" type="text/css">
<title>Johannes Sundqvist | Index</title>
</head>
<body>
<!-- Start of language switch and social bar -->
<a href="index.html">
<img class="ukflag" src="http://icons.iconarchive.com/icons/custom-icon-design/flag-3/256/United-Kingdom-flag-icon.png" alt="English (UK)">
</a>
<a href="indexsv.html">
<img class="swedishflag" src="http://www.eurovision.tv/img/upload/flags/medium/Sweden.png" alt="Swedish">
</a>
<a href="https://www.facebook.com/johannes.sundqvist.9">
<img class="facebook" src="http://international.olemiss.edu/wp-content/uploads/sites/23/2014/01/facebook-logo-transparent.png" alt="Facebook">
</a>
<a href="http://twitter.com/TheXariez">
<img class="twitter" src="https://g.twimg.com/Twitter_logo_blue.png" alt="Twitter">
</a>
<!-- End of language switch and social bar -->
<!-- Start of top header and body -->
<div class="toptitlenameparent">
<h2 class="toptitlename"> Johannes Sundqvist </h2>
</div>
<!-- Start of overlay -->
<div class="overlay">
<div id="rightnews">
<h1 class="newsheader"> News </h3>
<div class="frontpagelists">
<ul>
<li class="newslist"> Internet CV Created - View <a href="cv.html"><span style="color:#8F0000">here</span></a> (clickable) </li>
</ul>
<h1 class="externalheader"> External Links </h1>
<ul>
<li class="externallist"><a href="cv.html">Internet CV (Curriculum Vitae) (clickable)</a>
</li>
<li class="externallist"><a href="http://jsundqvist.optipoint.fi/blog/">IT Blog (Swedish only, clickable)</a>
</li>
</ul>
</div>
</div>
<img class="leftpic" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10406823_10201587226402089_720379364643065326_n.jpg?oh=6110f5e2e100a383cb32745fc5aa492c&oe=55599AE6&__gda__=1432453081_e9db450a88b424d8d5d5287e19868609">
<hr class="afterinfobar">
<h3 class="abouttitle"> About this site </h3>
<p class="aboutinfo">This site was created using HTML and CSS, it is a site mainly created for a school task we got, but a very large part of it was also created just to pure enjoyment from me as the author. For you asking, Yes, That is me on the picture. But no, I will
not be giving you my phone number for any weird reason.</p>
<br>
<hr>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- Copyright -->
<p class="copyright">Copyright © Johannes Sundqvist | 2015</p>
<!-- End of overlay and body -->
</div>
</body>
</html>