Chuyển tiếp css khi nhấp
|
Quan điểm. com và ứng dụng Outlook iOS đã thêm hỗ trợ cho ảnh nền CSS và một số thuộc tính liên quan, cũng như một số thuộc tính Flexbox và Grid nhất định Cũng đã thêm Thư iOS 11 vào hướng dẫn, không có sự khác biệt đáng chú ý nào so với iOS 10 22 Tháng chín 2017 Microsoft đã cập nhật các ứng dụng Outlook cho iOS và Android với sự hỗ trợ CSS nhất quán hơn, bao gồm các truy vấn phương tiện 13 Tháng chín 2017 Viết lại hoàn chỉnh và thiết kế lại hướng dẫn, thử nghiệm 278 tính năng và thuộc tính CSS khác nhau trên 35 ứng dụng email Để phù hợp với sự gia tăng lớn về nội dung, chúng tôi đã thêm chức năng tìm kiếm và khả năng liên kết trực tiếp với từng ứng dụng khách và thuộc tính email để chia sẻ dễ dàng. 2 Tháng năm 2014 Đã xóa hỗ trợ cho các tùy chọn bộ chọn khác nhau (E) trong Gmail và thêm hỗ trợ cho 19 Tháng chín 2013 Đã thêm hỗ trợ cho các thẻ phương tiện 30 Tháng một 2013 Quan điểm. com không còn hỗ trợ thuộc tính CSS lề, bao gồm * {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.show-menu-left{
background: rgba(0,145,235,1);
border-radius: 10px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
margin-left:300px;
color:#fff;
align-items: center;
font-weight: bold;
}
.menu-push-sk {
width: 60%;
max-width: 650px;
position: fixed;
height: 100%;
left: -80%;
padding-top: 10px;
box-sizing: border-box;
z-index: 10000;
top:0;
transition:left .5s ease-in-out;
background: linear-gradient(45deg, #4fbcab -132%, #46b4a3 100%);
}
a.logo-sk{
display: block;
margin: auto;
width: 100%;
left: 0;
right: 0;
}
a.logo-sk>img{
width: 100%;
display: block;
max-width: 184px;
max-height: 64px;
margin: auto;
}
nav#sk-menu {
width: 100%;
padding-top: 10px;
}
.menu-parent-sk {
width: 100%;
}
.menu-parent-sk>li {
position: relative;
}
.menu-parent-sk>li>a {
color: #fff;
position: relative;
display: block;
padding: 8px 0px 8px 25px;
border-bottom: 1px solid rgba(225,225,225,0.2);
}
.menu-parent-sk>li>label{
position: absolute;
color: #fff;
font-weight: bold;
font-size: 20px;
top: 17px;
left: 5px;
transform: translateY(-50%);
}
.menu-parent-sk>li>i{
background: url("chevron-arrow-down.png") right no-repeat;
width: 16px;
height: 16px;
position: absolute;
right: 10px;
top: 17px;
transform: translateY(-50%);
z-index: 100;
}
.menu-parent-sk>li>i.active_menu{
top: 12px;
transform: rotate(180deg)
}
.menu-parent-sk>li>i.active_menu ~ ul.menu-child-sk{
opacity: 1;
visibility: inherit;
}
ul.menu-child-sk{
width: 100%;
height: 0;
opacity: 0;
visibility: hidden;
transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
}
ul.menu-child-sk>li{
position: relative;
}
ul.menu-child-sk>li>a{
background:#4fc0ae;
padding: 8px 0px 8px 40px;
box-sizing: border-box;
display: block;
border-bottom: 1px solid rgba(225,225,225,0.2);
color:#fff;
}
ul.menu-child02-sk{
width: 100%;
}
ul.menu-child02-sk>li{
position: relative;
}
ul.menu-child02-sk>li>a{
background:#3bb19f;
padding: 8px 0px 8px 65px;
box-sizing: border-box;
display: block;
border-bottom: 1px solid rgba(225,225,225,0.2);
color:#fff;
}
.close_menu{
position: absolute;
right: -30px;
top: 31px;
display: block;
width: 24px;
height: 24px;
cursor: pointer;
transform: rotate(-180deg);
}0 và * {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.show-menu-left{
background: rgba(0,145,235,1);
border-radius: 10px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
margin-left:300px;
color:#fff;
align-items: center;
font-weight: bold;
}
.menu-push-sk {
width: 60%;
max-width: 650px;
position: fixed;
height: 100%;
left: -80%;
padding-top: 10px;
box-sizing: border-box;
z-index: 10000;
top:0;
transition:left .5s ease-in-out;
background: linear-gradient(45deg, #4fbcab -132%, #46b4a3 100%);
}
a.logo-sk{
display: block;
margin: auto;
width: 100%;
left: 0;
right: 0;
}
a.logo-sk>img{
width: 100%;
display: block;
max-width: 184px;
max-height: 64px;
margin: auto;
}
nav#sk-menu {
width: 100%;
padding-top: 10px;
}
.menu-parent-sk {
width: 100%;
}
.menu-parent-sk>li {
position: relative;
}
.menu-parent-sk>li>a {
color: #fff;
position: relative;
display: block;
padding: 8px 0px 8px 25px;
border-bottom: 1px solid rgba(225,225,225,0.2);
}
.menu-parent-sk>li>label{
position: absolute;
color: #fff;
font-weight: bold;
font-size: 20px;
top: 17px;
left: 5px;
transform: translateY(-50%);
}
.menu-parent-sk>li>i{
background: url("chevron-arrow-down.png") right no-repeat;
width: 16px;
height: 16px;
position: absolute;
right: 10px;
top: 17px;
transform: translateY(-50%);
z-index: 100;
}
.menu-parent-sk>li>i.active_menu{
top: 12px;
transform: rotate(180deg)
}
.menu-parent-sk>li>i.active_menu ~ ul.menu-child-sk{
opacity: 1;
visibility: inherit;
}
ul.menu-child-sk{
width: 100%;
height: 0;
opacity: 0;
visibility: hidden;
transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
}
ul.menu-child-sk>li{
position: relative;
}
ul.menu-child-sk>li>a{
background:#4fc0ae;
padding: 8px 0px 8px 40px;
box-sizing: border-box;
display: block;
border-bottom: 1px solid rgba(225,225,225,0.2);
color:#fff;
}
ul.menu-child02-sk{
width: 100%;
}
ul.menu-child02-sk>li{
position: relative;
}
ul.menu-child02-sk>li>a{
background:#3bb19f;
padding: 8px 0px 8px 65px;
box-sizing: border-box;
display: block;
border-bottom: 1px solid rgba(225,225,225,0.2);
color:#fff;
}
.close_menu{
position: absolute;
right: -30px;
top: 31px;
display: block;
width: 24px;
height: 24px;
cursor: pointer;
transform: rotate(-180deg);
}1. Hỗ trợ * {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.show-menu-left{
background: rgba(0,145,235,1);
border-radius: 10px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
margin-left:300px;
color:#fff;
align-items: center;
font-weight: bold;
}
.menu-push-sk {
width: 60%;
max-width: 650px;
position: fixed;
height: 100%;
left: -80%;
padding-top: 10px;
box-sizing: border-box;
z-index: 10000;
top:0;
transition:left .5s ease-in-out;
background: linear-gradient(45deg, #4fbcab -132%, #46b4a3 100%);
}
a.logo-sk{
display: block;
margin: auto;
width: 100%;
left: 0;
right: 0;
}
a.logo-sk>img{
width: 100%;
display: block;
max-width: 184px;
max-height: 64px;
margin: auto;
}
nav#sk-menu {
width: 100%;
padding-top: 10px;
}
.menu-parent-sk {
width: 100%;
}
.menu-parent-sk>li {
position: relative;
}
.menu-parent-sk>li>a {
color: #fff;
position: relative;
display: block;
padding: 8px 0px 8px 25px;
border-bottom: 1px solid rgba(225,225,225,0.2);
}
.menu-parent-sk>li>label{
position: absolute;
color: #fff;
font-weight: bold;
font-size: 20px;
top: 17px;
left: 5px;
transform: translateY(-50%);
}
.menu-parent-sk>li>i{
background: url("chevron-arrow-down.png") right no-repeat;
width: 16px;
height: 16px;
position: absolute;
right: 10px;
top: 17px;
transform: translateY(-50%);
z-index: 100;
}
.menu-parent-sk>li>i.active_menu{
top: 12px;
transform: rotate(180deg)
}
.menu-parent-sk>li>i.active_menu ~ ul.menu-child-sk{
opacity: 1;
visibility: inherit;
}
ul.menu-child-sk{
width: 100%;
height: 0;
opacity: 0;
visibility: hidden;
transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
}
ul.menu-child-sk>li{
position: relative;
}
ul.menu-child-sk>li>a{
background:#4fc0ae;
padding: 8px 0px 8px 40px;
box-sizing: border-box;
display: block;
border-bottom: 1px solid rgba(225,225,225,0.2);
color:#fff;
}
ul.menu-child02-sk{
width: 100%;
}
ul.menu-child02-sk>li{
position: relative;
}
ul.menu-child02-sk>li>a{
background:#3bb19f;
padding: 8px 0px 8px 65px;
box-sizing: border-box;
display: block;
border-bottom: 1px solid rgba(225,225,225,0.2);
color:#fff;
}
.close_menu{
position: absolute;
right: -30px;
top: 31px;
display: block;
width: 24px;
height: 24px;
cursor: pointer;
transform: rotate(-180deg);
}2 cũng đã bị loại bỏ1 Tháng hai 2012
10 Tháng mười hai 2010 Đã cập nhật để phản ánh hỗ trợ 22 tháng tư 2010 Cập nhật hướng dẫn với kết quả kiểm tra ứng dụng email CSS3 của chúng tôi. 21 thuộc tính mới đã được thêm vào, với các mức hỗ trợ khác nhau được quan sát trên các ứng dụng email phổ biến. Đáng chú ý, các ứng dụng khách của Webkit là những người chiến thắng lớn, bao gồm Apple Mail, iPhone Mail và sắp tới là iPad. Ở giai đoạn này, CSS3 được khuyên dùng cho các mục đích trang trí trong email (chẳng hạn như thêm 6 tháng tám 2009 Hướng dẫn được viết lại hoàn chỉnh bao gồm 7 ứng dụng email di động mới và tập trung vào các ứng dụng email phổ biến nhất. Phiên bản dựa trên web của hướng dẫn hiện có 10 ứng dụng email phổ biến nhất, trong khi hướng dẫn PDF bao gồm tất cả 23 ứng dụng email được thử nghiệm. 11 tháng sáu 2008 Chúng tôi đã tăng số lượng khách hàng mà chúng tôi đã thử nghiệm, hiện có tổng cộng 21 khách hàng. Gmail và Outlook 2007 tiếp tục là trọng tâm chính của chúng tôi vì hỗ trợ CSS tiếp tục bị hạn chế Tuy nhiên, các dấu hiệu tích cực từ Microsoft, Entourage 2008 đã được phát hành với sự hỗ trợ CSS tốt hơn đáng kể. 19 tháng 4 năm 2007 Outlook 2007 được phát hành với ít hỗ trợ CSS hơn Outlook 2003. Một bước lùi quan trọng đối với thiết kế email HTML Xin chào, tất cả mọi người đã lâu rồi không quay lại bài viết nào. ) cái này mình chia sẻ với mọi người đang tạo menu đẩy trái sang phải hoặc các bạn có thể quay ngược lại Trong bài viết chia sẻ chia sẻ này cũng không hay lắm, nhưng lâu lâu viết lại tự nhiên thấy HTML/CSS nó thú vị lắm, đôi lúc ngồi xem mấy template hiện nay viết sao đẹp qua và tự nhiên có hứng thú viết thử xem lại . ) Đầu tiên mình tạo một cấu trúc HTML như sau Để nó hiện ra giao diện dễ nhìn và đẹp là do chúng ta viết css cho nó, mình sẽ kiếm vài icon và logo gắn cho đẹp mắt tí, các bạn muốn dùng sao cũng được * {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.show-menu-left{
background: rgba(0,145,235,1);
border-radius: 10px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
margin-left:300px;
color:#fff;
align-items: center;
font-weight: bold;
}
.menu-push-sk {
width: 60%;
max-width: 650px;
position: fixed;
height: 100%;
left: -80%;
padding-top: 10px;
box-sizing: border-box;
z-index: 10000;
top:0;
transition:left .5s ease-in-out;
background: linear-gradient(45deg, #4fbcab -132%, #46b4a3 100%);
}
a.logo-sk{
display: block;
margin: auto;
width: 100%;
left: 0;
right: 0;
}
a.logo-sk>img{
width: 100%;
display: block;
max-width: 184px;
max-height: 64px;
margin: auto;
}
nav#sk-menu {
width: 100%;
padding-top: 10px;
}
.menu-parent-sk {
width: 100%;
}
.menu-parent-sk>li {
position: relative;
}
.menu-parent-sk>li>a {
color: #fff;
position: relative;
display: block;
padding: 8px 0px 8px 25px;
border-bottom: 1px solid rgba(225,225,225,0.2);
}
.menu-parent-sk>li>label{
position: absolute;
color: #fff;
font-weight: bold;
font-size: 20px;
top: 17px;
left: 5px;
transform: translateY(-50%);
}
.menu-parent-sk>li>i{
background: url("chevron-arrow-down.png") right no-repeat;
width: 16px;
height: 16px;
position: absolute;
right: 10px;
top: 17px;
transform: translateY(-50%);
z-index: 100;
}
.menu-parent-sk>li>i.active_menu{
top: 12px;
transform: rotate(180deg)
}
.menu-parent-sk>li>i.active_menu ~ ul.menu-child-sk{
opacity: 1;
visibility: inherit;
}
ul.menu-child-sk{
width: 100%;
height: 0;
opacity: 0;
visibility: hidden;
transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
}
ul.menu-child-sk>li{
position: relative;
}
ul.menu-child-sk>li>a{
background:#4fc0ae;
padding: 8px 0px 8px 40px;
box-sizing: border-box;
display: block;
border-bottom: 1px solid rgba(225,225,225,0.2);
color:#fff;
}
ul.menu-child02-sk{
width: 100%;
}
ul.menu-child02-sk>li{
position: relative;
}
ul.menu-child02-sk>li>a{
background:#3bb19f;
padding: 8px 0px 8px 65px;
box-sizing: border-box;
display: block;
border-bottom: 1px solid rgba(225,225,225,0.2);
color:#fff;
}
.close_menu{
position: absolute;
right: -30px;
top: 31px;
display: block;
width: 24px;
height: 24px;
cursor: pointer;
transform: rotate(-180deg);
}Trong đoạn code CSS các bạn xem cho mình là, mình đang dùng Transition trong CSS, ở đây mình dùng transition thay cho Jquery, nếu các bạn dùng Jquery animate() cũng được nhé, nhưng mình thích CSS hơn Mình sẽ sử dụng vị trí. liên quan đến; . -80%; . -80% , trường hợp nếu ta click vào show-menu-left. thì cái class="menu-push-sk" nó sẽ đưa về giá trị 0 và bạn sẽ nhìn thấy nó $(document).ready(function () {
$(".menu-parent-sk>li>i").click(function(){
$(".menu-parent-sk li").find("i.active_menu").removeClass("active_menu");
$("ul.menu-child-sk").css({"height":"0"});
if($(this).hasClass("active_menu")){
$("ul.menu-child-sk").css({"height":"0px"});
$(this).removeClass("active_menu");
console.log("co");
}else{
$(this).addClass("active_menu");
var count = $(".menu-parent-sk>li>i.active_menu ~ ul.menu-child-sk li").length;
var height = 35;
$(".menu-parent-sk>li>i.active_menu ~ ul.menu-child-sk").css({"height":(height * count)+"px"});
console.log(height);
}
});
$(".show-menu-left").click(function(){
$(".menu-push-sk").css({"left":"0"});
});
$(".close_menu").click(function(){
$(".menu-push-sk").css({"left":"-100%"});
});
});Trên là đoạn mã jquery của mình, có một cái click để hiện menu và đóng menu và một cái click vào các mục cha mẹ để hiện danh sách con của cha mẹ đó. Các bạn có thế xem code nhé |
