Question

我想知道一些事情：

1）如何在最右侧获得圆形图像以进入标题并且不在其中？

2）如何正确对齐底部的最后三个图像（＆＃34; R＆＃34;类）并在保持裁剪的同时在它们之间留有间距？

3）如何制作弹出菜单（如Google页面中的那个），显示各种选项？

我在这里添加一个小提琴：https://jsfiddle.net/cLbfnu7p/1/

代码：

    <div class="header">
    <div class="nav-container">
        <div class="logo"><img src="Images/logo.png" height="75px" width="auto"></div>
        <div class="menu">
            <ul class="menu-ul">
                <a href="#" class="active"><li>Home</li></a>
                <a href="#"><li>Login</li></a>
                <a href="#"><li>Contact</li></a>
                <a href="#"><li>Store</li></a>
                <a href="#"><li>Buy</li></a>
            </ul>
        </div>
        <div class="user-details">
            <div class="profile_pic">
                <div class="img_cont_pro">
                    <img src="Images/pro_pic.png">
                </div>
            </div>
        </div>
    </div>
</div>


<div class="section-divider">-<p>STUDIO</p></div>

<div class="showcase">
    <div class="R">
        <div class="r1"><img src="Images/Random/one.jpg" width="400px" height="auto"></div>
        <div class="r1"><img src="Images/Random/two.jpg" width="400px" height="auto"></div>
    </div>
    <div class="R">
        <div class="r2 c"><img src="Images/Random/three.jpg" width="400px" height="225px"></div>
        <div class="r2 c2"><img src="Images/Random/four.jpg" width="auto" height="140px"></div>
        <div class="r2 c3"><img src="Images/Random/five.jpg" width="auto" height="140px"></div>
    </div>
</div>

由于某些原因，我无法在此处添加CSS，因此很抱歉

非常感谢

PS：我是web-D的新手，所以不要对代码负面看待

Answer 1

对于数字1，您应该将用户详细信息div块移动到徽标之后但在菜单之前。然后我会做填充顶部：40px;。

对于填充和边距，你不能使用none，因为不允许你使用0，如果你不希望它有任何可见的边距或填充。

您应该使用检查元素开发人员工具（如果您正在使用Chrome中的右键菜单）来查看您的代码，您会看到这一点并更好地了解代码的作用以及代码的位置定位在页面上。

另外，对于你的第二点，你为什么要用两个不同的div来制作图像＆＃39; R＆＃39; （你应该把你的课程称为更有意义的名字，并提及他们所做的事情），在第二部分你已经在图像上使用了新的课程：

.c {
    left: 390px;
    position: absolute;
    margin-top: -50px;
    clip: rect(50px,400px,190px,0px);
}

这是什么让他们不与排名前2的图像对齐。另外r1和r2类都是相同的，所以不需要它们，除非你打算为其中一个添加额外的样式。

关于第3点，不确定你要求的是什么。下拉菜单？悬停样式？点击某种动画？

如何将图像添加到顶部的标题？

1 个答案: