浮动的效果水平显示

原创 2019-04-29 13:30:33 355
摘要:<!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>Document</title>

<style>

* {

margin: 0;

padding: 0;

}


div {

/* border: 1px solid red; */

background-color: #960057;

height: 50px;

text-align: center;

line-height: 50px;

}


#left,

#middle,

#right {

float: left;

width: 33.33%;

background-color: #009688;

}


#footer {

clear: both;

background-color: #005a96;

}


#left {

background-color: #009607;

}


#right {

background-color: #009607;

}

</style>

</head>


<body>

<div id="header">头部信息</div>

<div id="left">左栏信息</div>

<div id="middle">中栏信息</div>

<div id="right">右栏信息</div>

<div id="footer">脚部信息</div>

</body>


</html>



批改老师:查无此人批改时间:2019-04-30 09:05:16
老师总结:完成的不错。浮动一般手机网页用的比较多。继续加油

发布手记

热门词条