我通过bootstrap响应我的页面html时遇到问题

时间：2019-04-22 06:57:07

标签： javascript html css

我正在使用引导程序设计响应页面  但不幸的是，导航栏无法将照片的高度保持在标题上方，而不能完全保留在标题下方，因此应手动进行调整。

我的代码：

* {
    padding: 0;
    margin: 0;
}


@font-face {
    font-family: 'yekan';
    src: url('../fonts/BYekan.eot?#') format('eot'),
        /* IE6–8 */
        url('../fonts/BYekan.woff') format('woff'),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/BYekan.ttf') format('truetype');
    /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

@font-face {
    font-family: 'koodak';
    src: url('../fonts/BKoodakBold.eot?#') format('eot'),
        /* IE6–8 */
        url('../fonts/BKoodakBold.woff') format('woff'),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/BKoodakBold.ttf') format('truetype');
    /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}



#header{
    min-height: 100px;
}


#header_items {
    position: relative;
}

#header_items img {
    position: absolute;
    display: block;
    min-height: 100px;
}


#nev {
    border: solid 1px #d4d8d4;
    padding: 0.8%;
    border-bottom: solid 1px #d4d8d4;
}

#nev li {
    float: right;
    list-style: none;
    position: relative;
}

#nev li a {
    text-decoration: none;
    display: block;
    font-size: 16px;
    padding: 5px;
    margin-left: 10px;
    font-family: koodak;
    transition: 0.1s;
    color: #565454;

}


#nev li a:hover {
    background: #79c3eb;
    border-radius: 5px;



}

#nev ul {
    position: relative;
    direction: rtl;
    display: block;
}

#nev li > ul {
    position: absolute;
    display: none;
    background: #fff;
    z-index: 100;
    min-width: 100px;
    border: 1px solid #bcbcbc;

}

#nev li > ul > li {
    float: none;
    padding: 5px;
    border-bottom: 1px solid #dad1d1;
}

#nev li:hover > ul {
    display: block;
    margin-right: 60%;

}


body {
    background: #f0f0f0;

}

#header_contacts {
    position: absolute;
    margin-top: 7.5%;
}

#header_contacts a span {
    margin: 0.1em;
    padding: 0.5em;
    border-radius: 300px;
    font-size: 1.5vw;
    background: #cccccc;
    transition: 0.1s;
    color: #000;

}

#header_contacts span:hover {

    color: #269abc;
}
 
    
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>test template</title>
    <!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
       
        
       

</head>

<body>
    <!------------------ start block header of themplate ------------------>
    <div class="container">
        <div class="row">
            <div class="col-lg-12" id="header">

                <div id="header_items">
                    <img src="https://pexetothemes.com/demos/story_wp/wp-content/uploads/2014/05/header2.jpg" class="img-responsive" >
                    <div class="col-lg-4 col-lg-offset-3 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-3 col-sx-4 col-sx-offset-3" id="header_contacts">

                        <a href="#"> <span title="home" class="glyphicon glyphicon-home"></span></a>
                        <a href="#"> <span title="login" class="glyphicon glyphicon-user"></span></a>
                        <a href="#"> <span title="search" class="glyphicon glyphicon-search "></span></a>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12" id="nev">
                <div class="container">
                    <ul>
                        <li><a href="#">test one</a>
                            <ul>
                                <li><a href="#">test 2</a><ul>
                                <li><a href="#">test 2</a></li>
                                <li><a href="#">testtesttesttesttesttest 3</a></li>
                                <li><a href="#">test 4</a></li>
                                <li><a href="#">test 5</a></li>
                            </ul></li>
                                <li><a href="#">test 3</a></li>
                                <li><a href="#">test 4</a></li>
                                <li><a href="#">test 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">test 2</a></li>
                        <li><a href="#">test 3</a></li>
                        <li><a href="#">test 4</a></li>
                        <li><a href="#">test 5</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
 
    <!------------------ end block header of themplate ------------------>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</body>

</html>

此代码由引导程序4编写。 我正在设计标题，并且对我遇到的问题有一些疑问，我不知道如何解决此问题：（

