个人中心
gpt4 book ai didi

javascript - 如何在同一行的视频旁边获取我的推特提要

转载 作者：行者123 更新时间：2023-11-30 16:24:13 26 4
gpt4 key购买 nike

我正在尝试让我的实时 Twitter 提要紧挨着我的 YouTube 视频，我希望它们在同一行上，但不知道要实现什么代码才能正常工作。

此外，我还想在我的代码中使用的字体系列之外使用另一种字体系列，我在哪里可以找到它们以及如何在我的代码中实现它？

下面我已经为我的网页提供了html，css和js，如果可以的话请修复错误谢谢。

HTML:

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

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

  <link rel="stylesheet" type="text/css" href="homepage.css">
  <script src="homepage.js"></script>

  <link href='https://fonts.googleapis.com/css?family=Raleway:700|Arya:400,700|Nunito:700' rel='stylesheet' type='text/css'>

</head>

<body><img src="https://www.facebookbrand.com/img/fb-art.jpg" height=85px>

  <div id="page">

    <div id="navbar">
      <ul>

        <li><a href="#BasicInfo"> BASIC INFORMATION </a></li>
        <li><a href="#Curriculum Vitae"> CURRICULUM VITAE </a></li>
        <li><a href="#Portfolio"> PORTFOLIO </a></li>
        <li><a href="#Report"> REPORT </a></li>
      </ul>
    </div>

    <div class="yt">
      <iframe height="400" width="700" 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>In this section i will have some information about myself.
        <br> For my finished website i'd like to make it responsive, so that it alters and readjusts well to different screen sizes. I'd also like to include a gallery that uses javascript as i haven't used any javascript on this site yet.
        <br>
        <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

      </p>
    </div>

    <div class="content" id="Curriculum Vitae">
      <h3 class="contentbox"> <u>Curriculum Vitae</u> </h3>
      <p>
        Here i will have my twitter, instagram and facebook feed
        <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
        pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo
    </div>

    <div class="content" id="Portfolio">
      <h3 class="contentbox"> <u>Portfolio</u> </h3>
      <p>
        Here i will showcase some of my current projects and completed projects.
        <br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
        quis, sem. Nulla consequat massa quis enim.
      </p>
    </div>


    <div class="content" id="Report">
      <h3 class="contentbox"> <u>Report</u> </h3>
      <p>
        Here i will showcase some of my current projects and completed projects.
        <br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
        quis, sem. Nulla consequat

    </div>

    <br>
    <br>

</body>

</html>

CSS:

#page {
    margin: auto;
    max-width: 85%; 
    font-family: 'Arya', sans-serif;
    color: white;
    padding-top: 50px;
}

#navbar {
    position: fixed; 
    top: 0;  
    width: 100%;
    margin-left: 11%;
    opacity: 0.8;
    max-width: 85%;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    position: fixed;
}
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: 'Raleway', sans-serif;
}
li a:hover {
    background-color: #5c5c5c;
    color: white; 
}

div.yt {
  margin-left: 0px;
  margin-top: 0px;
} 

#twitter {}

.contentbox {
    font-family: 'Arya', sans-serif;
    font-weight: 700;
    font-size: 2em;
    padding-left: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    background-color:  grey;
}
.content {
    background-color: grey;
}
p {
    text-indent: 3%; 
    margin: auto;
    max-width: 95%;
}
h3 {
    margin-left: 5px;
    max-width: 95%;
}

JS:

!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");

最佳答案

至于将视频和推特提要放在同一行，请将您的 css 切换为:

#page {
    margin: auto;
    max-width: 85%; 
    font-family: 'Arya', sans-serif;
    color: white;
    padding-top: 50px;
}

#navbar {
    position: fixed; 
    top: 0;  
    width: 100%;
    margin-left: 11%;
    opacity: 0.8;
    max-width: 85%;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    position: fixed;
}
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: 'Raleway', sans-serif;
}
li a:hover {
    background-color: #5c5c5c;
    color: white; 
}

div.yt {
  margin-left: 0px;
  margin-top: 0px;
  display:inline-block;
} 

#twitter {
  display:inline-block;
}

.contentbox {
    font-family: 'Arya', sans-serif;
    font-weight: 700;
    font-size: 2em;
    padding-left: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    background-color:  grey;
}
.content {
    background-color: grey;
}
p {
    text-indent: 3%; 
    margin: auto;
    max-width: 95%;
}
h3 {
    margin-left: 5px;
    max-width: 95%;
}

重要的部分是 youtube div 和 twitter div 现在都使用样式“display:inline-block”。您可能还想调整推特提要的高度以匹配 youtube 视频的高度。要向您的页面添加不同的字体，我建议使用 https://www.google.com/fonts .选择一个你喜欢的字体，将它添加到你的收藏中，点击右下角的使用，然后复制代码。

关于javascript - 如何在同一行的视频旁边获取我的推特提要，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34345518/

26 4 0
文章推荐： c - PID在arduino中的实现
文章推荐： c# - 部署到 prod 后没有 MediaTypeFormatter 可供读取
文章推荐： C程序读取大文本文件并将信息存储在struct中
文章推荐： c# - HttpChannelRequest WaitForReply 上的 WCF 代理 ProcessGetResponseWebException
行者123
个人简介

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

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