我的 HTML 代码:
<!DOCTYPE HTML> <!-- KOD KOLORU AKCENTÓW STRONY #2E16B1--> <!-- tytuły - Montserrat, tekst-raleway-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio. Aleksander Jess</title>
<meta name="author" content="Aleksander Jess" />
<meta name="description" content="Kilka słów o mnie"/>
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">
<!-- ****** favicony faviconit.com ****** -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- ****** favicony faviconit.com ****** -->
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
</head>
<body>
<div id="all" class="all">
<!-- TOP--><!-- TOP--><!-- TOP--><!-- TOP-->
<div id="top" class="top">
<!--BANNER--><!--BANNER--><!--BANNER--><!--BANNER-->
<div id="banner" class="banner">
<audio controls autoplay>
<source src="/audio/Jani R - Center Focus.mp3">
</audio>
<img class="logo" id="logo" src="images/logo.png" >
<div id="menu_box" class="menu_box">
<a class="menu_link" href="#menu">Menu</a>
</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="sub/ja.html">O mnie</a></li>
<li><a class="menu" href="sub/praca.html">Co robię?</a></li>
<!--SUBMENU-->
<ul class="topnav_down" id="topnav_down">
<li><a class="menu" href="sub/muzyka.html">Muzykę</a></li>
<li><a class="menu" href="sub/zdjecia.html">Zdjęcia</a></li>
<li><a class="menu" href="sub/filmy.html">Filmy</a></li>
<li><a class="menu" href="sub/tlumaczenia.html">Tlumaczenia</a></li>
</ul>
<li><a class="menu" href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
</div>
</div>
<div id="slider" class="slider">
<script src="../js/jssor.slider-22.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
jssor_1_slider_init = function() {
var jssor_1_options = {
$AutoPlay: true,
$SlideDuration: 1600,
$SlideEasing: $Jease$.$OutQuint,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*you can remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*responsive code end*/
};
</script>
<style>
/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div (normal)
.jssorb05 div:hover (normal mouseover)
.jssorb05 .av (active)
.jssorb05 .av:hover (active mouseover)
.jssorb05 .dn (mousedown)
*/
.jssorb05 {
position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
position: absolute;
/* size of bullet elment */
width: 8px;
height: 8px;
background: url('slider_img/b05.png') no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
/* jssor slider arrow navigator skin 22 css */
/*
.jssora22l (normal)
.jssora22r (normal)
.jssora22l:hover (normal mouseover)
.jssora22r:hover (normal mouseover)
.jssora22l.jssora22ldn (mousedown)
.jssora22r.jssora22rdn (mousedown)
.jssora22l.jssora22lds (disabled)
.jssora22r.jssora22rds (disabled)
*/
.jssora22l, .jssora22r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 58px;
cursor: pointer;
background: url('slider_img/a22.png') center center no-repeat;
overflow: hidden;
}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -70px -31px; }
.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }
.jssora22l.jssora22ldn { background-position: -250px -31px; }
.jssora22r.jssora22rdn { background-position: -310px -31px; }
.jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }
.jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer-events: none; }
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:300px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position:absolute;top:0px;left:0px;background-color:rgba(0,0,0,0.7);">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('../img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:500px;overflow:hidden;">
<div>
<img data-u="image" src="../slider_img/turntable-1109588_1920.jpg" />
<div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;font-weight:400;color:#ffffff;line-height:60px;font-family: 'RalewayFont';"href="../sub/muzyka.html">Tworzę muzykę</div>
</div>
<div>
<img data-u="image" src="../slider_img/07044434_panorama-1.jpg" />
<div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;font-weight:400;color:#ffffff;line-height:60px;font-family: 'RalewayFont';"href="../sub/zdjecia.html">Robię zdjęcia</div>
</div>
<div>
<img data-u="image" src="../slider_img/camera-1334278_1920.jpg" href="sub/filmy.html" />
<div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;font-weight:400;color:#ffffff;line-height:60px;font-family: 'RalewayFont';"href="../sub/filmy.html">Montuję filmy</div>
</div>
</div>
<a data-u="any" href="http://www.jssor.com" style="display:none">Full Width Slider</a>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>
</div>
<!--MIDDLE--><!--MIDDLE--><!--MIDDLE--><!--MIDDLE-->
<div id="mid" class="mid">
<div id="content" class="content">
<div id="content_text">
<p class="main_text">Strona poświęcona osobie <em class="em"> AJ</em>. </p> <!-- klasa EM, main text-->
<hr>
<p class="text">There is some text here</p>
</div>
</div>
</div>
<div id="feed" class="feed">
<p class="feed_t" id="feed_t">Mój Twitter</p>
<a class="twitter-timeline" width="300" height="500" dnt="true" theme="light" link-color="#2E16B1" href="https://twitter.com/AJWRSW">Tweets by AJWRSW</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="bottom" class="bottom">
<footer class="bottom_footer" id="bottom_footer">
<ul class="bottom_list">
<p class="bottom_list_item">Follow me on</p>
<li><a class="bottom_list_item">Twitter</a></li>
<li><a class="bottom_list_item">FB</a></li>
<li><a class="bottom_list_item">VSCO</a></li>
</ul>
<p class="copyright">
Copyright 2017. Aleksander Jess
</p>
</footer>
</div>
</body>
</html>
我的 CSS
@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
{
float:left;
width:100%;
}
div.menu_box
{
display: none;
}
div.slider
{
padding-top: 20px;
padding-bottom: 20px;
}
div.banner
{
width:100%;
background:#000000;
height:200px;
}
img.logo
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
line-height: 70%;
height: 70%;
}
audio
{
position: absolute;
right: 0px;
volume:0.1;
top: 215px;
}
ul.topnav
{
font-family: 'Montserrat';
font-weight: 200;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}
ul.topnav li
{
float:left
}
ul.topnav_down
{
list-style-type: none;
}
ul.topnav li a
{
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 15px;
}
ul.topnav li a:hover
{
background-color: #000;
}
ul.topnav li.icon
{
display: none;
}
ul.topnav_down
{
position: relative;
display: inline-block;
}
.topnav_down-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.topnav_down:hover .dropdown-content
{
display: block;
}
div.mid
{
width: 70%;
}
p.main_text
{
font-family: 'MontserratFont';
color: #2E16B1;
font-weight: 400;
font-size: larger;
font-variant: small-caps;
}
p.text
{
font-family: 'RalewayFont';
text-align:justify;
float:right;
padding-bottom:20px;
font-weight: 100;
}
div.content
{
float:right;
margin: 0 10px 0 10px;
padding-right: 5px;
}
div.feed
{
position:absolute;
right:100%;
}
p.feed_t
{
width:30%;
font-family:'MontserratFont';
}
a.twitter-timeline
{
position:absolute;
right:10px;
}
div
{
width:100%;
}
footer
{
position:absolute;
bottom:0px;
color:white;
background-color:black;
font-family: 'RalewayFont';
width:100%;
}
@media all and (max-width: 767px)
{
div.all
{
float: left;
width: 100%;
min-height: 350px;
background: #ffffff;
}
img.logo
{
width:auto;
}
div.slider
{
display: none;
}
h1
{
display: none;
}
div.mid
{
width:100%;
padding-left: 5px;
padding-right: 5px;
}
div.feed
{
display: none;
}
}
底部的 div 似乎过着自己的生活。它似乎没有响应
行的任何 css 代码position:absolute;
bottom:0px;
我应该在底部看到它。除了我没有。
你们有什么想法吗？
编辑
我设法修复了布局位。不幸的是，mid 决定只“合并”p.main_text 位。它“忘记”了 p.text 部分。所以当我在 div.mid 后面添加阴影时，阴影最终只在 p.main_text 下面。有什么提示吗？
最佳答案
代码中的问题是您只设置了子项的样式 footer忘记 child 没有 parent 什么也做不了。给予它许可。
如果要版权区footer在底部，给你给 child 的样式到 parent
.bottom
{
position:absolute;
bottom:0px;
color:white;
background-color:black;
font-family: 'RalewayFont';
width:100%;
}
希望你明白这是如何工作的
关于html - CSS冲突，网站没有意义。属性不适用于某些 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42238491/