HTML மற்றும் CSS கொண்டு மையமிடப்பட்ட மெனு இணைப்புகளை (Centered Menu Links) உருவாக்குவது எப்படி
மையமிடப்பட்ட மெனு இணைப்புகள் (Centered Menu Links) என்பது இணையதளத்தில் மெனு இணைப்புகளை இடது மற்றும் வலது பக்கங்கள் சமமாக வைப்பதற்கான ஒரு அழகான வடிவமைப்பு கூறாகும். இது இணையதளத்தின் காட்சியை சீராகவும் அழகாகவும் காட்ட உதவும். இந்த பதிவில், HTML மற்றும் CSS பயன்படுத்தி மையமிடப்பட்ட மெனு இணைப்புகளை உருவாக்குவது எப்படி என்பதை பார்ப்போம்.
கட்டமைப்பு (HTML)
முதலில், HTML-ஐ பயன்படுத்தி மெனு இணைப்புகளின் அடிப்படை அமைப்பை உருவாக்குவோம்.
<!DOCTYPE html>
<html lang="ta">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>மையமிடப்பட்ட மெனு இணைப்புகள்</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul class="menu">
<li><a href="#">முகப்பு</a></li>
<li><a href="#">பற்றி</a></li>
<li><a href="#">சேவைகள்</a></li>
<li><a href="#">தொடர்பு</a></li>
</ul>
</nav>
</body>
</html>வடிவமைப்பு (CSS)
CSS கொண்டு மெனு இணைப்புகளை மையமாகவும் அழகாகவும் வடிவமைப்போம். இது பயன்படுத்த எளிமையாகவும், கண்ணுக்கு நல்லதாகவும் இருக்கும்.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
nav {
background-color: #333;
padding: 10px;
width: 100%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.menu {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.menu li {
margin: 0 15px;
}
.menu li a {
text-decoration: none;
color: white;
padding: 10px 15px;
display: block;
transition: background-color 0.3s;
}
.menu li a:hover {
background-color: #575757;
border-radius: 5px;
}
