前端小白训练营DAY2
用html写一首诗(春雪)
先布好局
html文档声明格式是HTML5.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>春雪</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
body{
background-color: #FAF3E1
}
</style>
</head>
<body>
<div>
<h1>春雪</h1>
<p>-韩愈</p>
<ul>
<li>新年都未有芳华,</li>
<li>二月初惊见草芽。</li>
<li>白雪却嫌春色晚,</li>
<li>故穿庭树作飞花。</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>春雪</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
body{
background-color: #FAF3E1;
font-family:Arial;
}
div.content{
width: 8rem;
height: 15rem;
margin: auto;
overflow: hidden;
list-style: none;
}
div.content h2{
margin-left: 2rem;
}
div.content p{
color:#FE3044;
margin-left: 4rem;
margin-top: 0.5rem;
}
div.content li{
margin-top: 0.5rem;
}
</style>
</head>
<body>
<div class="content">
<h2>春 雪</h2>
<p>—韩 愈</p>
<ul>
<li>新年都未有芳华,</li>
<li>二月初惊见草芽。</li>
<li>白雪却嫌春色晚,</li>
<li>故穿庭树作飞花。</li>
</ul>
</div>
</body>
</html>
经过大表哥指导有更好的实现方法(效果不变)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>春雪</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body{
background-color: #FAF3E1;
font:Arial;
text-align:center;
margin: auto;
}
p{
line-height: 1.5rem;
}
span{
color:#FE3044;
margin-left: 4rem;
}
</style>
</head>
<body>
<h2>春 雪</h2>
<span>—韩 愈</span>
<p>新年都未有芳华,</p>
<p>二月初惊见草芽。</p>
<p>白雪却嫌春色晚,</p>
<p>故穿庭树作飞花。</p>
</body>
</html>
代码解读
*代表所有元素
*{margin: 0;padding: 0;}把所有元素的margin、padding先设置为0,以后根据需要再单独设置某一项的margin和padding数值 。
代码中涉及到css3的样式
在html中空格用来表示
css选择器
csslist-style属性
cssmargin属性
宽高大小用了rem来替代了px在移动设备上看也不会变形