Jupyter笔记本电脑会扭曲演示文稿的HTML/CSS布局_Html_Css_Jupyter Notebook_Reveal.js_Rise

Jupyter笔记本电脑会扭曲演示文稿的HTML/CSS布局

html css jupyter-notebook

Jupyter笔记本电脑会扭曲演示文稿的HTML/CSS布局,html,css,jupyter-notebook,reveal.js,rise,Html,Css,Jupyter Notebook,Reveal.js,Rise,我想用Jupyter做一个完整的演示。我首先在浏览器中尝试了一些HTML-CSS，效果几乎不错： HTMLindex.HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <link rel="stylesheet" href="https://cdnjs.cloudf

我想用Jupyter做一个完整的演示。我首先在浏览器中尝试了一些HTML-CSS，效果几乎不错：

HTML

index.HTML

：

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

<head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <div id="content-wrap">
        <header>
            <h1 id="firstSlideTitle" class="text">This is a long miltiline title for a random topic which nobody cares about!</h1>
            <Lorem></Lorem>
        </header>
        <img src="pics/Python_logo.svg" id="firstSlidePic" alt="PythonLogo" class="center">
    </div>
    <footer>
        <hr>
        <img src="pics/by-nc-nd.svg">
        <p id="twitter" class="text"><a><i class="fa fa-twitter">twitter</i></a></p>
    </footer>
</body>

</html>

结果几乎可以：

我试着把CSS代码放在Jupyter的一个代码单元中的

..

标记中，该单元配备了

%%html

magic。还必须将所有

id

s更改为

classe

s，因为pythonjupyter无法处理

s，将它们视为Python注释。您可以在中找到该单元格。然而，结果更令人失望：

我试过一些变通办法，但都不够好。如果您能帮助我了解如何做，我将不胜感激。

我在这里的RISE github回购“问题”区域提供了一些关于这方面的背景信息

body {
     position: relative;
     min-height: 90vh;
}
 #content-wrap {
     padding-bottom: 2.5rem;
}
 .text {
     font-family: computer Modern;
}
 #firstSlideTitle {
     width: 80%;
     font-size: 300%;
     font-weight: bold;
     text-align: center;
     margin: auto;
     margin-top: 40px;
     border-style: solid;
     border-radius: 15px;
}
 #firstSlidePic {
     width: 50%;
     height: auto;
     padding: 40px;
}
 .center {
     display: block;
     margin-left: auto;
     margin-right: auto;
}
 footer {
     position: absolute;
     bottom: 0px;
     width: 100%;
     height: 2.5rem;
}
 #twitter{
     float: right;
     width: 33.3%;
     text-align: right;
}