javascript窗口条件不起作用

时间:2018-03-18 22:03:36

标签: javascript html window size conditional-statements

我正在努力使条件有效。我无法使用媒体查询,因为我的功能需要按一个按钮才能工作。

编辑: 我的网站应该将顶部导航栏更改为侧边栏,当窗口大小减小到某个点时打开和关闭。

我添加了更多细节,这是我的所有代码(包括html,css和javascript):

body {
	-webkit-font-smoothing: antialiased;
	margin: 0%;
	font-family: Arial;
	scroll-behavior: smooth;
	background: linear-gradient(#e6e6e6, white);
	height: auto;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: #80bfff;
	transition: 0.5s;
}
 
::-webkit-scrollbar-track {
    background: #f2f2f2;
}
 
::-webkit-scrollbar-thumb {
	border-radius: 25px;
	border-style: solid;
	border-color: #f2f2f2;
	border-bottom-width: 1px;
	background: #3399ff;
}

.header {
	position: relative;
	left: 0px;
	right: 0px;
	top: 0px;
	font-size: 187%;
	text-align: left;
	padding: 1.5%;
	background-color: white;
	color: grey;
	z-index: 2;
}

.content {
	overflow: hidden;
}

.card {
	position: relative;
	margin-right: 2%;
	margin-left: 2%;
	margin-top: 1%;
	margin-bottom: 2%;
}

.card p {
	background-color: white;
	float: left;
	box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2);
	border-radius: 5px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	transition: 0.3s;
}

.card p:hover {
	box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2);
}

.card a {
	float: left;
	color: grey;
	text-align: center;
	text-decoration: none;
	display: block;
	border-radius: 5px;
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 0.7%;
	padding-bottom: 0.7%;
	transition: 0.3s;
}

.card a:hover {
	box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
	background-color: #fbfbfb;
	color: #3399ff;
}

.navigation {
	z-index: 1;
	width: 100%;
	overflow: visible;
	list-style-type: none;
	background-color: white;
	box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	padding-top: 0px;
	height: auto;
}

#sidebar {
	width: 100%;
}

li a, .dropbtn {
	background-color: white;
	float: left;
	display: block;
	text-align: center;
	padding: 1%;
	font-size: 100%;
	color: grey;
	text-decoration: none;
	transition: 0.5s;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
	background-color: #f2f2f2;
	box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
	z-index: 3;
}

@media (max-width: 1000px) {
	.navigation {
		z-index: 2;
		height: 100%;
		width: 0;
		position: fixed;
		background-color: #e6e6e6;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
	}

	li a, .dropbtn {
		background-color: #e6e6e6;
		float: left;
		text-align: left;
		padding: 10px;
		width: 100%;
		text-decoration: none;
		font-size: 25px;
		display: inline-block;
		z-index: 1;
	}
	
	.dropdown-content {
		background-color: #e6e6e6;
		width: 50%;
	}

	.closebtn {
		width: auto;
		float: right;
		padding: 6px 16px 6px 16px;
		position: absolute;
		text-align: center;
		top: 5px;
		right: 5px;
		font-size: 36px;
		margin-left: 50px;
	}
	
	.about a {
		left: 20.4px;
		float: left;
	}
	
	.closebtn:hover {
		border-radius: 50%;
	}
	
	#main1 {
		transition: margin-left 0.5s;
	}
	
	#main2 {
		transition: margin-left 0.5s;
	}
	
	.header {
		position: fixed;
		box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
	}
	
	.header span {
		color: #3399ff;
		padding: 5px;
	}
	
	#sidebar {
		width: 0px;
	}
	
	.card {
		margin-top: 10%;
	}
}

@media (min-width: 1000px) {
	.closebtn {
		display: none;
	}
	
	.header span {
		display: none;
	}
	
	.navigation {
		width: 100%;
	}
	
	#sidebar {
		width: 100%;
	}
}

.dropdown {
	position: relative;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f2f2f2;
	min-width: 1%;
	box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.3);
	border-radius: 0px 5px 5px 5px;
}

