Question

我试图在这些部分之间留出空间，同时仍然显示背景，但我不确定该怎么做。我尝试了填充和使边框透明，但这没有用。我考虑过改用网格，但是我想看看在仍然使用flex的情况下是否可以这样做。谢谢

This is what it looks like with the background

body{
	font-family:'Helvetica';
	float:center;
	background-color:#606060;
	background-image:url(images/image1.jpg);
	background-size:2048px 1152px;
	background-repeat:no-repeat;
}

a{
	text-decoration:none;
	color:#BF9553;
}

a:hover{
	color:white;
}

a:active{
	color:white;
}

a:visited{
	color:none;
}

#header{
	color:#BF9553;
	text-align:center;
	font-size:60px;
}

#clockbox{
	color:#BF9553;
	text-align:center;
	font-size:20px;
	margin-top:-75px;
	padding-bottom:25px;
}

.links{
	border:1px solid #2E2E2E;
	padding:10px;
	list-style-type:none;
	line-height:1.6em;
	align-content:center;
}

.container-1{
	background-color:#404040;
	display:flex;
	width:550px;
	margin: 0 auto;
	justify-content:space-around;
}

#general{
	flex:1;
}

#manga{
	flex:1;
}

#mail{
	flex:1;
}

.container-2{
	background-color:#404040;
	display:flex;
	width:550px;
	margin: 0 auto; 
}

#torrents{
	flex:1;
}

<!DOCTYPE html>
<html>
<head>
	<title>Startpage</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<div id="header">
			<h1>Hello, Kyle</h1>
		</div>
	<div id="clockbox"></div>

		<script type="text/javascript">
			function GetClock(){
			var d=new Date();
			var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
			var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds();
			if(nmin<=9) nmin="0"+nmin;
			if(nsec<=9) nsec="0"+nsec;

			var clocktext=""+ndate+"."+(nmonth+1)+"."+nyear+" "+nhour+":"+nmin+":"+nsec+"";
			document.getElementById('clockbox').innerHTML=clocktext;
			}

			GetClock();
			setInterval(GetClock,1000);
		</script>

	</div>
	</header>
	<div class="container-1">

		<div id="general" class="links">
			<li><a href="https://duckduckgo.com">duckduckgo</a></li>	
			<li><a href="https://youtube.com/feed/subscriptions">youtube</a></li>
			<li><a href="https://netflix.com/browse">netflix</a></li>
			<li><a href="https://twitch.tv/directory/following">twitch</a></li>
			<li><a href="https://twitter.com">twitter</a></li>
			<li><a href="https://hulu.com">hulu</a></li>	
		</div>

		<div id="manga" class="links">
			<li><a href="https://myanimelist.net">myanimelist</a></li>
			<li><a href="https://mangadex.org/manga/1054/it-s-not-my-fault-that-i-m-not-popular">watamote</a></li>
			<li><a href="https://mangadex.org/manga/4880/jojo-s-bizarre-adventure-part-8-jojolion">jojolion</a></li>
			<li><a href="https://mangadex.org/manga/350/vinland-saga">vinland saga</a></li>
			<li><a href="https://mangakakalot.com/manga/hgj2047065412">goblin slayer</a></li>
			<li><a href="https://mangakakalot.com/manga/goblin_slayer_side_story_year_one">goblin slayer: year one</a></li>
		</div>

		<div id="mail" class="links">
			<li><a href="https://gmail.com">gmail</a></li>
			<li><a href="https://mail.protonmail.com/inbox">protonmail</a></li>
			<li><a href="https://icloud.com">icloud</a></li>

		</div>
	</div>

	<div class="container-2">
		<div id="torrents" class="links">
			<li><a href="https://nyaa.si/">nyaa</a></li>
			<li><a href="https://forum.snahp.it/">snahp.it</a></li>
			<li><a href="https://reddit.com/r/megalinks/">megalinks</a></li>
		</div>

		<div>
			
		</div>
		
	</div>

</body>
</html>

Answer 1

从import requests import re URL = 'laravelapp.url' session = requests.session() front = session.get(URL) csrf_token = re.findall(r'<input type="hidden" name="_token" value="(.*)"', front.text)[0] cookies = session.cookies payload = { 'email': 'email@example.com', 'password': 'testtest', '_token': csrf_token, } r = requests.post(URL + '/login', data=payload, cookies=cookies) print(r.text)中删除background-color: #404040;，然后将class="container-1"和background添加到margin

.links

body{
	font-family:'Helvetica';
	float:center;
	background-color:#606060;
	background-image:url(images/image1.jpg);
	background-size:2048px 1152px;
	background-repeat:no-repeat;
}

a{
	text-decoration:none;
	color:#BF9553;
}

a:hover{
	color:white;
}

a:active{
	color:white;
}

a:visited{
	color:none;
}

#header{
	color:#BF9553;
	text-align:center;
	font-size:60px;
}

#clockbox{
	color:#BF9553;
	text-align:center;
	font-size:20px;
	margin-top:-75px;
	padding-bottom:25px;
}

.links{
border: 1px solid #2E2E2E;
padding: 10px;
list-style-type: none;
line-height: 1.6em;
align-content: center;
background-color: #404040;
margin: 3px;
}

.container-1{
	display:flex;
	width:550px;
	margin: 0 auto;
	justify-content:space-around;
}

#general{
	flex:1;
}

#manga{
	flex:1;
}

#mail{
	flex:1;
}

.container-2{
	background-color:#404040;
	display:flex;
	width:550px;
	margin: 0 auto; 
}

#torrents{
	flex:1;
}

在仍显示背景的同时，弹性框之间是否有空隙？

1 个答案: