腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >尝试切换到对模板使用内嵌，但是格式设置一直很糟糕。

问尝试切换到对模板使用内嵌，但是格式设置一直很糟糕。
EN

Stack Overflow用户

提问于 2018-07-02 07:11:23

回答 1查看 45关注 0票数 0

我正试图将其他人的Flask模板转换为继承的模型，以消除重复的代码/清理工作。但是，格式设置总是不正确。例如，导航栏应该如下所示(黑色的顶部栏)：

但是，在我使用继承之后，如下所示：

注意，这是一个不同的页面，所以页面内容与上面的图像不一样是可以的。

我的切换方式是将所有链接和脚本合并到我的base.html文件中，并开始将重复的代码放入单独的文件中。

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Very Open Student Ware{% endblock %}</title>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jquery-ui.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='editor.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='general_course.css') }}">
    <link rel="shortcut icon" href="{{ url_for('static', filename="/Content/MIT.ico") }}" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='pixlr.js') }}"></script>
    <script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
</head>
<body>

<header>{% block navbar %}{% endblock %}</header>

{% block content %}{% endblock %}

</body>
</html>

navbar.html

<div id="Menu">
    <ul>
        <li><a href="#"><img src="{{ url_for('static', filename="Content/MIT.png") }}" height="20px"/></a></li>
        <li class="item"><a href="#">Menu</a></li>
        <li class="item"><a href="/IoT/1/1/1">IoT Course</a></li>
        <li class="item"><a href="/IoT/edit">Course editor</a></li>
        <li class="item"><a href="#">About</a></li>
        <li class="item"><a href="/save_to_dbx">Save Course to Dropbox</a></li>
        <li class="login"><a href="/login">Log In</a></li>
    </ul>
</div>

login.html

{% extends "base.html" %}

{% block navbar %}{% include "navbar.html" %}{% endblock %}

{% block content %}

<br/><br/><br/>
<div id="text">
<h1>Log In</h1>
</div>
<form action="" method="POST">
    <input type="text" name="username" placeholder="username" value = "{{ request.form.username }}">
    <input type="password" name="password" placeholder="password" value = "{{ request.form.password }}">
    <input type="submit" class="LoginSubmit" value="Log in">
</form>
{% if error %}
    <p> <strong>Error:</strong> {{ error }}</p>
{% endif %}

{% for messages in get_flashed_messages() %}
    <p>{{ messages }}</p>
{% endfor %}

{% endblock %}

相关的CSS

#Menu {
    z-index: 1;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    text-align: center;
    position: fixed;
    width: 100%;
    background-color: #333;
}

#Menu ul {
    list-style: none;
}
#Menu li {
    float: left;
    padding:10px;
    height: 20px;;
    font-family: sans-serif;
    background-color: #333;
    cursor: pointer;
}

#Menu li.item {
        width: 15%;
}
#Menu li.item:hover { text-decoration: underline; }

#Menu li.icon {
    width: 25%;
}

#Menu li.logout {
    float: right;
}

#Menu li.logout:hover { text-decoration: underline; }

#Menu a {
    text-decoration: none;
    color: aliceblue;
    height: 100%;
    width: 100%;
}

对于如何修复奇怪的格式有什么想法吗?是什么导致的？我的直觉是，我把所有的链接和脚本放在同一个标题部分。虽然奇怪的是，在我所见过的所有文件中，#Menu id的样式都是相同的，所以这似乎不会影响到它。

编辑:添加整个CSS文件

general_course.css

* { 
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}
 *:focus {
     outline: none;
 }

#text {
    margin: 0px 40px 0px 0px;
    color: whitesmoke;
}

#text a{
    color: whitesmoke;
}
body {
    background-image: url(/static/Background.png);
    background-size: 100%;
}
#Menu {
    z-index: 1;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    text-align: center;
    /*position: fixed;*/
    width: 100%;
    background-color: #333;
}

#Menu ul {
    list-style: none;
}
#Menu li {
    float: left;
    padding:10px;
    height: 20px;;
    font-family: sans-serif;
    background-color: #333;
    cursor: pointer;
}

#Menu li.item {
        width: 15%;
}
#Menu li.item:hover { text-decoration: underline; }

#Menu li.icon {
    width: 25%;
}

#Menu li.logout {
    float: right;
}

#Menu li.logout:hover { text-decoration: underline; }

