CSS 12-4
body {
margin: 0;
counter-reset: section, nav;
}
#menu, #contents {
border: solid 1px #930;
margin: 10px;
}
#menu {
margin-bottom: 20px;
background-color: #fa0;
}
#menu ul {
display: list-item;
list-style: none;
padding-left: 0;
margin: 5px;
}
#menu ul li {
display: inline-block;
margin-left: 5px;
font-weight: bold;
}
#menu ul li:before {
content: "\25A0";
color: #930;
display: inline-block;
}
#menu ul li a {
text-decoration: none;
color: #930;
}
#contents {
padding: 20px;
position: relative;
}
.introduction {
display: flex;
align-items: flex-start;
}
.introduction h1 {
background-color: #fa0;
border: solid 1px #930;
text-transform: uppercase;
padding: 15px;
margin: 0;
min-width: 320px;
}
.introduction h1::after {
content: " From Wikipedia, the free encyclopedia";
font-size: 0.35em;
text-transform: none;
display: block;
}
.introduction p {
font-style: italic;
font-size: 0.7em;
margin: 0;
margin-left: 25px;
text-align: right;
}
.introduction + .section {
border-bottom: solid 1px #fa0;
}
.section h2 {
text-decoration: underline;
}
.section h2:before {
counter-increment: section;
content: counter(section) ". ";
}
.section p {
text-align: justify;
}
#conclusion {
background-color: #930;
color: white;
display: inline-block;
position: absolute;
right: 15px;
bottom: -20px;
}
#conclusion p{
margin: 1px;
}
#conclusion p:before {
content: "(";
}
#conclusion p:after {
content: ")";
}
@media (max-width: 1000px) {
#menu, #contents {
border: 0px;
margin: 0;
}
#contents {
padding: 0;
}
#menu {
margin-bottom: 0;
background-color: #fff;
}
#menu ul {
display: none;
margin: 0;
}
#menu::before {
content: "☰";
color: white;
background-color: #02b;
display: block;
}
#menu:hover ul {
display: block;
}
#menu ul li {
background-color: #777;
text-align: center;
border-radius: 5px;
display: block;
margin: 0;
}
#menu ul li:before {
content: "";
}
#menu ul li a {
text-decoration: none;
color: white;
text-transform: uppercase;
font-weight: normal;
}
#menu ul li a::before {
counter-increment: nav;
content: counter(nav) " - ";
}
.introduction {
display: block;
}
.introduction h1 {
background-color: #fff;
border: 0;
text-transform: none;
padding: 0;
min-width: 0;
}
.introduction h1::after {
content: "";
display: none;
}
.introduction p {
font-style: normal;
font-size: 1em;
margin: 0;
margin-left: 0;
text-align: left;
}
.introduction + .section {
border-bottom: solid 1px black;
}
.section, .introduction {
border-bottom: solid 1px black;
padding: 20px 0;
}
.introduction h1, .section h2 {
text-align: center;
text-decoration: none;
}
.introduction h1:before, .section h2:before {
counter-increment: section;
content: counter(section) " - ";
}
.section p {
text-align: left;
}
#conclusion {
position: inherit;
display: block;
color: white;
background-color: black;
right: 0;
bottom: 0;
}
#conclusion p {
font-size: 0.8em;
text-align: right;
}
#conclusion p:before {
content: "";
}
#conclusion p:after {
content: "";
}
}
|
|
|
HTML 12-4
<!DOCTYPE html>
<html>
<head>
<title>Web Applications</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="StyleSheet" href="Exercice-12-3.css" type="text/css">
</head>
<body>
<div id="menu">
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#history">History</a></li>
<li><a href="#interface">Interface</a></li>
</ul>
</div>
<div id="contents">
<div class="introduction">
<h1 id="introduction">Web application</h1>
<p>A web application is an application that is accessed by users over a network such as the Internet or an intranet.
The term may also mean a computer software application that is coded in a browser-supported programming language
and reliant on a common web browser to render the application executable.</p>
</div>
<div class="section">
<h2 id="history">History</h2>
<p>In earlier computing models, e.g. in client-server, the load for the application was shared between code on the
server and code installed on each client locally. In other words, an application had its own client program
which served as its user interface and had to be separately installed on each user's personal computer.</p>
<p>In contrast, web applications use web documents written in a standard format such as HTML and JavaScript,
which are supported by a variety of web browsers. Web applications can be considered as a specific variant
of client-server software where the client software is downloaded to the client machine when visiting the
relevant web page, using standard procedures such as HTTP. During the session, the web browser interprets and
displays the pages, and acts as the universal client for any web application.</p>
</div>
<div class="section">
<h2 id="interface">Interface</h2>
<p>Through Java, JavaScript and other technologies, application-specific methods such as
drawing on the screen, playing audio, and access to the keyboard and mouse are all possible. Many services have
worked to combine all of these into a more familiar interface that adopts the appearance of an operating system.
General purpose techniques such as drag and drop are also supported by these technologies.</p>
</div>
<div class="conclusion" id="conclusion">
<p>This page was last modified on 27 September 2012 at 19:59.</p>
</div>
</div>
</body>
</html>
|
|
|
12-1 CSS
/ Corps /
html {
background-color: #ccc;
}
body {
font-family: sans-serif;
background-color: white;
width: 85%;
margin-left: auto;
margin-right: auto;
border-left: 1px solid black;
border-right: 1px solid black;
margin-top: 0;
padding: 20px;
}
/ Menu /
#menu {
display: none;
}
/ Titres /
h1,
h2 {
color: #66f;
}
h1 {
text-align: center;
margin-top: 0;
}
h2 {
font-style: italic;
}
/ Paragraphes /
.introduction p::first-letter,
.section p::first-letter
{
font-size: 150%;
}
.introduction p,
.section p
{
text-indent: 30px;
text-align: justify;
}
/ Conclusion /
.conclusion {
border-top: 1px solid #999;
font-size: 80%;
text-align: right;
}
|
|
