我正在使用 fullPage.js，我想讓一些文本位于頂部。我期待margin-right并margin-top作業，我什至嘗試過vertical-align。他們沒有作業。
這是我的代碼。
.s1a {
background: url(/https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg);
background-size: cover;
}
.s1a h1 {
text-align: left;
margin-left: 2em;
vertical-align: top;
font-size: 4rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E oRdfN/Gq yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="fullPage">
<div class="section s1a">
<h1>At **Removed**, we truly believe that</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps 4bLV5IEjhOZX gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true
})
</script>
</body>
</html>uj5u.com熱心網友回復：
嘗試
position: absolute;
left: x%;
top: y%;uj5u.com熱心網友回復：
在這種情況下，將文本向左浮動可能會有所幫助。
*{
margin=0;
padding=0;
}
#fullPage {
background: url('https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg');
background-size: cover;
}
#fullPage h1 {
float : left;
font-size: 2rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E oRdfN/Gq yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="fullPage">
<h1>At **Removed**, we truly believe that</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps 4bLV5IEjhOZX gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true
})
</script>
</body>
</html>uj5u.com熱心網友回復：
#Make element position absolute with top and left value#
.s1a {
background: url(/https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg);
background-size: cover;
}
.s1a h1 {
position: absolute;
top: 0;
left: 0;
font-size: 4rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E oRdfN/Gq yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="fullPage">
<div class="section s1a">
<h1>At **Removed**, we truly believe that</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps 4bLV5IEjhOZX gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true
})
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/353796.html
標籤：javascript html css 全页.js
上一篇：vue函式中未定義變數
下一篇：在Flask中下載多個檔案