css浮动布局

Original 2019-03-16 16:07:40 225
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浮动</title>

<style>

.nav{height: 80px; background: pink;}

.nav li{float: left; padding:15px; text-decoration: none; list-style: none;  height: 80px;}

.clear{clear: both;}

.box{float: left; height:50px; width:80px; background: cyan; margin:15px; line-height:50px;}

</style>

</head>

<body>

<ul class="nav">

<li>css</li>

<li>样式</li>

<li>中的浮动</li>

<li>回头来</li>

<li>继续</li>

<li>写作业</li>

</ul>

<div class="clear"></div>

<div class="box">不写作业</div>

<div class="box">不让继续</div>

<div class="box">学习课程</div>

<div class="box">哈哈哈哈</div>

</body>

</html>


Correcting teacher:灭绝师太Correction time:2019-03-18 09:14:39
Teacher's summary:那就好好写作业吧,算是对前面课程的巩固学习!

Release Notes

Popular Entries