#Menu a {
    text-decoration: none;
    color: aliceblue;
    height: 100%;
    width: 100%;
}

.menu-show {
    color: darkred;
}

#location {
    padding: 20px 0 20px 0;
}
#workspace {
    padding: 40px 0 0 0;
}

#sidebar {
    height: 100%;
    width: 25%;
    background-color: darkred;
    float: left;
}
#nav {
    width: 100%;
    background-color: darkred;
    height: 100%;
    text-align: center;
}

#nav h3:hover {
    text-decoration: underline;
    background-color: darkred;
}

#work {
    border-color: darkred;
    border-style: solid;
    width: 70%;
    padding: 10px;
    margin: 10px;
    border-width: 1px;
    float: right;
}

#video {
    width: 100%;
    margin: auto;
    display: block;
}

#add-video {
    width: 100%;
    margin: auto;
    display: block;
}

#slides {
    margin: auto;
    display: block;
    width: 90%;

}

#nav h3 {
    padding: 20px 0 20px 0;
    font-size: 120%;
    color: aliceblue;
    cursor: pointer;
}

#nav h4 {
    width: 100%;
    padding: 30px 0 30px 0;
    background-color: whitesmoke;


}
#nav h4 a {
    text-decoration: none;
    color: darkgray;
}

#nav h4 a:hover {
    color: #8C8C8C;
}

h5 {
    font-weight: 100;
}

#video_nav {
    margin: auto;
    width: 50%;
}

#video-buttons {
    width: 100%;
    margin-left: 0;

}

#video-buttons2 {
    width: 100%;
    margin-left: 0;

}

.video-buttons {
    background-color:darkred;
    border:white;
    color: whitesmoke;
    border-width: 1px;
    height: 20px;
    cursor: pointer;
    margin: auto;
    width: 50px;
}

.video-buttons:hover {
    opacity: 0.5;
}

.video-buttons-select {
    background-color:white;
    border:darkred;
    border-width: 1px;
    border-style: solid;
    color: darkred;
    cursor: pointer;
    margin: auto;
    width: 50px;
    height: 20px;
}
.bold {
    background-color: whitesmoke;
    color: darkred;
}

.show {
    background-color:darkred;
    border:white;
    color: whitesmoke;
    border-width: 1px;
    width: 90%;
    height: 20px;
    cursor: pointer;

}

#close {
    position: absolute;
    float: right;
    z-index: 10;
}
.close {
    background-color:darkred;
    border:white;
    color: whitesmoke;
    border-width: 1px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.show:hover {
    opacity:0.5;
}

.hide {
    background-color:white;
    border:darkred;
    border-width: 1px;
    border-style: solid;
    color: darkred;
    cursor: pointer;
}

.hide:hover {
    opacity:0.5;
}

#layout-selector {
    list-style-type: none;
    margin: 0;
    text-align: center;
    overflow: hidden;
    width: 100%;
}

#layout-selector ul {
    list-style: none;
}

#layout-selector li {
    float: left;
    width: 30%;

}

.mySlides {
    width: 100%;

}

.LoginSubmit {
    background-color: whitesmoke;
    color: darkred;
}

.slide-button {
    font-size: 200%;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border-color: darkred;
    color: darkred;
    background-color: white;
    text-align: center;
    float:left;
    cursor: pointer;
}

.slide-button:hover{
    opacity: 0.5;
}

#slide-buttons {
    margin: auto;
    display: block;
    width: 100%;
}


/* Editor stuff */

.editor-button {
    background-color:white;
    border:darkred;
    border-width: 1px;
    border-style: solid;
    width: 30%;
    color: darkred;
    cursor: pointer;
    float: right;
}

.editor-button:hover{
    font-weight: 500;
    border-width: 2px;
}

.editor-button a{
    text-decoration: none;
    color: darkred;
}



#editor
{
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
}

#section
{
    padding: 20px;
    margin: auto;
    width: 90%;
    border-style: solid;
    border-color: darkred;
    border-width: 1px;
    background-color: lightgrey;
    display: none;
}

canvas
{
    position: absolute;
    border-style: solid;
    border-color: darkred;
    border-width: 1px;
    margin-top: 10px;
    margin-left: 15px;

    /*background:url(example.png);*/
}

.img {
    margin: 10px auto 0;
    margin-left: 15px;
    z-index: 30;

}

