HTML CSS 练习
https://icodethis.com
作为前端练习生。不敲代码只看，入门是很慢的，所以直接实战是学习前端最快的途径之一。 这个网站练习HTML
CSS的，可以打开了解一下，可以每天打卡，例子简单，循序渐进，设计的也比较好看。
下面是练习，当然布局的方法有很多，下面是一种。
01基础
这是第一个练习，但是很多大佬做出了，很多不一样的效果
比如：
设计稿
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础练习</title>
<style>
.main {
width: 400px;
height: 100%;
margin: 0 auto;
/* padding-top: 30px; */
padding: 0 10px;
/* background-color: rgba(241, 77, 186, 0.5); */
}
.content {
padding-top: 30px;
}
p {
margin: 0;
}
.group {
margin-top: 15px;
}
.title {
display: inline-block;
/* padding: 5px ; */
font-size: 15px;
font-weight: 600;
text-align: center;
padding: 0 10px;
/* margin-bottom: 20px; */
box-shadow: 0 2px 3px #7b7878;
border-radius: 3px;
background-color: #d9d9d9;
}
.my-custom-font-Arial {
/* @font-face 加载外部字体 */
/* 'Artal'： 这是首选的字体，也就是开发者希望文本显示的字体。'Artal'是一个具体的字体名称，假设它是一个自定义字体或者是用户系统中已安装的字体。如果浏览器在用户的系统中找到了这个字体，它就会使用这个字体来渲染文本。 */
font-family: 'Arial', sans-serif;
}
.my-custom-font-Roman {
font-family: 'Roman', sans-serif;
}
.font-underlined {
text-decoration: underline;
}
.font-through {
text-decoration: line-through;
}
h1,
h2,
h3 {
margin: 0;
}
.color-box {
margin-top: 10px;
}
.color-orange {
color: #ee5531;
}
.square {
width: 50px;
height: 50px;
background-color: #ee5531;
}
.color-purple {
color: #4621ab;
}
.circular {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #4621ab;
}
h6 {
margin: 0;
margin-bottom: 3px;
}
.button-box {
margin-top: 10px;
}
button {
display: inline-block;
width: 150px;
height: 30px;
border: none;
color: #fff;
background-color: #4621ab;
border-radius: 2px;
}
/* 鼠标悬停时 */
button:hover {
background-color: #866cdc;
}
/* 点击时（按下状态） */
button:active {
background-color: #cfc4f1;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<!-- TYPOGRAPHY -->
<div class="title">TYPOGRAPHY</div>
<div>
<div class="group">
<p><strong>Make me bold</strong></p>
<p><em>Make me italic</em></p>
</div>
<div class="group">
<p class="my-custom-font-Arial">I'm from the Artal font famil!</p>
<p class="my-custom-font-Roman">And I'm frorm the Times New Ronan fot family! .</p>
</div>
<div class="group">
<p class="font-underlined">Make this text be underlined</p>
<p class="font-through">And put a Hine through this one</p>
</div>
</div>
</div>
<div class="content">
<!-- HEADINGS -->
<div class="title">HEADINGS</div>
<div>
<div>
<h1>This isa <h1> tag</h1>
<h2>This isa<h2>tag</h2>
<h3>This isa <h3>tag</h3>
</div>
</div>
</div>
<div class="content">
<!-- COLORS -->
<div class="title">COLORS</div>
<div>
<div class="color-box">
<div class="color-orange">Color me orange!</div>
<div class="color-orange square"></div>
</div>
<div class="color-box">
<div class="color-purple">Color me purple!</div>
<div class="color-purple circular"></div>
</div>
</div>
</div>
<div class="content">
<!-- BUTTONS -->
<div class="title">BUTTONS</div>
<div>
<div class="button-box">
<h6>Defult</h6>
<button>Button</button>
</div>
<div class="button-box">
<h6>Hovered</h6>
<button>Button</button>
</div>
<div class="button-box">
<h6>Active</h6>
<button>Button</button>
</div>
</div>
</div>
</div>
</body>
</html>
02_404页面
设计搞
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
/* border: 1px solid #000; */
position: relative;
width: 100%;
/* 或者设置一个固定宽度 */
height: 100%;
/* 或者设置一个固定高度 */
}
.main-box {
position: absolute;
top: 50%;
/* 使子元素的上边缘位于父元素的中心 */
left: 50%;
/* 使子元素的左边缘位于父元素的中心 */
transform: translate(-50%, 20%);
/* 调整位置，使其居中 */
display: flex;
flex-direction: column;
align-items: center;
width: 800px;
height: 500px;
/* margin: 100px auto; */
/* background-color: rgba(241, 77, 186, 0.5); */
background-image: linear-gradient(to right, #f073c6, #ff6b96);
border-radius: 8px;
border: 2px solid black;
box-shadow: 0 8px 15px rgba(230, 41, 135, 0.5);
}
.content {
width: 50%;
text-align: center;
color: #fff;
/* background-color: rgb(227, 153, 57);
border: 1px solid black; */
}
.one {
margin: 50px 0;
}
.two {
margin: 0 0 20px 0;
font-size: 100px;
font-weight: 700;
}
.three {
margin: 0 0 30px 0;
}
.four {
vertical-align: bottom;
}
a {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}
.circular-box {
position: absolute;
width: 800px;
height: 500px;
top: 50%;
/* 使子元素的上边缘位于父元素的中心 */
left: 50%;
/* 使子元素的左边缘位于父元素的中心 */
transform: translate(-50%, 20%);
/* 调整位置，使其居中 */
background-color: rgba(241, 77, 186, 0.2);
overflow: hidden;
}
.circular {
width: 100px;
height: 100px;
border-radius: 50%;
/* background-color: #fff; */
}
.circular-box> :nth-child(1) {
width: 200px;
height: 200px;
position: absolute;
top: 70%;
/* 使子元素的上边缘位于父元素的中心 */
left: -5%;
background-image: linear-gradient(55deg, rgba(255, 255, 255, 0.137), rgba(242, 114, 193, 0.342));
}
.circular-box> :nth-child(2) {
width: 300px;
height: 300px;
position: absolute;
top: -10%;
/* 使子元素的上边缘位于父元素的中心 */
left: 75%;
background-image: linear-gradient(-55deg, rgba(255, 255, 255, 0.137), rgba(242, 114, 193, 0.342));
}
.circular-box> :nth-child(3) {
width: 100px;
height: 100px;
position: absolute;
top: 60%;
/* 使子元素的上边缘位于父元素的中心 */
left: 75%;
background-image: linear-gradient(328deg, rgba(255, 255, 255, 0.137), rgba(242, 114, 193, 0.342));
}
</style>
</head>
<body>
<div class="main">
<div class="main-box">
<div class="content one">UIDesignDally</div>
<div class="content two">404</div>
<div class="content three">The link you clicked may be broken or the<br/>
page may have been removed.</div>
<div class="content four">Visit the <a href="">home page</a> or <a href="">contact</a>me</div>
</div>
<div class="circular-box">
<div class="circular"></div>
<div class="circular"></div>
<div class="circular"></div>
</div>
</div>
</body>
</html>
代码2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index2.css">
</head>
<body>
<div class="container">
<div class="content">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<p>UIDesignDaily</p>
<h1>404</h1>
<h3>The link you clicked may be broken or the <br> page may have been removed.</h3>
<h5