Bài đăng

Để Website Thân Thiện Hơn Cấu Hình Điện Thoại nguồn http://vnwordpress.com/

-
Hình ảnh
Nếu bỏ qua các ứng dụng di động trên platform trong quá khứ, bạn có thể gặp một số khó khăn khi hỗ trợ trình duyệt cho di động với những trang web hiện tại của mình. Có rất nhiều điều để học hỏi, cả triệu công nghệ để lựa chọn và vô số công việc mà có khả năng là bạn sẽ cần cho những dự án hiện tại của mình. Một câu hỏi mà các designer và chủ website luôn muốn tìm hiểu là “Làm thế nào để tôi có thể thệm hỗ trợ điện thoại một cách nhanh chóng?” Đôi khi bạn không đủ ngân sách để bắt đầu lại từ đầu nhưng vẫn muốn có được phần tinh túy cho chiếc điện thoại. Hôm nay tôi sẽ giới thiệu 5 cách nhanh chóng giúp trang web của bạn trở nên thân thiện hơn với cấu hình của điện thoại. Sử dụng Fluid Layout Fluid layouts đã được sử dụng từ rất nhiều năm qua. Rất lâu trước khi nó được áp dụng vào thiết kế như chúng ta đã biết, rất nhiều web designer và developer đã sử dụng  kỹ thuật  này như giải pháp cho nhiều kích cỡ viewport khác nhau. .someColumn { width: 30%; } Thật dễ dàng khi tạo
Đăng nhận xét
Đọc thêm

Creating Responsive Designs with CSS Media Queries nguồn http://www.digitalfamily.com/tutorials/css-media-queries-to-target-the-iphone-ipad-mobile-devices/

-
Hình ảnh
How to target designs for the iPhone, iPad and desktop computers Excerpted from  iPhone & iPad Web Design For Dummies Updated 1-2013  since last publication By  Janine Warner  &  David LaFontaine Using CSS Media Queries you can change the design of a web page to display differently on an iPad than on an iPhone. The latest trend in web design requires creating one HTML page and then designing multiple style sheets to change the display based on the size of the screen where the page is viewed. When you design web pages with CSS, you can create multiple collections of style designed specifically for each device, and you can target those styles using media queries set to a specific browser width. CSS has included the ability to use media queries since before version 3, but in the past, media queries were primarily used to target style sheets based on options, such as whether the page would be printed or displayed on a computer. Targeting iPhones, iPads, and other C
Đăng nhận xét
Đọc thêm

jQuery.noConflict() examples Nguồn http://jquerynoconflict.discoverproductivity.co.uk/noconflict.html

-
Script gốc: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2 /jquery.min.js"></script> <script type='text/javascript'> $(window).load(function(){ $(document).ready(function(){       $('#imgSmile').width(200);       $('#imgSmile').mouseover(function()       {          $(this).css("cursor","pointer");          $(this).animate({width: "500px"}, 'slow');       });    $('#imgSmile').mouseout(function()      {             $(this).animate({width: "200px"}, 'slow');       });   }); });   </script> Script chỉnh sửa: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2 /jquery.min.js"></script> <script type='text/javascript'> var $j = jQuery.noConflict(); $j (window).load(function(){ $j (document).
Đăng nhận xét
Đọc thêm

Ví dụ về thuộc tính display nguồn http://hocwebchuan.com/

-
Thuộc tính display : xác định loại hiển thị của thành phần. display: block; Thuộc tính  display: block;  : Thành phần hiển thị như một khối, khi sử dụng giá trị block thành phần sẽ đứng một hàng độc lập so với thành phần trước và sau nó. <html> <head> <style type="text/css"> span { background: red; display: block; } </style> </head> <body> <p>Đây là ví dụ cho <span>display</span> sử dụng giá trị block.</p> </body> </html> Đây là ví dụ cho display sử dụng giá trị block. Đầu trang display: inline; Thuộc tính  display: inline;  : Thành phần sẽ hiển thị như một nội tuyến (inline, không ngắt dòng), đây là dạng mặc định. <html> <head> <style type="text/css"> span { background: red; display: inline; } </style> </head> <body> <p>Đây là ví dụ cho <span>display</span> sử dụng giá trị inline.</p> </body&g
Đăng nhận xét
Đọc thêm

jQuery HTML5 Fullscreen Slideshow

-
Hình ảnh
This jQuery plugin lets you create fullscreen galleries where the slides are shown on the entire screen using the fullscreen APIs provided by Firefox 10+ and Chrome 15+ (and possibly Safari 5.1+). In all other browsers it falls back to displaying the slideshow in the entire viewport. Example (click image to view) Broadway Tower in Cotswolds, England  Taken by Wikimedian  Newton2 New York City at Night, HDR  Taken by  Paulo Barcellos Jr. Red Squirrel with pronounced winter ear tufts  Taken by Wikimedian  Ray eye Pictures take from  Wikimedia Commons Picture of the Year 2007 . Usage $ ( function (){ // initialize the slideshow $ ( '.image img' ). fullscreenslides (); // All events are bound to this container element var $container = $ ( '#fullscreenSlideshowContainer' ); $container //This is triggered once: . bind ( "init" , function () { // The slideshow does not provide its own UI, so add your o
Đăng nhận xét
Đọc thêm