.dropdown-content a {
	color: grey;
	padding: 10%;
	width: 80%;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown:hover .dropdown-content {
	display: inline-block;
	background-color: white;
}

.active {
	background-color: #3399ff;
	color: white;
}

.about a {
	float: right;
	position: relative;
}

.active:hover {
	background-color: #80bfff;
	box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
	transition: 0.5s;
}

br.clearLeft {
   clear: left;        
}
 <!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">

<title>Testing</title>

<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
$(window).resize(function() {
	var w = $(window).width();
	
	if (w < 1000) {
		function(openNav() {
			document.getElementById("sidebar").style.width = "250px";
			document.getElementById("main1").style.marginLeft = "250px";
			document.getElementById("main2").style.marginLeft = "250px";
		});
		function(closeNav() {
			document.getElementById("sidebar").style.width = "0px";
			document.getElementById("main1").style.marginLeft = "0px";
			document.getElementById("main2").style.marginLeft = "0px";
		});
	}

	if (w > 1000) {
		function(openNav() {
			document.getElementById("sidebar").style.width = "100%";
		});
		function(closeNav() {
			document.getElementById("sidebar").style.width = "100%";
		});
	}
});
</script>

</head>
<body>

<div id = "main1"; class = "header";>
	<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
	Website
</div>

<div id = "sidebar"; class = "navigation";>
	<li><a class = "active" href = "#home">Home</a></li>
	<li><a href="#news">News</a></li>
	<li><a href="#contact">Contact</a></li>
		<li class = "dropdown">
			<a class = "dropbtn">Dropdown</a>
			<div class = "dropdown-content">
				<a href = "#link1">Link 1</a>
				<a href = "#link2">Link 2</a>
				<a href = "#link3">Link 3</a>
			</div>
		</li>
	<li class = "about";><a href="#about">About</a></li>
	<li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a></li>
	<br class="clearLeft" />
</div>

<div id = "main2"; class = "content";>
<div class = "card";>
	<p>
		Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
		Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
		Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
		Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
		Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
		<br />
		<br />
		<a href = "#link";>Link</a>
	</p>

	<p>
		Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
		Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
		Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
		Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
		Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
		<br />
		<br />
		<a href = "#link";>Link</a>
	</p>

	<p>
		Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
		Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
		Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
		Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
		Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
		<br />
		<br />
		<a href = "#link";>Link</a>
	</p>

	<p>
		Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
		Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
		Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
		Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
		Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
		<br />
		<br />
		<a href = "#link";>Link</a>
	</p>

	<p>
		Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
		Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
		Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
		Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
		Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
		<br />
		<br />
		<a href = "#link";>Link</a>
	</p>
</div>
</div>

</body>
</html>

1 个答案:

答案 0 :(得分:1)

所以我认为你应该主要使用媒体查询的力量。

function openNav(){
    $('body').addClass('open');
}

function closeNav(){
    $('body').removeClass('open');
}
body {
    -webkit-font-smoothing: antialiased;
    margin: 0%;
    font-family: Arial;
    scroll-behavior: smooth;
    background: linear-gradient(#e6e6e6, white);
    height: auto;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #80bfff;
    transition: 0.5s;
}
 
::-webkit-scrollbar-track {
    background: #f2f2f2;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 25px;
    border-style: solid;
    border-color: #f2f2f2;
    border-bottom-width: 1px;
    background: #3399ff;
}

.header {
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    font-size: 187%;
    text-align: left;
    padding: 1.5%;
    background-color: white;
    color: grey;
    z-index: 2;
}

.content {
    overflow: hidden;
}

.card {
    position: relative;
    margin-right: 2%;
    margin-left: 2%;
    margin-top: 1%;
    margin-bottom: 2%;
}

.card p {
    background-color: white;
    float: left;
    box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2);
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: 0.3s;
}

.card p:hover {
    box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2);
}

.card a {
    float: left;
    color: grey;
    text-align: center;
    text-decoration: none;
    display: block;
    border-radius: 5px;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 0.7%;
    padding-bottom: 0.7%;
    transition: 0.3s;
}

.card a:hover {
    box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
    background-color: #fbfbfb;
    color: #3399ff;
}

