简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Cara memusatkan bar navigasi, kandungan utama dan pengaki
P粉165823783
P粉165823783 2023-09-16 13:52:33
0
1
1144

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.

P粉165823783
P粉165823783

membalas semua(1)
P粉473363527
P粉4733635272023-09-17 09:10:05 Tingkat 1

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 ul di 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%;
 }
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！