Существует ли симпатичный принтер для данных Python?
Как и предположил Сри, теперь все прекрасно работает. левая и правая сторона, от которой я не могу избавиться. Но когда я отключаю Bootstrap, все хорошо. Это не проблема, но любопытно, что является причиной этой загрузки Bootstrap?
Полная версия с Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register Me</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/main.css" />
<script rel="preload" src="./js/anime.js"></script>
</head>
<body>
<div class="container">
<div class="item f1" style="background: red"></div>
<div class="item f2">
<div class="img"></div>
<button class="btn">
<div class="sI">Sign In</div>
</button>
</div>
<div class="item f3" style="background: blue"></div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
CSS:
html,
body {
width: 100vw;
height: 100vh;
overflow: hidden;
background: #d63d3d;
}
.container {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 90%;
width: 90%;
z-index: 10;
}
.item {
height: 100%;
position: relative;
overflow: hidden;
}
.item .cA,
.item .lI {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.img::before {
background-image: url("https://davidcrew.files.wordpress.com/2010/01/wallpaper-177057.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
position: fixed;
content: '';
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -9999;
will-change: transform;
}
.f1 {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.f2 {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.f3 {
-webkit-box-flex: 1.5;
-ms-flex-positive: 1.5;
flex-grow: 1.5;
}
.btn {
position: absolute;
width: 50%;
height: 70px;
top: 80%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #444;
}
JS:
var start = anime.timeline({
easing: 'easeInOutSine',
autoplay: false,
duration: 450
});
start
.add({
targets: '.f3',
flexGrow: '0'
})
.add({
targets: '.f1',
flexGrow: '1.5'
});
document.querySelector('.btn').onclick = function() {
start.play();
if (start.began) {
start.reverse();
}
};
Обновление: добавление отступов: 0; решена. Мне просто нужно было добавить это в нужном месте, которое в данном случае было .container
4 ответа
from pprint import pprint
a = [0, 1, ['a', 'b', 'c'], 2, 3, 4]
pprint(a)
Примечание, что для короткого списка как мой пример, печать на самом деле распечатает все это на одной строке. Однако для более сложных структур это делает довольно хорошее задание симпатичных данных печати.
В дополнение к pprint.pprint, pprint.pformat действительно полезно для того, чтобы сделать читаемым __repr__ с. Мой комплекс __repr__ с обычно похож так:
def __repr__(self):
from pprint import pformat
return "<ClassName %s>" % pformat({"attrs":self.attrs,
"that_i":self.that_i,
"care_about":self.care_about})
Somtimes YAML может быть хорош для этого.
import yaml
a = [0, 1, ['a', 'b', 'c'], 2, 3, 4]
print yaml.dump(a)
Производит:
- 0
- 1
- [a, b, c]
- 2
- 3
- 4
Другой хороший вариант состоит в том, чтобы использовать IPython, который является интерактивной средой с большим количеством дополнительных функций, включая автоматическую симпатичную печать, заполнение клавишей Tab методов, легкого доступа оболочки, и многое другое. Также очень легко установить.
IPython