<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*------背景-----*/
#d1{background-color: cornflowerblue;
height: 400px;
/*1、背景圖
*如果背景圖大于盒子的大小，背景圖就能顯示多大就顯示多大义矛，
* 如果背景圖小于盒子的大小涎才，就會平鋪/重復顯示
且背景圖不會隨著頁面大小而自動縮放哆键、變形*/
background-image: url(img/logo.png);
/*2苞轿、是否平鋪*/
background-repeat: no-repeat; /*不平鋪*/
/*3設置背景圖的位置*/
background-position: 100px 100px;
/*4嗜傅、同時設置
* background:圖片地址 是否重復 x y
* background:圖片地址 是否重復 x y 背景顏色
*/
background: url(img/icon.ico) no-repeat center top blueviolet
}
a{
text-decoration: none;
}
/*-----------列表相關---------*/
ul{ float: left;
/*1金句、設置符號樣式
* disc實心圓/circle空心圓/square實心方塊/none去掉列表符號
*/
list-style-type: square;
/*2、設置圖片的符號*/
list-style-image: url(img/qq.png);
/*3吕嘀、設置符號的位置
* outside（li標簽的外邊）违寞，inside（li標簽的里面）
* */
}
/*-----------文字相關---------*/
p{
/*1、文字大小*/
font-size:30px;
/*2偶房、文字顏色*/
color: blueviolet;
/*3趁曼、設置字體樣式*/
font-family:"楷體";
/*4、設置字體粗細*/
/*取值：100-900 normal bold bolder*/
font-weight: 300;
/*5棕洋、字體傾斜*/
font-style:italic;
/*6挡闰、內(nèi)容的對齊方式*/
/*center，left,right*/
text-align: left;
/*7掰盘、設置行高
* 文字一行的高度（當文字只有一行的時候設置行高和標簽的高度一樣尿这，可以讓文字垂直居中）
* */
background-color: crimson;
height: 200px;
line-height: 50px;
/*8、文字修飾
* none :去除文字修飾
* underline:添加下劃線
* line-through:添加刪除線
* overline:添加上劃線*/
text-decoration: none;
/*9庆杜、首行縮進 單位是：em---空格*/
text-indent: 2em;
/*10射众、字間距*/
letter-spacing: 3px;
}
</style>
</head>
<body>
<div id="d1">
</div>
<p>
故國三千里，深宮二十年晃财。<br />
一聲何滿子叨橱，雙淚落君前。
</p>
<ul>計算機
<li>python</li>
<li>Html5</li>
<li>JAVA</li>
<li>測試</li>
</ul>
</body>
</html>
效果圖
