个人中心
gpt4 book ai didi

javascript - 如何增加我的推特提要的宽度

转载 作者：太空宇宙 更新时间：2023-11-04 11:00:26 25 4
gpt4 key购买 nike

我正在尝试增加我网页上显示的 Twitter 提要的宽度，我向它添加了一个 Div id 并尝试在 css 中增加它的大小但是它在某个点后停止变大，我还想在中添加图像我的投资组合部分包含 3 张类似计算机的随机图片，当您在 css 中将鼠标悬停在它们上方时，这些图片会变大并改变大小，我该怎么做？我也不知道如何更改网页背景的颜色，我尝试过的所有方法都不起作用。谢谢。

我为下面的代码提供了 HTML、CSS 和 JS 代码。 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Muhammed's Webpage</title>

    <style>
        #body {
            margin: auto;
            max-width: 85%;
            font-family: 'Exo 2', Times, serif;
            color: black;
            padding-top: 50px;
        }

        .mainlogo {
            font-size: 18px;
            font-weight: 900;
            font-family: 'Montserrat', Times, serif;
            text-decoration: underline;
        }

        nav {
            position: fixed;
            top: 0;
            width: 100%;
            margin-left: 4%;
            opacity: 0.8;
            max-width: 85%;

        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: white;
            position: fixed;
            font-size: 20px;
        }

        li {
            float: left;
            border-right: 2px solid black;
        }

        li:first-child {
            border-left: 2px solid black;
        }

        li a {
            display: inline-block;
            color: black;
            text-align: justify;
            padding: 36px 40px;
            text-decoration: underline;
            font-family: 'Montserrat', Times, serif;
            text-shadow: 4px 4px 4px #aaa;
        }

        li a:hover {
            background-color: #C2E5E5;
            color: black;
        }

        .yt {
            margin-left: 53px;
            margin-top: 30px;
            display: inline-block;
            height: 500px;
            width: 650px;
        }

        #twitter {
            display: inline-block;
            height: 300px;
            width: 300px;
        }

        .contentbox {
            font-family: 'Exo 2', sans-serif;
            font-weight: 700;
            font-size: 2em;
            padding-left: 10px;
            padding-bottom: 0;
            margin-bottom: 0;
            background-color: #C2E5E5;
        }

        .content {
            background-color: #C2E5E5;
        }

        p {
            text-indent: 3%;
            margin: auto;
            max-width: 95%;
        }

        .contentbox {
            font-family: 'Montserrat', Times, serif;
            font-size: 28px;
        }
    </style>
    <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>
</head>
<body>
<div class="mainlogo">

    <div>Muhammed's
        <br>Webpage
    </div>

</div>

<div id="body">

    <nav>
        <ul>

            <li><a href="#BasicInfo"> BASIC INFORMATION </a></li>
            <li><a href="#CurriculumVitae"> CURRICULUM VITAE </a></li>
            <li><a href="#Portfolio"> PORTFOLIO </a></li>
            <li><a href="#Report"> REPORT </a></li>
        </ul>
    </nav>

    <div class="yt">
        <iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
        </iframe>
    </div>

    <div id="twitter">
        <a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by
            @applenws</a>
    </div>

    <div class="content" id="Basic Information">
        <h3 class="contentbox"><u>Basic Information</u></h3>
        <p>
            <br>Name: Muhammed Hussain
            <br>Age: 18
            <br>Contact Number: 07711909673
            <br>E-mail: Mhuss055@gold.ac.uk
            <br>Occupation: Student of Goldsmiths, University of London
            <br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
            <br>
            <br>
        </p>
    </div>

    <div class="content" id="Curriculum Vitae">
        <h3 class="contentbox"><u>Curriculum Vitae</u></h3>
        <p>
            <br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
            <br>Responsible for ensuring all daily administrative tasks are met within time schedule
            <br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent
            service while working in a team environment and focusing on customer service
            <br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
            <br>
            <br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
            <br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
            <br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon
            receiving the order.
            <br>
            <br>
            <u>Skills Gained:</u>
            <br>Communication - Established rapport and resolved queries within pressurised customer service
            environments
            <br>Teamwork - Motivated and developed colleagues to work effectively
            <br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
            <br>
            <br>
        <p>
    </div>

    <div class="content" id="Portfolio">
        <h3 class="contentbox"><u>Portfolio</u></h3>
        <p>
            <br>Here im going to include some images and use css to make them interactive and exciting
            <br>
            <br>
        </p>
    </div>


    <div class="content" id="Report">
        <h3 class="contentbox"><u>Report</u></h3>
        <p>
            <br>Here im going to state why i did what i did in detail
        <p>
            <br>
    </div>

    <br>
    <br>
