THIẾT KẾ GIAO DIỆN RESPONSIVE VỚI TWITTER BOOTSTRAP

<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <div style="line-height: 20px;"> <h2> <span style="font-family: Arial, Helvetica, sans-serif;"> Xin chào các bạn! </span></h2> <span style="font-family: Arial, Helvetica, sans-serif;">Chào mừng các bạn đã đến với <a href="http://webisiteviet123.blogspot.com./">webisiteviet123.blogspot.com.</a></span><br /> <span style="font-family: Arial, Helvetica, sans-serif;">Bài trước mình đã chia sẻ với các bạn Hướng dẫn sử dung đưa twitter Bootstrap vào html. Hôm nay mình muốn chia sẻ với các bạn.</span><br /> <span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span> <span style="font-family: Arial, Helvetica, sans-serif;"><b>Thiết kế giao diện responsive với twitter bootstrap: </b></span><br /> <span style="font-family: Arial, Helvetica, sans-serif;">Trong bài lần này chúng ta sẽ cùng xây dựng <a href="http://websiteviet123.blogspot.com/2015/02/thiet-ke-web-responsive-chi-mot-cho-tat-ca.html">giao diện Responsive</a> và sử dụng thử một số class chức năng của Bootstrap như Button, Navigation, Icon, … và cách áp dụng Slideshow của Bootstrap vào giao diện website.</span><br /> <span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span> <span style="font-family: Arial, Helvetica, sans-serif;">Bootstrap là một Framework CSS, giúp bạn phát triển nhanh giao diện trang web của mình, bạn chỉ cần đựa css mà <a href="http://websiteviet123.blogspot.com/2015/03/bootstrap-la-gi.html">Twitter Bootstrap</a> đã tạo ra với điều kiện bạn phải học thuộc những class, id có sẵn để áp dụng cho website của mình. Đầu tiên ta cần một bản Bootstrap. Tải Bootstrap từ địa chỉ sau: <a href="http://getbootstrap.com/">http://getbootstrap.com/</a></span> </div> <div class="paragraph" style="line-height: 150%; margin-bottom: .0001pt; margin: 0in; vertical-align: baseline;"> <span class="eop"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 150%;"><br /> </span></span></div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE39oL_MO45ia2vvEhTfFj1reLFFtPz90BZhq5aVgCcy7KzC5gBZHpw3CGfErTd6O1fI8Uc5-cottjtEekOMjZOknBIlkghAVpUn7-CtyWtbQE7YVlKP2hiQ9grCB22-MzXHd2BhNe_I7A/s1600/download-bootstrap.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="download-bootstrap" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE39oL_MO45ia2vvEhTfFj1reLFFtPz90BZhq5aVgCcy7KzC5gBZHpw3CGfErTd6O1fI8Uc5-cottjtEekOMjZOknBIlkghAVpUn7-CtyWtbQE7YVlKP2hiQ9grCB22-MzXHd2BhNe_I7A/s1600/download-bootstrap.jpg" title="download-bootstrap" /></span></a></div> <div class="paragraph" style="line-height: 150%; margin-bottom: .0001pt; margin: 0in; vertical-align: baseline;"> <span class="eop"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 150%;"><br /> </span></span></div> <div class="paragraph" style="line-height: 150%; margin-bottom: .0001pt; margin: 0in; vertical-align: baseline;"> <span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div> <div class="paragraph" style="line-height: 150%; margin-bottom: .0001pt; margin: 0in; vertical-align: baseline;"> <span style="font-family: Arial, Helvetica, sans-serif;"><b><i><span class="normaltextrun"><span style="color: #263248; line-height: 150%;">File .zip</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">bạn</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">vừa</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">tải</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">về</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">sẽ</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">giống</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">như</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">sau</span></span><span class="normaltextrun"><span style="color: #263248; line-height: 150%;">,</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">gồm</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="normaltextrun"><span style="color: #263248; line-height: 150%;">3</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">thư</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">mục</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">css</span></span><span class="normaltextrun"><span style="color: #263248; line-height: 150%;">,</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">js</span></span><span class="normaltextrun"><span style="color: #263248; line-height: 150%;">,</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">và</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="normaltextrun"><span style="color: #263248; line-height: 150%;">fonts.</span></span><span class="normaltextrun"><span style="line-height: 150%;"> </span></span><span class="eop"><span style="line-height: 150%;"> </span></span></i></b><span style="line-height: 150%;"><o:p></o:p></span></span></div> <div class="paragraph" style="line-height: 150%; margin-bottom: .0001pt; margin: 0in; vertical-align: baseline;"> <span style="font-family: Arial, Helvetica, sans-serif;"><span class="normaltextrun"><span style="line-height: 150%;"> </span></span><span class="eop"><span style="line-height: 150%;"> </span></span><span style="font-family: "Arial","sans-serif"; font-size: 6.0pt; line-height: 150%; mso-no-proof: yes;"><!--[if gte vml 1]><v:shape id="Picture_x0020_1" o:spid="_x0000_i1025" type="#_x0000_t75" alt="file-bootstrap.jpg" style='width:468pt;height:199.5pt; visibility:visible;mso-wrap-style:square'> <v:imagedata src="file:///C:\Users\nguyen\AppData\Local\Temp\msohtmlclip1\01\clip_image003.jpg" o:title="file-bootstrap"/> </v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span><span class="eop"><span style="line-height: 150%;"><o:p></o:p></span></span></span></div> <div class="paragraph" style="line-height: 150%; margin-bottom: .0001pt; margin: 0in; vertical-align: baseline;"> <span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivlIDvZM1IulQUQdXBEZjHE1AwgiW02jc61TOSNIOHTlfJAr59bN8xVqDAymj8tn2YNDmGLz3n30ll5mMVX_ts_WxulY7PtRIl4ugNpz5bzt5vXXBbjPeu6wuJ8_oiuCUVgRtTYa_YXSzX/s1600/file-bootstrap.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="luu-file-zip" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivlIDvZM1IulQUQdXBEZjHE1AwgiW02jc61TOSNIOHTlfJAr59bN8xVqDAymj8tn2YNDmGLz3n30ll5mMVX_ts_WxulY7PtRIl4ugNpz5bzt5vXXBbjPeu6wuJ8_oiuCUVgRtTYa_YXSzX/s1600/file-bootstrap.jpg" title="luu-file-zip" /></span></a></div> <div class="separator" style="clear: both; text-align: center;"> </div> <br /> <div class="paragraph" style="line-height: 150%; margin-bottom: .0001pt; margin: 0in; vertical-align: baseline;"> <span style="font-family: Arial, Helvetica, sans-serif;"><span class="spellingerror"><span style="color: #263248; line-height: 150%;">Tạo</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">một</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">thư</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">mục</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">mới</span></span><span class="normaltextrun"><span style="color: #263248; line-height: 150%;">,</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">đặt</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">tên</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">nó</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">theo</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="normaltextrun"><span style="color: #263248; line-height: 150%;">ý</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">của</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">các</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">bạn</span></span><span class="normaltextrun"><span style="color: #263248; line-height: 150%;">,</span></span></span></div> <div class="paragraph" style="line-height: 150%; margin-bottom: .0001pt; margin: 0in; vertical-align: baseline;"> <span style="font-family: Arial, Helvetica, sans-serif;"><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">và</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">giải</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">nén </span></span><span class="normaltextrun" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">file .zip</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">vừa</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">tải</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">về</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">vào</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">thư</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">mục</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">này</span></span><span class="normaltextrun" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">.</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">Tạo</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">một</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="normaltextrun" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">file</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="normaltextrun" style="line-height: 150%;"><b><span style="color: #263248; line-height: 150%;">html</span></b></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">mới</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">sau</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">đó</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">mờicác</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">bạn</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">tham</span></span><span class="apple-converted-space" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror" style="line-height: 150%;"><span style="color: #263248; line-height: 150%;">khảo</span></span></span></div> <div class="paragraph" style="line-height: 150%; margin-bottom: .0001pt; margin: 0in; vertical-align: baseline;"> <span style="font-family: Arial, Helvetica, sans-serif;"><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="normaltextrun"><span style="color: #263248; line-height: 150%;">video</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">hướng</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">dẫn</span></span><span class="apple-converted-space"><span style="color: #263248; line-height: 150%;"> </span></span><span class="spellingerror"><span style="color: #263248; line-height: 150%;">dưới</span></span><span class="eop"><span style="line-height: 150%;"> </span></span><span style="line-height: 150%;"><o:p></o:p></span></span><br /> <span class="eop"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 150%;"><br /> </span></span></div> <div class="paragraph" style="line-height: 150%; margin-bottom: .0001pt; margin: 0in; vertical-align: baseline;"> <i><span style="font-family: Arial, Helvetica, sans-serif;">Nguồn: minhnhut.info</span></i></div> <div class="MsoNormal" style="line-height: 150%;"> <span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span></div> </div> <span style="font-family: Arial, Helvetica, sans-serif;"><iframe allowfullscreen="" frameborder="0" height="415" src="https://www.youtube.com/embed/dnWga4aFGyg" width="720"></iframe></span> </div>

