Взгляните на html файл index.html. Он выглядит довольно
стандартно, не так ли? Вам знакомы все эти вещи: заголовки, абзацы, картинки,
списки и таблицы. Посмотрите на вкладку с результатами, там тоже никаких
сюрпризов. (На самом деле все это выглядит довольно уродливо)
Мы закомментировали очень важную строку в файле index.html. Если удалить комментарий (“<!-“
сначала четвертой строки и “->” в конце строки кода), вы сможете увидеть волшебство,
которое творит css. Не
удаляйте тег <link>
и его содержимое.
задание
Снимите комментарий с тега <link> и посмотрите на результат, все это вы скоро сможете сделать самостоятельно при помощи css.
решение
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Plans for World Domination</li>
<li>Contact</li>
</ul>
</div>
<h2>About Me</h2>
</div>
<div id="left">
<img src="http://bit.ly/Vw049i"/>
<p>I am the angriest puppy in the world. This has been scientifically proven in several clinical trials.</p>
</div>
<div id="right">
<table>
<th colspan="3">My Bros</th>
<tr>
<td><img src="http://bit.ly/W3UhKC"/></td>
<td><img src="http://bit.ly/UIfMiC"/></td>
<td><img src="http://bit.ly/Xpnc74"/></td>
</tr>
<tr>
<td><img src="http://bit.ly/ZgRBGF"/></td>
<td><img src="http://bit.ly/Xl6A3o"/></td>
<td><img src="http://bit.ly/12N3dGl"/></td>
</tr>
<tr>
<td><img id="bottom_left" src="http://bit.ly/Vw0EDW"/></td>
<td><img src="http://bit.ly/XMRTlU"></td>
<td><img id="bottom_right" src="http://bit.ly/134HLww"/></td>
</tr>
</table>
</div>
<div id="footer">
<div id="button">
<p>Send me an <span class="bold">e-mail</span>!</p>
</div>
</div>
</body>
</html>
Комментариев нет :
Отправить комментарий