#flashcard {
    align-content: center;
    margin: 10px auto 0px;
    display: block;
}
button
{
    outline: 0;
    border: 0;
    cursor: pointer;
}

#drawingTools
{
    width: 100%;
    margin: 0 auto;
}

#toolType
{
    width: 100%;
    height: 30px;
    margin: auto;
}

#toolType button
{
    width: 20%;
    margin-top: 10px;
    color: darkred;
    background-color: ghostwhite;
    border-style: solid;
    border-width: 1px;
    border-color: darkred;

}

#toolType button:hover {opacity: 0.5;}

#colors
{
    width: 100%;
    height: 20px;
}

#colors button
{
    width: 20%;
    height: 10px;
    margin-top: 5px;
    float: left;
}

#colors button:hover {opacity: 0.5;}

#black { background:black;}
#white { background:white;}
#red { background:indianred;}
#blue { background:dodgerblue;}
#green { background:mediumseagreen;}

#otherTools
{
    width: 100%;
    height: 60px;
    float: right;
    z-index: 100;
}

#otherTools button
{
    width: 100%;
    height: 30px;
    margin-top: 5px;
    background: #303030;
    color: white;
    font: 25px impact;
    cursor: pointer;
}
#otherTools button:hover { opacity: 0.5;}

#textinput {
    display: inline-block;
    width: 100%;
}

::-moz-selection{
    background-color:Transparent;
    color:#000;
    }

    ::selection {
    background-color:Transparent;
    color:#000;
    }

editor.css

* {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}
 *:focus {
     outline: none;
 }

body {
    background-color: white;
}
#Menu {
    z-index: 1;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    text-align: center;
    /*position: fixed;*/
    width: 100%;
    background-color: #333;
}

#Menu ul {
    list-style: none;
}
#Menu li {
    float: left;
    padding:10px;
    height: 20px;;
    font-family: sans-serif;
    background-color: #333;
    cursor: pointer;
}

#Menu li.item {
        width: 15%;
}
#Menu li.item:hover { text-decoration: underline; }

#Menu li.icon {
    width: 25%;
}

#Menu li.logout {
    float: right;
}

#Menu li.logout:hover { text-decoration: underline; }

#Menu a {
    text-decoration: none;
    color: aliceblue;
    height: 100%;
    width: 100%;
}

#Workspace {
    padding-top: 70px;
    padding-left: 30px;
    margin: 0 auto;
    background-color: whitesmoke;
}

button
{
    outline: 0;
    border: 0;
    cursor: pointer;
}
 #chapters {
     width: 40%;
     margin: auto;
 }

.chapter {
    padding: 20px 0px 20px 0px;
    font-size: 150%;
    color: white;
    background-color: darkred;
    margin: 0 auto;
    display: block;
    position: absolute;
    width: 100%;
}

.chapter:hover {
    opacity: 0.5;
}

.link {
    color: white;
    background-color: darkred;
    margin: 0 auto;
    padding: 20px 40px 20px 40px;
    cursor: pointer;

}


ul {
    list-style: none;
}


.delete {
    background-color: whitesmoke;
    color: darkred;
    position: absolute;
    float: right;
    padding: 3px 5px 3px 5px;
    border-style: solid;
    border-color: darkred;
    border-width: 1px;
}

#delete:hover {
    background-color: darkred;
    color: white;
}
#video-index {
    display: flex;
}

#video {
    width: 100%;
    display: block;

}
#vid-links {
    display: block;
    width: 100%;
}

#video-display {
    flex: 1;
    padding-left: 40px;
}

#Workspace {
    border-style: solid;
    border-color: darkred;
    border-width: 1px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 30px;
}

#slides-index {
    padding-top: 20px;
    display: flex;
}

.mySlides {
    width: 90%;
    display: block;
    flex: 1;
    padding-left: 40px;
}

input[type="file"] {
    display: none;
    cursor: pointer;
}

input[type="text"] {
  display: block;
  margin: 0;
  width: 95%;
  font-family: sans-serif;
  font-size: 18px;
  box-shadow: none;
  padding: 10px;
  border: none;
  border-bottom: solid 2px #c9c9c9;
  transition: border 0.3s;
}
input[type="text"]:focus {
  outline: none;
  border-bottom: solid 2px #969696;

}

input[type="submit"] {
    display: block;
    margin: 0;
    width: 100%;
    font-family: sans-serif;
    font-size: 18px;
    box-shadow: none;
    background-color: darkred;
    color: white;
    border-style: none;
    cursor: pointer;
}

