程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

使用 HTML/CSS 将图片上移

发布于2022-06-06 07:36     阅读(4019)     评论(0)     点赞(29)     收藏(0)


我对 HTML/CSS 比较陌生,并且很难将两张图片与 ASP MVC 网站对齐。我们用于菜单栏的书挡图片无法与其余的背景图片对齐。下面是问题的屏幕截图,HTML 和 CSS。未正确调整的书挡图片为 NAV-Left-Corner,CSS 中的 id 为“#menuLeft”。导航栏的其余部分使用水平重复的蓝色小图片。CSS 的那部分可以在“ul#Menu”部分找到。(我对正确的书挡也有同样的问题,只是想为了这篇文章而简化一些事情)

行外菜单图片

HTML

    <body>
    @using Monet.Common


            <div class="page">
                <header>            
                <div style="margin: 20px;">
    @*                <a href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </a>*@
                    <span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
                    <span style="color: white; font-size: 18px; ">&nbsp;&nbsp; </span>
                </div>
    @*            </a>*@
    @*            <div id="logindisplay">
                    @Html.Partial("_LogOnPartial")
                </div>*@
                    <nav>                               
                        <ul id="menu">     
                            <img src="../../Content/images/NAV-Left-Corner.gif" id="menuLeft" alt="mLeft"/>
                            <li id="mTop">@Html.MenuLink("Agents", "Index", "Agent")</li>
                            <li class="mProducts">@Html.MenuLink("Products", "Index", "Product")</li>
                            <li class="mPt">@Html.MenuLink("Product Training", "Index", "Course")</li>
                            <li class="mCe">@Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
                            <li id="mBottom">@Html.MenuLink("Help", "About", "Home")</li>                        
                            <img src="../../Content/images/NAV-Right-Corner.gif" id="menuRight" alt="mRight"/>
                         </ul>                    
                    </nav>
            </header> 
            <img src="../../Content/images/TEST2body_top.png"  id="topPic" alt="tag"/>       
                <section id="main">            
                @RenderBody()
            </section>
            <footer>
                <span style="color: Gray;"> Copyright © 2012 For Internal Use Only. </span>
            </footer>
            </div>
    </body>

CSS

    ul#menu {
        /*border-bottom: 1px #5C87B2 solid;*/
        background-image: url('../../Content/Images/Nav-Background.gif');
        background-position:center;
        background-repeat:repeat-x;
        padding: 0 0 2px;
        position: relative;
        margin: 0;
        text-align: right;
    }

    #menuLeft
    {
        vertical-align:middle;
    }

    #menuRight
    {
        vertical-align:middle;

    }

解决方案


我同意 Nile 的评论(“不要这样做”)。

无论如何-您可以通过添加一些填充或边距来向上或向下移动任何东西。您还可以使用负填充顶部,将图像向上移动,甚至在其容器之外。

ul#menu {
    /*border-bottom: 1px #5C87B2 solid;*/
    background-image: url('../../Content/Images/Nav-Background.gif');
    background-position:center;
    background-repeat:repeat-x;

    /* HERE */
    padding: -5 0 2px; 

    position: relative;
    margin: 0;
    text-align: right;
}

我不确定这是否适合您,但这可能是定位物品的好技巧。


稍后编辑/添加:

也许你不应该在这样的严肃应用中尝试 CSS。应用程序“仅供内部使用”不需要花哨的效果。

阅读有关 CSS 的优秀教程并在工作中使用它之前进行一些练习(定位、渐变、浏览器支持):)

新波士顿是一个非常好的网站,拥有我见过的最专业的免费课程和教程。




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/366966/40b1de7b37f7d4e4168c/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

29 0
收藏该文
已收藏

评论内容:(最多支持255个字符)