30.03.2019, 02:31
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от Malleys
|
|
А почему это должно быть смешно?
|
Это не смешно, это дурь точно такая же, как и в "Война и мир" после титульного листа прочесть:
Оглавление
Оглавление
.....
Том 1
.....
Последний раз редактировалось laimas, 30.03.2019 в 02:41.
|
|
30.03.2019, 14:58
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Сообщение от Malleys
|
А не так, как предлагает Блондинка (это очень плохо!):
CSS » CSS3 » transform-origin
CSS » CSS3 » caret-shape
CSS » CSS3 » scripting
Это вообще ни о чём! Кроме манипуляции вниманием человека это меню ничего и не достигает! Оно совершенно не информативно!
|
Люди, а можно вопросик? о чем собственно речь? |
|
30.03.2019, 15:25
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
о чем собственно речь?
|
Речь о том, что разделы следует называть так, чтобы было понятно, о чём речь!
Например, раздел Grid Layout содержит все свойства из соответствующей спецификации. Я думаю, что учебник должен обращать на это внимание...
Тем более, что свойства из одной спеки работают обычно вместе, а когда у вас свалено всё в одну кучу, то непонятно, что за свойство gap, а когда оно находится в соответствующем разделе, то и соответствующий общий пример можно подобрать!
Это стоит того, ведь некоторые свойства не работают с другими (так сказать отменяют) |
|
30.03.2019, 16:24
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Malleys,
собственно первая часть вопроса заключается в том, как исправить твой скрипт
Сообщение от Malleys
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
<style type="text/css">
body { font: 14px normal Times, serif; }
a { text-decoration: none; color: #5a5aff; }
a:hover { color: #5a96ff; }
a.act { color: #4c994c; }
span.act { color: #4c994c; }
</style>
<div id="msgText">
<a href="001.html">Ссылка1</a><br/>
<a href="002.html">Ссылка2</a><br/>
<a href="003.html">Ссылка3</a><br/>
<a href="004.html">Ссылка4</a><br/>
<a href="005.html">Ссылка5</a><br/>
<a href="006.html">Ссылка6</a><br/>
<a href="007.html">Ссылка7</a><br/>
</div>
<script type="text/javascript">
(function() {
for(var index = 0, length = document.links.length, link; index < length; index++) {
link = document.links[index];
if(link.href === location.href) {
var p = document.createElement("span");
p.className = "act";
p.innerHTML = link.innerHTML;
link.parentNode.replaceChild(p, link);
}
}
})();
</script>
</body>
</html>
|
он почему то работает только если указать адрес в таком формате
<a href="001.html">
а если указать адрес со слешем
<a href="/001.html">
или абсолютный адрес
<a href="http://сайт.ru/001.html">
то твой скрипт почему то не работает
|
|
30.03.2019, 16:32
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
<!DOCTYPE html>
<head><title></title></head>
<body>
<style type="text/css">
body { font: 14px normal Times, serif; }
a { text-decoration: none; color: #5a5aff; }
a:hover { color: #5a96ff; }
a.act { color: #4c994c; }
span.act { color: #4c994c; }
</style>
<div id="msgText">
<a href="001.html">Ссылка 001</a><br/>
<a href="/001.html">Ссылка /001</a><br/>
<a href="css/001.html">Ссылка css/001</a><br/>
<a href="/css/001.html">Ссылка /css/001</a><br/>
<a href="002.html">Ссылка2</a><br/>
<a href="003.html">Ссылка3</a><br/>
<a href="004.html">Ссылка4</a><br/>
<a href="005.html">Ссылка5</a><br/>
<a href="006.html">Ссылка6</a><br/>
<a href="007.html">Ссылка7</a><br/>
</div>
<script type="text/javascript">
(function() {
var links = Array.prototype.slice.call(document.links);
for(var index = 0, length = links.length, link; index < length; index++) {
link = links[index];
if(link.href === location.href) {
var p = document.createElement("span");
p.className = "act";
p.innerHTML = link.innerHTML;
link.parentNode.replaceChild(p, link);
}
}
})();
</script>
</body>
</html>
Проверил пример... работает как следует! Но очень зависит, откуда вы запускаете...
|
Сообщение от Блондинка
|
а если указать адрес со слезшем
<a href="/001.html"> ...то твой скрипт почему то не работает
|
Так чтобы работало, вы и должны просматривать файл 001.html в корне сайта/файловой системы
|
Сообщение от Блондинка
|
или абсолютный адрес
<a href="http://сайт.ru/001.html">
то твой скрипт почему то не работает
|
Так чтобы работало, вы и должны просматривать http://сайт.ru/001.html
Какой баг!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"> и ларк не переваривает!
|
|
30.03.2019, 17:43
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Malleys,
а вторая часть вопроса состоит в том, если страница находится не в корне сайта а папке с большой вложенностью, где степень вложенности порядка 12-15
<a href="/папка/папка/папка/папка/папка/папка/папка/папка/папка/папка/папка/папка/папка/папка/папка/001.html">
как подсветить ссылки на эти папки, или index.html или одноименную с папкой страницу (например css3.html) присвоив каждой свой класс (например а1 б2 в3 г4 д5 и т.д.)
|
|
30.03.2019, 18:16
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
как подсветить ссылки на эти папки
|
Я уже отвечал на этот вопрос, как сделать при помощи CSS, 2 раза...
Вот ещё вариант...
function setNestingLevel(link) {
var nestingLevel = new URL(link.href).pathname.split("/").length - 1;
link.classList.add("level-" + nestingLevel);
}
Вы уж сами выберите ссылку и передайте её в функцию... |
|
30.03.2019, 19:12
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
как с помощью css можно определить что ссылка имеет отношение к текущему пути? это если не ошибаюсь объект "location", вот скрипт
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>transform</title>
<style type="text/css">
body { font: 14px normal Times, serif; }
div { border: 1px solid #ccc; padding: 5px; margin: 5px; }
a { text-decoration: none; color: #3c3vff; }
.xyz1 { color: #009900; }
.xyz2 { color: #11b311; }
.xyz3, .xyz4, .xyz5, .xyz6 .xyz7 { color: #28cc28; }
span.xyz3, span.xyz4, span.xyz5, span.xyz6 span.xyz7 { color: #28cc28; }
</style>
<script>
var classes = ['xyz4', 'xyz3', 'xyz2', 'xyz1'];
document.addEventListener('DOMContentLoaded', function() {
var uriWithoutParams=location.pathname.split(/[#|?]+/i).shift();
var extension = uriWithoutParams.split('.').pop();
var uriParts = uriWithoutParams.replace('.' + extension, '').split('/').filter(function(part) {
return part.length;
});
var reversedClasses = classes.reverse();
var getClassName = function(index) {
return reversedClasses[index-1];
};
var maxPostfix = classes.length;
uriParts.forEach(function(uri, index) {
uri = '/' + uriParts.slice(0, ++index).join('/') + '.' + extension;
index = maxPostfix - (uriParts.length - index);
if (index <= 0)
return;
var className = getClassName(index);
[].forEach.call(document.querySelectorAll('a[href="' + uri + '"]'), function(node) {
node.classList.add(className);
if (index !== maxPostfix)
return;
var textNode = document.createElement('span');
textNode.textContent = node.textContent;
textNode.className = className;
node.parentNode.insertBefore(textNode, node);
node.parentNode.removeChild(node);
});
});
});
</script>
</head>
<body>
<div class="menu" id="menu1">
<a href="/menu/html.html">HTML</a>
<a href="/menu/css.html">CSS</a>
<a href="/menu.html">menu</a>
<a href="/js.html">JS</a>
</div>
<div class="menu" id="menu2">
<a href="/menu/css/css3.html">CSS3</a><br/>
<div>
<a href="/menu/css/css3/transform.html">transform</a><br/>
<a href="/menu/css/css3/transform-origin.html">transform-origin</a><br/>
<a href="/menu/css/css3/transform-style.html">transform-style</a><br/>
</div>
</div>
</body>
</html>
все работает если указывать ссылку на одноимённую с папкой страницу как в примере выше, но если указать ссылку на главную (index.html) в папке то не работает, правда я не проверяла что будет если указать абсолютный путь (с http://)
|
|
30.03.2019, 19:31
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Блондинка,
|
Сообщение от Блондинка
|
|
css3
|
Вы хоть читайте, что вам пишут! А то по 2 или три раза одно и тоже спрашиваете!
|
Сообщение от Блондинка
|
|
но если указать ссылку на главную
|
Но почему она должна подсвечиваться, если только вы не на главной!
Цель написать учебник, кажется у вас ради цели, вы уже решаете целый месяц, как подчеркнуть ссылку... Чему же вы хотите научить своих последователей? Есть куча справочников, которые объясняют, что такое border-radius, или другое хорошо поддерживаемое свойство.
Просто показать, что делает border-radius, уже не интересно никому. Или точней, вы вряд ли кого-то удивите, показав, что оказывается там можно уголки закруглять! А вот если у вас есть идея, как можно добиться какого-то интересного эффекта, и оно легко получается при помощи исследуемого свойства, то вы сделали открытие! Вы можете написать статью в своём блоге (вы можете завести блог), на стене в своей социальной сети, снять видео (вы можете завести канал), и в конечном счёте это ваш материал для вашей книги!
CSS шести или десятилетней давности является хорошо изученной темой, может стоит перевести фокус своего исследования на менее изученные вещи. Например на вещи, которые станут в CSS доступны для рядового верстальщика в будущем или они мало известны!
Вот, например, две вещи, которые вы можете исследовать (их сейчас легко исследовать, поскольку существует реализация в Chrome под флагами, вам не нужно писать полифилл)
По моему это очень интересные темы для CSS, если вы напишите статью (не надо целую книгу!) на эту тему с интересными примерами, то вы сделаете вклад в развитие CSS-сообщества.
Однако вам прежде всего стоит посмотреть на пример девушек, которые тоже увлекаются CSS (они всё-таки профессионалы своего дела!): Ana Tudor, Lea Verou, Sara Soueidan. Почитайте их статьи, посмотрите их видео на YouTube.
Вот пример качественного современного учебника по CSS https://css-tricks.com/ (А вообще-то про HTML, CSS и JavaScript)
UPD А прежде всего вам нужно поучиться у этих людей, почитать учебник, ссылку на который я привёл. Забудьте пока про свой учебник... Разберите, как работают уже готовые примеры. Придумывайте что-нибудь своё, но только такое, чтобы это можно было сделать в разумные временные рамки! Сделайте себе план, что изучать, что смотреть по данной тематике CSS, когда изучать.
Последний раз редактировалось Malleys, 30.03.2019 в 20:06.
|
|
30.03.2019, 20:33
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
а причём тут css3? если я в примере вместо "css3" напишу "razdel3" это что нибудь изменит?
я как-бы не вижу связи между подсветкой пунктов меню и учебником, поскольку скрипт подсветки меню можно использовать на сайте абсолютно любой тематики, а не только исключительно на сайте тематики веб
|
|
|
|
