css 响应式设计的标签
多个标签可实现出色的响应式设
index.css
/* Mobile Styles */
@media only screen and (max-width: 400px) {
}
/* Tablet Styles */
@media only screen and (max-width: 401px) and (max-width: 960px) {
}
/* Desktop Styles */
@media only screen and (max-width: 961px){
}
css CSS中的变量示例
<br/>在css中创建和使用变量的示例
index.css
body {
--my-background-color-variable: yellow;
--my-width-value: 100%;
}
div {
background-color: var(--my-background-color-variable);
width: var(--my-width-value);
}css 背景标签
index.css
* {
background-image: url(); // URL or NONE
background-position:50% 50%; // x y
background-size:50px; //length, %, auto, cover, contain
background-repeat:no-repeat; // repeat, repeat-x, repeat-y, no-repeat
background-color:orange; // color, transparent
background-attachment: ; // scroll, fixed
background-origin: ; // border-box, padding-box, content-box
background-clip: ; // length, %, border-box, padding-box, content-box, no-clip
}css 一些基本标签
以下是我们将在99％的项目中使用的一些基本标记
index.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color:gray;
border-style: dotted;
height: 50px;
width: 100%;
font-family: verdana;
color:white;
display: inline-block;
}css Filtros com JS puro
index.js
document.addEventListener("DOMContentLoaded", function() {
function $sel(el) {
return document.querySelector(el);
}
function $all(el) {
return document.querySelectorAll(el);
}
function filteringByBreakpoint() {
const phone = $all("[data-scenario='phone']");
const tablet = $all("[data-scenario='tablet']");
const desktop = $all("[data-scenario='desktop']");
const btnPhone = $sel(".phone");
const btnTablet = $sel(".tablet");
const btnDesktop = $sel(".desktop");
const btnAll = $sel(".all");
const buttons = [btnPhone, btnTablet, btnDesktop];
btnAll.addEventListener("click", () => {
[...phone, ...tablet, ...desktop].forEach(scenario => {
scenario.classList.remove("hide");
});
});
buttons.forEach(button => {
button.addEventListener("click", () => {
["phone", "tablet", "desktop"].forEach(breakpoint => {
filterScenarios(button, breakpoint, [
...phone,
...tablet,
...desktop
]);
});
});
});
function filterScenarios(button, scn, tgt) {
if (button.classList.contains(scn)) {
tgt.forEach(scenario => {
if (scenario.dataset.scenario === scn) {
if (scenario.classList.contains("hide"))
scenario.classList.toggle("hide");
} else {
if (!scenario.classList.contains("hide"))
scenario.classList.toggle("hide");
}
});
}
}
}
function searchScenarios() {
const divsAll = $all(".card");
const labels = $all(".card > .card-label");
const inputSearch = $sel(".header-container-search-input > input");
function initSearchInput(
inputSelector,
divRoot,
labelsTexts,
replaceText,
classHide,
inputLength
) {
inputSelector.addEventListener("input", event => {
if (event.target.value.length >= inputLength) {
labelsTexts.forEach(label => {
const textInput = event.target.value;
const labelText = replaceText
? label.innerText.replace("Página: ", "").trim()
: label;
const textInputMatchTextLabel = labelText
.toLowerCase()
.includes(textInput.toLowerCase());
const matchDivIsHide = $sel(
`[data-label="${labelText}"]`
).classList.contains(classHide);
if (textInputMatchTextLabel) {
if (matchDivIsHide)
$sel(`[data-label="${labelText}"]`).classList.toggle(
classHide
);
} else {
if (!matchDivIsHide)
$sel(`[data-label="${labelText}"]`).classList.toggle(
classHide
);
}
});
} else {
divRoot.forEach(div => {
div.classList.remove(classHide);
});
}
});
}
initSearchInput(inputSearch, divsAll, labels, "Página: ", "hide", 3);
}
filteringByBreakpoint();
searchScenarios();
});
index.html
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<head>
<title>Interface Report</title>
<meta charset="utf-8" />
<link rel="icon" href="favicon.png" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<!-- <script src="script.js" async></script> -->
</head>
<body>
<div id="root">
<div class="container">
<div class="header">
<div class="header-title">Interface report</div>
<div class="header-container-search">
<div class="header-container-search-buttons">
<button class="phone">Mobile</button>
<button class="tablet">Tablet</button>
<button class="desktop">Desktop</button>
<button class="all">Todos</button>
</div>
<div class="header-container-search-input">
<input type="text" />
<button type="submit">Buscar</button>
</div>
</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - phone"
>
<div class="card-label">Página: Enviar e-mail - phone</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img src="../reference/Enviar_e_mail-phone.png" alt="" />
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img src="../26_08_2019/Enviar_e_mail-phone.png" alt="" />
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img src="../test/Enviar_e_mail-phone.png" alt="" />
</div>
</div>
</div>
<div class="card-filename">filename: Enviar_e_mail-phone.png</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - Confirmação - phone"
>
<div class="card-label">
Página: Enviar e-mail - Confirmação - phone
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Confirma__o-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Confirma__o-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Confirma__o-phone.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Confirma__o-phone.png
</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - Erro Validação - phone"
>
<div class="card-label">
Página: Enviar e-mail - Erro Validação - phone
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Erro_Valida__o-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Erro_Valida__o-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Erro_Valida__o-phone.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Erro_Valida__o-phone.png
</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - Warning Validação - phone"
>
<div class="card-label">
Página: Enviar e-mail - Warning Validação - phone
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Warning_Valida__o-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Warning_Valida__o-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Warning_Valida__o-phone.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Warning_Valida__o-phone.png
</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - Anexo de imagens - phone"
>
<div class="card-label">
Página: Enviar e-mail - Anexo de imagens - phone
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_de_imagens-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_de_imagens-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_de_imagens-phone.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_de_imagens-phone.png
</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - Anexo de Doc - phone"
>
<div class="card-label">
Página: Enviar e-mail - Anexo de Doc - phone
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_de_Doc-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_de_Doc-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_de_Doc-phone.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_de_Doc-phone.png
</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - Anexo Erros - phone"
>
<div class="card-label">
Página: Enviar e-mail - Anexo Erros - phone
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_Erros-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_Erros-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_Erros-phone.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_Erros-phone.png
</div>
</div>
<div
class="card"
data-scenario="tablet"
data-label="Enviar e-mail - tablet"
>
<div class="card-label">Página: Enviar e-mail - tablet</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img src="../reference/Enviar_e_mail-tablet.png" alt="" />
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img src="../26_08_2019/Enviar_e_mail-tablet.png" alt="" />
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img src="../test/Enviar_e_mail-tablet.png" alt="" />
</div>
</div>
</div>
<div class="card-filename">filename: Enviar_e_mail-tablet.png</div>
</div>
<div
class="card"
data-scenario="tablet"
data-label="Enviar e-mail - Confirmação - tablet"
>
<div class="card-label">
Página: Enviar e-mail - Confirmação - tablet
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Confirma__o-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Confirma__o-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Confirma__o-tablet.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Confirma__o-tablet.png
</div>
</div>
<div
class="card"
data-scenario="tablet"
data-label="Enviar e-mail - Erro Validação - tablet"
>
<div class="card-label">
Página: Enviar e-mail - Erro Validação - tablet
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Erro_Valida__o-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Erro_Valida__o-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Erro_Valida__o-tablet.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Erro_Valida__o-tablet.png
</div>
</div>
<div
class="card"
data-scenario="tablet"
data-label="Enviar e-mail - Warning Validação - tablet"
>
<div class="card-label">
Página: Enviar e-mail - Warning Validação - tablet
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Warning_Valida__o-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Warning_Valida__o-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Warning_Valida__o-tablet.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Warning_Valida__o-tablet.png
</div>
</div>
<div
class="card"
data-scenario="tablet"
data-label="Enviar e-mail - Anexo de imagens - tablet"
>
<div class="card-label">
Página: Enviar e-mail - Anexo de imagens - tablet
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_de_imagens-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_de_imagens-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_de_imagens-tablet.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_de_imagens-tablet.png
</div>
</div>
<div
class="card"
data-scenario="tablet"
data-label="Enviar e-mail - Anexo Erros - tablet"
>
<div class="card-label">
Página: Enviar e-mail - Anexo Erros - tablet
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_Erros-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_Erros-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_Erros-tablet.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_Erros-tablet.png
</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - desktop"
>
<div class="card-label">Página: Enviar e-mail - desktop</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img src="../reference/Enviar_e_mail-desktop.png" alt="" />
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img src="../26_08_2019/Enviar_e_mail-desktop.png" alt="" />
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img src="../test/Enviar_e_mail-desktop.png" alt="" />
</div>
</div>
</div>
<div class="card-filename">filename: Enviar_e_mail-desktop.png</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - Confirmação - desktop"
>
<div class="card-label">
Página: Enviar e-mail - Confirmação - desktop
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Confirma__o-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Confirma__o-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Confirma__o-desktop.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Confirma__o-desktop.png
</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - Erro Validação - desktop"
>
<div class="card-label">
Página: Enviar e-mail - Erro Validação - desktop
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Erro_Valida__o-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Erro_Valida__o-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Erro_Valida__o-desktop.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Erro_Valida__o-desktop.png
</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - Warning Validação - desktop"
>
<div class="card-label">
Página: Enviar e-mail - Warning Validação - desktop
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Warning_Valida__o-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Warning_Valida__o-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Warning_Valida__o-desktop.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Warning_Valida__o-desktop.png
</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - Anexo de imagens - desktop"
>
<div class="card-label">
Página: Enviar e-mail - Anexo de imagens - desktop
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_de_imagens-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_de_imagens-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_de_imagens-desktop.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_de_imagens-desktop.png
</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - Anexo de Doc - desktop"
>
<div class="card-label">
Página: Enviar e-mail - Anexo de Doc - desktop
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_de_Doc-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_de_Doc-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_de_Doc-desktop.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_de_Doc-desktop.png
</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - Anexo Erros - desktop"
>
<div class="card-label">
Página: Enviar e-mail - Anexo Erros - desktop
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_Erros-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_Erros-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_Erros-desktop.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_Erros-desktop.png
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
index.css
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.hide{
display: none!important;
}
button.phone {
background: #00b8ff;
color: #096082;
}
button.tablet {
background: #1bb99a;
color: #0d6d5a;
}
button.desktop {
background: #a139ff;
color: #4e0392;
}
.header-container-search-buttons>* {
font-size: 1.3em;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #E2E7EA;
}
.card {
background: #fff;
border-radius: 5px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
display: flex;
flex: 1;
flex-direction: column;
margin: 20px 0;
padding: 15px 0;
}
.card-label {
color: #333333;
margin: 0 10px 10px;
padding: 5px 0px 10px;
/* text-transform: uppercase; */
border-bottom: 1px solid #333333;
}
.card-content {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
text-align: center;
}
.card-content>div {
margin: 10px;
}
.card-content-column-label {
color: #969696;
margin-bottom: 15px;
text-transform: uppercase;
}
.card-content-column-img{
border: 2px solid #e2e7ea;
border-radius: 4px;
}
.card-content-column-img img {
width: 100%;
}
.card-filename {
background: #e8f7d0;
border-radius: 4px;
color: #63901a;
margin: 0 10px;
padding: 5px 10px;
}
.container {
display: flex;
flex: 1;
flex-direction: column;
}
.header-container-search {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
}
.header-container-search-buttons {
display: flex;
flex: 1;
flex: 1;
flex-direction: row;
justify-content: space-evenly;
}
.header-container-search-buttons>* {
border: none;
border-radius: 4px;
flex: 1;
margin-right: 10px;
padding: 10px;
}
.header-container-search-input {
display: flex;
flex: 2;
justify-content: flex-start;
}
.header-container-search-input>button {
background: #b0e1ff;
border: none;
border-radius: 4px;
color: #2a84bb;
}
.header-container-search-input>input {
border: none;
border-radius: 4px;
flex-basis: 100%;
margin-right: 10px;
}
.header-title {
display: flex;
justify-content: center;
font-size: 2em;
margin-bottom: 20px;
margin-top: 10px;
}
button {
cursor: pointer;
}
button.all {
background: #fff;
}
button.failed {
background: #fd685d;
color: #fff;
}
button.passed {
background: #8BC34A;
color: #fff;
}
div#root {
display: flex;
justify-content: center;
margin: 0 auto;
width: 95%;
}css CSS响应
style.css
/* Large desktop */
@media (min-width: 1200px) {
/* Estilos para un tamaño superior de 1200px */
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
/* Estilos para un tamaño superior de 768px y menor 979px */
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
/* Estilos para un tamaño menores de 767px */
}
/* Landscape phones and down */
@media (max-width: 480px) {
/* Estilos para un tamaño menores de 480px */
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Estilos para un tamaño superior de 320px y menor 480px */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Estilos para un tamaño superior de 321px */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Estilos para un tamaño menores de 320px */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Estilos para un tamaño superior de 768px y menor 1024px */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Estilos para un tamaño superior de 768px y menor 1024px horizontal */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Estilos para un tamaño superior de 768px y menor 979px vertical*/
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Estilos para un tamaño superior de 1224px */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Estilos para un tamaño superior de 1824px */
}
/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) { }css Posicion Absoluta Centrada
style.css
.elemento {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}css 响应式Circulo CSS
index.html
<div class="circle-text"><div>I'm a Circle!</div></div>
style.css
.circle {
width: 50%;
height:0;
padding-bottom: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #4679BD;
}
// Opcion con texto dentro
.circle-text {
width:50%;
}
.circle-text:after {
content: "";
display: block;
width: 100%;
height:0;
padding-bottom: 100%;
background: #4679BD;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle-text div {
float:left;
width:100%;
padding-top:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:white;
}css Efecto Animado标题（Kern-burns）
index.html
<h1><small>Fullscreen</small> Ken Burns efecto <small>sin javascript</small></h1>
<!-- Puede agregar mas ".slideshow-image" elementos, pero recuerde actualizar la variable SCSS "$items" -->
<div class="slideshow">
<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x1400')"></div>
<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/buildings/1600x1400')"></div>
<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/food/1600x1400')"></div>
<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/technology/1600x1400')"></div>
</div>
style.css
slideshow {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slideshow-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
-webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 16s;
animation-duration: 16s;
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
-webkit-animation-name: kenburns-1;
animation-name: kenburns-1;
z-index: 3;
}
.slideshow-image:nth-child(2) {
-webkit-animation-name: kenburns-2;
animation-name: kenburns-2;
z-index: 2;
}
.slideshow-image:nth-child(3) {
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
z-index: 1;
}
.slideshow-image:nth-child(4) {
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4;
z-index: 0;
}
@-webkit-keyframes kenburns-1 {
0% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
98.4375% {
opacity: 0;
-webkit-transform: scale(1.21176);
transform: scale(1.21176);
}
100% {
opacity: 1;
}
}
@keyframes kenburns-1 {
0% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
1.5625% {
opacity: 1;
}
23.4375% {
opacity: 1;
}
26.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
98.4375% {
opacity: 0;
-webkit-transform: scale(1.21176);
transform: scale(1.21176);
}
100% {
opacity: 1;
}
}
@-webkit-keyframes kenburns-2 {
23.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes kenburns-2 {
23.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
26.5625% {
opacity: 1;
}
48.4375% {
opacity: 1;
}
51.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-3 {
48.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes kenburns-3 {
48.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
51.5625% {
opacity: 1;
}
73.4375% {
opacity: 1;
}
76.5625% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes kenburns-4 {
73.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns-4 {
73.4375% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
76.5625% {
opacity: 1;
}
98.4375% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
//SCSS
$items: 4;
$animation-time: 4s;
$transition-time: .5s;
$scale: 20%;
$total-time: ($animation-time * $items);
$scale-base-1: (1 + $scale / 100%);
.slideshow {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slideshow-image {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% 50%;
background-size: cover;
animation-name: kenburns;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: $total-time;
opacity: 1;
transform: scale($scale-base-1);
@for $i from 1 through $items {
&:nth-child(#{$i}) {
animation-name: kenburns-#{$i};
z-index: ($items - $i);
}
}
}
@for $i from 1 through $items {
@keyframes kenburns-#{$i} {
$animation-time-percent: percentage($animation-time / $total-time);
$transition-time-percent: percentage($transition-time / $total-time);
$t1: ($animation-time-percent * ($i - 1) - $transition-time-percent / 2);
$t2: ($animation-time-percent * ($i - 1) + $transition-time-percent / 2);
@if($t1 < 0%) { $t1: 0%; }
@if($t2 < 0%) { $t2: 0%; }
$t3: ($animation-time-percent * ($i) - $transition-time-percent / 2);
$t4: ($animation-time-percent * ($i) + $transition-time-percent / 2);
@if($t3 > 100%) { $t3: 100%; }
@if($t4 > 100%) { $t4: 100%; }
$t5: (100% - $transition-time-percent / 2);
$t6: (($t4 - $t1) * 100% / $t5);
#{$t1} { opacity: 1; transform: scale($scale-base-1); }
#{$t2} { opacity: 1; }
#{$t3} { opacity: 1; }
#{$t4} { opacity: 0; transform: scale(1); }
@if($i != $items) {
100% { opacity: 0; transform: scale($scale-base-1); }
}
@if($i == 1) {
$scale-plus: ($scale * (100% - $t5) / $t4);
$scale-plus-base-1: (1 + ($scale + $scale-plus) / 100%);
#{$t5} { opacity: 0; transform: scale($scale-plus-base-1); }
100% { opacity: 1; }
}
}
}
// Presentational stuff
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
z-index: 99;
text-align: center;
font-family: Raleway, sans-serif;
font-weight: 300;
text-transform: uppercase;
background-color: rgba(255,255,255,.75);
box-shadow: 0 1em 2em -1em rgba(0,0,0,.5);
padding: 1em 2em;
line-height: 1.5;
small {
display: block;
text-transform: lowercase;
font-size: .7em;
&:first-child {
border-bottom: 1px solid rgba(0,0,0,.25);
padding-bottom: .5em;
}
&:last-child {
border-top: 1px solid rgba(0,0,0,.25);
padding-top: .5em;
}
}
}
css Div en Diagonal
index.html
<div class="parent">
<div class="child">
<h1>This is a heading</h1>
<p>This is a sub-heading</p>
<p><a href="http://stackoverflow.com/questions/22352311/how-do-i-draw-a-diagonal-div/22352383#22352383">
How do I draw a Diagonal div?
</a>
</p>
</div>
</div>
style.css
.parent {
background-color: skyblue;
margin-top: 50px;
padding: 5% 20px; /* Added a percentage value for top/bottom padding to keep the wrapper inside of the parent */
-webkit-transform: skewY(-5deg);
-moz-transform: skewY(-5deg);
-ms-transform: skewY(-5deg);
-o-transform: skewY(-5deg);
transform: skewY(-5deg);
}
.parent > .child {
-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform: skewY(5deg);
transform: skewY(5deg);
}