括号图像实时预览

所以我在这里不知所措。我知道我的图片有合适的src代码，当我在Chrome中查看页面时，如果不使用Brackets，图片就会显示出来。但当我使用Brackets Live预览时，它不会在浏览器中显示图像，它确实为其创建了一个框，但它是空的。有趣的是，当我在Brackets的文本编辑器中悬停在代码上时，我会看到图像的预览。任何帮助都将不胜感激！

    <!doctype html>
<html>
    <head>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link href='https://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
    <title>Here goes #1</title>
    </head>
    <body>
        <header class="main-header">
                <ul class="nav bv">
                    <li><h1>My Favortie Artists</h1></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Podcasts</a></li>
                    <li><a href="#">Books</a></li>
                    <li><a href="#">Ideas</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
        </header>
            <div class="main-content">
                <div class="content1">
                    <ul clas="imgs">
                        <li class="afr"><a href="afr.html"><img src="c:web projects/art/img/afr1.jpg">Afremov</a></li>
                    </ul>
                    <p></p>
                </div>
            </div>


    </body>
</html>

 * {
    margin: 0;
    padding; 0;
    box-sizing: border-box;
    width: 100%;
}
body li {
    list-style-type: none;
}
ul {
    padding: 0;
}
.nav {
    text-align: center;
    background-color: beige;
    box-shadow: 0 1px 10px black;
    height: 230px;
}
.nav h1 {
    text-shadow: 5px 7px 4px white, 2px 2px 10px beige;
    line-height: .8em;
    padding: 10px 0;
}
/*COMMON FONTS*/
.bv {
    font-family: 'Bevan', cursive;
}
/*SMALL SCREEN STYLE*/
.nav li {
    font-size: 1.25em;
    text-shadow: 2px 3px 10px white;
}

/*LINK STYLES*/
.nav a {
    text-decoration: none;
    list-style-type: none;
    border-bottom: 2px solid grey;
    padding: 0 15px;
    color: black;
    border-radius: 10%;
}
.nav a:hover {
    background-color: bisque;
    padding: 0 5%;
    font-size: 1.5em;
    border-radius: 25%;
    transition: background-color .6s,  padding .8s; font-size 3s, border-radius .8s;
}
/*LARGE SCREEN*/
@media (min-width: 769px) {
    .nav {
        display: flex;
        height: 150px;
    }
    .nav li {
        flex-grow: 1;
        align-self: center;
}
    .nav:not(:first-child) {
        flex-flow: wrap;
        justify-content: flex-end;
    }
    .nav h1 {
        padding-right: 50%;
        flex-grow: 2;
        margin-left: 10px;
    }
    .nav a:hover {
    background-color: bisque;
    padding: 0 20%;
    font-size: 1.5em;
    border-radius: 25%;
    transition: all 1s;
}
/*Image Links*/

src="c:\web projects/art/img/afr.jpg"中的"c:\web"是什么。你是说c:\web/projects/art/img/afr1.jpg吗？

如果是这样，请尝试设置一个相对路径，例如src="art/img/afr.jpg".

始终使用各自的文件夹名称在工作目录上复制您的支持文件，如images、js、css，然后引用相对路径来引用代码中的文件。

相关内容

最新更新

热门标签：