1 个答案:

答案 0 :(得分：0)

希望以下代码可以解决您的问题。

* {
  padding: 0;
  margin: 0;
}


@font-face {
    font-family: 'yekan';
    src: url('../fonts/BYekan.eot?#') format('eot'),
        /* IE6–8 */
        url('../fonts/BYekan.woff') format('woff'),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/BYekan.ttf') format('truetype');
    /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

@font-face {
    font-family: 'koodak';
    src: url('../fonts/BKoodakBold.eot?#') format('eot'),
        /* IE6–8 */
        url('../fonts/BKoodakBold.woff') format('woff'),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/BKoodakBold.ttf') format('truetype');
    /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}



#header{
    min-height: 100px;
}


#header_items {
    position: relative;
}

#header_items img {
    position: relative;
    display: block;
    min-height: 100px;
}


#nev {
    border: solid 1px #d4d8d4;
    padding: 0.8%;
    border-bottom: solid 1px #d4d8d4;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

#nev li {
    float: right;
    list-style: none;
    position: relative;
}

#nev li a {
    text-decoration: none;
    display: block;
    font-size: 16px;
    padding: 5px;
    margin-left: 10px;
    font-family: koodak;
    transition: 0.1s;
    color: #565454;

}


#nev li a:hover {
    background: #79c3eb;
    border-radius: 5px;



}

#nev ul {
    position: relative;
    direction: rtl;
    display: block;
}

#nev li > ul {
    position: absolute;
    display: none;
    background: #fff;
    z-index: 100;
    min-width: 100px;
    border: 1px solid #bcbcbc;

}

#nev li > ul > li {
    float: none;
    padding: 5px;
    border-bottom: 1px solid #dad1d1;
}

#nev li:hover > ul {
    display: block;
    margin-right: 60%;

}


body {
    background: #f0f0f0;

}

#header_contacts {
    position: absolute;
    //margin-top: 7.5%;
    margin-left: 0;
    left: 10px;
    top: 70px;
}

#header_contacts a span {
    margin: 0.1em;
    padding: 0.5em;
    border-radius: 300px;
    font-size: 1.5vw;
    background: #cccccc;
    transition: 0.1s;
    color: #000;

}

#header_contacts span:hover {

    color: #269abc;
}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>test template</title>
    <!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
       
        
       

</head>

<body>
    <!------------------ start block header of themplate ------------------>
  <div class="container-fluid">
        <div class="row">
			<div class="col-lg-12">
				<div id="header">
					<div id="header_items">
						<img src="https://pexetothemes.com/demos/story_wp/wp-content/uploads/2014/05/header2.jpg" class="img-responsive" >
						<div class="col-lg-4 col-lg-offset-3 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-3 col-sx-4 col-sx-offset-3" id="header_contacts">

							<a href="#"> <span title="home" class="glyphicon glyphicon-home"></span></a>
							<a href="#"> <span title="login" class="glyphicon glyphicon-user"></span></a>
							<a href="#"> <span title="search" class="glyphicon glyphicon-search "></span></a>
						</div>
					</div>
					
					
					
					<div id="nev">
						<div class="container">
							<ul>
								<li><a href="#">test one</a>
									<ul>
										<li><a href="#">test 2</a><ul>
										<li><a href="#">test 2</a></li>
										<li><a href="#">testtesttesttesttesttest 3</a></li>
										<li><a href="#">test 4</a></li>
										<li><a href="#">test 5</a></li>
									</ul></li>
										<li><a href="#">test 3</a></li>
										<li><a href="#">test 4</a></li>
										<li><a href="#">test 5</a></li>
									</ul>
								</li>
								<li><a href="#">test 2</a></li>
								<li><a href="#">test 3</a></li>
								<li><a href="#">test 4</a></li>
								<li><a href="#">test 5</a></li>
							</ul>
						</div>
					</div>
					
					
				</div>
			</div>
		</div>
	</div>
 
    <!------------------ end block header of themplate ------------------>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</body>

</html>

}

相关问题
最新问题