เครื่องมือดู / ทดสอบ CSS สไตล์

มีไซต์ภายนอกที่มี HTML ทั่วไปมากมายเพื่อดูว่า CSS มีลักษณะอย่างไรเมื่อนำไปใช้หรือไม่

ผมหมายถึงบางสิ่งบางอย่างเต็มรูปแบบของtable, a, div, span, p, สิ่งที่ คุณไปที่นั่นวาง CSS ของคุณและดูผลลัพธ์

ว้าวมีคนเพิ่งโพสต์สิ่งนี้ทาง SO

มันเป็นสิ่งที่แพทย์สั่ง: http://jsfiddle.net/

คุณสามารถเขียน html, css และ javascript และเรียกใช้ตรงนั้นได้ !! รวมทั้งพวกเขามีการอ้างอิงถึง Jquery และสิ่งอื่น ๆ !

ฉันคิดว่า Internet Rule 33 คือถ้าคุณต้องการ / จินตนาการมันออกมาที่นั่น! ;)

ฉันเพิ่งเจอhttp://colorschemedesigner.com/

มันยอดเยี่ยมสำหรับการเลือกสีและจะแสดงหน้าตัวอย่างเพื่อดูว่าชุดรูปแบบสีจะมีลักษณะอย่างไรเมื่อใช้กับหน้าทั่วไป

อัปเดต:เว็บไซต์อยู่ในขณะนี้http://paletton.com

ฉันไม่รู้อะไรเลย แต่มันง่ายที่จะตั้งค่าตัวคุณเอง เพียงสร้างเอกสาร HTML พื้นฐานพร้อมองค์ประกอบทั้งหมดที่คุณอธิบาย (คุณสามารถสร้างข้อความได้หากจำเป็นจากLipsum.com ) จากนั้นลิงก์ไปยังไฟล์ CSS ในส่วนหัวของเอกสารเพื่อดูสไตล์ของคุณ ครั้งต่อไปที่คุณต้องการทดสอบเปลี่ยนให้ชี้ไปที่ไฟล์ CSS อื่น

ไม่ว่าสิ่งที่คุณขอ แต่ฉันรักโหมดนาฬิกาสดของless.js

โดยทั่วไปแล้วฉันแค่เลียนแบบองค์ประกอบ / ชุดค่าผสมในสิ่งที่ต้องการ HTML หรือ XHTML ด้วยตนเอง แต่คุณสามารถสร้างเอกสารหลักขององค์ประกอบเองได้ หากคุณเชื่อมต่อจอภาพที่สอง (หรือสองสาม ฯลฯ ) เพื่อเปิดเบราว์เซอร์ทั้งหมด (หรือใช้คอมพิวเตอร์เครื่องที่สอง) การเปลี่ยนแปลงใด ๆ ที่คุณบันทึกจะถูกนำไปใช้กับพวกเขาทั้งหมดในครั้งเดียว

LessCSS syntax สามารถใช้ร่วมกับ CSS ธรรมดาได้ แต่จะเร็วกว่าในการทำงานกับและหยิบง่าย (ผลลัพธ์จะถูกแปลงเป็น CSS ปกติหลังจากนั้น)

เครื่องมือเช่นAviaryช่วยให้คุณถ่ายภาพหน้าจอได้ง่าย (รวมถึงการเลื่อนและเย็บอัตโนมัติ) ซึ่งสามารถใส่คำอธิบายประกอบได้อย่างรวดเร็ว (ออนไลน์พร้อมลิงก์ที่แชร์ได้) หรือบันทึกและเปรียบเทียบกับเครื่องมืออื่น (เช่นPhotoshop , GIMP , Paint .NET , ฯลฯ ) โดยการซ้อนทับพวกมันเป็นเลเยอร์และแก้ไขความโปร่งใสของสิ่งที่อยู่ด้านบน

แก้ไข:

