Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Другие темы раздела
HTML, CSS Не могу понять где ошибка, при верстке сайта И снова Здравствуйте, Камрады. Нужна ваша помощь, не могу понять почему не работает блок, помогите найти ошибку. При уменьшении размера окна, должна появляться иконка с выводом меню при клике.... https://www.cyberforum.ru/ html/ thread2558982.html Как определить сколько было загруженно информации(байт) из интернета, при загрузке веб страницы? HTML, CSS
Возможно это как то можно сделать через какой отладчик в браузере?
HTML, CSS Как нарисовать более красивую рамку Всем доброго дня! Я новичок в данной сфере, поэтому не ругайте сильно) У меня такая задачка, выводить циклом рамки, с циклом все ок, а вот как нарисовать более приятную для глаз рамку, не могу... https://www.cyberforum.ru/ html/ thread2558978.html HTML, CSS Никак не пойму, как избавиться от пространства справа) https://www.cyberforum.ru/ html/ thread2558967.html
После того, как пропишу мета тег <meta name="viewport" content="width=device-width, initial-scale=1">, то на сайте при смене разрешения ( т.е. я нажимаю "посмотреть код элемента" и выбираю сверху...
HTML, CSS Исчезает блок справа
Доброго времени суток, во время изучения языков HTML, CSS, JS(он не касается этой проблемы) и PHP(он не касается этой проблемы) у меня возникла проблема. Я делал каркас для сайта и при тесте заметил...
HTML, CSS Что тут не так? https://www.cyberforum.ru/ html/ thread2558931.html
Необходимо перенести данные с одного сайта на страницу другого с помощью API Почему скрипт не работает? <script> let temp = document.getElementsByTagName("temp"); setInterval(() =>{...
HTML, CSS Объединить несколько версий bootstrap в одной странице https://www.cyberforum.ru/ html/ thread2558879.html
Всем привет,появилась задача создать сайт,в котором основное,это код на php,но нужен хоть какой-нибудь дизайн,решено было взять bootstrap. Вот взял готовый шаблон,изменил под себя,все хорошо,теперь...
Работа с grid, сетка HTML, CSS
В данный момент есть 2 блока, левый и правый, в них дочерние блоки. Задача в том, чтобы убрать разделение на левый и правый блок и все дочерние блоки вынести в один родительский блок и при этом...
HTML, CSS Почему мой Div не находиться в середине страницы <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta... https://www.cyberforum.ru/ html/ thread2558634.html HTML, CSS Неправильное позиционирование контента Я на сайте сделал tabs , javascript код по идее работает , но позиционирование контента неправильное . Контент не находится в табах как бы , а просто статично есть на сайте при любом табе . Прошу... https://www.cyberforum.ru/ html/ thread2558572.html
Кодировка сайта. Как выставить верно? HTML, CSS
Добрый день! Есть сайт. Страниц хватает, потому меню размещено в отдельном файле .htm. Вставляется на страницу оно через $(function() { $('#menu').load('./menu.htm') }). Были попытки переделать под...
HTML, CSS Зачем такие имена у полей? Только что в чужой вёрстке увидела, что имена у полей имеют вид name="SubscriptionForm" Объясните пожалуйста, для чего так делают? зачем это SubscriptionForm у всех имён? <div class="row">... https://www.cyberforum.ru/ html/ thread2558198.html
238 / 161 / 67
Регистрация: 18.06.2016
Сообщений: 509
24.12.2019, 12:37 0

Создание выпадающего подпункта в меню - HTML, CSS - Ответ 14124173

24.12.2019, 12:37. Показов 832. Ответов 2
Метки (Все метки)

Ответ

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">
    <title>Главная</title>
</head>
   
   <body>
        
         <div class="logo">
             <a href="index.html"><img class="graficlogo" src="assets/images/3d-logo.jpg" alt="логотип" id="anc"></a>
         </div>
         
       <header>
                  <nav>
                      <ul>
                          <li><a href="#">Главная</a></li>
                          <li class="drop"><a href="history.html">Введение в тему</a>
                              <ul class="dropdown">
                                  <li><a href="history.html">Компьютерная графика в наши дни</a>
                                  <li><a href="history_2.html">История развития</a>
                                  <li><a href="history_3.html">от "Альбома" к мультипликации"</a>
                              </ul>
                          </li>
                          <li><a href="technology.html">Технологии 3D графики</a>
                          <li><a href="#">Карта сайта</a></li>
                          <li><a href="#">Глоссарий</a>
                          <li><a href="frame_my.html">Об авторе</a></li>
                      </ul>
                  </nav>
       </header>
           
           <div class="content">
                <h2>Технологии реализации 3D графики при разработке компьютерных игр - обзор.</h2>
          <p> В своем обзоре «Технологии реализации 3D графики при разработке компьютерных игр», я постараюсь объяснить на простых примерах из игровой индустрии, к каким решениям приходят разработчики, чтобы внедрить в свои проекты передовые технологии реализации трехмерной графики. Что представляют из себя данные технологии и каких усилий стоит внедрение самых передовых технологий 3D графики в свои проекты разработчикам.
          </p>
          
          <img src="assets/images/page_1.jpg" alt="картинка_1" class="page_1">
          
          <p>
              Реализация технологий, создание игровой графики,  художественное оформление игры – один из важнейших моментов процесса разработки. На это уходит львиная доля бюджета игры, а сама графика в значительной степени определяет то, что называется «атмосферой игры». Кроме того, хорошая графика – это еще и одно из условий успешных продаж: вспомните броскую рекламу в журналах, построенную на реальной внутриигровой графике, скриншоты в Интернете и на коробках с играми.
          </p>
          
          <p>
              Понятие «игровая графика» и ее технологии включает в себя так называемый концепт-арт, то есть эскизы и наброски, во многом определяющие то, как игра будет выглядеть, и собственно компьютерную – внутриигровую – графику. Современный мир уже не может обходиться без компьютерной графики. Она движется и развивается очень быстро и стремительно. И возможно в скором будущем мы станем свидетелями того, как жизнь по ту сторону экрана, которая стремительно развивается благодаря современным технология, достигнет того уровня, что отличить ее от реальной жизни, станет невозможно. 
          </p>
           </div>
           
           <footer>
                   <h3>О сайте</h3>
                   <p>
                       Сайт создавался как справочный материал, по заказу Федерального Государственного Бюджетного Образовательного Учреждения Высшего Образования <a href="http://www.пупкин.edu/">«пупкинский национальный исследовательский технический университет» </a> для обзора технологий реализации 3d графики при разработке компьютерных игр.
                   </p>
                              
                   <div class="copyright">
                         &copy; 2019г. Пупкин Владислав Викторович <a href="пупкин@gmail.com">пупкин@gmail.com</a>
                   </div>
           </footer>
           
            <div class="ancor">
                <a href="#anc"><img src="assets/images/ancor.png" alt="Якорь" width="70" height="70"></a>
            </div>
            
   </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
body{ background-color: #666666;}
 
img {
    padding: 8px;
    display:block;
    margin:auto;
}
 
.avatar {
    float: right;
    margin-right: 70px;
}
 
.ancor {
 position: fixed;
 z-index: 9999;
 bottom: 0%;
 right: 0%;
 opacity: .6;
 padding: 15px;
 margin: 5px 25px 125px 5px;
}
 
.ancor:hover {
    opacity: 1;
}
 
.page_all{
    max-width: 100%;
    display:block;
    margin:auto;
}
 
.content {
    width:70%;
    margin:0 auto;
    padding: 28px;
    background: #ffffff;
    border-bottom: solid 1px #ffffff;
    box-shadow: 0 0 10px;
    box-sizing: border-box;
}
 
a {
    color: black;
    text-decoration: underline;
}
 
a:hover {
    color: blue;
    text-decoration: none;
}
 
h2 {
    font-size: 1.8em; 
}
 
p {
    margin-bottom: 1.75em;
    text-indent: 3em;
    font-size: 1.3em; 
}
 
footer {
    margin-left: 15%;
    margin-right: 15%;
    padding-top: 25px;
    text-align: center;
    color: #d3d3d3;
}
 
footer a{
    color: #eee;
    text-decoration: none;
}
 
footer a:hover{
    color: white;
    text-decoration: underline;
}
 
 
nav{
    font-size: 1.2em;
    height: 77px;
    background-color: #373737;
    width: 70%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
}
 
 
nav ul {
    display: flex;
    list-style: none;
    padding-left: 0;
    width: 100%;
    align-items: center;
}
 
nav li {
    display: flex; 
    flex: 1 1 20%;
}
 
nav a {
    text-align: center;
    display: block;
    box-sizing: border-box;
    color: white;
    height: 77px;
    width: 100%;
    padding-top: 25px;
    text-decoration: none;
    border-radius: 4px;
    border-right: 1px solid #000000;
    -moz-transition: all 0.3s 0.01s ease;
    -o-transition: all 0.3s 0.01s ease;
    -webkit-transition: all 0.3s 0.01s ease;
}
 
nav a:hover {
    color: white;
    background: #504949;
}
 
 
nav li.drop {
    position: relative;
}
 
nav ul.dropdown {
    visibility: hidden;
    position: absolute;
    top: 77px;
    display: flex;
    flex-direction: column;
    background-color: #373737;
    border-radius: 0;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
}
 
nav ul.dropdown li {
    width: 100%;
    border-bottom: 1px solid black;
}
 
nav ul.dropdown li a {
    border-right: none;
}
 
nav li.drop:hover > ul.dropdown {
    visibility: visible;
}


Вернуться к обсуждению:
Создание выпадающего подпункта в меню HTML, CSS
1
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.12.2019, 12:37
Готовые ответы и решения:

Создание выпадающего меню
Как из этого меню сделать выпадающее вниз меню с подпунктами? #menu {clear: both;/*Отменяет...

Создание выпадающего меню CSS
Добрый день. У меня никак не получается оформить выпадающее меню с помощью CSS. Подскажите, что...

Изменить горизонтальное меню - сделать автозакрытие выпадающего меню после отвода курсора
Вообщем что имеем: http://test.aowserv.ru имеется горизонтальное меню, при наведении на кнопку...

подпункты выпадающего меню
Подскажите, пожалуйста, где и как подправить в шаблоне такой момент: в мобильной версии выпадающие...

2
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.12.2019, 12:37

Магия выпадающего меню
Создал горизонтальное меню, при наведении курсора мыши на его пункты выпадает вертикальное меню,...

Фон выпадающего меню
Должно быть Сделал вот Собственно вопрос: как сделать, чтобы background был 1 для всего...

Оптмизация выпадающего меню
я создал выпадающее меню в одной таблице, при наведении выпадает всё что нужно, но если этот список...

Шаблон выпадающего меню
Здравствуйте. вопрос такой. имеются в коде html ссылки на шаблон css выпадающего меню &lt;link...

0
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.