html - 当页面大小发生变化时，在固定导航栏的中心对齐图像时出现问题

标签 html css web

我在为学校制作的婚礼网站上遇到了一些问题。问题在于中心装饰件最终将成为 Logo ，当屏幕尺寸更改时不会与页面顶部对齐。在我正在处理的屏幕上它看起来不错，但在其他屏幕上它变得困惑了。

我正在处理的屏幕。看起来不错。

demonstration

friend 的屏幕被下移或在其他屏幕上被截断。

demonstration

我已经尝试了从更改位置类型和显示类型到尝试设置边距的所有方法。甚至将其固定，然后将其定位在我想要的位置，但总是以搞砸其他事情告终。导航栏固定在屏幕顶部，周围的链接与其对齐。我似乎无法解决它，想知道是否有人有任何解决方案。

这是网站的下载链接:Website 

@import url('http://weloveiconfonts.com/api/?family=entypo');
html{
    background-image: url("background.jpg");
    background-size:cover;
    background-position:0px 60px;
    background-attachment: fixed;
    padding:0px;
}
body{
    margin:0;
}
nav{
    background-color: snow;
    text-align: center;
    position: fixed;
    width:100%;
    margin:0;
    z-index: 100;

    -webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}

section{
    padding-bottom: 20px;
    text-align: center;
    position: relative;
    top: 60px;
    background-color: dimgrey;
    z-index:50;
    margin-left:15%;
    margin-right:15%;
}
footer{
    font-size: 13px;
    z-index: 75;
    font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    color: slategray;
    margin-top:60px;
    top:60px;
    background-color: #ddd;;
    height:60px;
    margin-left:15%;
    margin-right:15%;
    padding: 20px;
    -webkit-box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
}

nav ul{
    text-align: center;
    list-style:none;
    margin: 0;
    padding: 0;

}

