个人中心
gpt4 book ai didi

html - 请帮助我调整页面大小和灵活缩放

转载 作者：行者123 更新时间：2023-11-28 11:33:46 24 4
gpt4 key购买 nike

我在这里绞尽脑汁，试图找到一种方法让我的 div 在页面调整大小时保持在一起。 (我将页面上的所有彩色线条都设为 div，除了底部的两条垂直线和一条长水平线。那是边框的一部分)。也为了标题/菜单/页面的其余部分保持凝聚力。

我将不胜感激，因为我对 html 和 css 有点陌生，而且我的网站已经上线。您可以在 http://www.yamatat.com 上亲 body 验(而不是梳理我粘贴的代码/css)。

我正在尝试将默认尺寸设置为 1366 x 768，因为该尺寸目前在全局范围内的份额最大。

这是我的 html:

    <title>You And Me And Thoughts And Talk with Doug Culp</title>
</head>
<div class="page-title-container">
    <div id="orangeone"></div>
    <div id="blueone"></div>
    <div class="page-title">YOU AND ME AND THOUGHTS AND TALK WITH DOUG CULP</div>
    <div id="orangetwo"></div>
    <div id="bluetwo"></div>
    <div id="bluethree"></div>
    <div id="bluefour"></div>
    <div id="bluefive"></div>
    <nav>
        <a id="home" class="menu" href="http://www.yamatat.com/index.html">HOME</a>
        <a id="podcast" class="menu" href="http://www.yamatat.com/podcast.html">PODCAST</a>
        <a id="media" class="menu" href="http://www.yamatat.com/media.html">MEDIA</a>
        <a id="blog" class="menu" href="http://www.yamatat.com/blog.html">BLOG</a>
        <a id="shows" class="menu" href="http://www.yamatat.com/shows.html">SHOWS</a>
    </nav>
</div>

<body>
    <h1 class="home_news"><span>NEWS STUFF//</span></h1>
    <div id="underline_news"></div>
    <div id="news"><span id="news_date">12/24/2013</span>
        <p>It's been a wild ride so far. I'm writing this before the site goes live. You guys don't even know!! I learned how to make my own page so that I could make it and put it out for you guys, the listeners. The YAMATATers. Scalloped, baked, french
            fried. Any way you want it, THAT's the way you need it. It's 5:20 am. I should really get to bed. Merry Christmas Eve everyone!!</p>
    </div>
    <a class="twitter-timeline" width="400" height="450" data-dnt="true" href="https://twitter.com/dougathan" data-widget-id="416479074542817280">Tweets by @dougathan</a>
    <script>
        ! function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0],
                p = /^http:/.test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + "://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, "script", "twitter-wjs");
    </script>

</body>

</html>

这是我的 CSS:

.page-title-container {
    min-width: 85.375em;
}

h1 {
    font-size: 60px;
    color: #00BFFF;
    text-align: center;
    border-width: 10px;
    border-radius: 6px;
    margin-left: 45px;
    margin-right: 45px;
    font-family: 'Dosis', sans-serif;
    padding-bottom: 0px;
    margin-top: -20px;
}

.page-title {
    font-size: 60px;
    color: #00BFFF;
    text-align: center;
    border-width: 10px;
    border-radius: 6px;
    margin-left: 238px;
    margin-right: 0px;
    font-family: 'Dosis', sans-serif;
    padding-bottom: -10px;
    padding-top: 25px;
    margin-top: -64px;
    border-style: solid solid solid solid;
    border-color: orange;
    width: 1410px;
    float: left;
    font-weight: bold;
    line-height: 55px;
}

a.menu:hover {
    color: orange;
}

a:hover {
    color: orange;
}

a:hover .body_link {
    color: orange;
    text-decoration: none;
}

#orangeone {
    height: 10px;
    width: 255px;
    border-radius: 6px;
    background-color: orange;
    float: left;
    margin-left: -8px;
    margin-top: -15px;
    position: relative;
}

#orangetwo {
    height: 10px;
    width: 255px;
    border-radius: 6px;
    background-color: orange;
    float: right;
    margin-right: 0px;
    margin-top: -61px;
    position: relative;
}

#orangethree {
    height: 62px;
    width: 10px;
    background-color: orange;
    float: left;
    margin-left: -5px;
    margin-top: 0px;
    border-radius: 6px;
    position: relative;
}

#orangefour {
    height: 62px;
    width: 10px;
    background-color: orange;
    float: right;
    margin-right: 0px;
    margin-top: 0px;
    border-radius: 6px;
    position: relative;
}

#orangefive {
    height: 10px;
    width: 1423px;
    background-color: orange;
    float: left;
    margin-left: 240px;
    margin-top: 0px;
    border-radius: 6px;
    position: relative;
}