</div>

</body>
</html>

最佳答案

  1. 您的 Twitter 提要在 HTML 属性中设置了宽度。删除属性并将其移动到 CSS。这应该可以解决 Twitter 问题。 编辑: 请记住，高度设置在 Twitter > Settings > Widget > Height 上.

- 编辑 1 -

既然我知道你的 Twitter 提要不能由你控制，你必须控制你的 Twitter 脚本的结果，默认情况下通常是 600px 的高度。不管这是什么，你知道它最终会使用 twitter-timeline 来设计一个 iframe。 CSS类，所以你只需要像这样覆盖值:

.twitter-timeline {
    height: 503px; // 503 because for some reason it needs 3 more pixels to catch up with your video, as I could see.
}

- 结束编辑 1 -

  1. 您刚刚将所有个人信息泄露给了网络上的陌生人。如果它们是真的，您可能会在几秒钟内收到垃圾邮件。我建议您仅提供必要的代码。有很多与问题无关的CSS和HTML，你可以在另一个问题中简单地提出它们或将它们分开解释。

  2. 要放置图片，您可以做很多事情，随机放置意味着 JavaScript 或预加载 PHP。我想你会从你的网站加载它们，比方说 /images/computers/并给他们一个类，例如 photo .然后在 CSS 上，您可以执行以下操作:

    .photo {
        height:200px;
    }
    .photo:hover {
        height:400px;
    }

这将使它在悬停时使用 CSS 变大。如果你喜欢让它动起来，你可能想要使用其他 CSS 属性。在网络上搜索，您会找到它们。

- 编辑 2 -

所以，看你和类(class)的照片photo , 我看到你没有添加 %值正确。您需要为每张图像找到一个平衡值。在你的情况下，我们正在玩图像 padding , margin和 width基本上。所以有 3 张图片，你知道百分比必须达到 100% 左右:

.photo {
    background-color: white;
    padding: 1%;
    margin-left: 5%;
    margin-bottom: 2%;
    -webkit-box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
    box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
    float: left;
    width: 25%;
    transition: all 0.25s ease-out;
}

根据我给你写的这段代码，现在公式是:

(3 * 25%) + (6 * 1%) + (3 * 5%) = 75% + 6% + 15% = 96%

6 乘以 1%，因为 padding 将添加到图片的左右两侧。

- 结束编辑 2 -

  1. 网站的背景颜色？那太基本了。这取决于您的需要，您可以将背景颜色设置为 <html>或 <body> .我将使用 HTML:

     html {
         background-color:red;
     }

这样，您的网站将具有红色背景。当然，您可以使用 HEX、rgb() 或 rgba() 或颜色名称，无论您想要什么。

关于javascript - 如何增加我的推特提要的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34355696/

25 4 0
文章推荐： 在 Linux 上交叉构建第三方库位置
文章推荐： python - 自动化 Excel 从 Python 获取 "TypeError: ' unicode' 对象不可调用“在 Range.Address 上
文章推荐： linux - 为什么我做一个fork时得到2个进程？
文章推荐： python - 提取压缩文件
太空宇宙
个人简介

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

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