我有一个学校项目要建立一个网站 我已经充分利用了它，但是我不知道如何使所有内容都响应，我们的老师说我们不能使用引导程序，而且我们只有一堂课，很不幸我没有上课
我有主站点和8个子页面，它们都具有相同的结构，因此，如果我知道如何设置样式1，其余的工作就很容易了。波兰语中有一些文字，因此请不要担心它们仅仅是来自Wiki的信息。
那是我的主要网站：
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Poznaj Dinozaury </title>
<meta name="description" content="Serwis poświęcony dinozaurom Naucz się wszystkiego, co chcesz wiedzieć o tych potężnych jaszczurach!" />
<meta name="keywords" content="dinozaury, dino" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Black+Ops+One|Caveat+Brush|Montserrat" rel="stylesheet">
<link href="css/fontello.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="logo">
Poznaj Dinozaury
</div>
<div id="menu">
<div class="option"> <a href="index.html" title="Strona Główna">Strona Główna</a><br></div>
<div class="option"> <a href="1.html" title="Etymologia">Etymologia</a><br></div>
<div class="option"> <a href="2.html" title="Definicja filmogenetyczna">Definicja filmogenetyczna</a><br></div>
<div class="option"> <a href="3.html" title="Biologia">Biologia</a><br></div>
<div class="option"> <a href="4.html" title="Wymarcie">Powstanie ptaków</a><br></div>
<div class="option"> <a href="5.html" title="Bibliografia">Wymarcie</a><br></div>
<div class="option"> <a href="6.html" title="Powstanie ptaków">Historia badań</a><br></div>
<div class="option"> <a href="7.html" title="Historia badań">Kontakt</a><br></div><br>
<div style="clear:both;"></div>
</div>
<div id="topbar">
<div id="topbarL">
M
</div>
<div id="topbarR">
<span class="bigtitle2">O projekcie słów kilka</span>
<div style="height: 15px;"></div>
Projekt zrobiony od zera przez Marcina Galosa z 3b-1 jako projekt z Witryn i aplikacji internetwych do końca kwietnia 2019r.
<br><br>
Wszelkie informacje pochodzą z <a href="https://pl.wikipedia.org/wiki/Dinozaury" title="Wikipediia">Wikipedii</a>.
</div>
<div id="dino">
</div>
<div style="clear:both;"></div>
</div>
<div id="sidebar">
<div class="Galeria"> <a href="8.html" title="Strona Główna">Galeria</a><br></div>
<br><br>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<i class="icon-facebook"></i>
</div>
<div class="yt">
<i class="icon-youtube"></i>
</div>
<div class="tw">
<i class="icon-twitter"></i>
</div>
<div class="gplus">
<i class="icon-gplus"></i>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
<div id="content">
<span class="bigtitle">Dinozaury</span>
<div class="dottedline"></div>
<p> (Dinosauria) – zróżnicowany klad zauropsydów. Pojawiły się w triasie, około 237 milionów lat temu. Stanowiły dominującą grupę kręgowców lądowych od początku jury (około 201 milionów lat temu) przez 135 milionów lat, do końca kredy (66 milionów lat temu), kiedy wymieranie kredowe (wyznaczające granicę kreda-trzeciorzęd i koniec mezozoiku) doprowadziło do zniknięcia większości linii. Zapis kopalny wskazuje, że w jurze ptaki wyewoluowały z dinozaurów zaliczanych do teropodów, wobec czego przez literaturę przedmiotu wydaną w XXI wieku uznawane są za grupę dinozaurów. Przeżywając katastrofę sprzed 66 milionów lat, dzięki swym potomkom stały się kontynuatorami linii dinozaurów po czasy współczesne.
<br><br>
Do ostatnich dziesięcioleci XX wieku wszystkie grupy dinozaurów uznawano za wymarłe. Jednakże zapis kopalny wskazuje, że ptaki, nazywane dziś w języku angielskim avian dinosaurs („ptasie dinozaury”), są współczesnymi potomkami opierzonych dinozaurów. Wyewoluowały one ze swych teropodzich przodków w okresie jury. Wobec tego ptaki stanowią jedyną linię dinozaurów, która przetrwała zagładę.
<br><br>
Wobec powyższego do dinozaurów zalicza się również ptaki. Z kolei dinozaury nie będące ptakami określa się mianem non-avian dinosaurs, tłumaczonym na język polski jako „nieptasie dinozaury”, pojawia się też określenie „nieptasie teropody”.
<br><br>
Dinozaury to z taksonomicznego, morfologicznego i ekologicznego punktu widzenia zróżnicowana grupa zwierząt. Do ptaków zaliczanych jest obecnie ponad 10 000 gatunków, co czyni je najbardziej zróżnicowaną grupą kręgowców z wyjątkiem okoniokształtnych. Dzięki dowodom kopalnym do 2006 paleontolodzy wyróżnili ponad 500 rodzajów i ponad tysiąc gatunków nieptasich dinozaurów, podczas gdy w 2014 liczba opisanych rodzajów wynosiła 943. Dinozaury zamieszkiwały wszystkie kontynenty – na wszystkich bowiem znajdowane są ich szczątki kopalne, jak i występują współczesne gatunki. Zaliczają się do nich zarówno roślinożercy, jak i mięsożercy. Pierwotnie cechowała je dwunożność, ale wiele wymarłych grup obejmowało formy czworonożne, a także poruszające się zarówno na dwóch, jak i na czterech łapach. Liczne grupy wykształciły wyszukane struktury, jak rogi czy kryzy. Niektóre taksony wymarłe wykształcały także takie modyfikacje szkieletu, jak kolce czy pancerz. Potwierdzono składanie jaj i budowę gniazd u wszystkich grup. O ile dzisiejsze ptaki osiągają zazwyczaj niewielkie rozmiary, co wiąże się z umiejętnością lotu, formy prehistoryczne osiągały często duże rozmiary. Największe zauropody mogły osiągać nawet 58 m długości przy wysokości 9,25 m. Wizja nieptasich dinozaurów jako jednorodnie gigantycznych jest jednak nieprawdziwa, wynika z większej tendencji do zachowywania się dużych kości. Wiele nieptasich dinozaurów było niewielkich rozmiarów, jak mierzący około 50 cm długości Xixianykus.
<br><br>
Nazwa dinozaury oznacza „straszne jaszczurki”, dlatego też może wprowadzać w błąd – dinozaury nie były jaszczurkami, ani nie były z nimi blisko spokrewnione. Reprezentują natomiast oddzielną grupę „gadów”, oprócz ptaków ich najbliższymi współczesnymi krewniakami są krokodyle. Jak wiele wymarłych form, nie wykazują one cech tradycyjnie uznawanych za „gadzie”, jak zmiennocieplność czy poruszanie się na kończynach odwiedzionych na boki. Co więcej, wiele grup prehistorycznych zwierząt, takich jak mozazaury, ichtiozaury, pterozaury, plezjozaury, a nawet Dimetrodon, popularnie uznawanych za dinozaury, w rzeczywistości nimi nie są. Przez pierwszą połowę XX wieku, zanim uznano ptaki za dinozaury, większość społeczności naukowej uznawała dinozaury za powolne i zmiennocieplne. Zmiana nastąpiła w latach 60. (odrodzenie dinozaurów). Stwierdzono, że wszystkie dinozaury, w tym mezozoiczne, prowadziły aktywny tryb życia i cechowały się szybkim metabolizmem, tak jak dzisiejsi ich przedstawiciele; wykazywały też liczne adaptacje umożliwiające interakcje społeczne.
<br><br>
Odkąd naukowcy zaczęli badać i opisywać pierwsze skamieliny nieptasich dinozaurów w pierwszej połowie XIX wieku, zmontowane szkielety nieptasich dinozaurów stały się głównymi atrakcjami muzeów wielu krajów, a dinozaury stały się częścią kultury. Wielkie rozmiary niektórych grup, jak również niekiedy przerażająca i fantastyczna natura, zapewniły tym stworzeniom regularną obecność w bestsellerach książkowych i filmowych, jak Zaginiony świat Arthura Conan Doyle'a czy Park Jurajski Michaela Crichtona. Trwały entuzjazm opinii publicznej dla tych zwierząt doprowadził do znacznego wsparcia finansowego dla poświęconej im dziedziny nauki. Media regularnie donoszą o nowych odkryciach.</p>
<br /><br />
</div>
<div id="footer">
Poznaj Dinozaury© Wszelkie prawa zastrzeżone
</div>
</div>
<script src="jquery-1.11.3.min.js"> </script>
</body>
</html>
这就是我的想法：
body
{
font-family: 'Black Ops One', cursive;
background-image: url(img/gray.png);
/* Background pattern from Toptal Subtle Patterns */
}
#container
{
width: 1300px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#logo
{
color: #f4d941;
margin-top: 20px;
font-size: 44px;
letter-spacing: 3px;
font-weight: 900;
width: 100%;
}
#menu
{
font-size:15px;
background-color: #303030;
margin-top: 20px;
color: #f4d941;
padding: 10px;
width: 100%;
}
#topbar
{
background-color: #f4d941;
color: white;
padding: 10px;
margin-top: 20px;
margin-bottom: 25px;
height: 170px;
width: 100%;
}
#topbarL
{
font-size: 110px;
float:left;
padding: 20px;
width: 138px;
text-align: center;
border-right: 2px dotted #303030;
}
#topbarR
{
color: #56564e;
float: left;
padding: 20px;
width: 760px;
font-size: 16px;
text-align: justify;
}
#sidebar
{
float: left;
width: 148px;
min-height: 680px;
padding:20px;
background-color: #303030;
text-align: center;
font-size: 18px;
position: fixed;
}
#content
{
background-image: url(img/d.png),url(img/gravel.png);
background-position: center;
background-repeat: no-repeat,repeat;
position: relative;
left: 16%;
float: left;
padding: 40px;
width: 1030px;
background-color: #dedede;
min-height: 1108px;
text-align: justify;
border-left: 2px dotted #f4d941;
}
#footer
{
clear: both;
color: #f4d941;
text-align: center;
padding: 20px;
font-size: 18px;
}
.Galeria
{
display: inline-block;
min-width: 50px;
height: 25px;
font-size: 25px;
padding: 10px;
border-right: 2px
opacity: 0.8;
}
.Galeria:hover
{
background-color: #f4d941;
cursor: pointer;
}
.option
{
float: left;
min-width: 50px;
height: 25px;
font-size: 18px;
padding: 10px;
border-right: 2px
opacity: 0.8;
}
.option:hover
{
background-color: #f4d941;
cursor: pointer;
}
.optionL
{
font-size:18px;
height:25px;
padding: 10px;
border-bottom: 2px dotted #444444;
}
.optionL:hover
{
background-color: #f4d941;
color: white;
cursor: pointer;
}
.bigtitle
{
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
color: #f4d941;
text-shadow: 2px 2px gray;
}
.bigtitle2
{
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
color: #56564e;
}
.dottedline
{
height: 5px;
margin-top: 15px;
margin-bottom: 20px;
border-bottom: 2px dotted #444444;
}
/*Unvisited link*/
a:link
{
color: aliceblue;
text-decoration: none;
border-left: 2px solid #f4d941;
}
/*Visisted link*/
a:visited
{
color: aliceblue;
border-left: 2px solid #f4d941;
}
/*Hovered link*/
a:hover
{
color: #56564e;
border-left: 2px solid#444444;
}
.socials
{
width:100%;
height: 155px;
text-align: center;
background-color: #303030;
}
.socialdivs
{
width: 150px;
height: 155px;
margin-left: auto;
margin-right: auto;
background-color: #303030;
}
.fb
{
width: 150px;
height: 155px;
border-top: 2px solid #f4d941;
}
.fb:hover
{
background-color: #4668b3;
}
.yt
{
width: 150px;
height: 155px;
border-top: 2px solid #f4d941;
}
.yt:hover
{
background-color: #d94348;
}
.tw
{
width: 150px;
height: 155px;
border-top: 2px solid #f4d941;
}
.tw:hover
{
background-color: #3095d3;
}
.gplus
{
width: 150px;
height: 155px;
border-top: 2px solid #f4d941;
}
.gplus:hover
{
background-color: #d95333;
}
/*Pictures*/
#b
{
width: 250px;
float: left;
padding: 10px;
}
#b1
{
width: 250px;
float: right;
padding: 10px;
}
#b2
{
width: 350px;
float: right;
padding: 10px;
}
#b3
{
width: 300px;
display: inline-block;
padding: 20px;
}
#b4
{
width: 300px;
display: inline-block;
padding: 20px;
}
#b5
{
width: 300px;
display: inline-block;
padding: 20px;
}
.gal
{
float: left;
width: 340px;
padding: 1px;
letter-spacing: 2px;
font-size: 18px;
text-align: center;
text-shadow: #56564e;
border-bottom: 2px dotted #444444;
}
.g
{
width: 300px;
height: 200px;
transition: all 0.5s ease-in-out
}
.g:hover
{
-webkit-transform: scale(1.35)rotate(5deg);
-ms-transform: scale(1.35)rotate(5deg);
transform: scale(1.35)rotate(5deg);
}
p
{
text-shadow: 2px 2px white;
}
如何使其具有响应性？
答案 0 :(得分：0)
在CSS中，给定了边距，填充，高度，宽度作为px值。屏幕尺寸更改时，它们不会更改。
如果您以百分比形式提供这些值，则会根据屏幕尺寸进行更改。
这是不使用引导程序即可使您的网站具有响应能力的唯一方法。
示例： 假设您的屏幕宽度为2000px，现在您的组件为200px。 您可以计算百分比并更改CSS。
将width: 200px;更改为width: 10%;