Что лучший способ состоит в том, чтобы пойти от макета Photoshop до семантического HTML и CSS?

Question

Что лучший способ состоит в том, чтобы пойти от макета Photoshop до семантического HTML и CSS?

Это можно сделать с помощью регулярных выражений:

import re

def noDoubles(string):
    subChars = set("wxyz")
    result   = list(string)
    for match in re.finditer(r"(.)(\1+)",string):
        usedChars = set(string[match.start():match.end()+1])
        altChars  = list(subChars - usedChars)
        size      = match.end(2) - match.start(2)
        size      = size - (size>1) 
        result[match.start(2):match.start(2)+size] = (altChars[:2]*size)[:size]
    return "".join(result)

print(noDoubles("xyxxxyaaabbyyaaaaa")) # "xyxzxyazabzyzazwza"

Выражение (.) (\ 1+) находит первый символ и последующие повторения строки повторяющихся символов. Зацикливание совпадений позволит вам заменить эту последующую часть чередующимся набором символов, которые не повторяются и не следуют за ним. Вам необходимо использовать чередующийся шаблон для замены, чтобы не создавать новых повторений.

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

22

html css

задан Jon Galloway 21 August 2008 в 08:32

8 ответов

Ну, когда я создаю веб-сайт, я склонен пытаться забыть о дизайне полностью при записи HTML. Я делаю это так, я не закончу ни с какой определенной для дизайна разметкой и таким образом, я смогу сфокусироваться на семантическом значении элементов.

Некоторые указатели, как к вещам разметки:

меню - использует УЛ. (незаказанный список) элемент, так как это точно, каково меню. незаказанный список выбора. пример:
```
<ul id="menu">
    <li id="home"><a href="/" title="Go to Homepage">Home</a></li>
    <li id="about"><a href="/about" title="More about us">About</a></li>
</ul>
```
, если Вы хотели бы горизонтальное меню, Вы могли бы сделать это:
```
#menu li {
    display: block;
    float: left;
}
```
Логотип - используют H1 (заголовок) элемент для логотипа вместо изображения. Пример:
```
<div id="header">
    <h1>My website</h1>
</div>
```
И CSS (та же техника может быть применена к меню выше, если Вы хотели бы меню с графическими объектами):
```
#header h1 {
    display: block;
    text-indent: -9999em;
    width: 200px;
    height: 100px;
    background: transparent url(images/logo.png) no-repeat;
}
```
идентификаторы и классы - используют идентификаторы для идентификации элементов, из которых у Вас только есть один экземпляр. Используйте класс для идентификации элементов, из которых Вы получили несколько экземпляров.
Использование текстовый браузер (например, рысь). Если имеет смысл перейти таким образом, Вы делали хорошее когда дело доходит до доступности.

я надеюсь, что это помогает:)

4