input[type="submit"]:hover {
    opacity:0.5;
}

javascript

html

css

flask

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-03 05:54:49

我取出了到样式表的以下链接，它运行得很好：

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='editor.css') }}">

和

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51139183

复制

逻辑与(&&)、逻辑或(||)、按位与(&)、按位或(|)、按位异或(^)、按位取反(~)

https java 网络安全

运算符两边的表达式的值都为false运算结果为false，其余情况为true。

全栈程序员站长

2022/09/06

1.6K0

为什么补码是按位取反加一_补码为什么加1

编码二进制

首先，阅读这篇文章的你，肯定是一个在网上已经纠结了很久的读者，因为你查阅了所有你能查到的资料，然后他们都会很耐心的告诉你，补码：就是按位取反，然后加一。准确无误，毫无破绽。但是，你搜遍了所有俯拾即是而且准确无误的答案，却仍然选择来看这篇毫不起眼的文章，原因只有一个，只因为你还没有得到你想要的东西。

全栈程序员站长

2022/09/22

7071

mysql 按位取反_按位与,按位异或,按位取反「建议收藏」

php

PHP按位与或 (^ 、&)运算也是很常用的逻辑判断类型，有许多的PHP新手们或许对此并不太熟悉，今天结合一些代码对PHP与或运算做些介绍，先说明下，在PHP中，按位与主要是对二进制数操作：

全栈程序员站长

2022/09/22

2.3K0

按位与、按位异或、按位取反「建议收藏」

java https 网络安全

& 按位与 | 按位或 ^ 按位异或 1. 按位与运算按位与运算符”&”是双目运算符。其功能是参与运算的两数各对应的二进位相与。只有对应的两个二进位均为1时，结果位才为1 ，否则为0。参与运算的数以补码方式出现。例如：9&5可写算式如下： 00001001 (9的二进制补码)&00000101 (5的二进制补码) 00000001 (1的二进制补码)可见9&5=1。按位与运算通常用来对某些位清0或保留某些位。例如把a 的高八位清 0 ，保留低八位，可作 a&255 运算 ( 255 的二进制数为0000000011111111)。 main(){ int a=9,b=5,c; c=a&b; printf(“a=%d/nb=%d/nc=%d/n”,a,b,c); } 2. 按位或运算按位或运算符“|”是双目运算符。其功能是参与运算的两数各对应的二进位相或。只要对应的二个二进位有一个为1时，结果位就为1。参与运算的两个数均以补码出现。例如：9|5可写算式如下： 00001001|00000101 00001101 (十进制为13)可见9|5=13 main(){ int a=9,b=5,c; c=a|b; printf(“a=%d/nb=%d/nc=%d/n”,a,b,c); } 3. 按位异或运算按位异或运算符“^”是双目运算符。其功能是参与运算的两数各对应的二进位相异或，当两对应的二进位相异时，结果为1。参与运算数仍以补码出现，例如9^5可写成算式如下： 00001001^00000101 00001100 (十进制为12) main(){ int a=9; a=a^15; printf(“a=%d/n”,a); }

全栈程序员站长

2022/09/06

2.2K0

java按位取反运算符_java源码补码

java https 网络安全编程算法

一直纠结于位运算中的按位取反以及原码、反码、补码之间的各种关系，反正各种混淆各种懵逼。经过一小段时间才弄明白这个别人觉得很容易的问题。可能还是我基础不太好。

全栈程序员站长

2022/09/21

8100

按位取反~运算_按位与按位或按位异或运算符

https java 网络安全

这个过程没有任何问题，但是如果忘记了负数的二进制表达方式，就会对这个结果产生疑问，为什么11110110表示-10而不是503？理解按位取反的关键是理解11110110为什么表示-10，也就是负数的二进制表达方式。

全栈程序员站长

2022/09/22

1.7K0

C/运算符（按位与、按位或、按位异或）

int return stdio 博客二进制

运算规则：只有两个数的二进制同时为1，结果才为1，否则为0。（负数按补码形式参加按位与运算）

用户10788736

2023/10/16

2.1K0

按位取反运算符的运算举例_按位与按位或按位异或运算符

https 网络安全 java

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/170462.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/21

1.1K0

数字范围按位与

变量二进制算法压缩字符串

