<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
/***********背景相关****************/
#d1{
height: 400px;
/*1.背景图
* 如果背景图大于盒子大小，背景图能显示多少就显示多少
* 如果背景图小于盒子大小，背景图就会平铺（重复显示）
*/
background-image: url(../day01-html/img/lufei.jpg);
/*2.设置是否平铺*/
background-repeat: no-repeat;
/*3.设置背景图的位置*/
/*background-position:x y;
x: left/center/right/坐标值
y:top/center/bottom/坐标值
*/
background-position: center bottom;
/*4.同时设置*/
/*background: 图片地址 是否平铺 x y (背景颜色);*/
}
/***********列表****************/
li{
float: left;
margin-left: 20px;
}
ul{
/*1.设置符号样式
* disc(实心圆)、circle(空心圆)、square(实心方块)、none(去掉样式)
*/
list-style-type: none;
/*2.设置图片的符号*/
margin: 50px;
list-style-image: url(img/icon.ico);
background-color: red;
/*3.设置符号的位置*/
list-style-position: outside;
}
/***********文字相关****************/
p{
/*1.文字大小*/
font-size: 24px;
/*2.文字颜色*/
color: blue;
/*3.设置字体名*/
font-family: "微软雅黑";
/*4.设置字体粗细*/
/*100-900*/
font-weight: 500;
/*5.字体倾斜*/
font-style: italic;
/*6.内容的对齐方式*/
/*center，left，right*/
text-align: center;
background-color: yellow;
/*7.设置行高*/
/*文字一行的高度（当文字只有一行的时候设置行高和标签高度一样，可以让文字居中）*/
height: 500px;
line-height: 50px;
/*8.文字修饰*/
/*
* none:去掉文字修饰
* underline添加下划线
* line-throught:添加删除线
*/
text-decoration: line-through;
/*9.首行缩进: 单位时em */
/*text-indent: 4em;*/
/*10.字间距*/
letter-spacing: 5px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<ul>
<li>Python</li>
<li>H5</li>
<li>Java</li>
</ul>
<p>
萨拉的嘿呦<br />莎拉的嘿<br />阿文愤怒的v啊
</p>
</body>
</html>
day04-简单的CSS属性
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 如图所示，将字母放在四线格里面，然后去对比text-align的每一个属性的位置，从图中可以清楚地看到，每个属性分...
