个人中心
gpt4 book ai didi

html - 如何制作指向同一页面另一部分的按钮链接以及如何将来自 yt 的视频放入我的网页

转载 作者：行者123 更新时间：2023-11-28 06:41:14 27 4
gpt4 key购买 nike

我是第一次创建网站，需要一些帮助。我有两个主要问题。第一个是我想要它，这样当有人点击“基本信息”按钮时，它会直接链接到页面的那一部分而不是另一页，因为我的所有信息都将在该页面上。我也想在我的网页上添加一个视频，但我希望视频是他们的，这样用户只需点击视频，它就会在我的页面上启动，而不是将他们重定向到另一个页面。 (下面是我的 html 和 css)。

此外，如果有人对如何改进我的网页有任何视觉提示，请随时发表评论并帮助我。

<!DOCTYPE html> 
        <html>
        <head> 
        <title>Muhammed's Webpage</title> 

        <link rel="stylesheet" type="text/css" href="Homepage.css">

        <script type="text/javascript" href="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> 
        <div id="page">

        <div id="navigation"> 
        <ul> 
        <li><a href="BasicInfo"> Basic Information</a></li> 
        <li><a href="CV"> CV</a></li>
        <li><a href="Portfolio"> Portfolio</a></li> 
        <li><a href="Report"> Report</a></li> 
        </ul>

        </div>

        <div id="intro"> 
        <h1> Muhammed Hussain </h1> 

        <h2 id="tagline"> I am a Computer Science student </h2>
        </div> 

        <div class="text" id="Basic Information"> 
        <h3 class="headers"> <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="text" id="CV"> 
        <h3 class="headers"> <u>CV</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,
        fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
        a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
        Cras dapibus. Vivamus elementum semper nisi.
        </p>
        </div>

        <div class="text" id="Portfolio">
        <h3 class="headers"> <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. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
        enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
        mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. 
        </p>
        </div>


        <div class="text" id="Report">
        <h3 class="headers"> <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 
        massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
        enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
        mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. 
        </p>
        </div>

        <br>
        <br>

        </body>
        </html>


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

#intro { 
    padding-top: 50px;
    font-family: 'Nunito', sans-serif;
    text-transform: uppercase;
    height: 300px; 
    background-image: url("GoldsmithsPic.jpg.jpg");
    background-repeat: repeat-x;
    background-position: bottom right;
    /*background-color: #5c5c5c; */
    font-family: 'Signika', sans-serif;
    text-align: center;
    padding-left: 10px;
}   
h1 {
    font-size: 5em;
    color: black;
    letter-spacing: 10px;
    padding-top: 40px; 
    margin: 0;
}

h2 {
    font-size: 5em;
    color: black;
    letter-spacing: 5px;
    padding-top: 40px; 
    margin: 0;
}

#tagline {
    font-size:1.5em; 
    padding-top: 0px; 
    letter-spacing: 4px;
    margin: 0;
}
#title {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    color: #434343;
}
#navigation {
    position: fixed; 
    top: 0; 
    left: 0; 
    right:0;
    z-index: 9999;
    width: 100%;
    max-width: 85%;
    margin-left: 7%;
    opacity: 0.8;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top; 10px;
    overflow: hidden;
    background-color: white;
    margin-bottom: 20px;
}
li {
    float: left;
}
li a {
    display: block;
    color: #5c5c5c;
    text-align: center;
    padding: 14px 16px; 
    text-decoration: none;
    text-transform: uppercase; 
    font-family: 'Raleway', sans-serif;
}
li a:hover {
    background-color: #5c5c5c;
    color: white; 
}
.headers {
    font-family: 'Arya', sans-serif;
    font-weight: 700;
    font-size: 2em;
    padding-left: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
}
.text {
    background-color: #5c5c5c;
}
p {
    text-indent: 3%; 
    max-width: 95%;
    margin: auto;
}
h3 {
    max-width: 95%;
    margin-left: 5px;
}

最佳答案

如果给它一个 ID 并链接到该 ID 不起作用，请考虑使用 Javascript 或 JQuery 来实现

可能是这样的

element = document.getElementById("divFirst")
alignWithTop = true;
element.scrollIntoView(alignWithTop);

网络上有很多关于此的内容，现在您知道自己在寻找什么了

哦，它看起来好多了!

Starting point for you

关于html - 如何制作指向同一页面另一部分的按钮链接以及如何将来自 yt 的视频放入我的网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34280233/

27 4 0
文章推荐： javascript - 崇高，保存 .styl 发送 .css
文章推荐： javascript - 带伪箭头的 SlideToggle
文章推荐： c++ - 将 IP 地址添加到 NIC 的跨平台方式(使用 C++)
文章推荐： javascript - 尝试更改按钮的颜色以显示使用 javascript 显示的图像
行者123
个人简介

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

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