THIẾT KẾ GIAO DIỆN RESPONSIVE VỚI TWITTER BOOTSTRAP

Xin chào các bạn! Chào mừng các bạn đã đến với webisiteviet123.blogspot.com. Bài trước mình đã chia sẻ với các bạn Hướng dẫn sử dun...

Read more »

LÀM THẾ NÀO ĐỂ TẠO NAVIGATION VỚI RESPONSIVE

<div dir="ltr" style="text-align: left;" trbidi="on"> <br /> <br /> <br /> <br /> <br /> <br /> <section class="wrapper"> <div class="contents"> <h2 style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-stretch: normal; font-weight: normal; letter-spacing: -1px; margin: 0px; padding: 3px 0px;"> <span style="color: #134f5c;">Làm thế nào để tạo ra một menu cho mobile</span></h2> Để tạo Responsive menu theo ý của mình các bạn cần biết một chút về HTML , CSS3 và một vài kiến thức về jQuery nữa. Tuy nhiên trong bài này các bạn chỉ cần làm theo hướng dẫn thì cũng đã có một responsive menu đơn khá đẹp rồi, đã có thể hiển thị cực tốt trên các hệ thiết bị mobile, table và desktop<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjtkEfltXeAAU3OdmWbmK0CdZtT2HBY5NiNDTixhEUmLnJOPOWAN7k71y2ocfGa_BAX0zaYIzPXN63GOr-n0NJntSiThe5quNgqbl6k75rGaFW_sc55Z-DeQb_4fUbZ4E6S_1Lkb94k9ZX/s1600/navigation+responsive.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img alt="navigation-responsive" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjtkEfltXeAAU3OdmWbmK0CdZtT2HBY5NiNDTixhEUmLnJOPOWAN7k71y2ocfGa_BAX0zaYIzPXN63GOr-n0NJntSiThe5quNgqbl6k75rGaFW_sc55Z-DeQb_4fUbZ4E6S_1Lkb94k9ZX/s1600/navigation+responsive.jpg" title="navigation-responsive" width="220" /></a> </div> <h2 style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-stretch: normal; font-weight: normal; letter-spacing: -1px; margin: 0px; padding: 3px 0px;"> <span style="color: #134f5c;"> <br /> </span></h2> <h2 style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-stretch: normal; font-weight: normal; letter-spacing: -1px; margin: 0px; padding: 3px 0px;"> <span style="color: #134f5c;">Vậy Responsive Menu và Responsive Web Design là gì?</span></h2> Thực ra để giải thích khái niệm này thì nó khá dài dòng và cũng có nhiều website nói về vấn đề này rồi. Các bạn chỉ cần hiểu đơn giản rằng khi ứng dụng Responsive Web Design vào website, thì website sẽ được hiển thị tốt trên mọi trình duyệt như mobile, table, desktop và. Để website Kiên tra tương thích trên hầu hết tất cả các thiết bị hay chưa bạn chỉ cần thu nhỏ kích cỡ trình duyệt tùy ý và xem sự biến đổi trong trang sẽ là Hiếu<br /> <h2 style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-stretch: normal; font-weight: normal; letter-spacing: -1px; margin: 0px; padding: 3px 0px;"> <span style="color: #134f5c;"> <br /> </span></h2> <h2 style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-stretch: normal; font-weight: normal; letter-spacing: -1px; margin: 0px; padding: 3px 0px;"> <span style="color: #134f5c;">Tại sao cần tạo Responsive Menu và ứng dụng Responsive Web Design?</span></h2> Trong bài viết này chỉ là một phần nhỏ khi ứng dụng Responsive Web Design vì tổng thể thì cần phải áp dụng trên toàn trang. Tuy nhiên không phải Site có hỗ trợ Responsive tức là sẽ có một Responsive Navigation đẹp. Chúng ta cần áp dụng Responsive Web Design bởi vì như thế Google đánh giá mức độ thân thiện (Friendly Site) của website cao hơn. Đây cũng là một trong những đánh giá của google có liên quan đến vấn đề seo cho website.<br /> <h2 style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-stretch: normal; font-weight: normal; letter-spacing: -1px; margin: 0px; padding: 3px 0px;"> </h2> <h2 style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-stretch: normal; font-weight: normal; letter-spacing: -1px; margin: 0px; padding: 3px 0px;"> <span style="color: #134f5c;">Responsive Navigation này hình dáng thế nào?</span></h2> Hình ảnh minh họa:<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDee85qD19oB_rS7rAglNWBIeTWXOtulHYXG3tdvlyTomrdNpxqXdwUftX0xmKGiDHRAsblTJEcCNoijJW110JW75oV9sEEFwEnLlsoRvzI5AKRMePF0do6Cm01S4BGPxX-6b2qf9eOik7/s1600/responsive-navigation.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img alt="Responsive-Navigation" border="0" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDee85qD19oB_rS7rAglNWBIeTWXOtulHYXG3tdvlyTomrdNpxqXdwUftX0xmKGiDHRAsblTJEcCNoijJW110JW75oV9sEEFwEnLlsoRvzI5AKRMePF0do6Cm01S4BGPxX-6b2qf9eOik7/s1600/responsive-navigation.jpg" title="Responsive-Navigation" width="640" /></a> </div> <h2 style="color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-stretch: normal; font-weight: normal; letter-spacing: -1px; margin: 0px; padding: 3px 0px;"> </h2> <h2 style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-stretch: normal; font-weight: normal; letter-spacing: -1px; margin: 0px; padding: 3px 0px;"> <span style="color: #134f5c;">Làm sao để tạo một Responsive Menu cho website?</span></h2> khi các bạn đã có website của mình với html thuần túy các bạn chỉ cần làm theo nhứng bước sau<br /> <h3> 1.Thêm code jQuery cho Responsive Navigation</h3> <b>code:jQuery</b> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTdugscfSdpg09Ocf74J8evOktjn3ncYCu03IAWcSg7zE_OMz2kkgPJV9ZDeS25YEFc2zJLIa05NctkF97ASG4sP-e6T9cKx_x9R3jo_7OMD7iR5rS38qJn5hW5VA43G5pdhed6Wh-AxkL/s1600/responsive-jquery.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img alt="Responsive-Navigation" border="0" height="422" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTdugscfSdpg09Ocf74J8evOktjn3ncYCu03IAWcSg7zE_OMz2kkgPJV9ZDeS25YEFc2zJLIa05NctkF97ASG4sP-e6T9cKx_x9R3jo_7OMD7iR5rS38qJn5hW5VA43G5pdhed6Wh-AxkL/s1600/responsive-jquery.png" title="Responsive-Navigation" width="640" /></a> </div> <h3> 2.HTML Responsive Navigation</h3> <b>code:HTML</b> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJmvs1gvuKspRzHPNOCYEq9iqdLh16_dP5jro1_xGUdjUaNUorfSnwLQPEsHCRW2Ak3k0KGs28kiS2BR2-LFN9Q4k5q8zLI3mwQbpZivNY0wjmw2AqDvMVF7H_xq0tpayV9EhsRaldlerk/s1600/menu-responsive.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img alt="Responsive Navigation" border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJmvs1gvuKspRzHPNOCYEq9iqdLh16_dP5jro1_xGUdjUaNUorfSnwLQPEsHCRW2Ak3k0KGs28kiS2BR2-LFN9Q4k5q8zLI3mwQbpZivNY0wjmw2AqDvMVF7H_xq0tpayV9EhsRaldlerk/s1600/menu-responsive.png" title="Responsive Navigation" width="640" /></a> </div> <h3> 3..Thêm CSS cho Responsive Navigation</h3> <b>code:css</b> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEy2G2gmaTEwDYFhec21Z2CWp9O3AQx6aAK5geYbbp8M_6XG9O6csmVNUPPak4Guun-yZwvl5tDENQPd7z_xVAHvRE64mIqEXiMVw2lhNbGVdi8qGCptKmmDqLvoKucP4T46MSFpV3h_9H/s1600/T%E1%BA%A1o+Responsive+Menu+cho+website+v%E1%BB%9Bi+jQuery+v%C3%A0+css3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEy2G2gmaTEwDYFhec21Z2CWp9O3AQx6aAK5geYbbp8M_6XG9O6csmVNUPPak4Guun-yZwvl5tDENQPd7z_xVAHvRE64mIqEXiMVw2lhNbGVdi8qGCptKmmDqLvoKucP4T46MSFpV3h_9H/s1600/T%E1%BA%A1o+Responsive+Menu+cho+website+v%E1%BB%9Bi+jQuery+v%C3%A0+css3.png" /></a> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <span style="background-color: white; color: #333333; font-family: normal, Cambria, sans-serif, 'Time New Roman'; font-size: 18px; line-height: 29.25px;">Và bây giờ hãy ra trang chủ để xem</span><span style="background-color: white; box-sizing: border-box; color: #333333; font-family: normal, Cambria, sans-serif, 'Time New Roman'; font-size: 18px; font-weight: 700; line-height: 29.25px; margin: 0px; padding: 0px;"> Responsive Menu</span><span style="background-color: white; color: #333333; font-family: normal, Cambria, sans-serif, 'Time New Roman'; font-size: 18px; line-height: 29.25px;"> mới nhé.</span><br /> Mẫu trên mobile này mặc định menu sẽ ẩn. Muốn hiện danh sách menu các bạn cần phải nhấn vào chữ menu để ẩn hoặc hiện.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMMRZB_QtlhX3XbeP9abNPGPPNx4SI9v57Rbo_1J88ivqzfS8t3k27A9-HYcV5hkyXpIeIPQoYPl2bZ_uWnAeUsfETrGFN3Vdu3kFDzUZZ7GoT77Fubybykv8nouO6hFagwlYHc0-1wRJ4/s1600/responsive-navigation-on-mobile.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img alt="responsive-navigation-on-mobile" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMMRZB_QtlhX3XbeP9abNPGPPNx4SI9v57Rbo_1J88ivqzfS8t3k27A9-HYcV5hkyXpIeIPQoYPl2bZ_uWnAeUsfETrGFN3Vdu3kFDzUZZ7GoT77Fubybykv8nouO6hFagwlYHc0-1wRJ4/s640/responsive-navigation-on-mobile.jpg" title="responsive-navigation-on-mobile" width="266" /></a> </div> <div style="text-align: center;"> <b>Responsive Navigation trên Mobile </b> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhbn9UIGLwUUevpMOkKUY2Tuccn-aFKpHmGKu5rdcrwk2cUJ35HlorE6GB7kROUSOL4txH29lcjOHMHQXzOWBBMemsoZzz9JOEsX7GfCTHc-z262kDNxVxKHy3uAp5jbkVnSP4fsu2BHlI/s1600/responsive-navigation-on-tablet.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img alt="responsive-navigation-on-tablet" border="0" height="576" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhbn9UIGLwUUevpMOkKUY2Tuccn-aFKpHmGKu5rdcrwk2cUJ35HlorE6GB7kROUSOL4txH29lcjOHMHQXzOWBBMemsoZzz9JOEsX7GfCTHc-z262kDNxVxKHy3uAp5jbkVnSP4fsu2BHlI/s1600/responsive-navigation-on-tablet.jpg" title="responsive-navigation-on-tablet" width="640" /></a><b>Responsive Navigation trên Tablet</b> </div> <br /> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoDueiokOAgJcddL4IZRauP7foALCEXm7_XK5Lv3IAd1tuWrZi_7rtA7qPsWFirCb_NrJPqYASi9f4wXaj9SFH9-p0FNY1QczwDC78JTwBN23KDaXzGl7jf3nuaPlBLoqIpj7e-itQkxDc/s1600/responsive-navigation-on-tablet.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img alt="responsive-navigation-on-tablet" border="0" height="577" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoDueiokOAgJcddL4IZRauP7foALCEXm7_XK5Lv3IAd1tuWrZi_7rtA7qPsWFirCb_NrJPqYASi9f4wXaj9SFH9-p0FNY1QczwDC78JTwBN23KDaXzGl7jf3nuaPlBLoqIpj7e-itQkxDc/s640/responsive-navigation-on-tablet.jpg" title="responsive-navigation-on-tablet" width="640" /></a><b>Responsive Navigation trên Desktop</b> </div> <br />  Như vậy là chúng ta đã hoàn thành một menu responsive cho website của mình chúc các bạn thành công, nếu bạn nào chua hiểu có thể xem video bên dưới hướng dẫn rất chi tiết Cảm ơn các bạn đã theo dõi rất mong các bạn ủng hộ cho mình<br /> <br /> <b>Video hướng dẫn chi tiết:</b> <br /> <div> <iframe allowfullscreen="" frameborder="0" height="415" src="https://www.youtube.com/embed/uczefwaLJmI" width="720"></iframe> </div> </div> </section> </div>

