<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
This is a basic HTML document that contains an unordered list <ul> with four list items <li>. Each list item contains a hyperlink <a> element with a hashtag # as its href attribute value, indicating that it is a placeholder link that does not lead to any particular web page.
This HTML code can be further styled with CSS to apply visual styles to the list items and hyperlinks, such as changing their font size, color, background color, borders, and positioning, among other things.
body {
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background: black;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
background: black;
color:white;
padding: 5px;
text-decoration: none;
}
li a:hover {
background: red;
}
This is a CSS code block that styles an HTML navigation bar with a horizontal layout. Here's what each part of the code does:
body: Sets the margin and padding of the page to 0, so there are no gaps around the edge of the page.ul: Styles the unordered list element that contains the navigation items. Sets the list-style-type to none, so there are no bullet points next to the list items. Sets the margin and padding of the list to 0, so there are no gaps between the list and other elements. Sets the background color of the list to black. Sets the overflow to hidden, so any content that exceeds the width of the list is hidden.li: Styles each list item element. Floats each list item to the left, so they display horizontally.li a: Styles the anchor tag that contains each navigation link. Displays the link as a block-level element, so it fills the entire width of the list item. Sets the background color of the link to black, sets the text color to white, sets padding around the text, and removes any underlines on the link.li a:hover: Styles the link when the user hovers over it with the mouse. Changes the background color to red.
No comments:
Post a Comment