HTML・CSS実習 13 PDF

HTMLCSS
2
float
iframe
iframe
2
float
WebCSSdisplay
flex
float

headerWebnav
WebmainWebfooter
header
nav main
Web
HTML
footer
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>float</title>
<link rel="stylesheet" href="float2.css" type="text/css">
</head>
<body>
idcontainerdivbody
<div id="container">

<header><h1>header</h1></header>
<nav>
<ul>
<li><a href="link.html"></a></li>
</ul>
</nav>
<main>
<p>content</p><p>content</p><p>content</p><p>content</p>
</main>
<footer><p>footer</p></footer>
</div>
</body> HTML
</html> CSS
CSS
div760pxnav
145pxmain555pxnavmain
60px760-145-555=60
navfloat:leftmain
float:right
mainfloat:left
footerclear:both
header10pxfooter2
10px
CSS
div#container {
width: 760px;
}
header {
background-color: limegreen; padding: 10px; border-radius: 7px;
margin-bottom: 10px;
}
nav {
background-color: lightblue; padding: 10px; border-radius: 7px;
width: 145px; margin-bottom: 10px; float: left;
}
main {
background-color: orange; padding: 10px; border-radius: 7px;
width: 555px; margin-bottom: 10px; float: right;
}
footer {
background-color: deepskyblue; padding: 10px; border-radius: 7px;
clear: both;
}

2
navfloat:leftmainfloat
mainnav
mainnavmain
nav145+10
+10=165+15px180pxmain
nav15px
divdiv
body
HTMLCSS
div#container {
min-width: 600px; max-width: 900px; margin: 0px auto;
}
header {
}
nav {
}
main {
margin-left: 180px; margin-bottom: 10px;
}
footer {
clear: both;
}
main
165px
180px width:auto

headerWebnavWeb
mainWeb aside
footer
header
nav main aside

Web
HTML
footer
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<nav>
<ul>
</ul>
</nav>
<aside>
<p>advertising</p><p>advertising</p><p>advertising</p> mainaside
</aside>

<main>
</main>
</div>
</body>
</html>
CSS

navfloat:leftasidefloat:right
main
mainnav165px+15px
aside165px+15px

divdivbody

CSS
div#container {
min-width: 600px; max-width: 900px; margin: 0px auto;
}
header {
}
nav {
width: 145px; float: left;
}
aside {
background-color: pink; padding: 10px; border-radius: 7px;
width: 145px; float: right;
}
main {
margin: 10px 180px;
}
footer {
clear: both;
}
165px
165px
margin-left: 180px width:auto margin-right: 180px

mainaside
main

aside

float
float
height
HTMLnavmaindiv
CSSdiv

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<div id="content">
<nav>
<ul>
</ul>
</nav>
<main>
</main>
</div>
</div>
</body>
</html>
div#container {
width: 760px;
}
header {
}
div#content { border: 5px solid red; }
nav {
}
main {
width: 555px; margin-bottom: 10px; float: right;
}
footer {
clear: both;
}
div
navmain

heightautoheight

divnavmaindiv
height

overflow
div#content {
border: 5px solid red;
overflow: hidden;
}
overflowvisibleheightautoheight
divheight
navmain

clearfix
div#content::after {
content: "";
display: block;
clear: both;
}
::aftercontentdiv
divheight
clearfix
iframe
iframeWeb
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<link rel="stylesheet" href="top_style.css" type="text/css">
</head>
<body>


<header>
<h1></h1>
<p></p>
</header>

<div id="content">

<nav>
<ul id="menu">
<li><a href="./toppage.html" target="maincontent"></a></li>
<li><a href="./profile.html" target="maincontent"></a></li>
<li><a href="./isan.html" target="maincontent"></a></li>
<li><a href="./welcomekyoto.html" target="maincontent"></a></li>
<li><a href="./my_favorite.html" target="maincontent"></a></li>
</nav>

index.html

<main class="inline">
<iframe id="maincontent" name="maincontent" src="./toppage.html"></iframe>
<section>
<h2></h2>
<p>

</p>
<p></p>
</section>
</main>
</div>

<footer>
<p>Copyright (c) Cosmos,All right reserved.</p>
</footer>
</div>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
</head>
<body>


<header>
<h1></h1>
<p></p>
</header>

<div id="content">

<nav>
<ul id="menu">
</nav>

</main>
</div>

<footer>
</footer>
</div>
</body>
</html>
toppage.html
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
</head>
<body>


<header>
<h1></h1>
<p></p>
</header>

