位置按钮材料设计
如何使用材质设计将按钮放置在图中所示的位置？
这是index.html模板上的代码。
<html>
<head>
{% load staticfiles %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="{% static 'img/book_icon.png' %}">
{% block title %}
<title>Bookstore</title>
{% endblock title %}
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="{% static "css/material.min.css" %}">
<link rel="stylesheet" href="{% static "css/styles.css" %}">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body>
<div class="demo-layout mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">
<header class="demo-header mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Bookstore</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search" />
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
</div>
</header>
<div class="demo-ribbon"></div>
<main class="demo-main mdl-layout__content">
<div class="demo-container mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<div class="demo-crumbs">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="add">
<i class="material-icons" role="presentation">add</i>
<span class="visuallyhidden">Add</span>
</button>
</div>
<!-- <div class="demo-crumbs mdl-color-text--grey-500">
Google > Material Design Lite > How to install MDL
</div> -->
<h3>Welcome to the Bookstore</h3>
<p>Bookstore App example.</p>
<h3>Bem vindo a Livraria</h3>
<p>Exemplo de uma aplicação de uma Livraria.</p>
</div>
</div>
<footer class="demo-footer mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<ul class="mdl-mini-footer--link-list">
<li><a href="#">Bookstore 2015</a></li>
</ul>
</div>
</footer>
</main>
</div>
<a href="https://github.com/google/material-design-lite/blob/master/templates/article/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">Fork on GitHub</a>
<script src="{% static "js/material.min.js" %}"></script>
</body>
</html>
这是材质设计的css样式。
.demo-ribbon {
width: 100%;
height: 40vh;
background-color: #3F51B5;
background: url(../img/background.jpg) no-repeat center center scroll;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.demo-main {
margin-top: -35vh;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.demo-header .mdl-layout__header-row {
padding-left: 40px;
}
.demo-container {
max-width: 1600px;
width: calc(100% - 16px);
margin: 0 auto;
}
.demo-content {
border-radius: 2px;
padding: 80px 56px;
margin-bottom: 80px;
}
.demo-layout.is-small-screen .demo-content {
padding: 40px 28px;
}
.demo-content h3 {
margin-top: 48px;
}
.demo-footer {
padding-left: 40px;
}
.demo-footer .mdl-mini-footer--link-list a {
font-size: 13px;
}
Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eusmod tempor incidunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exerition ullamco laboris nisi Ut aliquip ea commodo insulat.在审判无效的情况下,对被告的谴责是对被告的谴责,对被告的谴责是对被告的谴责,对被告的谴责是对被告的谴责,对被告的谴责是对被告的谴责,对被告的谴责是对被告的谴责,是对被告的谴责。Excepteur sint occaecat cupidatat non proident,sunt in culpa qui configutia deserunt mollit anim id est laborum.
共有1个答案
在保存晶圆厂的卡的CSS中，输入：
position: relative;
overflow: visible;
在晶圆厂的CSS中，输入：
position: absolute;
right: 5px;
top: -25px;
您可能需要为响应性做一些小的调整（我对web开发非常熟悉），但这会让您开始。
-
描述 (Description) 材质主题通过使用适当的类提供了许多要在应用程序中使用的按钮。 下表列出了Framework7中使用的材料主题按钮 - S.No 类型和描述 1 Usual/Flat Buttons 要使用平面按钮，请使用button类到输入按钮。 2 Buttons Row 要使用它，请使用带有class buttons-row元素包装按钮。 3 Raised Buttons 添
-
简单地说，我不想使用第三方库，我只想知道是否可以使用android支持库以及如何做到这一点。
-
问题内容： 我只是编写了一个代码（使用TKinter）创建一个窗口并显示一个工作按钮。 但是我想在这个按钮下面有多个按钮。 如何设置按钮的行和列？我尝试添加，但是那行不通。 谢谢 问题答案： Astynax是正确的。要遵循您给出的示例： 应该创建3行按钮。使用网格比使用包好得多。但是，如果在一个按钮上使用网格，而在另一按钮上使用网格，则将不起作用，并且会出现错误。
-
如何实现谷歌材料设计指南中描述的“凸起按钮”和“扁平按钮”？ 凸起的按钮为大多数平面布局增加了维度。他们强调 在工具栏和对话框中使用平面按钮，以避免过度分层。 资料来源：http://www.google.com/design/spec/components/buttons.html
-
我对材料设计的纽扣样式感到困惑。我想要得到彩色凸起的按钮，像在附加的链接。，像“强制停止”和“卸载”按钮下看到的用法部分。是否有可用的样式或我需要定义它们？ http://www.google.com/design/spec/components/buttons.html#按钮-用法 我找不到默认按钮样式。 示例： 如果我尝试通过添加 所有的样式都消失了，如触摸动画，阴影，圆角等。