我是网站开发的新手。我试图响应这个代码..但它无法正常工作。 我只是想让这个页面响应。 我正在尝试这个网页，以响应移动，平板电脑，笔记本电脑的视图 这是我的HTML代码
body{background-color:black}
.main{ margin:0 auto; padding:0px;background-color:white;font-family:Arial,Helentica;font-size:12px; color:#000;width:935px;background-color:white}
.header{width:814px;height:123px;padding:65px 0px 0px 120px;font-size:12px; color:black;font-family:Arial;background-color:white}
.logo1{float:left;padding-right:50px;}
.logo2{float:right;padding-right:50px}
.text1{float:left;text-align:center;font-size:20px;color:brown}
.navbar{float:left;padding:0px;margin:0px;background-color:gray;height:30px;position:absolute;width:934px}
.navbar ul{ display:inline; list-style:none;}
.navbar li{float:left;text-align:center;font:normal bold 12px/2.5em Arial,verdana;text-decoration:none;}
.navbar ul li a{ padding:0 20px 0 20px; border-left:1px solid black;text-decoration:none;color:white;display:block-line;height:50px;}
.navbar li:hover, a:hover {background-color:black;}
.navbar li ul {display: none; height: auto;margin: 0;padding:0}
.navbar li ul {position:absolute;width:100%;left:0}
.navbar li:hover ul {display: block}
.navbar li ul li {background-color:gray;border:1px solid black}
.navbar li ul li a:hover{background-color:black;}
#mid-wraper{width:934px; margin:0 auto; padding:0px;}
#mid-wraper-inner{width:934px; float:left; background-color:white}
#left-wraper{width:296px; float:left; bacground-color:white}
#left-wraper-top{width:296px; background:white; padding:14px 0px 12px 0px; float:left;}
#video{width:270px; float:left; padding:1px 0px 10px 15px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:12px;background-color:white}
.link{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#fff; text-decoration:none; text-align:right;}
.link:hover{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#fff; text-decoration:none; text-align:right;}
.link2{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#bc4105; text-decoration:none; text-align:right;}
.link2:hover{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#bc4105; text-decoration:none; text-align:right;}
#right-wraper{width:596px; float:left; padding:15px 0px 0px 25px;}
.right-part{width:596px; float:left;}
#foter{width:934px; margin:0 auto; padding:0px; color:#999999; }
#foter-inner{width:934px; float:left; padding:10px 0px;}
.footer-link{color:#999999; text-decoration:none; padding:0px 5px;}
.footer-link:hover{color:#999999; text-decoration:none; padding:0px 5px;}
This is my html
i have bootstrap and i tried a lot but its getting messy
please help<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
@media only screen and (max-width: 1024px) {
body {
background-color:black;
}
}
@media only screen and (max-width: 768px) {
body {
background-color:black;
}
}
</style>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo1"><img src="images/logo1.jpg" alt="" height="100" width="100"></div>
<div class="text1"><strong>AGNIHOTRI COLLEGE OF ENGINEERING,<br>WARDHA</strong>
<br><div style="float:left;text-align:center;font-size:12px;color:brown;padding-left:50px">(Near Bypass Highway,Nagthana Road Sindi(Meghe))<br>Email:ace@agnihotri.org
<br>Phone:07152-250152
</div> </div>
<div class="logo2"><img src="images/12.png" alt="" height="100" width="100"></div>
</div>
<div class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="governance.html">Governance</a></li>
<li><a href="campus.html">Campus</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Basic Science</a></li>
<li><a href="#">Machanical Engineering</a></li>
<li><a href="#">Civil Engineering</a></li>
<li><a href="comp.html">Computer science & Engineering</a></li>
<li><a href="#">Electronics & Communication Engineering</a></li>
<li><a href="#">M.Tech(computer science & Engg.)</a></li>
<li><a href="#">M.Tech(Electronics)</a></li>
</ul> </li>
<li><a href="addmission.html">Addmission</a></li>
<li><a href="facility.html">Facility</a></li>
<li><a href="download.html">Download</a></li>
<li><a href="place.html">Placement</a></li>
<li><a href="gallary.html">Gallary</a></li>
</ul>
</div>
<div class="middle">
<div class="mid-wrapper">
<img src="images/3.jpg" width="934px" height="250px"</div>
</div>
<div id="mid-wraper">
<div id="mid-wraper-inner">
<div id="left-wraper">
<div id="left-wraper-top">
<div
style="margin: 0px;width: 256px; float: left; display: block;background-color:white;padding-left:20px">
<h2 style="background-color:brown;text-align:center;color:white">News</h2>
<marquee direction="up"><b><p style="text-align:center">ALL THE BEST STUDENTS <br>FOR UNIVERSITY EXAM:</p><b><br>
<p style="color:blue;text-align:center">University Summer 2018<br> Exam Timetables<br> Are Available In<br> The Download Section: </marquee></p>
</div>
</div>
<div id="video">
<h2 style="background-color:brown;text-align:center;color:white">Video</h2>
<video controls autoplay width="300px" height="100px" >
<source src="images/college.mp4" type="video/mp4">
</video>
</div>
<div style="padding-left:30px">
<img src="images/img1.jpg" alt="" width="250px" height="150px" ></div>
</div>
<div id="right-wraper">
<div class="right-part">
<h2 style="background-color:brown;text-align:center;color:white">Welcome to Agnihotri College Of Engineering</h2>
<div style="padding: 10px 0px; width: 596px; float: left;background-color:white">
In this angnihotri collge of engineering is a very big collge..they have many facilities for student and teacher staff..so please check my wesite to many student..i am hope so very nice collge..
<br><br>
<div style="background-color:brown;color:white;width:150px;height:20px;text-align:center">Our Vision</div>
<br>
To develop globally competent, efficient learner and community oriented model of Engineering education.
<br><br>
<div style="background-color:brown;color:white;width:150px;height:20px;text-align:center">Our Misson</div>
<br>
To create value added, competent and research oriented trained Engineering professionals for sustainable development of the society.
<br>
<br>
<br>
<div class="right-part" style="padding: 10px 0px;">
<div style="width: 290px; float: left;">
<h2 style="background-color:brown;color:white;text-align:center">President's Message</h2>
<div style="padding-left:90px"><img src="images/presi.gif" alt="" width="100px" height="70px"></div>
<br>
<div
style="border-right: 1px solid rgb(153, 153, 153); width: 289px; float: left; padding-right: 10px; margin-top: 10px;">
I feel proud and happy to introduce to you ACE and welcome you to this prestigious institution, ACE is managing unprecedented growth through proliferation of a variety of knowledge institutes as part
<br>
<a href="governance.html" class="link2" style="float: right;">read more</a></div>
</div>
<div style="width: 270px; float: right; padding-right: 10px;">
<h2 style="background-color:brown;text-align:center;color:white">Scretory's Message</span></h2>
<div style="padding-left:90px"><img src="images/secre.gif" alt="" width="100px" height="70px"></div>
<br>
<div
style="width: 269px; float: left; padding-right: 10px; margin-top: 10px;">
Our vision is to develop a strong, enthusiastic manpower from Engineering Stream with an excellent academic standing of a global level. The globalization has created many challenges of Competition, training and placem
<br>
<a href="governance.html" class="link2" style="float: right;">read more</a></div>
</div>
<div style="width: 500px; float: left;">
<h2 style="background-color:brown;color:white;text-align:center">Principle's Message</h2>
<div
style="border-right: 1px solid rgb(153, 153, 153); width: 550px; float: left; padding-right: 10px; margin-top: 10px;">
Education is an essential human virtue, necessity for society and basis of good life. Addison says-"What sculpture is to a block of marble, education is to the soul".
<a href="governance.html" class="link2" style="float: right;">read more</a></div>
</div>
</div>
</div>
</div>
</div>
<div id="foter">
<div id="foter-inner">
<p
style="margin: 0px; padding: 0px; width: 550px; float: left; display: block;"><a
href="#" class="footer-link">Home</a> <a href="#" class="footer-link">About
us</a> <a href="#" class="footer-link">Recent articles</a> <a href="#"
class="footer-link">Email</a> <a href="#" class="footer-link">Resources</a>
<a href="#" class="footer-link">Links</a></p>
<p
style="margin: 0px; padding: 0px; width: 200px; float: right; text-align: right; display: block;">©
Designed by <a class="footer-link" target="_blank"
href="http://www.htmltemplates.net/">htmltemplates.net</a></p>
</div>
</div>
</div>
</body>
</html>
请有人帮忙让这个页面响应 提前致谢
答案 0 :(得分：0)
使用bootstrap网格布局，如容器，col-md，col-xs，col-sm，并在样式中给出宽度：％不使用px
答案 1 :(得分：0)
我认为，在这种情况下，最好使用断点向上工作。
例如，在移动设备上，您希望宽度为100％。无需媒体查询，并从基本行为开始。
div.item {
width: 100%; // div is 100% by default, so actually not needed
background-color: #000;
}
对于平板电脑及以上版本，您可能需要添加例外：宽度50％，浮动和灰色背景：
@media(min-width: 768px) {
// tablet
.item {
width: 50%;
float: left;
background: #ccc;
}
}
等等......
@media(min-width: 992px) {
.item {
// ....
}
}
@media(min-width: 1200px) {
// desktop
.item {
// ....
}
}
答案 2 :(得分：0)
将div标签 然后使用CSS使用.maintag {margin-left =“ 10px”; margin-right =“ 10px”}