some exercies on css3 box model and flex
This commit is contained in:
111
css_box2.html
Normal file
111
css_box2.html
Normal 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
83
css_box3.html
Normal 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
97
css_box4.html
Normal 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
68
css_box5.html
Normal 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
76
css_box5flexbox.html
Normal 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
40
csstext.html
Normal 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
28
js1.html
Normal 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>
|
||||||
Reference in New Issue
Block a user