CuDemVN.Wap.Sh
GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
Share code Chống vỡ khung ảnh, TEXT, HTML
 |  RoSino18k  
19-02-2016
|
Vấn đề trang trí, thiết thế Wap/Web Site luôn là vấn đề quan trọng, được các lập trình viên quan tâm bởi giao diện đẹp cũng thu hút được khách ghé thăm mà 
Trong quá trình thiết kế ắt hẳn đã hơn một lần biết đến "phá khung, vỡ khung". Lỗi này làm Wap bạn mất thẩm mĩ và bị người dùng đánh giá thấp đi, ở bài viết trước mình đã chia sẻ
code chống phá khung hình ảnh
hôm nay mình sẽ giúp bạn ăn điểm với khách nhờ code chống vỡ khung ảnh, text, html rất đơn giản thôi nhưng quan trọng lắm đấy!
Các bạn chèn code CSS này vào file CSS chính, ở vị trí bên dưới thẻ body
img {
max-width: 100%;
}
* {
word-wrap: break-word;
}
max-width: 100%;
}
* {
word-wrap: break-word;
}
Ví dụ file CSS chính của mình như sau:
body {
color: #3e3e3e;
margin: 0;
padding: 1px;
font: 14px Time New Roman;
background: #eafbff none repeat scroll 0 0;
margin: auto;
max-width: 650px;
border : 1px solid #cdcdcd;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
color: #3e3e3e;
margin: 0;
padding: 1px;
font: 14px Time New Roman;
background: #eafbff none repeat scroll 0 0;
margin: auto;
max-width: 650px;
border : 1px solid #cdcdcd;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Bạn chỉ việc chèn thêm code vào dưới thẻ body như thế này:
body {
color: #3e3e3e;
margin: 0;
padding: 1px;
font: 14px Time New Roman;
background: #eafbff none repeat scroll 0 0;
margin: auto;
max-width: 650px;
border : 1px solid #cdcdcd;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
img {
max-width: 100%;
}
* {
word-wrap: break-word;
}
color: #3e3e3e;
margin: 0;
padding: 1px;
font: 14px Time New Roman;
background: #eafbff none repeat scroll 0 0;
margin: auto;
max-width: 650px;
border : 1px solid #cdcdcd;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
img {
max-width: 100%;
}
* {
word-wrap: break-word;
}
Và chỉ với vài dòng code đơn giản, bạn đã chống vỡ khung cho Wap/Web của mình, không phải lo ảnh tràn khỏi trang hay văn bản không nằm trong khung nữa nhé!
Chúc các bạn thành công!
Nguồn: Sưu tầm
Lượt xem: 1427 
Đánh giá: 4.5/ 5, 1427 bình chọn
| - Chia sẻ: |   |
Link:
Còn “nhiều” Lắm!