nav ul li{
    text-align: center;
    display: inline;
    margin:0px;
}
nav ul li a{
    margin-left:-2px;
    margin-right:-2px;
    color: slategray;
    display: inline-block;
    text-decoration: none;
    font-size:25px;
    font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
    padding: 7px;
    text-align:center;
    padding-left: 10px;
    padding-right:10px;
    padding-top:15px;
    padding-bottom:15px;
    height: 10%;
    width:9%;
    -webkit-transition: background-color 0.2s;
}
nav ul li a:hover{
    background-color:#d9d9d9;
}
nav ul li a:active{
   background-color:#d9d9d9;
}
nav ul li img{
    z-index: -20;
    align-content: center;
    position: relative;
    top: 75px;
    background-color: snow;
    width:20%;
    height:100%;
    margin-left: 15px;
    margin-right:15px;
    margin-top:-210px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:7px;
    padding-top:5px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;

    -webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
.wedding{
    width:100%;
    margin-bottom: 5px;
}
h1{
    background-color: snow;
    font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
    margin-bottom:25px;
    padding:10px;
    -webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
.footer-info{
    margin: 0;
    list-style:none;
    text-decoration: none;
    float: left;
}

.ui-datepicker,
.ui-datepicker table,
.ui-datepicker tr,
.ui-datepicker td,
.ui-datepicker th {
    margin: 0;
    padding: 0;
    border: none;
    border-spacing: 0;
}

/* Calendar Wrapper */
.ui-datepicker {
    display: none;
    width: 294px;
    padding: 35px;
    cursor: default;
    margin-left:20px;

    text-transform: uppercase;
    font-family: Tahoma;
    font-size: 12px;

    background: snow;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
    -moz-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
    box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
}

/* Calendar Header */
.ui-datepicker-header {
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid #d6d6d6;
}

.ui-datepicker-title { text-align: center; }

/* Month */
.ui-datepicker-month {
    position: relative;
    padding-right: 15px;
    color: #565656;
}

.ui-datepicker-month:before {
    display: block;
    position: absolute;
    top: 5px;
    right: 0;
    width: 5px;
    height: 5px;
    content: '';

    background: #a5cd4e;
    background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
    background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
    background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
    background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
    background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* Year */
.ui-datepicker-year {
    padding-left: 8px;
    color: #a8a8a8;
}

/* Prev Next Month */
.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute;
    top: -2px;
    padding: 5px;
    cursor: pointer;
}

.ui-datepicker-prev {
    left: 0;
    padding-left: 0;
}

.ui-datepicker-next {
    right: 0;
    padding-right: 0;
}

.ui-datepicker-prev span,
.ui-datepicker-next span{
    display: block;
    width: 5px;
    height: 10px;
    text-indent: -9999px;

    background-image: url(../img/arrows.png);
}

.ui-datepicker-prev span { background-position: 0px 0px; }

.ui-datepicker-next span { background-position: -5px 0px; }

.ui-datepicker-prev-hover span { background-position: 0px -10px; }

.ui-datepicker-next-hover span { background-position: -5px -10px; }

/* Calendar "Days" */
.ui-datepicker-calendar th {
    padding-top: 15px;
    padding-bottom: 10px;

    text-align: center;
    font-weight: normal;
    color: #a8a8a8;
}

.ui-datepicker-calendar td {
    padding: 0 7px;

    text-align: center;
    line-height: 26px;
}

.ui-datepicker-calendar .ui-state-default {
    display: block;
    width: 26px;
    outline: none;

    text-decoration: none;
    color: #a8a8a8;

    border: 1px solid transparent;
}

/* Day Active State*/
.ui-datepicker-calendar .ui-state-active {
    color: #6a9113;
    border-color: #6a9113;
}

/* Other Months Days*/
.ui-datepicker-other-month .ui-state-default { color: #565656; }

.social {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0 10px;
  line-height: 50px;
  font-family: Entypo;
  font-size: 28px;
  text-align: center;
  color: #555;
  border-radius: 10px;
  background: #eee;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}
.wrapper {
  float: right;
  text-align: center;
}

.social {
  box-shadow: rgb(210, 210, 210) 1px 1px,
    rgb(210, 210, 210) 2px 2px,
    rgb(211, 211, 211) 3px 3px,
    rgb(211, 211, 211) 4px 4px,
    rgb(211, 211, 211) 5px 5px,
    rgb(212, 212, 212) 6px 6px,
    rgb(212, 212, 212) 7px 7px,
    rgb(212, 212, 212) 8px 8px,
    rgb(213, 213, 213) 9px 9px,
    rgb(213, 213, 213) 10px 10px,
    rgb(214, 214, 214) 11px 11px,
    rgb(214, 214, 214) 12px 12px,
    rgb(214, 214, 214) 13px 13px,
    rgb(215, 215, 215) 14px 14px,
    rgb(215, 215, 215) 15px 15px,
    rgb(215, 215, 215) 16px 16px,
    rgb(216, 216, 216) 17px 17px,
    rgb(216, 216, 216) 18px 18px,
    rgb(216, 216, 216) 19px 19px,
    rgb(217, 217, 217) 20px 20px,
    rgb(217, 217, 217) 21px 21px,
    rgb(218, 218, 218) 22px 22px,
    rgb(218, 218, 218) 23px 23px,
    rgb(218, 218, 218) 24px 24px,
    rgb(219, 219, 219) 25px 25px,
    rgb(219, 219, 219) 26px 26px,
    rgb(219, 219, 219) 27px 27px,
    rgb(220, 220, 220) 28px 28px,
    rgb(220, 220, 220) 29px 29px,
    rgb(221, 221, 221) 30px 30px;
   text-shadow: rgb(226, 226, 226) 1px 1px,
    rgb(227, 227, 227) 2px 2px,
    rgb(227, 227, 227) 3px 3px,
    rgb(228, 228, 228) 4px 4px,
    rgb(229, 229, 229) 5px 5px,
    rgb(229, 229, 229) 6px 6px,
    rgb(230, 230, 230) 7px 7px,
    rgb(230, 230, 230) 8px 8px,
    rgb(231, 231, 231) 9px 9px,
    rgb(232, 232, 232) 10px 10px,
    rgb(232, 232, 232) 11px 11px,
    rgb(233, 233, 233) 12px 12px,
    rgb(233, 233, 233) 13px 13px,
    rgb(234, 234, 234) 14px 14px,
    rgb(235, 235, 235) 15px 15px,
    rgb(235, 235, 235) 16px 16px,
    rgb(236, 236, 236) 17px 17px,
    rgb(236, 236, 236) 18px 18px,
    rgb(237, 237, 237) 19px 19px,
    rgb(238, 238, 238) 20px 20px;
}
<!doctype html>
<html lang="en-US">

<head>
    <title>Home</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>

<body>
    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Gallery</a></li>
            <li><img src="img/hearts.png"></li>
            <li><a href="">Reservations</a></li>
            <li><a href=""="">Menue</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </nav>
    <section>
        <img src="img/wedding.jpg" class="wedding">
    </section>
    <footer>
        <ul class="footer-info">
            <li> <p>Made by Taylor Bastian and Danial Andales for FBLA competition</p> </li>
            <li><p>Copyright © 2015. SampleCorp</p></li>
        </ul>

         <div class="wrapper">
            <div class="social">&#62220;</div>
            <div class="social">&#62217;</div>
            <div class="social">&#62223;</div>
            <div class="social">&#62232;</div>
        </div>
    </footer>
</body>

</html>

最佳答案

尝试使用“em”而不是像素。像素在每个屏幕上的大小都相同，因此它们不会适应您的屏幕，但是，“em”在所有屏幕上的相对大小都相同，这意味着它会适应您的屏幕。希望对你有帮助，我也是菜鸟。 :P

关于html - 当页面大小发生变化时，在固定导航栏的中心对齐图像时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34520073/

上一篇：javascript - jquery - 按住鼠标时的事件

下一篇：php - 使用 css 和空白行设置 php echo 样式

相关文章：

java - 如何解析 HTML 字符串以按父 div 拆分？

css - 为 datetimepicker bootstrap 设置初始值

mysql - 根据 MySQL 数据库中国家/语言特定的排序规则按名称对客户进行排序

css - @font-face 和字体大小

html - 在滑动到新页面 JqueryMobile 之前防止自动滚动到顶部

python - 如何在应用程序外部访问 Flask 应用程序配置？

web-services - 在 Go (golang) 中使用网络服务器显示 gif 图像

javascript - 根据填充的其他输入动态生成选择输入 'required'

javascript - 将 UI 元素与 DOM 解耦以独立拖动它们

python - 如何使 matplotlib 标题可搜索？

©2024 IT工具网  联系我们