LÀM THẾ NÀO ĐỂ TẠO NAVIGATION VỚI RESPONSIVE

Làm thế nào để tạo ra một menu cho mobile Để tạo Responsive menu theo ý của mình các bạn cần biết một chú...

Read more »

THIẾT KẾ WEB RESPONSIVE CHỈ MỘT CHO TẤT CẢ

<div dir="ltr" style="text-align: left;" trbidi="on"> <div> <div dir="ltr" style="text-align: left;" trbidi="on"> <strong style="margin: 0px; outline: 0px; padding: 0px;"><span style="color: #134f5c;">Responsive Web Design là gì?</span></strong> </div> </div> <a href="http://websiteviet123.blogspot.com/2015/02/thiet-ke-website-cho-di-dong.html" style="margin: 0px; outline: 0px; padding: 0px; text-decoration: none;"><span style="color: #0b5394;"><b>Thiết kế website</b></span></a> cho thiết bị di động với công nghệ Responsive Web Design (RWD) được hiểu ngắn gọn là khi một trang website được thiết kế phải có khả năng tự động điều chỉnh để hiển thị trên những thiết bị có kích thước màn hình khác nhau bằng cách áp dụng nhiều bố cục cho từng loại kích cỡ màn hình khác nhau. Với sự phát triển của các chuẩn HTML5 (Hyper Text Markup Language) và CSS3 (Cascading Style Sheet) cùng với sự phát triển của các thị trường di động, máy tính bảng, dự đoán trong thời gian tới RWD sẽ là xu hướng thiết kế website mới.<br /> <span style="background-color: white; color: #333333; font-family: arial;"> <br /> </span> <span style="background-color: white; color: #333333; font-family: arial;">– </span><span style="color: #333333;">Khác với những công nghệ </span><a href="http://websiteviet123.blogspot.com/2015/02/thiet-ke-website-cho-di-dong.html" style="margin: 0px; outline: 0px; padding: 0px; text-decoration: none;" title="thiết kế website cho di động"><strong style="margin: 0px; outline: 0px; padding: 0px;"><span style="color: #0396c7;"> </span><span style="color: #0b5394;">thiết kế website</span></strong><span style="color: #0b5394;"> <strong style="margin: 0px; outline: 0px; padding: 0px;">cho di đông</strong></span></a><span style="color: #333333;"> khác phải viết mới cấu trúc hiển thị của web cho mỗi thiết bị và sử dung một sundomain khác vídu như </span><span style="color: #333333; margin: 0px; outline: 0px; padding: 0px; text-decoration: underline;">m.yourdomain.com</span><span style="color: #333333;"> responsive sử dung duy nhất 1 domain và tự cấu trúc hiển thị giao diện website cho từng giao diện.</span><br /> <strong style="margin: 0px; outline: 0px; padding: 0px;"><br /> </strong> <strong style="margin: 0px; outline: 0px; padding: 0px;"><span style="color: #134f5c;"> Responsive Web Design và Web Mobile:</span></strong><br /> <strong style="margin: 0px; outline: 0px; padding: 0px;"></strong><span style="color: #333333;">Responsive Web Design: để thiết kế một trang website người ta sử dụng ngôn ngữ HTML và CSS.</span> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;">– HTML chứa các “thẻ”(tag), trong đó có 1 thẻ đặc biệt tên gọi là </span> <br /> <div> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;">, nó dùng để bố cục cho trang website, những thẻ </span> <br /> <div> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;">này có thể được lồng vào nhau</span><br /> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;"> <br /> </span> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;">– CSS là để quy định kích thước, màu nền, ảnh nền, khung nền, v…v ( nói chung là để trang trí phần nhìn cho website)</span><span style="color: #333333;"> </span><span style="color: #333333; margin: 0px; outline: 0px; padding: 0px;">Web Mobile: là một phiên bản của rút gọn của website chính, được tối ưu hình ảnh, không gian, dữ liệu sao cho nhẹ nhất, load nhanh nhất có thể. Và để dễ ghi nhớ Web Mobile thường thông qua một subdomain(ví dụ: m.tên trang web.tên miền)</span><span style="color: #333333;">. </span><span style="color: #333333; margin: 0px; outline: 0px; padding: 0px;">Về mặt bản chất cả 2 phương pháp trên là một, chúng chỉ khác nhau về cấu trúc PHP hoặc ASP, khác nhau về CSS.</span> </div> </div> <span style="color: #333333;">Giao diện thiết kế website Responsive</span> <br /> <span style="color: #333333;"> <br /> </span> <br /> <div class="wp-caption aligncenter" id="attachment_1825" style="color: #333333; font-family: arial; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; width: 100%;"> <div class="wp-caption-text" style="outline: none; padding: 5px 0px;"> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie7x4dHHTIa30jYvh01G5xvATfwP114E8PoGDLVa5Hs77F3oXM1M9wf93rOVmvbZBFDMCNF6WIuK18thyJWOxmJpM5RIXt6_HDfSL8Cg6E8GnluzrvxgDXRP5iFT3C_uZ8wfJ_NhzoyVvH/s1600/thiet+ke+responsive+website.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="thiet-ke-responsive-website" border="0" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie7x4dHHTIa30jYvh01G5xvATfwP114E8PoGDLVa5Hs77F3oXM1M9wf93rOVmvbZBFDMCNF6WIuK18thyJWOxmJpM5RIXt6_HDfSL8Cg6E8GnluzrvxgDXRP5iFT3C_uZ8wfJ_NhzoyVvH/s1600/thiet+ke+responsive+website.jpg" title="thiet-ke-responsive-website" width="100%" /></a></div> <br /></div> </div> <b><span style="color: #134f5c;"><span style="margin: 0px; outline: 0px; padding: 0px;">Tại sao nên <span style="margin: 0px; outline: 0px; padding: 0px;"><a href="http://websiteviet123.blogspot.com/2015/02/thiet-ke-website-cho-di-dong.html" style="-webkit-transition: all 0.3s ease; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.3s ease;" title="thiết kế website responsive"><span style="margin: 0px; outline: 0px; padding: 0px;">thiết kế website Responsive</span></a></span>?</span> </span></b><br /> <span style="color: #333333; font-family: arial;">– Hỗ trợ hiển thị cho mọi thiết bị di động, tăng tốc độ truy cập và khả năng kiểm soát nội dung là những gì mà responsive thực sự thuyết phục người dung.</span><br /> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;"> <br /> </span> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;">– Responsive Web Design dùng nhiều bố cục cho tương thích với nhiều kích thước màn hình khác nhau giúp bạn luôn có trải nghiệm tốt nhất, đẹp nhất khi lướt web dù bạn đang dùng thiết bị nào đi nữa. Với việc giờ đây các trình duyệt website di động đều đã hỗ trợ HTML và CSS  nó giúp chúng ta hiển thị đầy đủ và tận dụng không gian tối đa của website để trình diễn những nội dung theo cách thoải mái và thích thú nhất. Xu hướng hiện tại Web design không đơn thuần là tạo ra sản phẩm đẹp nữa mà còn là công việc tạo ra trải nghiệm mới cho người dùng.</span><br /> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;"> <br /> </span> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;">– Với Responsive website của bạn sẽ load nhanh hơn khi người dung truy cập website của bạn từ những thiết bị di động. Giao diện website được thiết kế tập trung show cho người dung những nội dung quan trong nhất, tất cả đều được thu gọn trong màn hình của thiết bị, giờ đây khách hàng truy cập website của bạn không phải mất thời gian để điều chỉnh kích thước, zoom nội dung để có thể xem rõ hơn. Có responsive website của bạn thực sự trở nên chuyên nghiệp và hiệu quả.</span> <br /> <strong style="margin: 0px; outline: 0px; padding: 0px;"> <br /> </strong> <strong style="margin: 0px; outline: 0px; padding: 0px;"><span style="color: #134f5c;">Tại sao nên<a href="http://websiteviet123.blogspot.com/"><span style="color: #134f5c;"> <span style="margin: 0px; outline: 0px; padding: 0px; text-decoration: none;"><span style="margin: 0px; outline: 0px; padding: 0px;">thiết kế website</span></span> Responsive websiteviet123?</span></a></span></strong><br /> <span style="color: #333333;">– Từ đầu năm 2012 khi khái niệm Responsive đang được cả công đồng thế giớ quan tâm  </span><strong style="font-family: arial; margin: 0px; outline: 0px; padding: 0px;"><a href="http://websiteviet123.blogspot.com/"><span style="color: #0b5394;">websiteviet123</span></a></strong><span style="color: #333333;"> đã hiểu rõ tấm quan trọng và vị thế của Responsive trong ngành thiết kế website. Sự bùng nổ của công nghệ di động người dùng ngày càng sử dụng điện thoại, máy tính bảng và những tiện ích di động khác để truy cập website nhiều hơn. Đó chính là thời điểm vàng cho những doanh nghiệp sớm sở hữu công nghệ Responsive.</span><br /> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;"> <br /> </span> <span style="font-family: arial; margin: 0px; outline: 0px; padding: 0px;"><span style="color: #333333;">– Bắt tay vào nghiên cứ và phát triển, đến này chúng tôi đã xây dựng được hệ thống </span><a href="http://websiteviet123.blogspot.com/"><span style="color: #134f5c;">website Responsive</span></a><span style="color: #333333;"> vững mạnh, nắm vững và áp dung </span><span style="color: #134f5c;"><a href="http://websiteviet123.blogspot.com/"><span style="color: #134f5c;">Responsive</span></a><span id="goog_179967135"></span><span id="goog_179967136"></span><a href="https://www.blogger.com/"></a> </span></span><span style="font-family: arial; margin: 0px; outline: 0px; padding: 0px;"><span style="color: #333333;">trong mọi thiết kế, cải tiến và áp dung Responsive vào website chuẩn SEO. Là một trong những công ty thiết kế website đầu tiên phát triển và công bố ra thị trường </span><a href="http://websiteviet123.blogspot.com/"><span style="color: #134f5c;">website Responsive</span></a><span style="color: #333333;"> ứng dụng cho báo điện tử (sexylove.vn – Táp chí tuổi trẻ và đời sống), website du lich (dulichteam.com),…</span></span><br /> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;"> <br /> </span> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;">– Phong cách làm việc chuyên nghiệp, luôn lắng nghe và hỗ trợ khách hàng trong bất kỳ điều kiện về thời gian, không gian nào.  Kinh phí cho mỗi dự án web responsive đều được cân đối trên tổng chi phí nhân lực, tài nguyên nên chúng tôi cam kết sẽ đưa ra dịch vụ tốt nhất và kinh phí hợp lý nhất.</span><br /> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;"> <br /> </span> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;">Hãy liên hệ với chuyên viên tư vấn của chúng tôi để được tư vấn nhiều hơn về Responsive và những giá trị to lớn về thương hiệu và kinh tế mà nó mang lại. Với chúng tôi website luôn thể hiện vị thế và đẳng cấp của doanh nghiệp bạn.</span><br /> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;"> <br /> </span> <span style="color: #333333; font-family: arial; margin: 0px; outline: 0px; padding: 0px;"> <br /> <iframe allowfullscreen="" frameborder="0" height="515" src="https://www.youtube.com/embed/aPtA4nYkvDw" width="720"></iframe> </span> </div>

