2-10编程练习批改

首页课程实战体系课手记专栏慕课教程

2-10编程练习批改

来源：2-10 编程练习

慕田峪0316891

2018-06-13 11:19:22

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{padding:0;

margin:0}

.var{width:100%;

height:100px;

background:black;

line-height:100px

}

.var-1{width:300px;

background:url(http://climg.mukewang.com/58c0d2d900016ce303000100.png);

height:100px;

float: left;}

.var-2{float:right;

}

.var-2 ul li{list-style:none;

color:white;

float:left;

margin-right:40px;

}

.banner{width:100%;

height:1000px;

background:gray;

}

.banner-left{width:40%;

height:1000px;

background:#0cf;

float:left;

position:relative;

}

.banner-left1{width:auto;

height: 200px;

position:absolute;

top: 20%;

left:50%;

margin-left:-100px;

}

.banner-left1 ul li{list-style:none;

font:bold 20px "宋体";

line-height:60px;

}

span{background:pink;}

.banner-right{width:60%;

height:1000px;

background:#0cf;

position:relative;

float:right;}

.banner-right1 ul li{list-style:none;

font:bold 20px "宋体";

line-height:60px;

}

.banner-right1{position:absolute;

top:20%;

left:20%;

line-height:60px;}

.foot{width:100%;

height:100px;

background:black;

color:white;

line-height:100px;

display:inline-block;

text-align: center;

}

.foot ul li{ display:inline-block;

margin-left: 40px}

</style>

</head>

<body>

<div class="var">

<div class="var-1"></div>

<div class="var-2">

<ul>

<li>课程</li>

<li>职业路径</li>

<li>课程</li>

<li>课程</li>

<li>课程</li>

</ul>

</div>

</div>

<div class="banner">

<div class="banner-left">

<div class="banner-left1">

<h1>课程推荐</h1>

<ul>

<li><span>职业路径</span>  HTML5与CSS3实现动态网页</li>

<li><span>职业路径</span>  HTML5与CSS3实现动态网页</li>

<li><span>职业路径</span>  HTML5与CSS3实现动态网页</li>

<li><span>职业路径</span>  HTML5与CSS3实现动态网页</li>

<li><span>职业路径</span>  HTML5与CSS3实现动态网页</li>

</ul>

</div>

</div>

<div class="banner-right">

<div class="banner-right1"><h1>相关内容</h1>

<ul>

<li>HTML CSS JAVASCRIPE</li>

<li>HTML5 CSS3 JQUERY</li>

<li>移动端基础移动端APP开发</li>

</ul>

</div>

</div>

</div>

<div class="foot">

<ul>

<li>职业</li>

<li>职业</li>

<li>职业</li>

<li>职业</li>

<li>职业</li>

<li>职业</li>

</ul>

</div>

</body>

</html>

写回答

1回答

好帮手慕星星

好帮手慕星星

2018-06-13

已采纳

效果可以呢，棒棒哒~~

0

0 学习 · 36712 问题

相似问题

2-9编程练习

回答 2

请老师批改2-11编程练习

回答 1

2-11编程练习

回答 1

2-10编程练习

回答 1

请老师批改2-6编程练习

回答 1

打开慕课网App查看更多内容