网站搞砸了桌面

时间：2016-07-23 02:14:57

标签： html css twitter-bootstrap

这是我第一次尝试创建完整的html页面。我是在MacBook上开发的，看起来不错。 Mac视图：

mac view

但是，当我在桌面上查看它时，我看到了：

this http://www.gyazo.com/739177573ec613a62073431022240001.png

我是否应该添加一些东西来调整更大的屏幕尺寸？在大屏幕上开发和在小屏幕上观看会更好吗？

以下是代码：

*
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: sans-serif;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

body
{
    margin: 0;
    background-color: #434343;
}

/* Topbar, above navbar */
.topbar
{
    width: 100%;
    height: 30px;
    background-color: #3cb371;
    padding: 0;
    position: fixed;
    top: 0;
    color: white;
    z-index: 2;
}

.topbar .links ul
{
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    text-align: center;
}

.topbar .links ul li
{
    display: inline-block;
    padding: 5px 5px 0px 5px;
}

.topbar .links ul li a
{
    text-decoration: none;
    color: white;
    transition:color .4s ease-out;
    display: block;
    position: relative;
}

.topbar .links ul li a:hover
{
    color: #434343;
}

.topbar .links ul li a.active
{
    color: #3cb371;
}

.topbar .links ul li a.active:hover
{
    top: 0px;
}

.navbar
{
    width: 100%;
    height: 80px;
    background-color: #434343;
    padding: 0;
    position: fixed;
    top: 0;
    margin-top: 30px;
    color: white;
    z-index: 2;
}

.navbar .links
{
    margin-top: 23px;
    margin-right: 10px;
}

.navbar #brand
{
    width: 20%;
    height: 20%;
    margin-top: -10px;
    margin-left: 15px;
    position: relative;
}

.navbar #brand:hover
{
    margin-left: 25px;
    transition:margin-left .1s ease-out;
}

.navbar .links ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: right;
}

.navbar .links ul li
{
    display: inline-block;
}

.navbar .links ul li a
{
    text-decoration: none;
    color: white;
    transition:color .4s ease-out;
    display: block;
    padding: 10px 15px;
    position: relative;
}

.navbar .links ul li a:hover
{
    color: #3cb371;
    top: -2px;
}

.navbar .links ul li a.active
{
    color: #3cb371;
}

.navbar .links ul li a.active:hover
{
    top: 0px;
}




/* jumbotron image */
.largeheading
{
    color: white;
    margin-top: 110px;
}

.largeheading h1
{
    margin-top: -400px;
    text-align: center;
    font-size: 35px;
}

.largeheading h3
{
    width: 800px;
    margin-left: 330px;
    text-align: center;
    font-size: 20px;
}

.largeheading .contact-btns
{
    display: inline-block;
    margin-left: 565px;
    margin-top: 25px;
    overflow: hidden;
}

.largeheading .contact-btns ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.largeheading .contact-btns ul li
{
    display: inline-block;
    padding: 5px 12px 0px 12px;
}

.largeheading .contact-btns ul li a
{
    text-decoration: none;
    color: white;
    transition:color .6s ease-out;
    transition:border .5s ease-out;
    display: block;
    padding: 13px 22px;
    position: relative;
    border: 1.6px solid white;
    z-index: 1;
}

.largeheading .contact-btns ul li a:hover
{
    color: #333;
    border: 1.6px solid #3bc371;
}

.nextGallery
{
    color: white;
    margin-top: 230px;
    text-align: center;
}

.nextGallery hr
{
    width: 25%;
}

.gallery
{
    margin-top: 50px;
}

.gallery .container p
{
    margin-top: 15px;
    color: white;
}

.col-md-4 a:hover
{
    text-decoration: none;
}

.gallery li
{
    display: inline-block;
    padding: 5px 12px 0px 12px;
    overflow: hidden;
    z-index: 1;
}

.gallery li a
{
    text-decoration: none;
    color: white;
    transition:color .6s ease-out;
    transition:border .6s ease-out;
    display: block;
    padding: 13px 22px;
    position: relative;
    border: 1.6px solid white;
    z-index: 1;
}

.gallery li a:hover
{
    color: #3bc371;
    border: 1.6px solid #3bc371;
}

/*
.jumbotron img
{
    width: 100%;
    height: 500px;
}
*/
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="master.css" />
    <title>Navbar attempt 1</title>
</head>
<body>
    <div class="topbar">
        <div class="links">
            <ul>
                <li>Call us now (555)-555-5555</li>
                <li>or</li>
                <li><a href="#">Email us today!</a></li>
            </ul>
        </div>
    </div>
    <div class="navbar">
        <div class="links">
            <a href="#"><img src="https://i.gyazo.com/e67b302b7b4ebb7695190d9835bba06b.png" id="brand"></a>
            <ul>
                <li class="active"><a href="#" class="active">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>

    <div class="largeheading">
        <div class="img">
            <img src="https://emcfinancial.com/wp-content/uploads/2015/05/plans_blurred.jpg" id="jumbotron-img">
        </div>
        <h1>Your Business Tagline Here</h1>
        <h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
 ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerciLorem ipsum dolor sit
 amet, consectetuer adipiscing elit</h3>
        <div class="contact-btns">
            <ul>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Portfolio</a></li>
            </ul>
        </div>
    </div>

<div class="container">
    <div class="nextGallery">
        <h1>Our Gallery</h1>
        <hr />
    </div>
</div>

    <div class="gallery">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <a href="#">
                        <img src="http://www.placehold.it/350x350">
                        <p>Gallery item # 1 description here</p>
                    </a>
                    <center><li><a href="#">Portfolio</a></li></center>
                </div>
                <div class="col-md-4">
                    <a href="#">
                        <img src="http://www.placehold.it/350x350">
                        <p>Gallery item # 2 description here</p>
                    </a>
                    <center><li><a href="#">Portfolio</a></li></center>
                </div>
                <div class="col-md-4">
                    <a href="#">
                        <img src="http://www.placehold.it/350x350">
                        <p>Gallery item # 3 description here</p>
                    </a>
                    <center><li><a href="#">Portfolio</a></li></center>
                </div>
            </div>
        </div>
    </div>

    <br>
    <br>
    <br>


</body>
</html>

2 个答案:

答案 0 :(得分：0)

对于带有图像的标题，我建议你使用一个百分比来表示它相对于导航栏的高度（看起来它已经脱落了）。然后，对于图像问题，您可以尝试这样做：

.img{
    width:100%;
}

答案 1 :(得分：0)

我检查了Chrome，firefox，edge和explorer上的代码看起来都不错。尝试将代码保存在记事本中并使用浏览器打开以进行检查。您可能想要添加的唯一内容是针对不同屏幕尺寸的一些媒体查询。您可以在http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

了解有关他们的更多信息
相关问题
最新问题