Responsives Webdesign 2 und 3 werden nun zu Responsives Webdesign 5 verbunden\u2026<\/p>\n\n\n\n\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":" Responsives Webdesign 2 und 3 werden nun zu Responsives Webdesign 5 verbunden\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-3046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/3046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=3046"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/3046\/revisions"}],"predecessor-version":[{"id":3047,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/3046\/revisions\/3047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=3046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=3046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=3046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Der HTML Quelltext f\u00fcr index.html:<\/strong><\/p>\n\n\n\n<!DOCTYPE html> \n<html lang=\"de\">\n\n<head> \n<title>Webdesign<\/title>\n<link rel=\"stylesheet\" href=\"01_CSS\/01_zentrale.css\" type=\"text\/css\" \/>\n<link rel=\"stylesheet\" href=\"01_CSS\/600.css\" media=\"screen and (max-width: 600px)\">\n<link rel=\"stylesheet\" href=\"01_CSS\/601.css\" media=\"screen and (min-width: 601px), (max-width: 1000px)>\n<meta charset=\"UTF-8\">\n<\/head> \n\n<body>\n<div id=\"wrapper\"> \n<header> \n<nav2>\n<ul>\n <li><a href=\"index.html\">Navigation<\/a>\n<ul>\n <li><a href=\"index.html\">Seite 1<\/a><\/li> \n <li><a href=\"index.html\">Seite 2<\/a><\/li> \n <li><a href=\"index.html\">Seite 3<\/a><\/li> \n <li><a href=\"index.html\">Seite 4<\/a><\/li> \n<\/ul> \n<\/li>\n<\/ul>\n<\/nav2> \n<\/header>\n\n<nav> <!-- Anfang vom nav-Element -->\n\n<ul>\n <li><a href=\"index.html\">Startseite 1<\/a><\/li>\n <li><a href=\"index.html\">Startseite 2<\/a><\/li>\n <li><a href=\"index.html\">Seite 3<\/a><\/li> \n <li><a href=\"index.html\">Seite 4<\/a><\/li> \n<\/ul>\n\n<\/nav> <!-- Ende vom nav-Element -->\n\n<main>\n\n<article>\n<h1>Responsives Webdesign Version 5:<\/h1>\n<p>\nWillkommen auf Responsives Webdesign Version 5.\n<br \/><br \/>\nDas Ziel ist eine Webseite die bei einer Breite bis 600 Pixel einen roten Seitenhintergrund bekommt und einen gr\u00fcnen Kopfbereich. Ab 601 Pixel soll der Hintergrund die Farbe blau annehmen und der Kopfbereich gelb erstrahlen.\n<\/p>\n<\/article>\n<br \/>\n\n<\/main> \n\n<footer> \n<\/footer> \n\n<\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c01_zentrale.css\u201c:<\/strong><\/p>\n\n\n\n@import url(02_fundament.css);\n@import url(03_body.css);\n@import url(04_wrapper.css);\n@import url(05_kopfbereich.css);\n@import url(06_navibereich.css);\n@import url(07_textbereich.css);\n@import url(08_artikel.css);<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c02_fundament.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\n* {\npadding: 0;\nmargin: 0;\n}\n\nhtml {\nheight: 101%;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c03_body.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nbody {\nbackground-color: white;\ncolor: black;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c04_wrapper.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\n#wrapper {\nmargin: 5px;\nbackground-color: white;\ncolor: black;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c05_kopfbereich.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nheader {\nheight: 80px;\nbackground-image: url(..\/cpm-header01.jpg);\nbackground-repeat: no-repeat;\nbackground-color: steelblue;\ncolor: white;\n\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n\npadding-top: 5px;\npadding-right: 5px;\npadding-bottom: 5px;\npadding-left: 5px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c06_navibereich.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nnav {\nposition: absolute;\ntop: 97px;\nleft: 5px;\nwidth: 210px;\nbackground-color: steelblue;\ncolor: white;\n\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n\npadding-top: 10px;\npadding-right: 10px;\npadding-bottom: 10px;\npadding-left: 10px;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\nnav li {\ndisplay: block;\nlist-style-type: none;\npadding: 3px;\n}\n\nnav a:link {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav a:visited {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:hover {\nbackground-color: red;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:focus {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:active {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav2 {\nposition: absolute;\nleft: -9999px;\ntop: -9999px;\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c07_textbereich.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nmain {\nbackground-color: steelblue;\ncolor: white;\n\nmargin-top: 3px;\nmargin-right: 5px;\nmargin-bottom:5px;\nmargin-left: 241px;\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n\npadding-top: 20px;\npadding-right: 20px;\npadding-bottom: 20px;\npadding-left: 20px;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\nmain a:link {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:visited {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:hover {\ncolor: black;\nbackground-color: white;\ntext-decoration: underline;\n}\n\nmain a:focus {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:active {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c08_artikel.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\narticle {\noverflow: hidden;\ncolor: black;\nbackground-color: lightsteelblue;\npadding: 5px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\n}\n\n.clearingtext {\nclear: both;\nbackground-color: lightsteelblue;\n}\n\n.bildlinks {\nfloat: left;\nmargin-top: 5px;\nmargin-right: 15px;\nmargin-bottom: 5px;\nmargin-left: 0px;\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid; \/* dashed ergibt eine gestrichelte Rahmenlinie*\/\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n}\n\n.bildrechts {\nfloat: right;\nmargin-top: 5px;\nmargin-left: 15px;\nmargin-bottom: 5px;\nborder-style: solid;\nborder-width: 1px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c600.css\u201c:<\/strong><\/p>\n\n\n\nbody {\nbackground-color: red;\ncolor: black;\n}\n\nheader {\nbackground-color: green;\n}\n\nnav {\nposition: absolute;\nleft: -9999px;\ntop: -9999px;\n\n\n\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n\npadding-top: 10px;\npadding-right: 10px;\npadding-bottom: 10px;\npadding-left: 10px;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\nnav li {\ndisplay: block;\nlist-style-type: none;\npadding: 3px;\n}\n\nnav a:link {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav a:visited {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:hover {\nbackground-color: red;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:focus {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:active {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav2{\nposition: absolute;\ntop: 10px;\nleft: 20px;\n}\n\nnav2 li {\ndisplay: block;\nlist-style-type: none;\npadding: 3px;\n}\n\nnav2 li ul {\nposition: absolute;\nleft: -9999px;\ntop: -9999px;\n}\n\nnav2 li:hover ul {\nleft: 10px;\ntop: auto;\ndisplay: block;\nwidth: 210px;\nheight: auto;\n\n}\n\nnav2 a:link {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav2 a:visited {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav2 a:hover {\nbackground-color: red;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav2 a:focus {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav2 a:active {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nmain {\n\nbackground-color: steelblue;\ncolor: white;\n\nmargin-top: 3px;\nmargin-right: 5px;\nmargin-bottom:5px;\nmargin-left: 5px; \/*war 241*\/\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n\npadding-top: 20px;\npadding-right: 20px;\npadding-bottom: 20px;\npadding-left: 20px;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\n\nmain a:link {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:visited {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:hover {\ncolor: black;\nbackground-color: white;\ntext-decoration: underline;\n}\n\nmain a:focus {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:active {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c601.css\u201c:<\/strong><\/p>\n\n\n\nbody {\nbackground-color: blue;\ncolor: black;\n}\n\nheader {\nbackground-color: yellow;\n}<\/code><\/pre>\n\n\n\n