2-6编程问题

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

2-6编程问题

来源：2-7 编程练习

von_colonel

2017-04-30 10:39:04

实际编码后有两个问题

1、右上角的项目会因为浏览器大小被挤出导航条

2、将图片1（pic1）设置padding:100px;后第一张图片会与整个页面错位

效果图：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

/*此处写代码*/

*{

margin:0;

padding:0;

}

.nav{

width:100%;

max-width:1100px;

height:100px;

background:black;

position:fixed;

}

.logo{

float:left;

}

.opt{

color:#fff;

font-size:20px;

font-family:"微软雅黑";

line-height:100px;

float:right;

margin-right:10px;

}

li{

margin:auto 10px;

float:left;

list-style:none;

}

.pic1{

padding:100px;

}

</style>

</head>

<body>

<div class="nav">

<div class="logo">

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

</div>

<div class="opt">

<ul>

<li>课程</li>

<li>职业路径</li>

<li>实战</li>

<li>猿问</li>

<li>手记</li>

</ul>

</div>

</div>

<div class="pic1">

<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg" alt="pic1"/>

</div>

<div class="pic2">

<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg" alt="pic2"/>

</div>

<div class="pic3">

<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg" alt="pic3"/>

</div>

</body>

</html>

写回答

1回答

小丸子爱吃菜

小丸子爱吃菜

2017-04-30

修改如下2处：

1、将.pic1的padding值去掉，改成padding-top:100;即可

2、将nav的max-width属性去掉，这个属性规定元素最宽显示的值是多少。

祝学习愉快！

0

0 学习 · 36712 问题

相似问题

2-6编程练习问题

回答 1

2-9编程练习

回答 2

布局 2-6 编程练习

回答 1

2-6编程问题

回答 1

2-6编程求指点

回答 2

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