Saya sangat baru dalam bidang pengekodan web dan memerlukan bantuan. Saya sedang membuat halaman web untuk pasukan sukan tempatan dan memandangkan halaman web mereka tidak kelihatan sangat bagus dan Wordpress tidak begitu mesra pengguna, saya fikir mungkin lebih mudah untuk mencuba pengekodannya sendiri.
Saya tidak boleh memasuki bar navigasi, kandungan utama dan pengaki pada halaman. Saya mahu bar navigasi, kandungan utama dan pengaki dimasukkan dan hanya 80% lebar supaya anda boleh melihat beberapa latar belakang dengan gambar atlet dari pasukan sukan)
#footerWrapper { max-width: 80%;
max-height: 5%;
margin-bottom: 20px;
line-height: 30px;
font-size: 0.9em;
border: 0 solid #ddd;
border-bottom-color: #3F8444;
border-width: 1px 0;}
/*Positions and Margins*/
.image {
position: absolute;
top:100px;
left:100px;
}
.image-1 {
position: absolute;
top:20px;
right: 100px;
}
header{
text-align: center;
margin-top: 100px;
margin-bottom: 100px;
}
main{ width: 80%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;}
footer{
position: static;
left: 0;
bottom: 0;
width: 80%;
height: 5%;}
p {margin-left: 5px;
margin-right: 5px;}
/*Navigation*/
ul { display: flex;
flex-direction: row;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #04AA6D;
width: 80%;
}
/*li {float: left;}*/
li a, .dropdown li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {background-color: #111;}
li.dropdown {
display: inline-block;}
.dropdown-content {
display:none;
position: absolute;
background-color: #04AA6D;
color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,.2);
z-index: 1;
}
.dropdown-content a
{
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #111;color: white;}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
</div>
</head>
<body>
<header>
<div class="image" id="Sports Team logo">
<img src="Sport Teams logo">
</div>
<div class="image-1" id="Club logo">
<img src="Club logo" width="246" height="237">
</div>
<h1>Sports Team</h1>
</header>
<nav>
<ul>
<li><a href="Sports Team url link">Home</a></li>
<li class="dropdown">
<a class="dropbtn">Club Info</a>
<div class="dropdown-content">
<a href="Sports Team url link">About Us</a>
<a href="Sports Team url link">Committee</a>
<a href="Sports Team url link">Contact Us</a>
<a href="Sports Team url link">Game Rules</a>
<a href="Sports Team url link">Uniforms</a>
<a href="Sports Team url link">Fair Play</a>
<a href="Sports Team url link">Terms and Conditions</a>
</div>
<li class="dropdown">
<a class="dropbtn">Winter Season 2023</a>
<div class="dropdown-content">
<a href="Sports Team url link">Training Information</a>
<a href="Sports Team url link">Game Details</a>
<a href="Sports Team url link">Registration</a>
<a href="Sports Team url link">Season Info Pack</a>
<a href="Sports Team url link">Handbook</a>
<a href="Sports Team url link">Privacy Policy</a>
</div>
<li class="dropdown">
<a class="dropbtn">Summer Season 2023</a>
<div class="dropdown-content">
<a href="Sports Team url link">Training Information</a>
<a href="Sports Team url link">Game Details</a>
<a href="Sports Team url link">Registration</a>
<a href="Sports Team url link">Season Info Pack</a>
</div>
<li><a href="Sports Team url link">Umpire Information</a>
</ul>
</nav>
<Div></Div>
<main>
<div class="main">
<h2>Contact Us</h2>
<p>Sports Team email</p>
</main>
</body>
</html>
Saya mencuba banyak gaya CSS yang berbeza terapung, jidar, lentur, grid, dll.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Syabas! Permulaan yang hebat. Nampaknya awak sedang melepak. Saya sangat mengesyorkan melihat sesuatu seperti tailwindcss atau bootstrap.
Rangka kerja ini membantu menangani kebanyakan penalaan halus yang membosankan. Anda sebenarnya tidak akan mempunyai banyak CSS dalam fail anda, anda hanya boleh menambah nama kelas. Sesuatu seperti
class="m-auto d-flex text-center"akan menggantikan semua css anda.Rangka kerja ini adalah berdasarkan kelas dan ini adalah cadangan saya yang seterusnya. Anda harus menggunakan kelas atau ID untuk segala-galanya. Ini membolehkan anda menulis kod yang lebih bersih dan teratur. Anda sepatutnya mempunyai:
<style> .nav_bar { } </style> <ul class="nav_bar"> ... </ul>Bagaimana jika anda perlu mempunyai berbilang
uldi tapak web anda, tetapi warna tersebut perlu berbeza atau tidak boleh dipusatkan?Berikut ialah cara untuk memusatkan kod sedia ada: Margin pada bar navigasi dan bar utama hendaklah automatik dan bukannya 0.
main { width: 80%; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; margin: auto; } ul { display: flex; flex-direction: row; align-items: center; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #04AA6D; width: 80%; }