我的网站错误的响应式视图
我的响应式网站遇到了问题。
我的.bottom部分在响应式视图中很奇怪＆＃34;跳跃＆＃34;来回。
这就是我的意思。图1和现在的图片2.值得一提的是，唯一更改的是窗口的宽度。
图片1
图2
在下面，您可以找到该页面的代码，包括HTML和CSS
＆＃13;
＆＃13;
＆＃13;
＆＃13;
@font-face {
font-family: 'MontserratFont';
src: local('☺'), src: url('../fonts/Montserrat-Regular.ttf') format('truetype'), src: url('fonts/Montserrat-Regular.otf') format('opentype'), src: url('/fonts/Montserrat-Regular.woff') format('woff'), src: url('/fonts/Montserrat-Regular.eot') format('embedded-opentype');
src: url('/fonts/Montserrat-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'RalewayFont';
src: local('☺'), src: url('../fonts/Raleway-Regular.ttf') format('truetype'), src: url('fonts/Raleway-Regular.otf') format('opentype'), src: url('/fonts/Raleway-Regular.eot') format('embedded-opentype'), src: url('fonts/Raleway-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: Helvetica, Arial;
padding: 0;
margin: 0;
}
div.top {
width: 100%;
}
div.menu_box {
display: none;
}
div.banner {
width: 100%;
background: #000000;
height: 200px;
}
img.logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
z-index: 100;
line-height: 80%;
height: 80%;
}
ul.topnav {
font-family: 'Montserrat';
font-weight: 150;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
position: fixed;
top: 0px;
z-index: 1;
width: 100%;
}
ul.topnav li {
float: left
}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
}
ul.topnav li a:hover {
background-color: gray;
}
ul.topnav li.icon {
display: none;
}
div.mid {
width: 70%;
margin: auto;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
img.image {
-webkit-box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.18);
-moz-box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.18);
box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.18);
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
float: left;
}
.header {
font-weight: 400;
font-family: 'MontserratFont' color:#2E16B1;
}
div.map {
float: right;
position: absolute;
top: 30%;
padding: 10px;
right: 0px;
}
hr {
border: 0;
height: 1px;
color: #000000;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
div.content_text {
margin: 0 5px 0 5px;
padding-right: 5px;
}
p.main_text {
font-family: 'MontserratFont';
color: #2E16B1;
text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
font-weight: 400;
font-size: larger;
font-variant: small-caps;
}
h4 {
font-family: 'MontserratFont';
font-weight: 600;
font-size: larger;
}
p.text {
position: relative;
font-family: 'RalewayFont';
text-align: justify;
float: left;
padding-bottom: 10px;
font-weight: 100;
text-indent: 50px;
}
.bottom {
position: absolute;
top: 2200px;
width: 95.3%;
background-color: black;
padding: 30px;
color: white;
text-align: center;
font-family: 'RalewayFont';
word-spacing: 40px;
font-weight: 100;
}
ul.bottom_list li {
display: inline-block;
bottom: 30px;
}
ul.bottom_list li a {
display: inline-block;
bottom: 30px;
border-right: solid;
border-color: gray;
}
a.bottom_list_item {
color: white;
text-decoration: none;
}
a.bottom_list_item:last-child {
border-right: none;
}
@media all and (max-width: 767px) {
div.all {
float: left;
width: 100%;
min-height: 350px;
background: #ffffff;
}
div.banner {
display: none;
}
ul.topnav {
position: relative
}
div.slider {
display: none;
}
audio {
display: none;
}
div.mid {
width: 100%;
padding-left: 0%;
padding-right: 0%;
}
.bottom {
position: absolute;
top: 2200px;
}
}<body>
<div id="all" class="all">
<!-- TOP-->
<!-- TOP-->
<!-- TOP-->
<!-- TOP-->
<div id="top" class="top">
<!--BANNER-->
<!--BANNER-->
<!--BANNER-->
<!--BANNER-->
<div id="banner" class="banner">
<img class="logo" id="logo" src="../images/logo.png">
<div id="menu_box" class="menu_box">
</div>
</div>
<!--NAV-->
<!--NAV-->
<!--NAV-->
<!--NAV-->
<nav>
<ul class="topnav" id="myTopnav">
<li>
<a class="menu" href="../index.html">AJ</a>
</li>
<li>
<a class="menu" href="ja.html">O mnie</a>
</li>
<li>
<a class="menu" href="#">Co robię?</a>
</li>
<li>
<a class="menu" href="kontakt.html">Kontakt</a>
</li>
</ul>
</nav>
</div>
<!--MIDDLE-->
<!--MIDDLE-->
<!--MIDDLE-->
<!--MIDDLE-->
<div id="mid" class="mid">
<p class="main_text" style="font-size: 30px;">
Czym się zajmuję?
</p>
<hr>
<h4> Tworzeniem i produkcją muzyki</h4>
<div class="soundcloud_feed" style="margin-left:150px;">
<iframe width="80%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/264003796&color=2e16b1&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
<p class="text" style="padding-bottom: 0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim, ante et imperdiet vehicula, leo ligula congue tortor, id tincidunt mi odio at neque. Quisque ut suscipit libero, at aliquet nibh. Suspendisse potenti. Aliquam facilisis, justo at
viverra blandit, lectus mauris lobortis diam, eget malesuada massa lorem egestas erat. Quisque tempus imperdiet posuere. Pellentesque sagittis vehicula orci ut cursus. Suspendisse elementum convallis mi, at tempor ex posuere ac. Cras a nibh porta,
finibus est vitae, pharetra dolor. Etiam sed leo tortor. Maecenas fermentum posuere lacus ut accumsan. Integer nisl odio, lacinia sit amet tellus et, euismod interdum urna. Etiam vehicula ante diam, quis rhoncus turpis convallis elementum. Curabitur
malesuada gravida lobortis. Praesent lorem velit, vulputate non est vel, faucibus dignissim quam. Maecenas leo purus, lacinia dictum nisl in, sodales interdum massa. Donec luctus dolor nec ante molestie, vitae imperdiet ipsum sagittis. Integer
tempus nulla et lorem accumsan mattis. Nullam lobortis eleifend venenatis. Sed vel velit neque. Nullam placerat magna ut mauris laoreet commodo. Suspendisse ac ante libero. Etiam eu faucibus magna. Phasellus eget sagittis tellus. Sed scelerisque
ultricies libero, at pharetra nulla hendrerit eu.
</p>
<hr>
<h4> Fotografowaniem i edycją zdjęć</h4>
<a style="margin-left:47.5%;display: inline-block; border: 0; text-decoration: none;" href="http://vsco.co/thenathurat?utm_source=user_grid&utm_medium=user_website&utm_campaign=link_to_grid"><img style="width: 48px; height: 48px; margin: 0px;" src="http://assets.vsco.co/assets/images/assets/Logo_black_48.png" alt="VSCO Logo" /></a>
<br>
<br>
<p class="text" style="padding-bottom: 5px;">
Nam venenatis ligula sit amet orci dictum, non vestibulum nisi bibendum. Nam scelerisque dolor neque, id faucibus leo mattis quis. Pellentesque pretium accumsan cursus. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Fusce non condimentum dui, eu laoreet tellus. Nam eget ultrices massa, ut rhoncus sapien. Aliquam eget est vel eros commodo imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet quam sit amet felis rutrum
euismod. Vestibulum venenatis tincidunt neque id auctor. Cras sed quam tristique quam ultrices mattis vitae eu libero. Maecenas vitae justo quis nisl rutrum laoreet rutrum vitae nulla. Nunc hendrerit sed dui vel varius. Cras aliquet volutpat tincidunt.
Integer venenatis eleifend risus, ut venenatis dolor accumsan ut. Nulla imperdiet tempus ultricies. Donec porta felis et malesuada eleifend. Nunc commodo ex et consequat tincidunt. Aenean eu lacus ut libero malesuada auctor vel eu mi. Praesent
fringilla libero vel lorem ornare mattis. Nulla id purus metus. Vivamus ornare sodales ante ac suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<br>
<p class="text" style="padding-top: 0px;">
Donec fringilla turpis non urna sollicitudin laoreet. Morbi ac ornare libero. Etiam rutrum condimentum pretium. Duis aliquam ipsum id metus vestibulum scelerisque. Aenean ac elementum felis. Curabitur ultricies porta ultricies. Cras maximus dolor tristique,
tristique nulla ac, placerat tortor. Suspendisse ultrices erat ultrices iaculis commodo. Duis maximus ipsum in turpis lacinia pretium. Pellentesque eleifend maximus tellus, a porta nibh venenatis nec. Nam viverra, mauris vitae feugiat auctor,
ex magna egestas odio, a dictum est lacus ut nibh. Vestibulum pellentesque tortor nibh, in ornare justo consequat in. Vestibulum ornare nec nibh a vulputate. Nullam lorem sapien, eleifend ut fermentum a, eleifend ut enim. Pellentesque et malesuada
lacus, nec condimentum mauris. Suspendisse sed velit turpis. Donec id dapibus erat. Maecenas convallis velit tincidunt nisi consectetur, non bibendum felis tincidunt. Cras pretium erat a dictum ornare. Curabitur nec velit non nibh suscipit hendrerit.
Donec sit amet dictum nisl, et facilisis velit. Cras mauris ipsum, fermentum quis massa sit amet, condimentum luctus massa. Nam lacinia, nulla tincidunt ullamcorper tincidunt, mi nibh posuere eros, in egestas mi mi eget diam. Cras non lectus pharetra,
ullamcorper erat ac, mattis lacus. Donec auctor, elit ac tempus blandit, nibh urna cursus erat, in congue tellus neque in justo. Fusce in gravida ligula. Nunc ullamcorper porta arcu ut viverra. Maecenas vitae odio convallis, convallis urna nec,
pharetra mauris. Sed ut facilisis augue. Nullam tincidunt posuere mauris, nec dapibus urna mattis vitae. Curabitur lacinia nisl vel elit varius rhoncus et non quam. Sed malesuada tortor sed neque molestie porta. Vivamus vehicula nibh vitae posuere
rutrum. Ut eu condimentum nunc, in laoreet ipsum. Donec at augue quis ipsum maximus malesuada. Sed eleifend varius lectus quis rhoncus. Curabitur dapibus eros sit amet nisi blandit tempus. Aliquam erat volutpat. Praesent commodo ipsum non nibh
dignissim, et pretium nisi varius.
</p>
<h4>Montażem filmów</h4>
<div class="vimeo" style="position:relative; margin-left: 12.5%; ">
<iframe src="https://player.vimeo.com/video/71013726?color=ffffff&byline=0&portrait=0" width="700" height="394" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<br>
<p class="text" style="padding-bottom: 5px;">
Nam venenatis ligula sit amet orci dictum, non vestibulum nisi bibendum. Nam scelerisque dolor neque, id faucibus leo mattis quis. Pellentesque pretium accumsan cursus. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Fusce non condimentum dui, eu laoreet tellus. Nam eget ultrices massa, ut rhoncus sapien. Aliquam eget est vel eros commodo imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet quam sit amet felis rutrum
euismod. Vestibulum venenatis tincidunt neque id auctor. Cras sed quam tristique quam ultrices mattis vitae eu libero. Maecenas vitae justo quis nisl rutrum laoreet rutrum vitae nulla. Nunc hendrerit sed dui vel varius. Cras aliquet volutpat tincidunt.
Integer venenatis eleifend risus, ut venenatis dolor accumsan ut. Nulla imperdiet tempus ultricies. Donec porta felis et malesuada eleifend. Nunc commodo ex et consequat tincidunt. Aenean eu lacus ut libero malesuada auctor vel eu mi. Praesent
fringilla libero vel lorem ornare mattis. Nulla id purus metus. Vivamus ornare sodales ante ac suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<br>
</div>
<div id="bottom" class="bottom" style="position:absolute;top:2200px;">
<footer class="bottom_footer" id="bottom_footer">
<ul class="bottom_list">
<li style="word-spacing:1px; font-weight:400; font-family:'MontserratFont';">
My social media accounts
</li>
<br>
<br>
<li>
<a class="bottom_list_item" href="https://twitter.com/AJWRSW">Twitter</a>
</li>
<li>
<a class="bottom_list_item" href="">FB</a>
</li>
<li>
<a class="bottom_list_item" href="http://vsco.co/thenathurat/">VSCO</a>
</li>
</ul>
</footer>
</div>
</div>
</body>
</html>
此外，边框不会显示在底部列表中。我正试图修复它。
有什么想法吗？
修改
另一件事。当我在position:absolute`ul.bottom_list＆＃39;中将position:relative更改为.bottom时是1200px高。
2 个答案:
答案 0 :(得分：1)
- .vimeo - 在属性样式中删除=＆＃39; margin-left ...
- iframe - 使用vimeo视频，{width：100％;}
- .bottom {box-sizing：border-box;}
答案 1 :(得分：0)
你做错了很多事。
我可以问你为什么从顶部定位.bottom？如果你从bottom: 0
因为.bottom是绝对的，所以应该有相对父，但我没有看到任何父元素被定义为相对。
.all {
position: relative;
}
使用此代码。并且由于绝对元素不会采用布局，请尝试使用.all的填充，以便它将推送.bottom并且不会与内容重叠。
此外，还有一些您使用浮动的元素，因此您需要在父级中使用类似overflow: hidden;的内容来获得正确的布局。我尝试在.all上使用它看起来不错。试试看。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？