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

原创 2018-12-08 20:30:36 408
摘要:html代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>浮动案例</title><style>* {padding: 0px;margin: 0px;}.logo {width: 960px;height: 100px;back

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

批改老师:韦小宝批改时间:2018-12-09 09:08:26
老师总结:写的很不错!代码下次记得加上高亮哦!课后多练习!

发布手记

热门词条