浏览代码

overige-bestanden

02-floats
Jessy Bruyneel 4 年前
父节点
当前提交
ff48c9f628
共有 2 个文件被更改,包括 96 次插入0 次删除
  1. 53
    0
      02-floats/index.html
  2. 43
    0
      02-floats/style.css

+ 53
- 0
02-floats/index.html 查看文件

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>HTML/CSS - 002 fixed layout nadoen</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

<header>
<h1>Titel</h1>
</header>

<main>
<p>
HyperText Markup Language (afgekort HTML) is een op SGML gebaseerde opmaaktaal voor de specificatie van documenten, voornamelijk bedoeld voor het wereldwijde web.
Het is de standaard opmaaktaal voor webpagina's.
Documenten in HTML kunnen geopend en gelezen worden door een webbrowser om vervolgens als webpagina weergegeven te worden.
HTML-documenten bevatten op de eerste plaats semantische structuur en tekstuele inhoud van een webpagina;
de opmaak en visuele weergave kunnen er ook in worden beschreven, maar daar wordt tegenwoordig gewoonlijk CSS voor gebruikt
</p>
</main>

<div class="first">
<ul>
<li>zien</li>
<li>ruiken</li>
<li>horen</li>
<li>voelen</li>
<li>proeven</li>
</ul>
</div>

<div class="second">
<ol>
<li>ogen</li>
<li>neus</li>
<li>oren</li>
<li>vingers</li>
<li>tong</li>
</ol>
</div>

<div>
<footer>
<img src="https://previews.123rf.com/images/axelbueckert/axelbueckert1808/axelbueckert180800015/106732771-nfsw-is-internet-slang-for-not-safe-for-work-or-adult-content-containing-nudity-pornography-profanit.jpg" alt="Javascript">
</footer>
</div>

</body>
</html>

+ 43
- 0
02-floats/style.css 查看文件

@@ -0,0 +1,43 @@
html {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

header {
text-align: center;
color: white;
background-color: darkred;
font-size: 30px;
border: 3px solid black;
font-weight: bolder;
}

main {
font-size: 20px;
}

footer {
background: blue;
width: 70%;
border: 3px solid black;
}

img {
width: 100%;
}

.first {
width: 30%;
background-color: green;
border: 3px solid black;
}
.second {
width: 50%;
background-color: yellow;
border: 3px solid black;
}


ul {
list-style-type: circle;
}

正在加载...
取消
保存