抄
創(chuàng)建于 2024-03-21 17:04:09
<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>浮動(dòng)與盒子模型示例</title> <link rel=“stylesheet” href=“styles.css”> </head> <body> <div class=“container”> <div class="box float-left"> <p>這是一個(gè)左浮動(dòng)的盒子</p> </div> <div class="box float-right"> <p>這是一個(gè)右浮動(dòng)的盒子</p> </div> <div class="box"> <p>這是一個(gè)沒有浮動(dòng)的盒子</p> </div> <div class="clearfix"></div> <!-- 用于清除浮動(dòng) --> </div> </body> </html>
<div class=“container”>
<div class="box float-left"> <p>這是一個(gè)左浮動(dòng)的盒子</p> </div> <div class="box float-right"> <p>這是一個(gè)右浮動(dòng)的盒子</p> </div> <div class="box"> <p>這是一個(gè)沒有浮動(dòng)的盒子</p> </div> <div class="clearfix"></div> <!-- 用于清除浮動(dòng) -->
</div>
</body> </html>
/* 盒子模型樣式 */ .box { width: 200px; /* 盒子寬度 */ padding: 10px; /* 內(nèi)邊距 */ border: 1px solid #ccc; /* 邊框 */ margin: 10px; /* 外邊距 */ background-color: #f4f4f4; /* 背景色 */ box-sizing: border-box; /* 盒子模型尺寸包含邊框和內(nèi)邊距 */ } /* 浮動(dòng)樣式 */ .float-left { float: left; /* 左浮動(dòng) */ } .float-right { float: right; /* 右浮動(dòng) */ } /* 清除浮動(dòng) */ .clearfix::after { content: ""; display: table; clear: both; }
width: 200px; /* 盒子寬度 */ padding: 10px; /* 內(nèi)邊距 */ border: 1px solid #ccc; /* 邊框 */ margin: 10px; /* 外邊距 */ background-color: #f4f4f4; /* 背景色 */ box-sizing: border-box; /* 盒子模型尺寸包含邊框和內(nèi)邊距 */
}
/* 浮動(dòng)樣式 */ .float-left {
float: left; /* 左浮動(dòng) */
.float-right {
float: right; /* 右浮動(dòng) */
/* 清除浮動(dòng) */ .clearfix::after {
content: ""; display: table; clear: both;
創(chuàng)建于 2024-03-21 16:00:12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="styles.css"> <title>帶有二級(jí)欄目的導(dǎo)航菜單</title> </head> <body> <nav> <ul class="menu"> <li><a href="#">首頁(yè)</a></li> <li> <a href="#">關(guān)于我們</a> <ul class="submenu"> <li><a href="#">公司介紹</a></li> <li><a href="#">發(fā)展歷程</a></li> <li><a href="#">聯(lián)系信息</a></li> </ul> </li> <li> <a href="#">服務(wù)</a> <ul class="submenu"> <li><a href="#">技術(shù)支持</a></li> <li><a href="#">售后服務(wù)</a></li> </ul> </li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">聯(lián)系我們</a></li> </ul> </nav> </body> </html>
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="styles.css"> <title>帶有二級(jí)欄目的導(dǎo)航菜單</title> </head> <body> <nav> <ul class="menu"> <li><a href="#">首頁(yè)</a></li> <li> <a href="#">關(guān)于我們</a> <ul class="submenu"> <li><a href="#">公司介紹</a></li> <li><a href="#">發(fā)展歷程</a></li> <li><a href="#">聯(lián)系信息</a></li> </ul> </li> <li> <a href="#">服務(wù)</a> <ul class="submenu"> <li><a href="#">技術(shù)支持</a></li> <li><a href="#">售后服務(wù)</a></li> </ul> </li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">聯(lián)系我們</a></li> </ul> </nav> </body> </html>
nav background-color: #333; } .menu, .submenu { list-style-type: none; margin: 0; padding: 0; } .menu li { position: relative; display: inline-block; } .menu li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .menu li a:hover { background-color: #111; } .submenu { display: none; position: absolute; background-color: #333; min-width: 160px; z-index: 1; } .submenu li { float: none; display: block; } .menu li:hover .submenu { display: block; }
.menu, .submenu {
list-style-type: none; margin: 0; padding: 0;
.menu li {
position: relative; display: inline-block;
.menu li a {
display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
.menu li a:hover {
background-color: #111;
.submenu {
display: none; position: absolute; background-color: #333; min-width: 160px; z-index: 1;
.submenu li {
float: none; display: block;
.menu li:hover .submenu {
display: block;