2017-08-13 84 views
0

我開始做一個頁面顯示,但是當我加入這一行與 <!doctype html> 我的代碼不正確顯示。哪裏有問題? (如果我的代碼似乎不好,很難與錯誤,請抱歉。<!DOCTYPE HTML>強制代碼而不 <code><!doctype html></code>, 無法正常

我只是在前端一個新人,我會非常感激,如果你能幫助我。

with !doctype html

without !doctype html

<html> 
<head> 
<title> Repear phones, laptops, tablets. Replacement screen, battery, touch screen. Unlock and re-flashing phone.</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
<div class="visit-card"> 
    <div class="visit-card__part-1"> 
    <table class="visit-card__part-1__table"> 
     <tr> 
     <td class="visit-card__part-1__table__logo"> 
      <img class="visit-card__part-1__logo" src="images/servis-plus.png" alt="Service-plus.by"> 
     </td> 
     <td class="visit-card__part-1__table__tel-1"> 
      <span class="visit-card__part-1__table__tel-1__number">+375291386105</span> <br /> <span class="visit-card__part-1__table__tel-1__time">10:00-20:00</span><span class="visit-card__part-1__table__tel-1__empty">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</span 
     </td> 
     <td class="visit-card__part-1__table__empty-block"> 
     </td> 
     <td class="visit-card__part-1__table__tel-2"> 
      +375293711698 
     </td> 
     </tr> 
    </table> 
    </div> 
    <div class="visit-card__part-2"> 
    <div class="visit-card__part-2__headline"> Quickly need <br /> repair device? 
    </div> 
</div> 
</div> 
</body> 
</html> 


body { 
margin: 0; 
} 

.visit-card { 
width: 1280px; 
height: 750px; 
background-size: 1280px 750px; 
background-image: url(images/main-bg.jpg); 
} 

.visit-card__part-1__logo { 
width: 191px; 
height: 78px; 
} 

.visit-card__part-1__table { 
width: 100%; 
height: 140px; 
color: white; 
font-family: arial; 
font-size: 24; 
border-bottom: 1px solid #80705c; 
} 

.visit-card__part-1__table__logo { 
text-align: right; 
width: 270px; 
} 

.visit-card__part-1__table__tel-1 { 
text-align: right; 
vertical-align: top; 
} 

.visit-card__part-1__table__tel-2 { 
vertical-align: top; 
} 

.visit-card__part-1__table__tel-1__time { 
font-size: 17; 
line-height: 1%; 
} 

.visit-card__part-1__table__tel-1__empty { 
visibility: hidden; 
font-size: 1; 
} 

.visit-card__part-1__table__tel-1__number { 
line-height: 75px; 
} 

.visit-card__part-1__table__tel-2 { 
line-height: 75px; 
} 

.visit-card__part-1__table__empty-block { 
width: 65px; 
} 

.visit-card__part-2__headline { 
color: white; 
} 
+0

代碼示例中有一個錯字。您的一個交叉區塊是。不過,我不確定這是否是您的問題。 – Jordan

回答

4

當您添加<!doctype html>你需要更加小心你的HTML和CSS首先修復結束標記span錯字但後來你還需要單位添加到您的字體大小在CSS。:

例如:

.visit-card__part-1__table__tel-1__time { 
    font-size: 17px; 
    line-height: 1%; 
} 

需要17px17。我認爲你的css中有三種字體大小,沒有單位。改變這個應該可以解決它。