01颜色和背景.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: red;
color: #00ff00;
color: #00f;
color: rgb(255,0,0);
color: rgba(255,0,0,0.5);
}
div{
width: 200px;
height: 200px;
background-color: purple;
/*设置背景图片*/
background-image: url("../day01/a.jpg");
/*设置背景图片尺寸: 宽 高 */
background-size: 100px 100px;
/*设置禁止重复*/
background-repeat: no-repeat;
/*设置背景图片位置*/
/*background-position: 50px 100px;*/
background-position: 50% 50%;
}
</style>
</head>
<body>
<div>ABCD</div>
<h1>颜色测试</h1>
</body>
</html>
02背景图片练习.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 611px;
height: 376px;
background-color: #e8e8e8;
background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
background-repeat: no-repeat;
background-size: 318px 319px;
background-position: 90% 60%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
03文本字体相关.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 50px;
border: 1px solid red;
/*水平对齐方式*/
text-align: center;
/*文本修饰 overline上划线 underline下划线 line-through删除线 none没有*/
text-decoration: line-through;
/*设置行高:单行可以实现垂直居中, 多行可以控制行间距*/
line-height: 30px;
/*文本阴影:颜色 x偏移值 y偏移值 浓度*/
text-shadow: green 5px 5px 5px;
/*字体大小*/
font-size: 30px;
/*字体加粗*/
font-weight: bold;
/*斜体*/
font-style: italic;
}
a{
text-decoration: none;/*去掉自带下划线*/
}
h1{
font-weight: normal;/*去掉自带加粗效果*/
/*设置字体*/
/*font-family: cursive;*/
font: 40px cursive;
}
</style>
</head>
<body>
<h1>这是h1</h1>
<a href="">超链接</a>
<div>文本和字体</div>
</body>
</html>
04文本和字体练习.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 100px;
height: 30px;
background-color: green;
color: red;
text-align: center;
line-height: 30px;
}
span{
font-size: 25px;
font-style: italic;
}
#h1-1{
font-weight: normal;
text-shadow: blue -10px 10px 3px;
}
#h1-2{
text-decoration: underline;
}
a{
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<div id="d1">刘德华</div><div>张学友</div>
<span>香蕉</span><span>苹果</span>
<h1 id="h1-1">冰箱</h1><h1 id="h1-2">洗衣机</h1>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
05元素显示方式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
span{
/*行内元素不能修改宽高*/
width: 100px;
height: 100px;
border: 1px solid blue;
}
img{
width: 100px;
height: 100px;
}
a{
background-color: #0aa1ed;
/*行内元素修改了显示方式为块级或行内块之后就可以修改宽高*/
display: block;
width: 132px;
height: 40px;
color: white;
font-size: 20px;
text-align: center;
line-height: 40px;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.jd.com">查看详情</a>
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<div>div1</div><div>div2</div><div>div3</div>
<span>span1</span><span>span2</span><span>span3</span>
</body>
</html>
06外边距.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 100px;
height: 100px;
border: 1px solid red;
/*margin-top: 50px;
margin-left: 30px;
margin-bottom: 100px;
margin-right: 20px;*/
/*四个方向*/
/*margin: 50px;*/
/*上下20 左右40*/
/*margin: 20px 40px;*/
/*上右下左 顺时针*/
/*margin: 10px 20px 30px 40px;*/
margin-bottom: 100px;
}
#d2{
width: 100px;
height: 100px;
border: 1px solid red;
/*上下相邻彼此添加外边距 取最大值*/
margin-top: 150px;
}
#s1{
/*行内元素上下外边距无效*/
margin-bottom: 100px;
margin-right: 100px;
}
#s2{
margin-left: 50px;/*左右相邻彼此添加外边距两者相加*/
}
</style>
</head>
<body>
<span id="s1">span1</span><span id="s2">span2</span>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
07边框和内边距.html