Compare commits
4 Commits
b3fafce27a
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 576f447dc8 | |||
| 33b7615cc9 | |||
| 809482294e | |||
| cc33dcb79e |
85
resp.html
Normal file
85
resp.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {margin: 0;}
|
||||
|
||||
ul.sidenav {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 25%;
|
||||
background-color: #f1f1f1;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
ul.sidenav li a {
|
||||
display: block;
|
||||
color: #000;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.sidenav li a.active {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
ul.sidenav li a:hover:not(.active) {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.content {
|
||||
margin-left: 25%;
|
||||
padding: 1px 16px;
|
||||
height: 1000px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
ul.sidenav {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.sidenav li a {
|
||||
float: left;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
div.content {margin-left: 0;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
ul.sidenav li a {
|
||||
text-align: center;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="sidenav">
|
||||
<li><a class="active" href="#home">Home</a></li>
|
||||
<li><a href="#news">News</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="content">
|
||||
<h2>Responsive Sidenav Example</h2>
|
||||
<p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
|
||||
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
|
||||
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
|
||||
<h3>Resize the browser window to see the effect.</h3>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
44
test.html
44
test.html
@@ -2,9 +2,51 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Git Test Page</title>
|
||||
<style>
|
||||
code{
|
||||
font-family: Consolas, "courier new";
|
||||
color: crimson;
|
||||
background-color: #f1f1f1;
|
||||
padding: 2px;
|
||||
font-size: 105%;
|
||||
}
|
||||
.myDiv{
|
||||
border: 5px outset red;
|
||||
background-color: lightblue;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Hello new Git!!
|
||||
<p><cite>welcome</cite>Hello New Git!!!</p>
|
||||
<p>the HTML <code>button</code> tag defines a clickable button.</p>
|
||||
<p>The CSS <code>background-color</code>property defines the background color of an element.</p>
|
||||
|
||||
|
||||
<h1>The datalist element</h1>
|
||||
|
||||
<form action="/action_page.php" method="get">
|
||||
<label for="browser">Choose your browser from the list:</label>
|
||||
<input list="browsers" name="browser" id="browser">
|
||||
<datalist id="browsers">
|
||||
<option value="Edge">
|
||||
<option value="Firefox">
|
||||
<option value="Chrome">
|
||||
<option value="Opera">
|
||||
<option value="Safari">
|
||||
</datalist>
|
||||
<input type="submit">
|
||||
</form>
|
||||
|
||||
<p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>
|
||||
|
||||
<div class="myDiv">
|
||||
<h2>This is a heaidng in a div element</h2>
|
||||
<p>This is some text in a div element.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user