THIẾT KẾ WEB RESPONSIVE CHỈ MỘT CHO TẤT CẢ

Responsive Web Design là gì? Thiết kế website cho thiết bị di động với công nghệ Responsive Web Design (RWD) được hiểu ng...

Read more »

HƯỚNG DẪN TẠO MENU RESPONSIVE VỚI CSS

<div dir="ltr" style="text-align: left;" trbidi="on"> <h2 class="title icon" style="background-color: white; color: #333333; font-family: Tahoma, Calibri, Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: normal; margin: 0px; padding: 10px 10px 10px 0px;"> Hướng dẫn tạo trình đơn ứng với CSS</h2> <h2 class="title icon" style="background-color: white; color: #333333; font-family: Tahoma, Calibri, Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: normal; margin: 0px; padding: 10px 10px 10px 0px;"> <b style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px;">1. Cấu trúc menu</b><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><span style="font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">Chúng ta bắt đầu với việc xây dựng một menu bình thường trước cho dễ hiểu. Sử dụng thẻ  </span><span style="font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">là </span><span style="font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">để xây dựng menu là thói quen trước giờ của nhiều anh em làm dev. Chúng ta cũng sẽ bắt đầu như thế.</span><span style="font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;"><br /> </span><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><div class="bbcode_container" style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal; margin: 5px 20px 20px; padding: 0px;"> <div class="bbcode_description" style="margin: 0px; padding: 0px;"> Code:<br /> Mở Menu</div> <pre class="bbcode_code" style="background: none repeat-x rgb(242, 246, 248); border: 1px inset; direction: ltr; font-size: 12px; height: 180px; line-height: 12px; overflow: scroll; padding: 6px;"><nav class="cmn-tile-nav"><ul class="clearfix"> <li class="colour-1">HTML</li> <li class="colour-2">CSS</li> <li class="colour-3">Sass</li> <li class="colour-4">JS</li> <li class="colour-5">PHP</li> <li class="colour-6">Ruby</li> <li class="colour-7">iOS</li> <li class="colour-8">Android</li> </ul> </nav></pre> <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br /> <!-- designresponsiveweb_main_Blog1_120x200_as --><br /> <ins class="adsbygoogle" data-ad-client="ca-pub-4312050943585148" data-ad-slot="4685718310" style="display: inline-block; height: 90px; width: 728px;"></ins><br /> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><br /></div> <span style="font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">Bây giờ chúng ta sẽ đi sâu vào chỉnh sửa các yếu tố CSS để hoàn thiện menu. Do mục đích của mình là thực hiện nó cho di động nên đầu tiên menu sẽ được ẩn đi. Khi class </span><i style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;">.open</i><span style="font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;"> được thêm vào thì menu này mới mở ra. Chúng ta cũng thiết lập một số thuộc tính của list như không hiển thị danh sách dạng list,</span></h2> <h2 class="title icon" style="background-color: white; font-family: Tahoma, Calibri, Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: normal; margin: 0px; padding: 10px 10px 10px 0px;"> <span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">được thiết lập dạng khối (block). Thứ quan trọng nhất phải thiết lập đó là màu nền của menu phải khác với màu nền của trang web để khiến nó nổi lên. Ngoài ra, để các menu trông đẹp hơn, chúng ta sẽ thiếp lập màu sắc khác nhau chuyển dần từ trái sang phải.</span><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;"><br /> </span><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">Ngoài ra, khi con trỏ chuột nằm trên menu nào, chúng ta sẽ thực hiện một số hiệu ứng cho menu đó để tạo cảm giác tương tác cho người truy cập. Điều này được thực hiện thông qua sự kiện </span><i style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;">:hover</i><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;"> của CSS. Và đây sẽ là các mã CSS mà mình sẽ viết:</span><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><div class="bbcode_container" style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal; margin: 5px 20px 20px; padding: 0px;"> <div class="bbcode_description" style="margin: 0px; padding: 0px;"> Code:</div> <pre class="bbcode_code" style="background: none repeat-x rgb(242, 246, 248); border: 1px inset; direction: ltr; font-size: 12px; height: 372px; line-height: 12px; overflow: scroll; padding: 6px;">/* nav styles */ nav.cmn-tile-nav { display: none; } nav.cmn-tile-nav.open { display: block; } nav.cmn-tile-nav ul { list-style: none; } nav.cmn-tile-nav li { display: block; overflow: hidden; transition: background 0.3s; } nav.cmn-tile-nav a { display: block; padding: 20px; color: #fff; transition: background 0.3s, transform 0.3s; } nav.cmn-tile-nav a:hover { transform: translateX(20px); } /* thay doi 8 mau khac nhau cho 8 li */ /* --- BEGIN --- */ nav.cmn-tile-nav li.colour-1, nav.cmn-tile-nav li.colour-1 a { background-color: #28aadc; } nav.cmn-tile-nav li.colour-1:hover, nav.cmn-tile-nav li.colour-1:hover a { background-color: #166888; } /* --- END --- */ /* smoother transitions */ nav.cmn-tile-nav li, nav.cmn-tile-nav a { transform: translate3d(0, 0, 0);</pre> </div> <span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">Vậy là xong phần CSS.</span><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><b style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px;">Media Queries</b><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">Sau khi định dạng các style sẽ sử dụng, chúng ta sẽ thiết lập các giá trị CSS tiếp theo để có thể tùy biến theo kích cỡ màn hình khác nhau. Chúng ta thiết lập các điểm dừng tương ứng với kích cỡ(chiều rộng) của từng loại màn hình và định dạng CSS tương ứng khi ở các kích cỡ màn hình đó. Ví dụ như ở kích thước màn hình 480px, độ rộng của menu sẽ được giảm xuống còn 50% của kích thước màn hình.</span><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><div class="bbcode_container" style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal; margin: 5px 20px 20px; padding: 0px;"> <div class="bbcode_description" style="margin: 0px; padding: 0px;"> Code:</div> <pre class="bbcode_code" style="background: none repeat-x rgb(242, 246, 248); border: 1px inset; direction: ltr; font-size: 12px; height: 132px; line-height: 12px; overflow: scroll; padding: 6px;">@media all and (min-width: 480px) { nav.cmn-tile-nav { display: block; } nav.cmn-tile-nav li { width: 50%; float: left; } }</pre> </div> <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br /> <!-- designresponsiveweb_main_Blog1_120x200_as --><br /> <ins class="adsbygoogle" data-ad-client="ca-pub-4312050943585148" data-ad-slot="4685718310" style="display: inline-block; height: 90px; width: 728px;"></ins><br /> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><br /> <span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">Tiếp theo, ở kích thước màn hình là 768px, chúng ta sẽ cho chiều rộng của mỗi phần tử trong menu bằng 25% độ rộng màn hình (nghĩa là sẽ có 4 phần tử nằm trên cùng 1 hàng). Ngoài ra, chúng ta cũng có vài tùy chỉnh về mặc hiệu ứng </span><i style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;">:hover</i><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;"> nếu muốn. Trong ví dụ này, thay vì di chuyển text sang phải, tôi sẽ cố định chiều ngang và di chuyển text lên 20px.</span><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><div class="bbcode_container" style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal; margin: 5px 20px 20px; padding: 0px;"> <div class="bbcode_description" style="margin: 0px; padding: 0px;"> Code:<br /> @media all and (min-width: 768px) {</div> <pre class="bbcode_code" style="background: none repeat-x rgb(242, 246, 248); border: 1px inset; direction: ltr; font-size: 12px; height: 180px; line-height: 12px; overflow: scroll; padding: 6px;">nav.cmn-tile-nav li { width: 25%; } nav.cmn-tile-nav a { text-align: center; padding: 60px 20px 20px 20px; } nav.cmn-tile-nav a:hover { transform: translateX(0); transform: translateY(-20px); } }</pre> </div> <span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">Cho một kích thước màn hình chuẩn trên nền desktop, mình sẽ quy định đối với kích thước màn hình từ 1024px trở lên menu sẽ nằm ngang. Ngoài ra, sẵn tiện chúng ta có thể thay đổi một chút hiệu ứng vào như sau:</span><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><div class="bbcode_container" style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal; margin: 5px 20px 20px; padding: 0px;"> <div class="bbcode_description" style="margin: 0px; padding: 0px;"> Code:</div> <pre class="bbcode_code" style="background: none repeat-x rgb(242, 246, 248); border: 1px inset; direction: ltr; font-size: 12px; height: 168px; line-height: 12px; overflow: scroll; padding: 6px;">@media all and (min-width: 1024px) { nav.cmn-tile-nav li { overflow: visible; width: 12.5%; } nav.cmn-tile-nav a { padding: 80px 20px 20px 20px; } nav.cmn-tile-nav a:hover { transform: translateY(20px); } }</pre> </div> <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br /> <!-- designresponsiveweb_main_Blog1_120x200_as --><br /> <ins class="adsbygoogle" data-ad-client="ca-pub-4312050943585148" data-ad-slot="4685718310" style="display: inline-block; height: 90px; width: 728px;"></ins><br /> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><br /> <span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">Vậy là ổn rồi, nếu bạn muốn thức hiện cho các kích cỡ màn hình khác, bạn có thể tìm thấy chúng trong </span><a href="http://websiteviet123.blogspot.com/2015/01/responsive-plugin.html" style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal; text-decoration: none;" target="_blank"><span style="color: #134f5c;">bộ công cụ dành cho responsive webdesigner (8 công cụ hữu ích cho bạn làm Responsive Web Design)</span></a><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;"> mà mình đã cung cấp trước đây.</span><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><b style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px;">Làm nút Đóng/Mở menu</b><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">Tiếp theo chúng ta sẽ làm công cụ để đóng và mở menu. Các nghiên cứu đã chỉ ra rằng với kích thước màn hình nhỏ hơn 480px bạn không nên bật menu ra mà hãy luôn đóng nó lại để tiết kiệm không gian. Cho nên mình sẽ để menu ở chế độ đóng khi kích thước màn hình là 480px và menu sẽ mở ra nếu kích thước lớn hơn. Việc xây dựng nút bấm này khá đơn giản:</span><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><div class="bbcode_container" style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal; margin: 5px 20px 20px; padding: 0px;"> <div class="bbcode_description" style="margin: 0px; padding: 0px;"> Code:</div> <pre class="bbcode_code" style="background: none repeat-x rgb(242, 246, 248); border: 1px inset; direction: ltr; font-size: 12px; height: 228px; line-height: 12px; overflow: scroll; padding: 6px;">a.nav-toggle { display: block; margin-bottom: 20px; padding: 20px; background-color: #dce6f0; color: #646464; text-align: center; } a.nav-toggle:hover { background-color: #c8d2dc; } /* the breakpoint same as above */ @media all and (min-width: 480px) { a.nav-toggle { display: none; } }</pre> </div> <b style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px;">JavaScript</b><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">Để có thể mở và đóng menu thuận tiện, như đã nói ở trên chúng ta có thể thêm class </span><i style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;">.open</i><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;"> để mở và xóa class này đi để đóng menu. Điều quan trọng là bạn thực hiện nó khi người dùng click chuột lên nút đóng/mở menu. Bạn có thể tự viết một đoạn </span><acronym style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: dotted; border-width: 0px 0px 1px; cursor: help; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" title="JavaScript">JS</acronym><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;"> khá dễ để làm việc này. Ngoài ra có thể sử dụng một số plugin có sẵn như </span><a href="http://vnwebmaster.com/links.php?url=https://github.com/desandro/classie" style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal; text-decoration: none;" target="_blank"><span style="color: #134f5c;">classie.js</span></a><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">. Code của bạn sẽ như thế này:</span><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><div class="bbcode_container" style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal; margin: 5px 20px 20px; padding: 0px;"> <div class="bbcode_description" style="margin: 0px; padding: 0px;"> Code:</div> <pre class="bbcode_code" style="background: none repeat-x rgb(242, 246, 248); border: 1px inset; direction: ltr; font-size: 12px; height: 156px; line-height: 12px; overflow: scroll; padding: 6px;">(function(window){ var nav = document.querySelector("nav.cmn-tile-nav"), nav_toggle = document.querySelector("a.nav-toggle"); nav_toggle.addEventListener("click", function(e){ e.preventDefault(); classie.toggle(nav, "open"); }); })(window);</pre> </div> <span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">Vậy là xong !</span><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><br style="font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;" /><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;">Qua hướng dẫn này, điều mình muốn nói với các bạn là việc thực hiện responsive khá đơn giản, chỉ cần bạn có một chút kiến thức về CSS và hiểu biết về kích thước màn hình là bạn có thể thực hiện nó dễ dàng. Quan trọng hơn để bạn có thể làm được đó là làm đi làm lại thường xuyên, sử dụng các tiện ích và tối ưu giao diện thường xyên để nâng cao khả năng của mình lên.</span></h2> <h2 class="title icon" style="background-color: white; font-stretch: normal; margin: 0px; padding: 10px 10px 10px 0px;"> <div class="content" style="margin: 0px; padding: 0px;"> <div id="post_message_109164" style="margin: 0px; padding: 0px;"> <span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px; font-weight: normal;"><span class="">facebook:  </span></span><span style="color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif;"><span style="font-size: 13px; font-weight: normal;"><a href="https://www.facebook.com/Websitevietnam123"><span class="">https://www.facebook.com/Websitevietnam123</span></a></span></span><br /> <div style="color: #333333; font-family: Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif; font-size: 13px; font-weight: normal;"> <br /></div> </div> </div> </h2> <div> <span style="background-color: white; color: #333333; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif; font-size: 13px;"><span class=""><span class="">demo:   </span></span></span><span style="color: #0000ee; font-family: "verdana" , "arial" , "tahoma" , "calibri" , "geneva" , sans-serif;"><span style="font-size: 13px;"><u>http://www.mediafire.com/download/gx9pcp4g8jn3c2s/eshopper.zip</u></span></span></div> <br /> Thiết kế Responsive Web: Navigation<br /> <br /> <iframe allowfullscreen="" frameborder="0" height="415" src="//www.youtube.com/embed/nQK0kz65wpo" width="690"></iframe></div>

HƯỚNG DẪN TẠO MENU RESPONSIVE VỚI CSS

Hướng dẫn tạo trình đơn ứng với CSS 1. Cấu trúc menu Chúng ta bắt đầu với việc xây dựng một menu bình thường trước cho dễ hiểu. Sử dụng ...

Read more »