css from descriptionWed, 23 Nov 2022
Shadow h1
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
All generations.
css from descriptionWed, 23 Nov 2022
create a beautiful Register submit button
.btn-register {
display: inline-block;
padding: 10px 20px;
background-color: #E5E5E5; /*边框色*/
border: 1px solid #E5E5E5; /*边框颜色*/
border-radius: 4px;
color: #8E8E8E;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
generate html from descriptionWed, 23 Nov 2022
create a menu with 2 options in HTML and CSS
<nav>
<ul class="main-menu">
<li class="menu-item"><a href="#">menu item 1</a></li>
<li class="menu-item"><a href="#">menu item 2</a></li>
</ul>
</nav>
css from descriptionWed, 23 Nov 2022
make li beautiful and in the middle of the page
.todo-list li {
margin: 15px 0;
padding: 15px 15px;
font-size: 24px;
color: #333;
border: 1px solid grey;
border-radius: 3px;
text-align: center;
width: 500px;
height: 200px;
}
fix invalid codeWed, 23 Nov 2022
<nav> <ul class="main-menu"> <li class="menu-item"><a href="#">menu item 1</a></li> <li class="menu-item"><a href="#">menu item 2</a></li> </ul> </nav> <script> nav { height: 100px; width: 100%; margin: 0 auto; } nav ul { display: table; height: 100%; margin: 0; padding: 0; } nav ul li { display: table-cell; vertical-align: middle; } </script>
css from descriptionWed, 23 Nov 2022
a colorful, big and beautiful text in the middle of the page
h1 {
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 75px;
color: red;
}
generate html from descriptionWed, 23 Nov 2022
make a beautiful menu with 2 items selector in HTML
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
css from descriptionWed, 23 Nov 2022
create a nav in middle of the page and a big li
nav {
height: 100px;
width: 100%;
margin: 0 auto;
}
nav ul {
display: table;
height: 100%;
margin: 0;
padding: 0;
}
nav ul li {
display: table-cell;
vertical-align: middle;
}
css from descriptionWed, 23 Nov 2022
a beautiful Login form in the middle of the
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Login</h1>
<form class="login-form" action="index.html" method="post">
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<input type="submit" name="login" value="Login">
</form>
</div>
</body>
</html>
generate html from descriptionWed, 23 Nov 2022
a colorful, big and beautiful text in the middle of the page
<div class="header">
<h1>this is a big text</h1>
</div>
css from descriptionWed, 23 Nov 2022
multicolored h1
h1 {
color: #ff0000;
}
h1 span {
color: #00ff00;
}
h1 span span {
color: #0000ff;
}
css from descriptionWed, 23 Nov 2022
create a beautiful menu list
.container > ul {
list-style: none;
padding: 0;
width: 100%;
}
.container > ul > li {
width: 100%;
margin: 0;
padding: 0;
background-color: silver;
transition: all .3s ease;
}
.container > ul > li:hover {
background-color: black;
}
.container > ul > li > a {
display: block;
padding: 10px;
color: white;
text-decoration: none;
}
.container > ul > li > a:hover {
color: silver;
text-decoration: underline;
}
css from descriptionWed, 23 Nov 2022
create a beautiful menu and li
nav {
width: 100%;
height: 50px;
background-color: #333;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
nav ul li {
display: inline-block;
color: #fff;
}
nav ul li a {
display: block;
padding: 16px 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #555;
}
nav ul li ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover > ul {
display: block;
background-color: #fff;
color: #555;
}
nav ul li ul li {
display: block;
}
