6块如何整体右移？
来源：2-1 html5页面布局（表现层_header）
新新儿
2017-02-04 23:24:08
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IMOOC</title> <link rel="stylesheet" type="text/css" href="nav.css"> </head> <body> <!-- 在此完成网页的HTML代码--> <header> <div> <span> <a href="#"> <img src="http://climg.mukewang.com/582e5f160001b17100400040.png"> </a> <a href="#">MYMOOC</a> </span> <nav> <a class="Home active" href="#">Home</a> <a href="#">Course</a> <a href="#">Actual</a> <a href="#">Plan</a> <a href="#"> FAQ</a> <a href="#">Notes</a> </nav> </div> </header> </body> </html>
/*在此完成CSS样式设置*/
* {
font-family: Arial;
font-size: 14px;
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
}
header {
height: 80px;
background: #000;
}
header > .container {
width: 1200px;
margin: 0 auto;
}
header > .container > span {
display: block;
float: left;
margin: 20px 130px;
}
header > .container > span > a {
font-size: 24px;
color: #fff;
}
header > .container > nav {
float: right;
}
header > .container > nav > a {
display: block;
float: left;
font-size: 18px;
line-height: 73px;
width: 110px;
height: 73px;
text-align: center;
color: #fff;
}
header > .container > nav > a.Home { background: #d40112; }
header > .container > nav > a.Course { background: #feb800; }
header > .container > nav > a.Actual { background: #78b917; }
header > .container > nav > a.Plan { background: #433b90; }
header > .container > nav > a.FAQ { background: #f27c01; }
header > .container > nav > a.Notes { background: #017fcb; }
header > .container > nav > a:hover,
header > .container > nav > a.active {
padding-bottom:7px;
}
上面分别是两个代码，① 请老师帮忙看看效果图中黄色圈出的部分，代码是否正确？我用了span
② 粉色圈出的部分如果我想整体移动应该怎么写？编程练习的效果图中右边黑色比较多，我直接改下面width参数，右边6块还是固定在某个位置，和效果图不一样....
header > .container {
width: 1900px; /* ←根据效果图放大了此处，出来效果不一致...*/
margin: 0 auto;
}写回答
1回答
-
Python工程师
2017-02-05
header > .container > nav {
float: right;
}
这行代码就是整体右移啊~
②右侧的距离可以设置
header > .container > nav {
float: right;
margin-right：px；
}
具体距离你自己算吧
0
相似问题