Tôi nhận thấy rằng mã CSS được liên kết với các liên kết trang thông thường của tôi có ảnh hưởng đến các mục điều hướng trong menu điều hướng web của tôi. Làm cách nào để tránh điều này và giữ các liên kết menu điều hướng như kiểu ban đầu? Nhìn thấy http://jsfiddle.net/8MwX7/
Cảm ơn bạn rất nhiều
Liên kết trang:
một:liên kết {
viền dưới: không có;
màu: #2d7ddf;
trang trí văn bản: không có;
}
a:di chuột {
viền dưới: 1px chấm #2d7ddf;
lý lịch: không có;
}
a:đã ghé thăm {
lý lịch: không có;
}
a:hoạt động {
lý lịch: không có;
}
Trình đơn điều hướng:
điều hướng {
phao: đúng;
lề: tự động 20px;
width: 100%;
}
điều hướng ul {
lề phải: -4px;
lề trái: 5px;
căn chỉnh văn bản: đúng;
}
hải quân {
hiển thị: khối nội tuyến;
lề phải: -4px;
lề trái: 5px;
căn dọc: trên cùng;
}
điều hướng một {
phần đệm: 4px 8px;
trang trí văn bản: không có;
màu: rgba(255,255,255,1);
nền: rgba(0,0,0,0,25);
trọng lượng phông chữ: 300;
chuyển đổi văn bản: chữ hoa;
khoảng cách chữ: 1,5px;
cỡ chữ: 14px;
font-weight: 400;
}
điều hướng: di chuột {
nền: rgba(0,0,0,0.35)
}
.activeNav {
nền: rgba(0,0,0,0.35)
}
nav ul li ul {
position: absolute;
display: block;
lề trên: 5px;
lý lịch: không có;
phần đệm trên cùng: 5px
}
nav ul li ul li {
display: block;
phao: không có;
margin: 0;
phần đệm: 0
}
nav ul li ul li a {
display: block;
căn chỉnh văn bản: trái;
màu: rgba(255,255,255,0.9);
bóng văn bản: 0 1px rgba(0,0,0,0.33);
phần đệm: 10px
}
nav ul li ul li a:hover {
nền: rgba(20,150,220,0.5);
color: white;
bóng văn bản: 0 1px rgba(0,0,0,0.5)
}
.di chuột qua một {
display: block;
}
khoảng .hover {
màu: rgba(255,255,255,0.9);
nền: rgba(20,150,220,0.5);
bán kính đường viền: 5px;
position: absolute;
display: block;
lề: 5px 0 0 -57px;
phần đệm: 10px;
cỡ chữ: 13px;
trọng lượng phông chữ: 300;
khoảng cách chữ: 1,5px;
chuyển đổi văn bản: chữ hoa;
text-align: center;
con trỏ: mặc định;
}
Tôi muốn nói thêm rằng việc sử dụng từ khóa !important trong CSS thường được coi là cách làm không tốt.
Ý nghĩa của việc sử dụng "!important" trong CSS là gì?
http://james.padolsey.com/usability/dont-use-important/
Lý do phong cách của bạn không hiệu quả là vì
a:link, a:hover, a:active, a:visited
được coi là hơn
Cụ thể hơn
điều hướng một
Nếu bạn muốn sửa lỗi này mà không sử dụng thẻ quan trọng, hãy sửa đổi "nav a" thành như sau:
điều hướng a:link, điều hướng a:hover, điều hướng a:active, điều hướng a:visited {
phần đệm: 4px 8px;
trang trí văn bản: không có;
màu: rgba(255,255,255,1);
nền: rgba(0,0,0,0,25);
trọng lượng phông chữ: 300;
chuyển đổi văn bản: chữ hoa;
khoảng cách chữ: 1,5px;
cỡ chữ: 14px;
font-weight: 400;
}
Đoạn mã trên tạo ra css sau:
điều hướng a:link, điều hướng a:hover, điều hướng a:active, điều hướng a:visited
So sánh
Cụ thể hơn
a:link, a:hover, a:active, a:visited
Đây là liên kết đến fiddle được cập nhật: http://jsfiddle.net/8MwX7/2/
Về html - kiểu liên kết trang bị nhầm lẫn với kiểu liên kết menu điều hướng. Tôi có thể sử dụng các kiểu liên kết khác nhau không? , chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/24474821/
Tôi là một lập trình viên xuất sắc, rất giỏi!