亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

前端學(xué)習(xí)-浮動(dòng)實(shí)例（將列表做成并列的小球）

Original 2019-01-19 15:44:00 274
abstract：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">


<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>CSS基礎(chǔ)-利用浮動(dòng)完成并列小球</title>

<style>

/* 標(biāo)簽選擇器 */

ul {

border: 1px dashed lightsalmon;

margin-top: 0px;

margin-bottom: 0px;

padding-left: 0px;

overflow: hidden;

padding: 10px;

}


/* 層級(jí)選擇器 */

ul li {

list-style-type: none;

width: 40px;

height: 40px;

background-color: brown;

float: left;

border-radius: 50%;

/*可以把塊狀變成圓球*/

text-align: center;

line-height: 40px;

margin-left: 5px;

box-shadow: 2px 2px 1px black;


}

</style>

<!-- <link rel="stylesheet" href="staic/css/style01.css"> -->

</head>


<body>

<ul>

<li class="Kris">1</li>

<li id="bg-green">2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

</ul>



</body>


</html>

<!DOCTYPE html>

<html lang="en">


<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>CSS基礎(chǔ)-利用浮動(dòng)完成并列小球</title>

<style>

/* 標(biāo)簽選擇器 */

ul {

border: 1px dashed lightsalmon;

margin-top: 0px;

margin-bottom: 0px;

padding-left: 0px;

overflow: hidden;

padding: 10px;

}


/* 層級(jí)選擇器 */

ul li {

list-style-type: none;

width: 40px;

height: 40px;

background-color: brown;

float: left;

border-radius: 50%;

/*可以把塊狀變成圓球*/

text-align: center;

line-height: 40px;

margin-left: 5px;

box-shadow: 2px 2px 1px black;


}

</style>

<!-- <link rel="stylesheet" href="staic/css/style01.css"> -->

</head>


<body>

<ul>

<li class="Kris">1</li>

<li id="bg-green">2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

</ul>



</body>


</html>


Correcting teacher：天蓬老師Correction time：2019-01-19 15:52:38
Teacher's summary：用這個(gè)做浮動(dòng)案例并不是很好, 這個(gè)適合學(xué)習(xí)選擇器

Release Notes

Popular Entries