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>
网友评论