xgiovio/unisa_tsw_2014_2015
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some exercies on css3 box model and flex

Browse Source
This commit is contained in:
Giovanni Di Grezia
2014-11-23 22:07:03 +01:00
parent be34f479d5
commit 5c9f10d07f
7 changed files with 503 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
css_box2.html Normal file
View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<meta name="author" content="xgiovio"/>
<meta name="description" content="A simple test page"/>
<meta name="keywords" content="Ormai google non se le fila piu"/>
<meta name ="robots" content="index"/>
<meta charset="utf-8"/>
<style>
textarea {
background-image:url(sky.jpg);
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
border: 50px dotted black;
background-origin:border-box;
background-clip: border-box;
}
p:not(#p1) {
box-shadow: 10px 10px 5px 5px blue inset;
outline: thick solid red;
outline-offset:4px;
width:50%;
min-width:300px;
max-width:400px;
padding: 50px;
box-sizing:border-box;
visibility:visible;
}
#p1 {
width:400px;
height:100px;
border:1px black solid;
overflow:hidden;
}
</style>
</head>
<body>
<textarea row="8" cols="30">sdsadsa sda fsda ds fd fd sf sd sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
</textarea>
<p >sdsadsa sda fsda ds fd fd sf sd sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
</p>
<p id="p1" >sdsadsa sda fsda ds fd fd sf sd sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
</p>
</body>
</html>

83
css_box3.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<meta name="author" content="xgiovio"/>
<meta name="description" content="A simple test page"/>
<meta name="keywords" content="Ormai google non se le fila piu"/>
<meta name ="robots" content="index"/>
<meta charset="utf-8"/>
<style>
textarea {
background-image:url(sky.jpg);
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
border: 50px dotted black;
background-origin:border-box;
background-clip: border-box;
}
p {
width:200px;
display:inline-block;
padding:10px;
margin:100px;
border:solid;
}
</style>
</head>
<body>
<p >
a fsda ds fd fd sf sd sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
</p>
<p >sdsadsa sda fsda ds fd fd sf sd sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
sdsadsa sda fsda ds fd fd sf sd
</p>
</body>
</html>

97
css_box4.html Normal file
View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<meta name="author" content="xgiovio"/>
<meta name="description" content="A simple test page"/>
<meta name="keywords" content="Ormai google non se le fila piu"/>
<meta name ="robots" content="index"/>
<meta charset="utf-8"/>
<style>
#i1 {
position: absolute;
top:50px;
left:150px;
z-index:10;
}
#i2 {
position: absolute;
top:60px;
left:180px;
z-index:2;
}
</style>
</head>
<body>
<div style="position:relative">
<p style="display:inline-block;width:33%" >
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<p style="display:inline-block;width:33%" >
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<p style="display:inline-block;width:33%" >
When travelling in Asia, I was struck by how many different
kinds of banana were available - many of which had unique flavours and
which were only avaiable within a small region.
</p>
<br>
<p style="float:left;width:33%" >
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<p style="float:left;clear:left;width:33%" >
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<p style="display:inline-block;width:33%" >
When travelling in Asia, I was struck by how many different
kinds of banana were available - many of which had unique flavours and
which were only avaiable within a small region.
</p>
<br>
<p style="display:inline-block;width:33%" >
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<p style="display:inline-block;width:33%" >
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<p style="display:inline-block;width:33%" >
When travelling in Asia, I was struck by how many different
kinds of banana were available - many of which had unique flavours and
which were only avaiable within a small region.
</p>
<img id="i1"src="sky.jpg"/>
<img id="i2" src="sky.jpg"/>
</div>
</body>
</html>

68
css_box5.html Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<!-- http://css-tricks.com/snippets/css/a-guide-to-flexbox/ -->
<html>
<head>
<title>css</title>
<meta name="author" content="xgiovio"/>
<meta name="description" content="A simple test page"/>
<meta name="keywords" content="Ormai google non se le fila piu"/>
<meta name ="robots" content="index"/>
<meta charset="utf-8"/>
<style>
.container {
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-around;
}
.itembase{flex-basis:25%;}
.itema{flex-basis:50%;min-width: 200px; max-width: 300px; color: green}
</style>
</head>
<body>
<div class="container">
<span class="itembase">
1There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</span>
<span class="itema" >
2of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</span>
<span class="itembase">
2of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</span>
</div>
</body>
</html>

76
css_box5flexbox.html Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<!-- http://css-tricks.com/snippets/css/a-guide-to-flexbox/ -->
<html>
<head>
<title>css</title>
<meta name="author" content="xgiovio"/>
<meta name="description" content="A simple test page"/>
<meta name="keywords" content="Ormai google non se le fila piu"/>
<meta name ="robots" content="index"/>
<meta charset="utf-8"/>
<style>
.container {
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-around;
align-items:stretch;
border:solid 1px gray;
padding: 50px;
}
.itembase{flex-basis:100px;border:solid 1px gray;}
.item1{order:1;}
.item2{order:3;}
.item3{order:2;flex-basis:200px;flex-shrink:1;}
</style>
</head>
<body>
<div class="container">
<span class="itembase item1">
1There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</span>
<span class="itembase item2">
2of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</span>
<span class="itembase item2">
2of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</span>
<span class="itembase item2">
2of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</span>
<span class="itembase item3">
3of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</span>
</div>
</body>
</html>

40
csstext.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="author" content="xgiovio"/>
<meta name="description" content="A simple test page"/>
<meta name="keywords" content="Ormai google non se le fila piu"/>
<meta name ="robots" content="index"/>
<meta charset="utf-8"/>
<!-- <link rel="stylesheet" href="style.css" type="text/css" /> !-->
<style>
p {
white-space: pre-wrap;
letter-spacing:5px;
text-indent: 15%;
text-decoration: overline;
text-transform: capitalize;
}
</style>
</head>
<body>
<p> ciao mondo!!!
fdsf sdf dsf dsf
fsdffds f sdf
</p>
</body>
</html>

28
js1.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="author" content="xgiovio"/>
<meta name="description" content="A simple test page"/>
<meta name="keywords" content="Ormai google non se le fila piu"/>
<meta name ="robots" content="index"/>
<meta charset="utf-8"/>
<!-- <link rel="stylesheet" href="style.css" type="text/css" /> !-->
</head>
<body>
<script type="text/javascript">
var s = "test"; // Start with a string value.
s.len = 4; // Set a property on it.
var t = s.len;
console.log(t);
</script>
</body>
</html>