Learning HTML - Day 8
Today is 01 February 2021 and it is my eight day to learn HTML 🙋
Day 8 - Time 8.00 pm - 9.15 pm
LAYOUT
Layout - HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in responsive form or we can say that HTML layout specifies a way in which the web pages can be arranged. Web-page layout works with arrangement of visual elements of an HTML document.
<nav>: The Navigation Section element
The HTML <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexesThe HTML <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).
The “clear: both” means floating the elements are not allowed to float on both sides. It is used when no need of any element float on the left and right side as related to the specified element and wanted the next element only shown below.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
The @media rule is used in media queries to apply different styles for different media types/devices. Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device. orientation (is the tablet/phone in landscape or portrait mode?)
Basic code for Layout using float
<html>
<head>
<title>My webpage</title>
<style>
*{
box-sizing: border-box;
}
header{
height:150px;
background-color:blue;
}
nav{
float:left;
width:30%;
background:pink;
height:450px;
}
article{
float:left;
height:450px;
width:70%;
background-color:yellow;
}
section:after{
content:"";
display:table;
clear:both;
}
footer{
background-color:green;
}
</style>
</head>
<body>
<header>Header
</header>
<section>
<nav>Nav
</nav>
<article>Article
</article>
</section>
<footer>Footer
</footer>
</body>
</html>
Output -
There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:
CSS framework
CSS float property
CSS flexbox
CSS grid
Comments
Post a Comment