Existuje nějaká stránka, která má spoustu typického HTML pro sledování toho, jak vypadá CSS, jakmile se použije?

Myslím tím něco plného table, a, div, span, p, To je jedno. Půjdete tam, vložíte CSS a uvidíte výsledky.

  • Oškrábejte libovolnou stránku a upravte CSS pomocí nástrojů pro vývojáře Chrome, FireBug nebo jiného oblíbeného nástroje pro vývojáře.

Páni, někdo to právě zveřejnil na SO.

JE to přesně to, co lékař objednal: http://jsfiddle.net/

Můžete psát html, css a javascript a spustit je přímo tam !! Navíc již mají odkazy na Jquery a další věci!

Myslím, že internetové pravidlo 33 je, pokud chcete / si to představíte, je tam venku! ;)

  • 1 Viděl jsem jsFiddle, ale není to to, co zde hledám. Hledám něco, co má falešný web plný typického html kódu, pomocí kterého mohu zjistit, jak by vypadalo moje css. Na adrese colorschemedesigner.com stačí kliknout na „Příklad světlé stránky“ a zobrazí se vám stránka Lipsum.
  • Chápu. lol Myslím, že to bylo to, co jsem hledal, když jsem narazil na tvou otázku, takže když jsem ji našel .. vyškrábal jsem se, abych hledal tvou otázku v mé historii a poslal ji sem. Doufám, že to někomu pomůže ....

Právě jsem narazil na http://colorschemedesigner.com/.

Je to skvělé pro výběr barev a ukáže vám ukázkové stránky, abyste zjistili, jak by vypadalo barevné schéma použité na typické stránce.

Aktualizace: web je nyní http://paletton.com

  • 2 Zdá se, že to není odpověď na vaši otázku.

Nevím o žádném, ale nastavení je jednoduché. Jednoduše vytvořte základní dokument HTML se všemi prvky, které popisujete. (V případě potřeby můžete text vygenerovat z webu Lipsum.com.) Poté v hlavičce dokumentu vytvořte odkaz na soubor CSS, abyste viděli připojené styly. Až budete příště chtít testovat, změňte jej tak, aby ukazoval na jiný soubor CSS.

Ne přesně to, co jste požadovali, ale miluji režim živého sledování less.js.

Obecně jsem jen mock-up všechny prvky / kombinace v jakékoli chuti HTML nebo XHTML je vyžadováno ručně, ale můžete si vytvořit svůj vlastní hlavní dokument prvků. Pokud připojíte druhý monitor (nebo dva, tři atd.) K otevření všech prohlížečů (nebo použijete druhý počítač), všechny uložené změny se použijí živě na všechny z nich najednou.

Syntaxe LessCSS může být použita společně s běžným CSS, ale je rychlejší s prací a snadno se vyzvedne (výsledky lze poté převést na normální CSS).

Nástroje jako Aviary umožňují snadno pořizovat snímky obrazovky (včetně automatizace posouvání dolů a sešívání), které lze rychle anotovat (on-line se sdílenými odkazy) nebo uložit a porovnat v jiném nástroji (například Photoshop, GIMP, Paint) .NET atd.) Tím, že je překryjete jako vrstvy a změníte průhlednost té nahoře.

Upravit:

Chcete-li automatizovat proces snímání obrazovky (při uložení souboru) tak, aby:

  • když nastane problém, máte již vše po ruce
  • do správy verzí lze přidat obrázek (který lze také automatizovat při ukládání souborů)
  • místo periferních aktivit se můžete soustředit na CSS

pak můžete použít něco jako sledovač souborů (omluvte prosím orientaci Pythonu, existuje spousta dalších řešení) s nástrojem pro grabování obrazovky. Následné zpracování lze také automatizovat a pokud používáte konzistentní pozice oken (prostředí programu / desktopu to může pomoci), může být jako součást skriptu odříznut „chrom“ kolem prohlížečů.

w3schools vám umožní hrát si s pravidly HTML a CSS. Stačí najít CSS / HTML, se kterým chcete hrát, a hledat místo, kde je napsáno „Vyzkoušejte si to“. Tady je jejich border CSS stránka a tady je jejich hřiště.

Stavím všechny své stránky v html / css a poté pomocí firebugů nebo chromových nástrojů pro webmastery přidávám / měníme / experimentuji se styly. Je to rychlé, jednoduché a dočasné, což je skvělé pro experimentování. Navíc můžete pracovat s vlastním kódem na svých vlastních serverech, což je další bonus.

Buzzkill: část vývojáře uživatelského rozhraní mě varuje, že je lepší koncept ve skutečném návrhovém nástroji a pak kód napodobit kvůli rozdílům v prohlížečích ... jen říkám ...

Boční poznámka - jsem velkým fanouškem Jqueryho UI Themeroller. Takový nástroj existuje pro Themeroller pro změnu stylů na straně. Je možné zcela motivovat web pomocí Themerollerova CSS, pak jednoduše přepínat mezi různými motivy. Pokud jste to nikdy nezkoušeli, může to opravdu urychlit nasazení, zvláště pokud hledáte ten „lesklý“ vzhled, který je právě teď tak populární.

Jděte tam, vložte do svého css a podívejte se na výsledky.

Tady máte: http://www.oswt.co.uk/developments/style_sheet_viewer/

Přesně to, co je v otázce požadováno!

  • Docela v pohodě, ale ne úplně to, co jsem měl na mysli. Tento web generuje html, aby odpovídal css. To je hezké, protože vám ukáže všechny vaše styly v akci, ale neukáže, jak by to vypadalo na „falešném“ webu. Něco jako vidíte na colorschemedesigner.com, když kliknete na odkaz „Příklad světlé stránky“

Nejste si jisti, jestli jste o to požádali, ale CSS Zen Garden má takovou stránku HTML se spoustou návrhů CSS. Pro tento web můžete napsat svůj vlastní CSS, příklady jsou velmi inspirativní.

Pracoval pro vás: Charles Robertson | Chcete nás kontaktovat?

užitečné informace