Trình xem / kiểm tra kiểu CSS


12

Có một trang web ngoài đó có một loạt các HTML điển hình để xem CSS trông như thế nào khi được áp dụng không?

Ý tôi là, một cái gì đó đầy table, a, div, span, p, bất cứ điều gì. Bạn đến đó, dán CSS của bạn và xem kết quả.


Quét bất kỳ trang nào bạn muốn và chỉnh sửa CSS bằng Chrome Developer Tools, FireBug hoặc công cụ dev yêu thích khác của bạn.
msanford

Câu trả lời:


4

Wow, ai đó vừa đăng cái này lên SO.

Nó chỉ là những gì bác sĩ đã ra lệnh: http://jsfiddle.net/

Bạn có thể viết html, css và javascript và chạy thẳng đến đó !! Thêm vào đó họ đã có tài liệu tham khảo về Jquery và những thứ khác!

Tôi nghĩ rằng Quy tắc Internet 33 là nếu bạn muốn / tưởng tượng ra nó, nó ở ngoài kia! ;)


1
Tôi đã xem jsFiddle, nhưng nó không phải là thứ tôi đang tìm kiếm ở đây. Tôi đang tìm kiếm một cái gì đó có một trang web giả, có đầy đủ mã html điển hình, mà tôi có thể sử dụng để xem css của mình sẽ trông như thế nào. Tại colorschemedesigner.com, bạn có thể chỉ cần nhấp vào "Ví dụ trang sáng" và nó hiển thị cho bạn một trang Lipsum.
Homer

Tôi hiểu rồi. lol Tôi đoán đó là những gì tôi đang tìm kiếm khi tôi vấp phải câu hỏi của bạn, vì vậy khi tôi tìm thấy nó .. tôi đã tranh giành để tìm câu hỏi của bạn trong lịch sử của tôi và đăng nó ở đây. Hy vọng nó sẽ giúp được ai đó ....
gideon

3

Tôi chỉ tình cờ tìm thấy http://colorschemedesigner.com/ .

Thật tuyệt khi chọn màu sắc và sẽ hiển thị cho bạn các trang mẫu để xem cách phối màu sẽ được áp dụng cho một trang thông thường.

Cập nhật: trang web hiện là http://paletton.com


2
Đó dường như không phải là câu trả lời cho câu hỏi của bạn.
jeremy

2

Tôi không biết về bất kỳ điều gì, nhưng điều này là đơn giản để thiết lập chính mình. Chỉ cần tạo một tài liệu HTML cơ bản với tất cả các yếu tố bạn mô tả. (Bạn có thể tạo văn bản nếu cần thiết từ Lipsum.com .) Sau đó liên kết với tệp CSS trong phần đầu tài liệu để xem các kiểu của bạn được đính kèm. Lần tới khi bạn muốn kiểm tra, hãy thay đổi nó để trỏ đến một tệp CSS khác.


2

Không chính xác những gì bạn yêu cầu, nhưng tôi yêu các chế độ theo dõi trực tiếp các less.js .

Nói chung, tôi chỉ giả lập bất kỳ yếu tố / kết hợp nào trong bất kỳ hương vị nào của HTML hoặc XHTML là bắt buộc theo cách thủ công, nhưng bạn có thể tạo tài liệu chính của các yếu tố. Nếu bạn cắm vào màn hình thứ hai (hoặc hai, ba, v.v.) để mở tất cả các trình duyệt trên (hoặc sử dụng máy tính thứ hai), mọi thay đổi bạn lưu sẽ được áp dụng trực tiếp cho tất cả các trình duyệt đó cùng một lúc.

Cú pháp LessCSS có thể được sử dụng cùng với CSS thông thường nhưng hoạt động nhanh hơn và dễ lấy hơn (kết quả có thể được chuyển đổi thành CSS bình thường sau đó).

Các công cụ như Aviary cho phép bạn dễ dàng chụp ảnh màn hình (bao gồm tự động cuộn xuống và khâu), có thể được chú thích nhanh chóng (trực tuyến với các liên kết có thể chia sẻ) hoặc được lưu và so sánh trong một công cụ khác (như Photoshop , GIMP , Paint .NET , v.v.) bằng cách phủ chúng thành các lớp và thay đổi độ trong suốt của lớp trên cùng.

Biên tập:

Nếu bạn muốn tự động hóa quy trình chụp màn hình (lưu tệp) để:

  • Khi xảy ra sự cố, bạn đã có mọi thứ trong tay
  • một hình ảnh có thể được thêm vào kiểm soát phiên bản (cũng có thể được tự động hóa khi lưu tệp)
  • bạn có thể tập trung vào CSS thay vì các hoạt động ngoại vi

sau đó bạn có thể sử dụng một cái gì đó như trình xem tệp (xin vui lòng loại trừ hướng Python, có rất nhiều giải pháp khác) với trình lấy màn hình . Xử lý bài cũng có thể được tự động hóa và nếu bạn sử dụng các vị trí cửa sổ nhất quán (môi trường chương trình / máy tính để bàn có thể hỗ trợ điều này), "chrome" xung quanh các trình duyệt có thể được cắt ra như một phần của tập lệnh.



1

Tôi xây dựng tất cả các trang của mình bằng html / css sau đó sử dụng các công cụ quản trị trang web firebird hoặc chrome để thêm / thay đổi / thử nghiệm với các kiểu. Đó là nhanh chóng, đơn giản và tạm thời, rất tốt cho thử nghiệm. Ngoài ra, bạn có thể làm việc với mã của riêng bạn trên các máy chủ của riêng bạn, đây là một phần thưởng khác.

Buzzkill: phần Nhà phát triển giao diện người dùng của tôi cảnh báo bạn rằng tốt hơn là nên khái niệm trong một công cụ thiết kế thực sự và sau đó viết mã để bắt chước do sự khác biệt trong trình duyệt .... chỉ cần nói ...

Lưu ý bên lề - Tôi là một fan hâm mộ lớn của UI Themeroller của Jquery. Một công cụ như vậy không tồn tại để Themeroller thay đổi phong cách ở bên cạnh. Bạn hoàn toàn có thể tạo chủ đề cho một trang web thông qua CSS của Themeroller, sau đó chỉ cần chuyển đổi giữa các chủ đề khác nhau. Nếu bạn chưa từng thử nó, nó thực sự có thể tăng tốc độ triển khai, đặc biệt là nếu bạn đang tìm kiếm cái nhìn "bóng bẩy" đó rất phổ biến ngay bây giờ.


0

Bạn đến đó, dán vào css của bạn và xem kết quả.

Ở đây bạn đi: http://www.oswt.co.uk/developments/style_sheet_viewer/

Chính xác những gì cần thiết trong câu hỏi!


Khá tuyệt, nhưng không hoàn toàn như những gì tôi nghĩ. Trang web này tạo html để phù hợp với css. Điều đó thật tuyệt vì nó sẽ cho bạn thấy tất cả các phong cách hoạt động của bạn, nhưng nó không thể hiện nó trông như thế nào trong trang web 'giả'. Một cái gì đó giống như bạn nhìn thấy tại colorsooledesigner.com khi bạn nhấp vào liên kết "Ví dụ trang sáng"
Homer

0

Không chắc đó có phải là những gì bạn yêu cầu không, nhưng CSS Zen Garden có một trang HTML như vậy với vô số thiết kế CSS. Bạn có thể viết CSS của riêng bạn cho trang web này, các ví dụ rất truyền cảm.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.