.navigation {
    z-index: 1;
    width: 100%;
    overflow: visible;
    list-style-type: none;
    background-color: white;
    box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    padding-top: 0px;
    height: auto;
}

#sidebar {
    width: 100%;
}

li a, .dropbtn {
    background-color: white;
    float: left;
    display: block;
    text-align: center;
    padding: 1%;
    font-size: 100%;
    color: grey;
    text-decoration: none;
    transition: 0.5s;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
    background-color: #f2f2f2;
    box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
    z-index: 3;
}

@media (max-width: 1000px) {
    .navigation {
        z-index: 2;
        height: 100%;
        width: 0;
        position: fixed;
        background-color: #e6e6e6;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
    }

    li a, .dropbtn {
        background-color: #e6e6e6;
        float: left;
        text-align: left;
        padding: 10px;
        width: 100%;
        text-decoration: none;
        font-size: 25px;
        display: inline-block;
        z-index: 1;
    }
    
    .dropdown-content {
        background-color: #e6e6e6;
        width: 50%;
    }

    .closebtn {
        width: auto;
        float: right;
        padding: 6px 16px 6px 16px;
        position: absolute;
        text-align: center;
        top: 5px;
        right: 5px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    .about a {
        left: 20.4px;
        float: left;
    }
    
    .closebtn:hover {
        border-radius: 50%;
    }
    
    #main1 {
        transition: margin-left 0.5s;
    }
    
    #main2 {
        transition: margin-left 0.5s;
    }
    
    .header {
        position: fixed;
        box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
    }
    
    .header span {
        color: #3399ff;
        padding: 5px;
    }
    
    #sidebar {
        width: 0px;
    }
    
    .card {
        margin-top: 10%;
    }

    .open #sidebar{
        width:250px;
    }

    .open #main1 {
        margin-left:250px;
    }

    .open #main2 {
        margin-left:250px;
    }
}

@media (min-width: 1000px) {
    .closebtn {
        display: none;
    }
    
    .header span {
        display: none;
    }
    
    .navigation {
        width: 100%;
    }
    
    #sidebar {
        width: 100%;
    }
}

.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f2f2f2;
    min-width: 1%;
    box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.3);
    border-radius: 0px 5px 5px 5px;
}

.dropdown-content a {
    color: grey;
    padding: 10%;
    width: 80%;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown:hover .dropdown-content {
    display: inline-block;
    background-color: white;
}

.active {
    background-color: #3399ff;
    color: white;
}

.about a {
    float: right;
    position: relative;
}

.active:hover {
    background-color: #80bfff;
    box-shadow: 0px 3px 25px rgba(0,0,0,0.2);
    transition: 0.5s;
}

br.clearLeft {
   clear: left;        
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id = "main1"; class = "header";>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
    Website
</div>

<div id = "sidebar"; class = "navigation";>
    <li><a class = "active" href = "#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
        <li class = "dropdown">
            <a class = "dropbtn">Dropdown</a>
            <div class = "dropdown-content">
                <a href = "#link1">Link 1</a>
                <a href = "#link2">Link 2</a>
                <a href = "#link3">Link 3</a>
            </div>
        </li>
    <li class = "about";><a href="#about">About</a></li>
    <li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a></li>
    <br class="clearLeft" />
</div>

<div id = "main2"; class = "content";>
<div class = "card";>
    <p>
        Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
        Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
        Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
        Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
        Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
        <br />
        <br />
        <a href = "#link";>Link</a>
    </p>

    <p>
        Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
        Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
        Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
        Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
        Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
        <br />
        <br />
        <a href = "#link";>Link</a>
    </p>

    <p>
        Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
        Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
        Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
        Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
        Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
        <br />
        <br />
        <a href = "#link";>Link</a>
    </p>

    <p>
        Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
        Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
        Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
        Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
        Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
        <br />
        <br />
        <a href = "#link";>Link</a>
    </p>

    <p>
        Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne.
        Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an.
        Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te.
        Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam.
        Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam.
        <br />
        <br />
        <a href = "#link";>Link</a>
    </p>
</div>
</div>
</body>

相关问题