我正在嘗試創(chuàng)建一個(gè)網(wǎng)頁(yè)，其中左右邊距固定為 50px，頁(yè)面圖像有一個(gè)索引，使其更接近屏幕，而邊距看起來(lái)更遠(yuǎn)。我也想實(shí)現(xiàn)像我一樣的固定頁(yè)腳我嘗試將左右邊距設(shè)置為 50px 并將它們?cè)O(shè)置為固定位置，并嘗試使用包裝類(lèi)添加到部分，但都沒(méi)有產(chǎn)生所需的結(jié)果。下面是我的代碼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貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個(gè)贊
您沒(méi)有使用 id 選擇器來(lái)引用 css 頁(yè)面中的頁(yè)腳部分，可能您在 CSS 文件的底部引用了 #fixed 來(lái)代替頁(yè)腳。
// 使用這個(gè)代替
#footer{
position: fixed;
bottom: 0;
left: 0;
height :50px;
width:100%;
background-color: transparent;
}
您在菜單導(dǎo)航、部分和細(xì)分 (#portfiolio) 上使用了相同的選擇器，您需要學(xué)習(xí)如何正確創(chuàng)建布局并正確使用 css 選擇器。您可以在 udemy 網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)介上免費(fèi)學(xué)習(xí)。他們的解釋非常好，還有 Youtube 上的 Kenvin Powell 介紹 css 課程。
快速修復(fù) 獲取一個(gè)父級(jí) div 和 2 個(gè)子級(jí)
<div class="parentDiv">
<div class="bgDiv"></div>
<div class="contentDiv></div>
</div>
假設(shè)當(dāng)前屏幕尺寸為 746px，您可以使用這些單位來(lái)獲得所需的輸出
.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 關(guān)注
- 129 瀏覽
添加回答
舉報(bào)
0/150
提交
取消