强制代码无法正确显示

时间:2017-08-13 17:38:21

标签: javascript html css html5 frontend

我开始制作一个没有的页面 <!doctype html>, 但是当我添加这一行时 <!doctype html> 我的代码无法正确显示。问题出在哪儿? (如果我的代码看起来很糟糕,很难并且有错误,请抱歉。

我只是前端的新手。如果你能帮助我,我将非常感激。

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;
}

1 个答案:

答案 0 :(得分:4)

当你添加<!doctype html>时,你需要更加小心你的html和css。首先修复结束标记中的span拼写错误。但是你还需要在css中为你的字体大小添加单位:

例如:

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

需要17px而不是17。我认为你的css中有三种字体大小,没有单位。改变它应该解决它。