1
Я создаю веб-страницу на ПК с разрешением 1366 * 768. Я использовал процент и px для регулировки расстояния и т. Д. Но после соревнований, когда я запустил его в 1920 * 1080, тогда все просто перепуталось. Итак, как управлять CSS, чтобы он работал без искажений на любом ПК с любым разрешением.HTML Управление различными разрешениями
<html>
<head>
<title>About US..</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/about.js"></script>
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/about.css">
</head>
<body>
<div class="main">
<div class="header">
<div class="header1">
</div>
<div class="left">
</div>
<a href="index.html"><div class="left1">
</div></a>
<div class="left2">
In a Nut Shell..
</div>
<a href="about.html" id="left1a"><div class="left3">
About Us
</div></a>
<a href="contact.html" id="left1b"><div class="left4">
Contact Us
</div></a>
</div>
<div class="content">
Meet developers Of "In a Nut Shell.."<br>
<div class="geetika">
<div id="top">
<div id="circle">
</div>
</div>
<div id="bottom"><br>
<font color="black">Geetika</font><br>
<p>I am currently Pursuing My Btech From KIIT University. Have a lot Of interest in Website Designing and other Stuff<p>
<br><br><br>
<a href="#" id="geetika1">Click to know more</a>
</div>
</div>
<div class="nikhil">
<div id="top">
<div id="circle">
</div>
</div>
<div id="bottom"><br>
<font color="black">Nikhil Srivastava</font><br>
<p>I am currently Pursuing My Btech From KIIT University. Have a lot Of interest in Website Designing and other Stuff<p>
<br><br><br>
<a href="#" id="nik1" >Wanna Know More ;)</a>
</div>
</div>
<div class="sumegha">
<div id="top">
<div id="circle">
</div>
</div>
<div id="bottom"><br>
<font color="black">Sumegha Mukherjee</font><br>
<p>I am currently Pursuing My Btech From KIIT University. Have a lot Of interest in Website Designing and other Stuff<p>
<br><br><br>
<a href="#" id="sumegha1">Click to know more</a>
</div>
</div>
<div class="nikdetail">
Nikhil Srivastava
<div id="banner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis iaculis lectus vitae finibus. Sed ac turpis at eros semper interdum et et sem. Pellentesque convallis dictum ligula, et luctus dolor tristique vel. Fusce non augue in risus venenatis fermentum quis eu purus. Ut dictum tincidunt est, eu commodo orci hendrerit ultrices. Phasellus fermentum metus a purus finibus, et sagittis lacus placerat. Integer rutrum, sapien et efficitur fringilla, metus elit scelerisque turpis, et iaculis massa lacus ut odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula pretium ligula vitae mollis. Vestibulum sed sem ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris rutrum turpis eget pulvinar vulputate. Vestibulum consectetur vulputate egestas. Sed dictum, augue in volutpat aliquam, ante nisi eleifend massa, non tempus dui leo eu odio.
</p>
<br><br><br>
<a href="#" id="nik2">Go Back</a>
</div>
</div>
<div class="geetdetail">
Geetika
<div id="banner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis iaculis lectus vitae finibus. Sed ac turpis at eros semper interdum et et sem. Pellentesque convallis dictum ligula, et luctus dolor tristique vel. Fusce non augue in risus venenatis fermentum quis eu purus. Ut dictum tincidunt est, eu commodo orci hendrerit ultrices. Phasellus fermentum metus a purus finibus, et sagittis lacus placerat. Integer rutrum, sapien et efficitur fringilla, metus elit scelerisque turpis, et iaculis massa lacus ut odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula pretium ligula vitae mollis. Vestibulum sed sem ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris rutrum turpis eget pulvinar vulputate. Vestibulum consectetur vulputate egestas. Sed dictum, augue in volutpat aliquam, ante nisi eleifend massa, non tempus dui leo eu odio.
</p>
<br><br><br>
<a href="#" id="geetika2">Go Back</a>
</div>
</div>
<div class="sumeghadetail">
Sumegha Mukherjee
<div id="banner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis iaculis lectus vitae finibus. Sed ac turpis at eros semper interdum et et sem. Pellentesque convallis dictum ligula, et luctus dolor tristique vel. Fusce non augue in risus venenatis fermentum quis eu purus. Ut dictum tincidunt est, eu commodo orci hendrerit ultrices. Phasellus fermentum metus a purus finibus, et sagittis lacus placerat. Integer rutrum, sapien et efficitur fringilla, metus elit scelerisque turpis, et iaculis massa lacus ut odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula pretium ligula vitae mollis. Vestibulum sed sem ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris rutrum turpis eget pulvinar vulputate. Vestibulum consectetur vulputate egestas. Sed dictum, augue in volutpat aliquam, ante nisi eleifend massa, non tempus dui leo eu odio.
</p>
<br><br><br>
<a href="#" id="sumegha2">Go Back</a>
</div>
</div>
</div>
</div>
</body>
</html>
и CSS:
body{
background: #BDBDBD;
}
.main{
width: 100%;
height: 100%;
}
.header {
width:100%;
height:5%;
z-index: 10;
float: left;
}
.header1 {
z-index: 10;
position: fixed;
width: 100%;
background-image: url("../img/w3.jpg");
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
float: left;
height: inherit;
margin-top: -8px;
margin-left:-8px;
}
.left{
float:left;
z-index: 9999;
font-size: 30px;
font-family: cursive;
color: white;
height: 40px;
width: 30%;
}
.left1{
position: fixed;
float:left;
z-index: 9999;
font-size: 30px;
font-family: cursive;
color: white;
height: 40px;
background-image: url("../img/favicon.ico");
background-repeat: no-repeat;
background-size: 45px 34px;
width: 40px;
margin-left: 10%;
margin-top: -5px;
}
.left2{
position: fixed;
float:left;
z-index: 11;
z-index: 9999;
font-size: 35px;
font-family: buxton sketch;
color: white;
margin-left: 15%;
margin-top: -5px;
}
.left3{
position: fixed;
float:left;
z-index: 9999;
font-size: 20px;
font-family: cursive;
color: white;
float: left;
margin-left: 70%;
width: 100px;
padding-left: 5px;
}
.left4{
position: fixed;
float:left;
z-index: 11;
font-size: 20px;
font-family: cursive;
color: white;
margin-left: 80%;
width: 110px;
padding-left: 5px;
}
.content{
background: -webkit-linear-gradient(#BDBDBD, #FBEFFB);
background: -o-linear-gradient(#99390D, #D25318);
background: -moz-linear-gradient(#99390D, #D25318);
background: linear-gradient(#BDBDBD, #FBEFFB);
width: auto;
height: inherit;
margin-right: -8px;
margin-left: -8px;
padding-bottom: 8px;
font-size: 35px;
text-align: center;
font-family: buxton sketch;
color: black;
}
.nikhil{
float: left;
width:250px;
height: 500px;
margin-top: 25px;
margin-left: 50px;
background-color:rgba(0,0,0,0.1);
box-shadow:5px 5px 5px 1px black;
}
.geetika{
width:250px;
float: left;
height: 500px;
margin-top: 25px;
margin-left: 18%;
background-color:rgba(0,0,0,0.1);
box-shadow:5px 5px 5px 1px black;
}
.sumegha{
width:250px;
height: 500px;
float: left;
margin-top: 25px;
margin-left: 50px;
background-color:rgba(0,0,0,0.1);
box-shadow:5px 5px 5px 1px black;
}
.nikhil #top{
width: 100%;
height: 100px;
background-color:#0000FF;
}
.nikhil #bottom{
width: 100%;
height: 400px;
font-size: 20px;
text-align: center;
font-family: cursive;
color: #4B4B4E;
}
.nikhil #bottom a{
color: black;
text-decoration: none;
}
.nikhil #top #circle{
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
margin-left: 75px;
background-image: url("../img/nik1.JPG");
background-size: 100px 100px;
background-repeat: no-repeat;
}
.sumegha #bottom a{
color: black;
text-decoration: none;
}
.sumegha #top{
width: 100%;
height: 100px;
background-color:#0000FF;
}
.sumegha #bottom{
width: 100%;
height: 400px;
font-size: 20px;
text-align: center;
font-family: cursive;
color: #4B4B4E;
}
.sumegha #top #circle{
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
margin-left: 75px;
background-image: url("../img/sumegha.jpg");
background-size: 100px 100px;
background-repeat: no-repeat;
}
.geetika #top{
width: 100%;
height: 100px;
background-color:#0000FF;
}
.geetika #bottom{
width: 100%;
height: 400px;
font-size: 20px;
text-align: center;
font-family: cursive;
color: #4B4B4E;
}
.geetika #top #circle{
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
margin-left: 75px;
background-image: url("../img/geetika.jpg");
background-size: 100px 100px;
background-repeat: repeat;
}
.geetika #bottom a{
color: black;
text-decoration: none;
}
.nikdetail{
border: 1px solid black;
margin-left: 5%;
width: 90%;
height: 500px;
background-color: black;
font-family: ALGERIAN;
color: white;
display:none;
}
.nikdetail #banner{
font-family:Lucida Handwriting;
font-size: 18px;
}
.nikdetail #banner a{
font-family:Lucida Handwriting;
text-decoration: none;
color: white;
}
.geetdetail{
border: 1px solid black;
margin-left: 5%;
width: 90%;
height: 500px;
background-color: black;
font-family: ALGERIAN;
color: white;
display:none;
}
.geetdetail #banner{
font-family:Lucida Handwriting;
font-size: 18px;
}
.geetdetail #banner a{
font-family:Lucida Handwriting;
text-decoration: none;
color: white;
}
.sumeghadetail{
border: 1px solid black;
margin-left: 5%;
width: 90%;
height: 500px;
background-color: black;
font-family: ALGERIAN;
color: white;
display:none;
}
.sumeghadetail #banner{
font-family:Lucida Handwriting;
font-size: 18px;
}
.sumeghadetail #banner a{
font-family:Lucida Handwriting;
text-decoration: none;
color: white;
}
Пожалуйста, укажите ваш код. – jono
Пожалуйста, Chech обновленная проблема. –