f浮动相对定位导航

Original 2019-03-24 10:26:33 205
abstract:<html> <head> <meta charser="utf-8";> <title>css中文的浮动</title> <link rel="shortcut icon" type="image/x-icon" href="images/favicon.

<html>

<head>

<meta charser="utf-8";>

<title>css中文的浮动</title>

<link rel="shortcut icon" type="image/x-icon" href="images/favicon.con">

<style type="text/css">

ul{

position:relative;

left:200px;

border-color:red;

}

ul li{

list-style:none;

width:100px;

height:40px;

line-height: 40px;

text-align:center;

background-color: #ccc;

margin:0px 1px;

float:left;

}

.main{

width:100px;

height:50px;

background-color:green;

float:right;


}

.pos{

position:relative;

top:-40px;


}

.clear{

clear:left;


}


</style>


</head>

<body>

<ul>

<li>html</li>

<li>css</li>

<li>javascript</li>

<li>jquery</li>

<li>php</li>


</ul>

<div class="pos">

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

<div class="main">div1</div>

<div class="main">div2</div>

<div class="main">div3</div>

</div>

<body>

</html>


Correcting teacher:灭绝师太Correction time:2019-03-25 09:29:12
Teacher's summary:除了上课案例,还需要自行寻找案例练习哦!

Release Notes

Popular Entries