#blueone {
    height: 10px;
    width: 240px;
    background-color: #00bfff;
    border-radius: 6px;
    margin-left: -8px;
    margin-top: 15px;
    position: relative;
}

#bluetwo {
    height: 10px;
    width: 245px;
    background-color: #00bfff;
    border-radius: 6px;
    margin-right: 0px;
    margin-top: -46px;
    float: right;
    position: relative;
}

#bluethree {
    height: 100px;
    width: 10px;
    background-color: #00bfff;
    float: left;
    margin-left: 222px;
    margin-top: -40px;
    border-radius: 6px;
    position: relative;
}

#bluefour {
    height: 100px;
    width: 10px;
    background-color: #00bfff;
    float: right;
    margin-right: 235px;
    margin-top: -40px;
    border-radius: 6px;
    position: relative;
}

#bluefive {
    height: 10px;
    width: 1460px;
    background-color: #00bfff;
    float: center;
    margin-left: 223px;
    border-radius: 6px;
    margin-top: 87px;
    position: relative;
}

a.menu {
    text-decoration: none;
    float: top;
    font-size: 46px;
    color: black;
    position: absolute;
    font-family: 'Dosis', sans-serif;
    margin-top: 0px;
}

#home {
    margin-top: -66px;
    margin-left: 400px;
}

#podcast {
    margin-top: -66px;
    margin-left: 600px;
}

#media {
    margin-top: -66px;
    margin-left: 890px;
}

#blog {
    margin-top: -66px;
    margin-left: 1125px;
}

#shows {
    margin-top: -66px;
    margin-left: 1350px;
}

.home_news, .home_pod {
    font-family: Tahoma;
    font-size: 55px;
    color: black;
    margin-top: 25px;
    border-bottom: solid 10px black;
    text-align: left;
    display: inline;
    border-radius: 0px;
    position: relative;
    margin-left: 40px;
}

.home_news span {
    position: relative;
    top: 12px;
}

.home_pod span {
    position: relative;
    top: 12px;
}

#news_date {
    float: left;
    font-weight: bold;
    font-size: 30px;
    margin-top: -20px;
    margin-left: 0px;
}

#news {
    float: left;
    font-size: 24px;
    margin-left: 40px;
    margin-top: 105px;
    width: 650px;
    white-space: normal;
    word-wrap: break-word;
}

.home_pod {
    position: relative;
    top: 12px;
    font-family: Tahoma;
    font-size: 55px;
    color: black;
    text-align: left;
    margin-left: 40px;
}

#pod_date {
    font-weight: bold;
    font-size: 30px;
}

#pod {
    font-size: 24px;
    margin-top: 105px;
    width: 650px;
    white-space: normal;
    word-wrap: break-word;
    margin-left: 45px;
}

.twitter-timeline {
    float: right;
    margin-right: 10px;
    margin-top: 25px;
}

a#Eegg_1 {
    float: left;
    margin-left: 35px;
    margin-top: -110px;
}

#Eegg_1_expl {
    float: left;
    color: black;
    display: block;
    margin-top: 155px;
    margin-left: -287px;
    font-size: 18px;
}

a#youtube_link {
    float: right;
    margin-right: 210px;
    margin-top: -5px;
}

a:hover #youtube_small {
    float: right;
}

#bloggy_head {
    float: left;
    text-decoration: none;
    margin-left: 800px;
    margin-top: 50px;
}

#bloggy_doit {
    float: left;
    font-family: Courier;
    font-size: 70px;
    margin-left: 745px;
    margin-top: 50px;
    font-weight: bold;
}

.body_link {
    color: black;
    text-decoration: none;
}

.home_shows {
    font-family: Tahoma;
    font-size: 55px;
    color: black;
    margin-top: 25px;
    float: left;
}

#underline_shows {
    height: 10px;
    width: 275px;
    background-color: black;
    float: left;
    margin-left: -323px;
    margin-top: 85px;
}

#show_calendar {
    float: left;
    font-size: 24px;
    margin-left: -320px;
    margin-top: 105px;
    width: 650px;
    white-space: normal;
    word-wrap: break-word;
}

最佳答案

您可以通过使用图像的书挡设计来更简单地做到这一点。

例如:

[Bookend 左图][Title + Nav Div with flexible width and background][Bookend 右图]

关于html - 请帮助我调整页面大小和灵活缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21011297/

24 4 0
文章推荐： css - 如何以 50% 的高度对齐两个不同宽度的 div 中的内容？
文章推荐： ios - UIWebView 没有看到远程 css 更新
文章推荐： css - 响应式 Css float DIV 在调整窗口大小时无法正常工作
文章推荐： javascript - 为什么我无法检索此 JavaScript\JQuery 函数中 select 标签的内容？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com