หากคุณต้องการให้กระบวนการถ่ายภาพหน้าจอเป็นแบบอัตโนมัติ (ในการบันทึกไฟล์) เพื่อให้:

• เมื่อมีปัญหาเกิดขึ้นคุณมีทุกสิ่งที่จะต้องทำ
• สามารถเพิ่มรูปภาพลงในการควบคุมเวอร์ชัน (ซึ่งสามารถทำได้โดยอัตโนมัติในการบันทึกไฟล์)
• คุณสามารถมีสมาธิกับ CSS แทนกิจกรรมรอบนอก

แล้วคุณสามารถใช้สิ่งที่ต้องการเฝ้าดูไฟล์ (โปรดแก้ตัวปฐมนิเทศหลามมีมากมายของการแก้ปัญหาอื่น ๆ ) กับGrabber หน้าจอ การประมวลผลโพสต์ยังเป็นไปโดยอัตโนมัติและหากคุณใช้ตำแหน่งหน้าต่างที่สอดคล้องกัน (สภาพแวดล้อมของโปรแกรม / เดสก์ท็อปสามารถช่วยสิ่งนี้ได้) "โครม" รอบเบราว์เซอร์สามารถถูกตัดออกเป็นส่วนหนึ่งของสคริปต์

w3schools ช่วยให้คุณเล่นกับกฎ HTML และ CSS เพียงค้นหา CSS / HTML ที่คุณต้องการเล่นแล้วมองหาที่ ๆ มันพูดว่า "ลองด้วยตัวคุณเอง" ต่อไปนี้เป็นของพวกเขาborder CSSหน้าและนี่เป็นสนามเด็กเล่นของพวกเขา

ฉันสร้างหน้าทั้งหมดของฉันใน html / css จากนั้นใช้เครื่องมือ firebug หรือ chrome เว็บมาสเตอร์เพื่อเพิ่ม / เปลี่ยน / ทดสอบด้วยสไตล์ มันรวดเร็วง่ายและชั่วคราวซึ่งเหมาะสำหรับการทดลอง นอกจากนี้คุณสามารถทำงานกับรหัสของคุณเองบนเซิร์ฟเวอร์ของคุณซึ่งเป็นโบนัสอื่น

Buzzkill: ส่วนนักพัฒนา UI ของฉันเตือนคุณว่ามันจะดีกว่าที่จะคิดในเครื่องมือการออกแบบที่แท้จริงแล้วรหัสเพื่อเลียนแบบเนื่องจากความแตกต่างในเบราว์เซอร์ .... เพียงแค่พูดใน ...

หมายเหตุด้านข้าง - ฉันเป็นแฟนตัวยงของ UI Themeroller UI ของ Jquery เครื่องมือดังกล่าวมีอยู่แล้วสำหรับ Themeroller ในการเปลี่ยนสไตล์ที่ด้าน เป็นไปได้ที่จะสร้างธีมไซต์ทั้งหมดผ่าน CSS ของ Themeroller จากนั้นเพียงสลับไปมาระหว่างธีมที่แตกต่างกัน หากคุณไม่เคยลองมาก่อนมันสามารถเพิ่มความเร็วในการปรับใช้โดยเฉพาะอย่างยิ่งหากคุณกำลังมองหารูปลักษณ์“ มันวาว” ที่กำลังเป็นที่นิยมในขณะนี้

คุณไปที่นั่นแล้ววางลงใน CSS และดูผลลัพธ์

ไปเลย: http://www.oswt.co.uk/developments/style_sheet_viewer/

ตรงกับสิ่งที่ต้องการในคำถาม!

ไม่แน่ใจว่าเป็นสิ่งที่คุณขอหรือไม่ แต่Zen Zen Gardenนั้นมีหน้า HTML ที่มีการออกแบบ CSS มากมาย คุณสามารถเขียน CSS ของคุณเองสำหรับเว็บไซต์นี้ตัวอย่างเป็นแรงบันดาลใจมาก