01其他简单的CSS属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;
}
/*-----背景相关的------*/
li{
float: left;
background-color: saddlebrown;
}
/*--------列表------*/
ul{
/*float: left;*/
background-color: royalblue;
/*1.设置符号样式
* disc(实心圆)、circle(空心圆)、square(实心方块)、none(去掉列表符号)
*/
list-style-type: disc ;
/*2.设置图片的符号*/
list-style-image: url(img/images/icon.ico);
/*3.设置符号的位置*/
/*outside(li标签的外边)inside(li标签的里面)*/
list-style-position: inside;
}
#d1{
background-color: hotpink;
width: 800px;
height: 300px;
/*背景图*/
/*如果背景图大于盒子的大小,背景图能显示多少就显示多少*/
/*如果背景图小于盒子的大小,就会平铺(重复显示)*/
background-image: url(img/images/logo.png) ;
/*2.是否平铺*/
background-repeat: no-repeat ;
/*3.背景图片的位置*/
/*backgroud-position:x,y*/
/*x:left/center/right 坐标值
*y: top/center/bottom 坐标值
*/
/*background-position: 100px 100px;*/
background-position: center;
/*4.同时设置
*
* */
background: url(img/images/icon.ico) no-repeat top blanchedalmond;
}
/*-----文字相关-----*/
p{
/*1.文字大小*/
font-size:20px;
/*2.文字颜色*/
color:cornflowerblue;
/*3.设置字体名*/
font-family:'黑体';
/*4.设置字体粗细*/
/*取值100-900*/
font-weight: bold;
/*5.倾斜*/
font-style: italic;
/*6.内容的对齐方式*/
/*center,left,right*/
text-align: left;
background-color: gold;
/*7.设置行高*/
/*文字一行的高度(当文字只有一行的时候设置行高和标签的高度一样,可以让文字垂直居中)*/
height: 500px;
line-height: 50px;
/*8.文字修饰
* none:去掉文字修饰
* underline:添加下划线
* */
text-decoration: underline;
/*9.首行缩进*/4
/*注意:单位是em*/
text-indent:4em;
/*10字间距*/
letter-spacing: 2px;
}
</style>
</head>
<body>
<div id="d1">
<!--<img src="img/images/bg.png" />-->
</div>
<p>
永和九年,岁在癸丑,<br />
暮春之初,会于会稽山阴之兰亭,<br />
修禊事也。群贤毕至,<br />
少长咸集。此地有崇山峻岭,<br />
茂林修竹,又有清流激湍,<br />
映带左右,引以为流觞曲水,<br />
列坐其次。虽无丝竹管弦之盛,<br />
一觞一咏,亦足以畅叙幽情。
</p>
<ul>
<li>Python</li>
<li>H5</li>
<li>Java</li>
<li>Andriod</li>
<li>C</li>
</ul>
</body>
</html>