小编sim*_*cci的帖子
如何自动将文本框设置为大写？
我使用以下样式属性将用户输入设置为大写,以便当用户开始在文本框中键入时railway,应该将其更改为大写字母,RAILWAY 而无需用户按下Caps-lock按钮.
这是我用于输入的代码:
<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>
但是我没有通过使用此属性获得所需的输出.
推荐指数
解决办法
查看次数
在CSS FlexBox布局中自动调整图像大小并保持宽高比？
我使用了CSS弹性框布局,如下所示:
如果屏幕变小,它会变成这样:
问题是图像没有调整大小,保持与原始图像的纵横比.
是否可以使用纯CSS和弹性框布局,以便在屏幕变小时调整图像大小？
这是我的HTML:
<div class="content">
<div class="row">
<div class="cell">
<img src="http://i.imgur.com/OUla6mK.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
</div>
</div>
我的CSS:
.content {
background-color: yellow;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
background-color: red;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 …推荐指数
解决办法
查看次数
为什么媒体查询的顺序在CSS中很重要？
最近,我一直在设计响应更快的网站,而且我经常使用CSS媒体查询.我注意到的一种模式是定义媒体查询的顺序实际上很重要.我没有在每个浏览器中测试它,只是在Chrome上测试.这种行为有解释吗？有时,当您的网站无法正常工作时会感到沮丧,并且您不确定它是查询还是查询的编写顺序.
这是一个例子:
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two"><a href="#">Contact us</a></div>
</body>
CSS:
body{
font-size:1em; /* 16px */
}
.two{margin-top:2em;}
/* Media Queries */
@media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
@media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;} …推荐指数
解决办法
查看次数
Flask app中的常见文件夹/文件结构
我刚刚创建了一个烧瓶应用程序,到目前为止我有一个路由器用于我的"Hello world!" 模板.
我想添加一些(很多)更多功能,但我想知道我应该如何构建app目录.
构建Flask应用程序最常用的方法是什么？例如,我应该为我的routes.py所有路线创建一个吗？SQLAlchemy的东西在哪里？模特应该在models.py吗？
推荐指数
解决办法
查看次数
将表单数据传递到另一个HTML页面
我有两个HTML页面:form.html和display.html.在form.html中,有一个表单:
<form action="display.html">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
表单数据将发送到display.html.我想serialNumber在display.html中显示和使用表单数据,如下所示:
<body>
<div id="write">
<p>The serial number is: </p>
</div>
<script>
function show() {
document.getElementById("write").innerHTML = serialNumber;
}
</script>
</body>
那么我如何将serialNumber变量从form.html传递给display.html,以便display.html中的上述代码显示序列号,而JavaScript函数show()serialNumber从第一个HTML中获取？
推荐指数
解决办法
查看次数
在jinja2模板中创建指向Flask应用程序URL的链接
在我的Flask应用程序中,我有一个显示帖子的视图
@post_blueprint.route('/post/<int:year>/<int:month>/<title>')
def get_post(year,month,title):
# My code
要显示最后10个条目,我有以下视图:
@post_blueprint.route('/posts/')
def get_all_posts():
# My code
return render_template('p.html',posts=posts)
现在,当我显示最后10个帖子时,我想将帖子的标题转换为超链接.目前我必须在我的jinja模板中执行以下操作来实现此目的:
<a href="/post/{{year}}/{{month}}/{{title}}">{{title}}</a>
有没有办法避免硬编码网址？
就像url_for用于创建Flask网址的函数一样:
url_for('view_name',**arguments)
我试过寻找一个,但我,我找不到它.
推荐指数
解决办法
查看次数
在jinja2模板上使用css样式表
我正在使用html,css,flask和jinja2创建一个网站.
我有一个页面在烧瓶服务器上工作,显示按钮和标签等,但我没有加载我的CSS样式表.
如何将样式表链接到jinja2模板.我在互联网上环顾四周,但无法找到方法.
这是css样式表链接; 我应该改变这个,还是python代码？
<link rel="stylesheet" type="text/css" href="styles.css">
这是我的烧瓶代码:
@app.route('/')
def resultstemplate():
return render_template('questions.html', head='Welcome!')
这是文件的位置:
/python-code.py
/templates/template.html
/templates/styles.css
推荐指数
解决办法
查看次数
无需拉伸即可完全填充图像
我有各种尺寸的大图像,需要在两个维度上完全填充240px的300px容器.这是我现在得到的,只适用于一个方面:
HTML
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}
比例应该保持不变.基本上,应该在宽度上切除宽图像,而在高度上需要切断高图像.因此,只需放大填充容器所需的数量即可.
不知道为什么我不能让它工作,我需要JavaScript吗？
编辑:要清楚.在小提琴上我需要一切红色.进来的图像是动态的,因此我无法使用背景图像.我愿意使用JavaScript.谢谢!:)
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何在PostgreSQL中自动增加？
我有一张桌子登录.它有字段排名,用户名和密码.
我希望排名字段值相对于用户名和密码的添加自动递增.
我如何在PostgreSQL中执行此操作？
推荐指数
解决办法
查看次数