有哪里需要改进的?

有哪里需要改进的?

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

<style>

/*在此处补充代码*/

header {

display: -webkit-flex;

display: flex;

background-color: #000000;

justify-content: space-around;

align-items: center;

width: 100%;

}

ul.nav {

width: 33%;

display: flex;

justify-content: space-between;

}

ul.nav>li {

color: #ffffff;

list-style: none;

}

input[type="button"] {

width: 50px;

height: 25px;

border-radius: 5px;

background-color: orange;

border: none;

color: #ffffff;

}

div.login {

width: 8%;

display: flex;

justify-content: space-between;

}

</style>

</head>


<body>

<header>

<div class="logo">

<img src="http://img1.sycdn.imooc.com/climg//59feb59700019dab01910057.png" alt="">

</div>

<ul class="nav">

<li>课程</li>

<li>路径</li>

<li>猿问</li>

<li>手记</li>

</ul>

<div class="login">

<input type="button" value="登录">

<input type="button" value="注册">

</div>

</header>

</body>


</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕夭夭 2019-05-22 14:40:08

你好同学,整体的布局是很不错的,代码中存在一些细节问题如下:

1,图片是行内元素,会存在一个默认间隙。这样把导航整体的高度就撑开了一些,如下

http://img1.sycdn.imooc.com//climg/5ce4ee17000140cd02850114.jpg

解决方式是把它转换为块元素,即给img设置display: block;哦

2.很多的都会有默认的样式,例如body存在默认的margin,如下:

http://img1.sycdn.imooc.com//climg/5ce4ee760001903719200121.jpg

在做页面的时候,最后先使用通配符为所以的元素初始化一下样式更好,如下:

http://img1.sycdn.imooc.com//climg/5ce4eebc000105bd01600087.jpg

祝学习愉快 ,望采纳。

  • 还有, div.login { width: 8%; display: flex; justify-content: space-between; } 这里设置宽度8%的话,PC端窗口缩小时,会积压在一起,我改成固定宽度width: 100px;解决了,这么做行么?
    2019-06-10 12:45:08
  • 你好同学,设置固定宽度也是可以的,或者直接把宽度去掉让里面的内容撑开也行哦。
    2019-06-10 17:52:22
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师