体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

作业2-9ul垂直居中

来源：2-10 编程练习

29MIN

2017-08-01 13:38:48

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

.header,.footer{

width: 100%;

height: 60px;

background-color: black;

color: white;

}

.body{height: 500px;

width: 100%;

background-color: lightblue;}


.logo{float: left;

height: 60px;}

img{height: 100%;}

.nav{float: right;}

li{list-style-type: none;

padding: 0 20px;

float: left;

width: auto;

height: 60px;

line-height: 60px;}

.big{width: 70%;

height: 100%;

margin: 0 auto;}

.left{float: left;

width: 60%;

padding: 20px 0;}

.right{float: right;

width: 40%;

padding: 20px 0;}

span{background-color: pink;}

.footer ul{display: inline-block;}

.footer{text-align: center;}

</style>

</head>

<body>

<div class="header">

<div class="logo"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></div>

<div class="nav">

<ul>

<li>课程</li>

<li>职业路径</li>

<li>实战</li>

<li>猿问</li>

<li>手记</li>

</ul>

</div>

</div>

<div class="body"><div class="big">

<div class="left">

<h3>课程推荐</h3>

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

<p><span>职业路径</span> 零基础入门Android语法与界面</p>

<p><span>职业路径</span> IOS基础语法与常用控件</p>

<p><span>职业路径</span> PHP入门开发</p>

<p><span>职业路径</span> JAVA入门开发</p>

</div>

<div class="right">

<h3>相关课程</h3>

<p>HTML CSS JavaScript</p>

<p>HTML5 CSS3 Jquery</p>

<p>移动端基础 移动端APP开发</p></div></div>

</div>

<div class="footer">

<ul>

<li>网站首页</li>

<li>企业合作</li>

<li>人才招聘</li>

<li>联系我们</li>

<li>常见问题</li>

<li>友情链接</li>

</ul></div>

</body>

</html>



为什么我使用height=line-height没有效果？

写回答

2回答

好帮手慕糖

2017-08-01

这里不需要设置body的高度的呀。

0

好帮手慕糖

2017-08-01

你好，不是line-height没有效果是列表本身自带的内外边距影响，建议使用通配符去掉内外边距，例：

*{
  margin:0;
  padding: 0;
}

祝学习愉快！

0
h9MIN
h 谢谢老师，另外请问这个小作业中中间body的高度怎么样设置最合适？
h017-08-01
共1条回复

0 学习 · 36712 问题

查看课程

相似问题

老师，麻烦检查一下~还有我的登录按钮算是垂直居中了吗？

回答 2

关于2-11问题

回答 2

想问一下什么时候使用设置绝对定位的方式来设置元素居中

回答 2

回答 1

回答 1

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