我正在嘗試創建一個網頁，其中左右邊距固定為 50px，頁面圖像有一個索引，使其更接近屏幕，而邊距看起來更遠。我也想實現像我一樣的固定頁腳我嘗試將左右邊距設置為 50px 并將它們設置為固定位置，并嘗試使用包裝類添加到部分，但都沒有產生所需的結果。下面是我的代碼HTML 代碼：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Archers</title> <link rel="stylesheet" href="arch.css"></head><body> <section id="main"> <div class="bg1"> <header> <div id="navbar"> <nav class="nav-list"> <ul class="ul-style "> <li><a href="#portfolio">OUR PORTFOLIO</a></li> <li><a href="#process">OUR PROCESS</a></li> <li><a href="#about">ABOUT</a></li> <li><a href="#main">HOME</a></li> </ul> </div> </header> </div> </div> </section> <section id="about"> <div class="bg1"> <div class="about_us"> <a name="#about"> <p> <h1>ABOUT US</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste, itaque minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem rem. Sit, illum, non. </p> </a> </div> </div> </div> </section></html>
1 回答
瀟湘沐
TA貢獻1816條經驗 獲得超6個贊
您沒有使用 id 選擇器來引用 css 頁面中的頁腳部分，可能您在 CSS 文件的底部引用了 #fixed 來代替頁腳。
// 使用這個代替
#footer{
position: fixed;
bottom: 0;
left: 0;
height :50px;
width:100%;
background-color: transparent;
}
您在菜單導航、部分和細分 (#portfiolio) 上使用了相同的選擇器，您需要學習如何正確創建布局并正確使用 css 選擇器。您可以在 udemy 網頁設計簡介上免費學習。他們的解釋非常好，還有 Youtube 上的 Kenvin Powell 介紹 css 課程。
快速修復 獲取一個父級 div 和 2 個子級
<div class="parentDiv">
<div class="bgDiv"></div>
<div class="contentDiv></div>
</div>
假設當前屏幕尺寸為 746px，您可以使用這些單位來獲得所需的輸出
.parentDiv{
width: 646px;
max-width: 100%;
position: relative;
max-width: 100%;
margin: auto;
perspective: 500px;
height: 100%;
}
.bgDiv{
box-shadow: inset -3px -70px 8px 6vw rgba(255, 255, 255, 0.8);
background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255,
255, 255, 0.5)), url(https://placebear.com/500/300);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
z-index: -999;
background-size: cover;
}
.contentDiv{
position: absolute;
z-index: 999;
top: 20px;
left: 50px;
transform: translate3d(25px, 25px, 50px);
padding: 4rem;
}
- 1 回答
- 0 關注
- 132 瀏覽
添加回答
舉報
0/150
提交
取消