Как улучшить читабельность?

217

23 марта 2017, 18:44

Здравствуйте!

С трудом разбираюсь с html в связки с c# (.net программирование)!

Как улучшить запись при выводе?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>Data User</title> 
<style> 
.link{display:block; width:300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ext-decoration: none; outline:none;} 
.link{text-decoration: none; color:#85AB70} 
.link:hover{text-decoration: underline; color:green} 
.link:active{color:blue} 
</style> 
<link rel="shortcut icon" href=http://s1.iconbird.com/ico/2013/2/634/w50h50139292026819.png 
</head> 
<body style="width:100%; height:100%; margin: 0; background: url(http://www.wallpapers4u.org/wp-content/uploads/dark_background_line_surface_65896_1920x1080.jpg) #191919"> 
<center><h1 style="color:#85AB70; margin:50px 0">Панель парсера</h1><center><a href="#"></a><table style="width: 1000px; margin:50px auto"><tr> 
<td style="width: 33.3%; height: 35px; color:#B6EEF7; border:2px solid #707070"><center>NN</center></td> 
<td style="width: 33.3%; height: 35px; color:#B6EEF7; border:2px solid #707070"><center>Link</center></td> 
<td style="width: 33.3%; height: 35px; color:#B6EEF7; border:2px solid #707070"><center>Login</center></td> 
<td style="width: 33.3%; height: 35px; color:#B6EEF7; border:2px solid #707070"><center>Password</center></td></tr> 
<center><p style="color:#B6EEF7; margin:50px">Добро пожаловать в панель<center></a><table style="width:10px; margin:50px auto"></center></p></tr> 
</table> 
</html>

Знатоки html, не судите ( это связка с c# ) - то есть при компиляции код получается только таким)

В основном проблема: большие отступы между 1 и 2-ой строчки!

Answer 1

Нужно уменьшить соответствующие margin

body { 
  width: 100%; 
  height: 100%; 
  margin: 0; 
  background: url(http://www.wallpapers4u.org/wp-content/uploads/dark_background_line_surface_65896_1920x1080.jpg) #191919; 
} 
 
.link { 
  display: block; 
  width: 300px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  text-decoration: none; 
  outline: none; 
} 
 
.link { 
  text-decoration: none; 
  color: #85AB70 
} 
 
.link:hover { 
  text-decoration: underline; 
  color: green 
} 
 
.link:active { 
  color: blue 
} 
 
.panel-table { 
  width: 1000px; 
  margin: 10px auto; 
} 
 
.panel-table th, 
.panel-table td { 
  color: #85AB70; 
  width: 31%; 
  height: 35px; 
  border: 2px solid #707070; 
  text-align: center; 
} 
 
.panel-table th { 
  color: #B6EEF7; 
} 
 
.panel-table th:nth-child(1), 
.panel-table td:nth-child(1) { 
  width: 7%; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="UTF-8" /> 
  <title>Data User</title> 
  <style> 
 
  </style> 
  <link rel="shortcut icon" href=http://s1.iconbird.com/ico/2013/2/634/w50h50139292026819.png> 
</head> 
 
<body> 
  <h1 style="color:#85AB70; margin:50px 0 5px; text-align: center;">Панель парсера</h1> 
  <div style="color:#B6EEF7; margin:5px; text-align: center;">Добро пожаловать в панель</div> 
  <table class="panel-table"> 
    <thead> 
      <tr> 
        <th>NN</th> 
        <th>Link</th> 
        <th>Login</th> 
        <th>Password</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>NN</td> 
        <td>Link</td> 
        <td>Login</td> 
        <td>Password</td> 
      </tr> 
    </tbody> 
  </table> 
</body> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Несколько цветов для заполнения stroke по окружности

Я хочу создать радугу по окружности, как на рисунке ниже

246

HTML

Настройка теста на wordpress

Имеется плагин Wp-Pro-QuizНа нем создал тест, и для каждого теста указал определенную рубрику, после окончания теста выводится общий процент правильности...

381

HTML

Как обозначить права доступа

Всем приветУ меня сайт с единой базой агентств недвижимости

240

HTML

Кнопка “Подробнее” и “Скрыть” вместе со стрелкой

Имею такой вот код, но он не работает, при клике на кнопку у меня стрелка не загружается "вверх" для слова "Скрыть"Выше есть блоки, там такой...

206