CSS实现块宽度随浏览器大小自动调整&获取随机颜色（前端面试题）

最新推荐文章于 2024-04-19 15:48:00 发布

purple_force

最新推荐文章于 2024-04-19 15:48:00 发布

阅读量1.7k

点赞数

文章标签： HTML Javascript web前端 css

本文链接：https://blog.csdn.net/cld2008/article/details/39529759

版权

前端新手，想把写过的东西保存下来，直接上代码。

<html>
	<head>
		<style>
			*{
				padding:0px;
				margin:0px;
			}
			#one{
				left:0px;
				top:0px;
				margin-left:400px;
				margin-right:400px;
				width:auto;
				height:900px;
				background:red;
			}
			#two{
				position:absolute;
				width:350px;
				height:900px;
				left:0px;
				top:0px;
				background:green;
			}
			#three{
				position:absolute;
				width:350px;
				height:900px;
				right:0px;
				top:0px;
				background:blue;
			}
		</style>
	</head>
	<body>
		<div id="one">我是第一个</div>
		<div id="two">我是第二个</div>
		<div id="three">我是第三个</div>
		<script>
			function getColor(){
				var re="#";
				for(var i=0;i<3;i++){
					var temp=Math.floor(256*Math.random());
					temp=temp.toString(16);
					if(temp.length!==2){
						temp="0"+temp;
					}
					re+=temp;
				}
				return re;
			}
			var one=document.getElementById("one");
			one.style.backgroundColor=getColor();
		</script>
	</body>
</html>

效果是中间的块（id=one）随着浏览器窗口的大小变化，并且能随机获得颜色，其余两块分列左右。