Повторное использование фигур CSS

ProgramBox

Повторное использование фигур CSS

Post author:admin
Запись опубликована:4 мая, 2023
Post category:Вопросы по программированию

#html #css #css-shapes

#HTML #css #css-фигуры

Вопрос:

Я новичок в CSS и HTML. При создании фигуры CSS ее положение определяется в реальном коде CSS. При использовании фигуры в HTML, есть ли способ, которым я могу изменить позицию, чтобы я мог повторно использовать одну и ту же фигуру с разными атрибутами позиции вместо того, чтобы объявлять другую фигуру CSS для каждой новой позиции?

 .navbutton {
    position: fixed;
    left: 0em;
    top: 8em;
    width: 33%;
    height: 1.75em;
    background: red;
    color: black;
    font-size: 1.5em;
    text-align: center;
    padding-top: 0.5em;
}

Если бы я должен был сделать несколько навигационных кнопок рядом друг с другом, используя эту, как бы я это сделал?

Спасибо.

О, и я не знаю никакого другого веб-языка (Javascript, PHP и т.д.).

Ответ №1:

Да, вы можете увидеть эту ссылку: ReuseCSSnavButton

ЭТА ССЫЛКА ДЛЯ 3 КНОПОК ТРИ ССЫЛКИ

HTML

  <div class="navbutton">first</div>
<div class="navbutton">second</div>
<div class="navbutton">third</div>
<div class="navbutton">fourth</div>

css

 .navbutton {
position: relative;
float:left;
width: 100px;
height: 40px;
background: red;
color: black;
font-size: 1.5em;
text-align: center;
padding-top: 0.5em;
margin-right: 0.5em;

}

1. По-моему, он сказал, что хотел, чтобы это было 33%… если я не ошибаюсь.

2. Спасибо! Я не знал о float.

3. наслаждайтесь! Мир! Продолжайте поддерживать! Голосование!

4. Как я могу добавить пробел между каждой кнопкой, чтобы они не соприкасались? Есть три кнопки, и я пытаюсь поместить пробел в 1% между первой второй и второй третьей.

5. ИСПОЛЬЗУЙТЕ ПОЛЯ СПРАВА В ПРОЦЕНТАХ ДЛЯ КАЖДОЙ

Ответ №2:

Поскольку в навигаторе могут быть разные цифровые кнопки в зависимости от вида, в котором вы находитесь, я рекомендую вам взять ширину из класса button. Что-то вроде этого (пример) CSS

 .navbutton {
    height: 1.75em;
    background: red;
    color: black;
    font-size: 1.5em;
    text-align: center;
    padding-top: 0.5em;
    float:left;
}
.size-4buttons div
{
    width:25%;
}

HTML

 <nav class="size-4buttons">
    <div class="navbutton">Button 1</div>
    <div class="navbutton">Button 2</div>
    <div class="navbutton">Button 3</div>
    <div class="navbutton">Button 4</div>
</nav>

Ответ №3:

Вы можете определить несколько html-элементов с помощью класса .navbutton, а затем индивидуально задать их положение, используя встроенный атрибут стиля, например:

 <div class="navbutton" style="left:  5px; top: 20px;"></div>
<div class="navbutton" style="left: 20px; top:  5px;"></div>
<div class="navbutton" style="left:  8px; top: 13px;"></div>

Если вы хотите, чтобы навигационные кнопки отображались рядом друг с другом, вы можете поместить их в контейнер следующим образом:

 <div class="navbutton-container">
    <div class="navbutton">Button 1</div>
    <div class="navbutton">Button 2</div>
    <div class="navbutton">Button 3</div>
    <div class="navbutton">Button 4</div>
</div>

Затем пусть каждая кнопка плавает слева, что будет отображать их рядом друг с другом, и пусть они переносятся на следующую строку, если они превышают размер контейнера.

 .navbutton-container {
    position: fixed;
    left: 0em;
    top: 8em;
    width: 100%;
}

.navbutton {
    float: left;
    width: 33%;
    height: 1.75em;
    background: red;
    color: black;
    font-size: 1.5em;
    text-align: center;
    padding-top: 0.5em;
}

Вот JSFiddle, показывающий результат:http://jsfiddle.net/sarathijh/mw96Q

Ответ №4:

position: fixed нарушит ваш поток.

Попробуйте что-то подобное вместо этого:

 .navbutton {
    position:relative;
    float:left;
    left: 0em;
    top: 8em;
    width: 33%;
    height: 1.75em;
    background: red;
    color: black;
    font-size: 1.5em;
    text-align: center;
    padding-top: 0.5em;
}

http://jsfiddle.net/jnbS5/2/

3 объекта одинаковой формы рядом 🙂

Добавьте поле, если вы хотите сделать разрыв между ними.

http://jsfiddle.net/jnbS5/1/