Introduktion till webbutveckling (DA156A)

Malmö Högskola

Föreläsning 5 - Layout med CSS



Dagens exempel

Ni kan ladda ner alla exempel i ZIP-format här

Exemepel 1 - HTML


<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Exempel</title>
		<link href="https://fonts.googleapis.com/css?family=Mukta+Malar" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
	</head>
	<body>

		<h1>Star Wars</h1>

		<div class="movie">
			<div class="rating">
				<img src="images/star.png" alt="Rating star">
				<img src="images/star.png" alt="Rating star">
				<img src="images/star.png" alt="Rating star">
			</div>
			<h2>Star Wars: Episode I</h2>
			<img src="images/1.png" alt="Star Wars poster">
		</div>

		<div class="movie">
		      <div class="rating">
				<img src="images/star.png" alt="Rating star">
				<img src="images/star.png" alt="Rating star">
				<img src="images/star.png" alt="Rating star">
			</div>
			<h2>Star Wars: Episode II</h2>
			<img src="images/2.png" alt="Star Wars poster">
		</div>

		<div class="movie">
		      <div class="rating">
				<img src="images/star.png" alt="Rating star">
				<img src="images/star.png" alt="Rating star">
				<img src="images/star.png" alt="Rating star">
			</div>
			<h2>Star Wars: Episode III</h2>
			<img src="images/3.png" alt="Star Wars poster">
		</div>

		<div class="movie">
			<h2>Star Wars: Episode IV</h2>
			<img src="images/4.png" alt="Star Wars poster">
		</div>

		<div class="movie">
			<h2>Star Wars: Episode V</h2>
			<img src="images/5.png" alt="Star Wars poster">
		</div>

		<div class="movie">
			<h2>Star Wars: Episode VI</h2>
			<img src="images/6.png" alt="Star Wars poster">
		</div>

	</body>
</html>

Exemepel 1 - CSS


body {
	background-color: #eee;
	font-family: 'Mukta Malar', sans-serif;
	margin: 0px;
	padding-top: 80px;
}

body > h1 {
	text-align: center;
	background-color: black;
	color: #fff;
	margin: 0px;
	position: fixed;
	z-index: 2;
	left: 0;
	right: 0;
	top: 0;
}

.movie {
	width: 500px;
	background-color: #fff;
	margin: 10px auto;
	overflow: hidden;
	height: 150px;
	box-shadow: 0 0 8px #888;
	position: relative;
}

.movie > h2 {
	float: left;
	line-height: 150px;
	margin: 0px;
	padding-left: 10px;
}

.movie > img {
	float: right;
	height: 150px;
}

.movie > .rating {
	width: 100px;
	height: 25px;
	background-color: rgba(255, 255, 255, 0.5);
	right: 0;
	top: 0;
	position: absolute;
}

.movie > .rating > img {
	float: right;
	height: 17px;
	margin: 2px;
}

Exemepel 2 - HTML


<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Exempel</title>
		<link href="style.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<div id="wrapper">
			<header>
				<h1>Min Webbplats</h1>
			</header>
			<nav>
				<h2>Meny</h2>
				<ul>
					<li><a href="#">Länk</a></li>
					<li><a href="#">Länk</a></li>
					<li><a href="#">Länk</a></li>
					<li><a href="#">Länk</a></li>
				</ul>
			</nav>
			<main>
				<h2>Innehåll</h2>
				<p>Lite text...</p>
				<p>Lite text...</p><p>Lite text...</p>
				<p>Lite text...</p>
				<p>Lite text...</p>
				<p>Lite text...</p>
				<p>Lite text...</p>
			</main>
			<footer>
				Made by Anton
			</footer>
		</div>
	</body>
</html>

Exemepel 2 - CSSL


body {
	background-color: #eee;
}

#wrapper {
	min-width: 600px;
	max-width: 1200px;
	background-color: #ccc;
	overflow: hidden;
	margin: 20px auto;
}

#wrapper > header {
	background-color: #bbb;
}

#wrapper > header > h1 {
	margin: 0px;
	padding: 20px;
	text-align: center;
}

#wrapper > nav {
	background-color: #ccc;
	width: 20%;
	padding: 10px;
	float: left;
	box-sizing: border-box;
}

#wrapper > main {
	background-color: #ddd;
	width: 80%;
	padding: 10px;
	float: left;
	box-sizing: border-box;
}

#wrapper > footer {
	background-color: #bbb;
	height: 50px;
	line-height: 50px;
	text-align: center;
	clear: both;
}

Användning av allt material är fritt, om motsatsen inte anges. Länka gärna! Formellt utrycks detta med licensen Creative Commons Erkännande 4.0 Sverige.

Webbplatsen drivs av Anton Tibblin, som också ansvarar för kursen Introduktion till webbutveckling, fristående distanskurs, Malmö högskola.