手记 / 插入图片+ul-li导航+图片左浮动+图片右浮动

插入图片+ul-li导航+图片左浮动+图片右浮动

3天前5浏览0评论

html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>浮动案例</title>

<style>

* {

padding: 0px;

margin: 0px;

}

.logo {

width: 960px;

height: 100px;

background: red;

margin: 0 auto;

}

.header {

width: 960px;

height: 40px;

margin:0 auto;

}

ul {

display: inline-block;

width: 960px;

height: 40px;

margin:0 auto;

}

ul li {

list-style: none;

width: 96px; 

height: 40px;

background-color: #F8F8F8;

line-height: 40px;

text-align: center;

float: left;

}

ul li:hover {

background-color: black;

color: #fff;

}

.clear {

clear: both;

}

.dtu {

width: 960px;

height: 520px;

margin: 0 auto;

}

.dtu_left {

float: left;

}

.dut_right {

float: right;

}

</style>

</head>

<body>

<div>

<img src="1.png" alt="">

</div>

<div>

<ul>

<li>php</li>

<li>html</li>

<li>python</li>

<li>java</li>

<li>C语言</li>

<li>C++</li>

<li>语文</li>

<li>数学</li>

<li>地理</li>

<li>历史</li>

</ul>

</div>

<div></div>

<div>

<div>

<img src="2.png" alt="">

</div>

<div>

<img src="3.png" alt="">

</div>

</div>

</body>

</html>

以下是三张图片

1.png2.png3.png

相关标签:HTMLCSS
    0推荐

      李准

      PHP开发工程师

      作者的热门手记

      PHP中文网

      未登录