给你两个整数 left 和 right ，表示区间 [left, right] ，返回此区间内所有数字按位与的结果（包含 left 、right 端点）。

狼啸风云

2023/12/18

1220

位运算-补码那些事

next 二进制

原码：计算机中对数字的二进制定点表示方法，这种表示方法在数字前面加上一个符号位，“1”代表这个数是负数，“0”代表这个数是正数，除符号位之外，其余位表示该数字的值。（注意：如果明确定义为无符号整数，那么将不存在符号位，本文主要讲述的是有符号整数的情况）

玛卡bug卡

2022/09/21

9880

补码浮点数运算（设数的阶码为3位，尾数为6位（均不包括符号位）按机械补码浮点运算规则完成下列[x+y]补运算。）

题目描述：设数的阶码为3位，尾数为6位（均不包括符号位）按机械补码浮点运算规则完成下列[x+y]补运算。

GeekLiHua

2025/01/21

800

~按位取反_按位取反什么意思

网络安全 https java

二进制 0000 0000 0000 0000 0000 0000 0000 0000

全栈程序员站长

2022/09/21

1K0

反码补码和位运算

计算机

三者是计算机存储数据的不同形式，计算机用补码存储数据。而且计算机利用这三者可以用加法实现减法

晚上没宵夜

2020/04/24

6610

c语言中按位异或运算_c语言按位与怎么算

打包 ide https 网络安全

备注表达式可以是其他“与”表达式，或（遵循下面所述的类型限制）相等表达式、关系表达式、加法表达式、乘法表达式、指向成员的指针表达式、强制转换表达式、一元表达式、后缀表达式或主表达式。按位“与”运算符 (&) 会将第一操作数的每一位与第二操作数的相应位进行比较。如果两个位均为 1，则对应的结果位将设置为 1。否则，将对应的结果位设置为 0。按位“与”运算符的两个操作数必须为整型。算术转换中所述的常用算术转换将应用于操作数。 & 的运算符关键字

全栈程序员站长

2022/11/18

2.8K0

按位取反怎么运算_按位取反运算

java

要弄懂这个运算符的计算方法，首先必须明白二进制数在内存中的存放形式，二进制数在内存中是以补码的形式存放的。

全栈程序员站长

2022/08/03

2.1K0

按十进制位与运算

其他

方法1：对程序员来说最简单的是，让游戏策划把所有5级装备都配置在表格里，他们的解锁关卡都是10234567；

用户1396155

2018/08/02

5970

LeetCode 201. 数字范围按位与（位运算）

编程算法

给定范围 [m, n]，其中 0 <= m <= n <= 2147483647，返回此范围内所有数字的按位与（包含 m, n 两端点）。

Michael阿明

2020/07/13

1.1K0

[PHP] 按位与& 或| 异或^ 的日常使用

int 二进制

按位与: 0&0=0; 0&1=0; 1&0=0; 1&1=1; 按位或: 0|0=0； 0|1=1； 1|0=1； 1|1=1; 按位异或,在或的基础上1 1也为0: 0^0=0； 0^1=1； 1^0=1； 1^1=0；

唯一Chat

2019/09/10

1.1K0

按位取反操作_按位取反末尾加一

https java 网络安全

编程时： ~1 输出结果为 -2 ，~（-5）的输出结果为 4，很是疑惑，通过查阅资料终于明白。

全栈程序员站长

2022/09/21

9370

c++中按位取反_取反和按位取反

编程算法存储 https 网络安全

转载于:https://www.cnblogs.com/xrcun/archive/2012/12/01/2797061.html

全栈程序员站长

2022/09/21

1.4K0

相似问题

fstrim如何与dd交互？

dd写与读性能

dd“直接”与“无缓存”

1:1副本与dd

获取ls命令结果的补码。

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问尝试切换到对模板使用内嵌，但是格式设置一直很糟糕。
EN

回答 1

Stack Overflow用户

fstrim如何与dd交互？

dd写与读性能

dd“直接”与“无缓存”

1:1副本与dd

获取ls命令结果的补码。

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试切换到对模板使用内嵌，但是格式设置一直很糟糕。EN

回答 1

Stack Overflow用户

fstrim如何与dd交互？

dd写与读性能

dd“直接”与“无缓存”

1:1副本与dd

获取ls命令结果的补码。

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试切换到对模板使用内嵌，但是格式设置一直很糟糕。
EN