<div id="content">

<nav>
<ul id="menu">
<li><a href="./profile.html"></a></li>
<li><a href="./isan.html"></a></li>
<li><a href="./welcomekyoto.html"></a></li>
<li><a href="./my_favorite.html"></a></li>
</nav>

toppage.html
index.html

<main>
<section>
<h2></h2>
<p>

</p>
<p></p>
</section>
</main>
</div>

<footer>
</footer>
</div>
</body>
</html>

toppage.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
</head>
<body>

<main>
<section>
<h2></h2>
<p>

</p>
<p></p>
</section>
</main>
</body>
</html>
isan.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
</head>
<body>
<main>
<h2></h2>
<ul class="heritage">
<li>
<img src="./images/kamigamo.jpg" alt="">
<p class=description>
</p>
</li>
<li>
<img src="./images/shimogamo.jpg" alt="">
<p class="description">
</p>
</li>

isan.html
<li>
<img src="./images/touji.jpg" alt="">
55</p>
</li>
<li>
<img src="./images/westhonganji.jpg" alt="">
</p>
</li>
<li>
<img src="./images/nijou.jpg" alt=" ">
</p>
</li>
</ul>
</main>
</body>
</html>
isan.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
</head>
<body>
<main>
<h2></h2>
<ul class="heritage">
<li>
<img src="./images/kamigamo.jpg" alt="">
<p class="description"></p>
</li>
<li>
<img src="./images/shimogamo.jpg" alt="">
</li>
<li>
<img src="./images/touji.jpg" alt="">
<p class="description"> 55</p>
</li>
<li>
<img src="./images/westhonganji.jpg" alt="">
</li>
<li>
<img src="./images/nijou.jpg" alt=" ">
<p class="description"> </p>
</li>
</ul>
</main>
</body>
</html>
top_style.css
/* */ header h1 {
body { color: crimson;
margin: 0; font-size: 2.3em;
background-color: #222222; margin: 0px;
line-height: 1.5; }
font-size: 0.9em; header p {
color: white; font-size: 1em;
} text-shadow: 1px 1px 1px black;
/* */ margin: 4px 0px;
div#container { }
min-width: 520px; /* */
max-width: 720px; div#content {
margin: auto; display: flex;
padding: 0px; }
} /* */
/* */ nav {
header { flex: 0 0 140px;
background-color: black; padding-top: 15px;
background-image: url(./images/bg_kyoto_top.jpg); background-color: #ffffee;
background-repeat: no-repeat; border-right: 1px solid #666666;
height: 120px; }
padding: 28px 24px; ul#menu {
line-height: 1; border-top:1px solid #666666;
font-family: serif; margin: 12px;
} padding: 0px;
}

top_style.css
ul#menu li { main p {
list-style-type: none; margin-left: 20px;
} }
ul#menu li a { /* */
display: block; footer p {
line-height: 2.2; border-top:solid 1px #666666;
text-decoration: none; background-color: #333333;
font-size: 0.9em; font-size: 0.9em;
font-family: sans-serif; text-align: center;
color: black; padding: 10px;
border-bottom: 1px solid #666666; margin: 0;
padding-left: 5px; }
} /* */
ul#menu a:hover { main.inline {
color: white; padding: 0px;
background-color: #333333; min-width: 580px;
} }
/* */ iframe#maincontent {
main { height: 700px;
padding: 10px 20px 10px; width: 100%;
font-family: sans-serif; border: none;
} }
main h1,main h2 {
font-size: 1.3em;
margin-top: 1.2em;
}

top_style.css
/* */
ul.heritage{
padding: 0;
}
ul.heritage li{
display: block;
margin-top: 20px;
width: 560px;
height: 100px;
}
ul.heritage img{
float: left;
width: 130px;
border: 1px solid white;
}
p.description{
float: left;
margin: 0 0 0 15px;
width: 400px;
height: 90px;
padding: 5px;
line-height: 1.6;
}
iframe
iframe
Web

<iframe>

</main>
CSS
main.inline {
padding: 0px;
min-width: 580px;
}
iframe#maincontent {
height: 700px;
width: 100%;
border: none;
}
targetname

<ul id="menu">
</nav>

</main>
iframename

13
index.html

iframe

index.htmltop.css
HTMLCSS

_task13.zip
KING-LMS

HTML・CSS実習 13 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML・CSS実習 13 PDF

Cargado por

Copyright:

Formatos disponibles

HTMLCSS

nav main aside

margin-left: 180px width:auto margin-right: 180px

También podría gustarte