0
我剛剛在今天早些時候發佈了我的網站，我注意到有些事情在實際運行時有所不同。這是我編寫看起來像HTML網站一旦發佈就做了奇怪的優化？
而這正是它看起來就像當我把車停在現場我的手機
甚至有幾件事情錯了，當我把它拉到我的電腦上，讓我質疑這些是否還有優化問題....如果任何人都可以幫助我將我的網站的所有方面都保存在一個地方，那麼不管觀看設備如何驚人！
HTML指數代碼
<!DOCTYPE html>
<head>
<title>P2 Fitness Company</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div id = "headerbg"></div>
<div class = "header">
<h1>FREE PDF WITH 7 TIPS TO BOOST <br>YOUR PROGRESS IN THE GYM</h>
</div>
<div id = "logo">
<img src = "img/p2fitnesstransparent.png" width = "350px" height = "150px">
</div>
<div id = "inputbg"></div>
<div class = "input">
<form method = "get" action = "files/7tips.pdf">
<input type = "text" name = "first" size = "15">
<input type = "text" name = "last" size = "15"> <br> <br>
<input type = "text" name = "email" size = "20"> <br> <br>
<input id = "enterbtn" type = "submit" value = "DOWNLOAD">
</form>
</div>
<div class = "pdfdisplay">
<img src = "img/pdfdisplay.png" height = "400px" width = "400px">
</div>
<h5 id = "firsttxt">FIRST*</h5>
<h5 id = "lasttxt">LAST*</h5>
<h5 id = "emailtxt">EMAIL*</h5>
<img src = "img/downloadhere.png" id = "downloadhere">
</center>
<div id = "benefits">
<h2>BENEFITS OF PDF</h2>
<h3>-Utilize the the time you are<br>already spending in the gym</br>
-Learn new ways to gain muscle</br>
-Learn to live a healthier lifestyle</br>
-Reduce risk of injury</h3>
</div>
</body>
CSS代碼
@font-face {
font-family: "My Custom Font";
src: url(fonts/font.ttf) format("truetype");
}
body
{
background: url(img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
o-background-size: cover;
background-size: cover;
font-family: "My Custom Font", Times, serif;
max-width: 100%;
overflow-x: hidden;
}
#headerbg
{
height: 450px;
width: 710px;
background-color: rgb(28, 28, 28);
position: relative;
top: 100px;
border-radius: 15px;
opacity: 0.6;
}
.header
{
position: relative;
bottom: 345px;
color: white;
padding-right: 30px;
}
#logo
{
position: relative;
bottom: 605px;
right: 210px;
}
#inputbg
{
width: 375px;
height: 550px;
background-color: rgb(28, 28, 28);
position: relative;
left: 168px;
bottom: 150px;
border-radius: 15px;
opacity: 0.6;
}
.input
{
color: white;
text-align: center;
position: relative;
bottom: 320px;
left: 170px;
}
#firsttxt
{
position: relative;
bottom: 900px;
left: 45px;
color: white;
}
#lasttxt
{
position: relative;
bottom: 938px;
left: 187px;
color: white;
}
#emailtxt
{
position: relative;
bottom: 933px;
left: 103px;
color: white;
}
#downloadhere
{
position: relative;
bottom: 1512px;
left: 169px;
}
#enterbtn
{
width: 135px;
height: 50px;
color: rgb(186, 209, 225);
background-color: rgb(203, 38, 38);
border-color: rgb(203, 38, 38);
font-size: 20px;
position: relative;
text-align: center;
}
#benefits
{
position: relative;
bottom: 1900px;
color: white;
text-align: center;
}
.pdfdisplay
{
position: relative;
bottom: 860px;
left: 175px;
}