Вопрос по верстке, а скорее по языку java
Как выполнить задачу что бы дублировалось не слова, а блоки с дизайном на html, css, java? и что бы в этих блоках можно было писать. Стоит задача сделать дорожную карту, не долго думая, я решил сделать альтернативу создания на кнопку допустим блока. В фото показано. Подробнее если, то там есть фигура сделана на html и css и можно вписывать туда свою информацию.
function doNew(){
let div = document.createElement('div')
var innerHtml = "";
div.innerHTML = "block";
document.getElementById("cont").append(div);
}
div{
border:1px solid #ccc
padding : 10px;
margin:5px;
width : 120px;
display:inline-block
}
#cont{
border:0;
width:100%
}
.block{
margin: 0;
text-align: center;
height: 250px;
width: 200px;
padding: 20px 40px;
background: #968089; /* фон рамки */
font-size: 20px; /* размер шрифта */
border: 2px dashed #e3c3d4; /* размер, форма и цвет рамки */
border-radius: 10px; /* радиус скругления углов рамки */
box-shadow: 0 0 0 4px #968089, 2px 1px 6px 4px rgba(150, 128, 137, 0.5); /* смещение, размер и цвет тени рамки*/
color: #fff;
font-family: 'Lato', sans-serif;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/main.js"></script>
<title>Проба</title>
</head>
<body>
<div id="cont">
<div class="block">График работы </div>
</div>
<button onclick="doNew()">Ещё</button>
<div class="block">
BIM/ТИМ
</div>
</body>
</html>
Ответы (1 шт):
Автор решения: HTO HOT
→ Ссылка
Вы не добавляете класс к новому блоку. И не java ,а javascript.
function doNew(){
let div = document.createElement('div')
div.innerHTML = "Какой-то блок";
div.classList.add('block')
document.getElementById("cont").append(div);
}
div{
border:1px solid #ccc
padding : 10px;
margin:5px;
width : 120px;
display:inline-block
}
#cont{
border:0;
width:100%
}
.block{
margin: 0;
text-align: center;
height: 250px;
width: 200px;
padding: 20px 40px;
background: #968089; /* фон рамки */
font-size: 20px; /* размер шрифта */
border: 2px dashed #e3c3d4; /* размер, форма и цвет рамки */
border-radius: 10px; /* радиус скругления углов рамки */
box-shadow: 0 0 0 4px #968089, 2px 1px 6px 4px rgba(150, 128, 137, 0.5); /* смещение, размер и цвет тени рамки*/
color: #fff;
font-family: 'Lato', sans-serif;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/main.js"></script>
<title>Проба</title>
</head>
<body>
<div id="cont">
<div class="block">График работы </div>
</div>
<button onclick="doNew()">Ещё</button>
<div class="block">
BIM/ТИМ
</div>
</body>
</html>