Мне удалось создать биографическую карточку, а затем продублировать ее для нескольких карточек для курса в блоке, который я поддерживаю.Я фрезеровал несколько разных частей / частей кода, которые я хотел получить из разных источников, и результат ниже.
У меня проблема в том, что ... Я могу открыть только первые две карты.Я могу открыть Тома и Гарри ниже, но не Стива и Питера.
PS Единственный способ заставить карты выстроиться в отдельные ряды, это использовать код table
tr
и td
.Я также должен был создать собственный CSS для .p
и .ul
(то есть .p.ex1
и .ul.ex2
), потому что если бы я этого не сделал, он переопределил CSS для моей главной страницы и испортил вещи на моем сайте SP.
Я новичок в HTML, CSS и т. Д., Поэтому, пожалуйста, подробно объясните свой ответ, который может понять новичок :) Спасибо!
Буду признателен за любую помощь.
<!DOCTYPE html>
<html>
<head>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 200px;
margin: 20px;
text-align: center;
font-family: arial;
padding-bottom: 2px;
}
.name{
color:#800000;
font-size:24px;
font-family: segoe UI;
font-weight: bold;
display: inline;
}
.instructor {
color: #000;
font-size: 18px;
}
.categories {
color: #000;
font-size: 24px;
font-family: segoe UI;
font-weight: bold;
display: inline
}
p.ex1, ul.ex2 {
display: inline;
}
.MyButton {
border-top: 1px solid #c0c0c0;
background: #1c4168;
background: -webkit-gradient(linear, left top, left bottom, from(#1c4168), to(#1c4168));
background: -webkit-linear-gradient(top, #1c4168, #1c4168);
background: -moz-linear-gradient(top, #1c4168, #1c4168);
background: -ms-linear-gradient(top, #1c4168, #1c4168);
background: -o-linear-gradient(top, #1c4168, #1c4168);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #eccc13;
font-size: 13px;
font-weight: bold;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
margin-right: 8px;
}
.MyButton:hover {
border-top-color: #c0c0c0;
background: #c0c0c0;
color: #800000;
}
.MyButton:active {
border-top-color: #1b435e;
background: #1b435e;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="card">
<img src="#" alt="Tom" style="width:100%">
<p class="name">Tom</p>
<p class="instructor">Commander</p>
<div>
</div>
<p><button class=MyButton type=button onclick="openTom()">BIO</button></p>
<div style="display:none">
<div id="Tom">
<p class="ex1"><strong>Tom</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet velit id arcu molestie luctus. Suspendisse laoreet imperdiet nisl sit amet aliquam. Phasellus tempor est lectus, ac porttitor massa aliquet non. Integer elementum tellus erat, eget elementum lectus rhoncus id. Fusce leo lacus, rutrum eget metus id, pretium vestibulum ligula. Donec aliquam blandit cursus. Phasellus vel tellus elementum ex fermentum iaculis vel ut ipsum. Curabitur ut condimentum elit. Aenean posuere auctor velit, ac euismod neque accumsan non. Cras id elementum lorem. Vivamus ac leo vel tellus malesuada faucibus in quis purus. Mauris eget sagittis turpis, non malesuada lorem. Nam mattis, nibh id lacinia blandit, ante purus suscipit orci, id porta est lectus sit amet ex. </p><br></br>
<p class="ex1">Cras sodales gravida nisl vel vestibulum. Maecenas sit amet iaculis odio. Nullam quis dapibus nibh. Cras vitae turpis nec dui semper sagittis. Curabitur maximus, enim vitae pretium consequat, mauris nisl condimentum enim, sit amet aliquam nibh augue vitae mi. Morbi quis arcu id lectus vulputate vehicula eu non dui. Donec justo urna, suscipit nec tellus quis, venenatis pellentesque quam. Curabitur cursus tellus nulla, vitae scelerisque tellus pellentesque a. Sed auctor libero hendrerit ultricies accumsan. Nunc euismod arcu nec ipsum efficitur lobortis. Nunc vestibulum, nisl ut luctus vestibulum, nunc risus dapibus diam, eget ultrices elit diam nec augue. </p><br></br>
<p class="categories">EDUCATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">ASSIGNMENTS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">FLIGHT INFORMATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">MAJOR AWARDS AND DECORATIONS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul>
</div>
</div>
</td>
<td>
<div class="card">
<img src="#" alt="Harry" style="width:100%">
<p class="name">Harry</p>
<p class="instructor">Course Manager</p>
<div>
</div>
<p><button class=MyButton type=button onclick="openHarry()">BIO</button></p>
<div style="display:none">
<div id="Harry">
<p class="ex1"><strong>Harry</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet velit id arcu molestie luctus. Suspendisse laoreet imperdiet nisl sit amet aliquam. Phasellus tempor est lectus, ac porttitor massa aliquet non. Integer elementum tellus erat, eget elementum lectus rhoncus id. Fusce leo lacus, rutrum eget metus id, pretium vestibulum ligula. Donec aliquam blandit cursus. Phasellus vel tellus elementum ex fermentum iaculis vel ut ipsum. Curabitur ut condimentum elit. Aenean posuere auctor velit, ac euismod neque accumsan non. Cras id elementum lorem. Vivamus ac leo vel tellus malesuada faucibus in quis purus. Mauris eget sagittis turpis, non malesuada lorem. Nam mattis, nibh id lacinia blandit, ante purus suscipit orci, id porta est lectus sit amet ex. </p><br></br>
<p class="ex1">Cras sodales gravida nisl vel vestibulum. Maecenas sit amet iaculis odio. Nullam quis dapibus nibh. Cras vitae turpis nec dui semper sagittis. Curabitur maximus, enim vitae pretium consequat, mauris nisl condimentum enim, sit amet aliquam nibh augue vitae mi. Morbi quis arcu id lectus vulputate vehicula eu non dui. Donec justo urna, suscipit nec tellus quis, venenatis pellentesque quam. Curabitur cursus tellus nulla, vitae scelerisque tellus pellentesque a. Sed auctor libero hendrerit ultricies accumsan. Nunc euismod arcu nec ipsum efficitur lobortis. Nunc vestibulum, nisl ut luctus vestibulum, nunc risus dapibus diam, eget ultrices elit diam nec augue. </p><br></br>
<p class="categories">EDUCATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">ASSIGNMENTS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">FLIGHT INFORMATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">MAJOR AWARDS AND DECORATIONS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="card">
<img src="#" alt="Steve" style="width:100%">
<p class="name">Steve</p>
<p class="instructor">Instructor</p>
<div>
</div>
<p><button class=MyButton type=button onclick="openSteve()">BIO</button></p>
<div style="display:none">
<div id="Steve">
<p class="ex1"><strong>Steve</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet velit id arcu molestie luctus. Suspendisse laoreet imperdiet nisl sit amet aliquam. Phasellus tempor est lectus, ac porttitor massa aliquet non. Integer elementum tellus erat, eget elementum lectus rhoncus id. Fusce leo lacus, rutrum eget metus id, pretium vestibulum ligula. Donec aliquam blandit cursus. Phasellus vel tellus elementum ex fermentum iaculis vel ut ipsum. Curabitur ut condimentum elit. Aenean posuere auctor velit, ac euismod neque accumsan non. Cras id elementum lorem. Vivamus ac leo vel tellus malesuada faucibus in quis purus. Mauris eget sagittis turpis, non malesuada lorem. Nam mattis, nibh id lacinia blandit, ante purus suscipit orci, id porta est lectus sit amet ex. </p><br></br>
<p class="ex1">Cras sodales gravida nisl vel vestibulum. Maecenas sit amet iaculis odio. Nullam quis dapibus nibh. Cras vitae turpis nec dui semper sagittis. Curabitur maximus, enim vitae pretium consequat, mauris nisl condimentum enim, sit amet aliquam nibh augue vitae mi. Morbi quis arcu id lectus vulputate vehicula eu non dui. Donec justo urna, suscipit nec tellus quis, venenatis pellentesque quam. Curabitur cursus tellus nulla, vitae scelerisque tellus pellentesque a. Sed auctor libero hendrerit ultricies accumsan. Nunc euismod arcu nec ipsum efficitur lobortis. Nunc vestibulum, nisl ut luctus vestibulum, nunc risus dapibus diam, eget ultrices elit diam nec augue. </p><br></br>
<p class="categories">EDUCATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">ASSIGNMENTS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">FLIGHT INFORMATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">MAJOR AWARDS AND DECORATIONS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul>
</div>
</div>
</td>
<td>
<div class="card">
<img src="#" alt="Peter" style="width:100%">
<p class="name">Peter</p>
<p class="instructor">Instructor</p>
<div>
</div>
<p><button class=MyButton type=button onclick="openPeter()">BIO</button></p>
<div style="display:none">
<div id="Peter">
<p class="ex1"><strong>Peter</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet velit id arcu molestie luctus. Suspendisse laoreet imperdiet nisl sit amet aliquam. Phasellus tempor est lectus, ac porttitor massa aliquet non. Integer elementum tellus erat, eget elementum lectus rhoncus id. Fusce leo lacus, rutrum eget metus id, pretium vestibulum ligula. Donec aliquam blandit cursus. Phasellus vel tellus elementum ex fermentum iaculis vel ut ipsum. Curabitur ut condimentum elit. Aenean posuere auctor velit, ac euismod neque accumsan non. Cras id elementum lorem. Vivamus ac leo vel tellus malesuada faucibus in quis purus. Mauris eget sagittis turpis, non malesuada lorem. Nam mattis, nibh id lacinia blandit, ante purus suscipit orci, id porta est lectus sit amet ex. </p><br></br>
<p class="ex1">Cras sodales gravida nisl vel vestibulum. Maecenas sit amet iaculis odio. Nullam quis dapibus nibh. Cras vitae turpis nec dui semper sagittis. Curabitur maximus, enim vitae pretium consequat, mauris nisl condimentum enim, sit amet aliquam nibh augue vitae mi. Morbi quis arcu id lectus vulputate vehicula eu non dui. Donec justo urna, suscipit nec tellus quis, venenatis pellentesque quam. Curabitur cursus tellus nulla, vitae scelerisque tellus pellentesque a. Sed auctor libero hendrerit ultricies accumsan. Nunc euismod arcu nec ipsum efficitur lobortis. Nunc vestibulum, nisl ut luctus vestibulum, nunc risus dapibus diam, eget ultrices elit diam nec augue. </p><br></br>
<p class="categories">EDUCATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">ASSIGNMENTS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">FLIGHT INFORMATION:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul><br>
<p class="categories">MAJOR AWARDS AND DECORATIONS:</p>
<ul class="ex2">
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
<li>Cras sodales gravida nisl vel vestibulum.</li>
</ul>
</div>
</div>
</td>
</tr>
</table>
<script>
function openTom() {
var e = document.getElementById('Tom');
var options = {
title: "Tom",
width: 1000,
height: 500,
html: e.cloneNode(true)
};
SP.UI.ModalDialog.showModalDialog(options);
}
function openHarry() {
var e = document.getElementById('Harry');
var options = {
title: "Harry",
width: 1000,
height: 500,
html: e.cloneNode(true)
};
SP.UI.ModalDialog.showModalDialog(options);
}
function openSteve() {
var e = document.getElementById('Steve');
var options = {
title: "Steve",
width: 1000,
height: 500,
html: e.cloneNode(true)
};
SP.UI.ModalDialog.showModalDialog(options);
}
function openPeter() {
var e = document.getElementById('Peter');
var options = {
title: "Peter",
width: 1000,
height: 500,
html: e.cloneNode(true)
};
SP.UI.ModalDialog.showModalDialog(options);
}
</script>
</body>
</html>