一个简单的css网页换色例子（盒子模型）

最新推荐文章于 2024-04-28 16:04:57 发布

原创最新推荐文章于 2024-04-28 16:04:57 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript

课程随笔专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个简单的网页换肤功能实现，通过随机选择不同颜色的CSS文件来改变网页背景。使用HTML、CSS和JavaScript完成，展示了如何通过按钮点击切换样式。

原始的代码来自北京林业大学的MOOC课程：web前端开发，我自己把这个例子又写了一遍，主要是对css部分做了修改（盒子模型杀我），js和HTML部分与课程的源代码基本相同。现在记录一下，首先是代码：

index部分代码↓

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页换肤</title>
	<link rel="stylesheet" href="css_entire.css">
	<link id="findcss" rel="stylesheet" href="">
	<script>
	    //在网页初始化的时候随机选定一个颜色
		function init() {
			var list=["red","blue","white"];
			var cssName=list[Math.floor(Math.random()*list.length)];
			document.getElementById("findcss").href=cssName+".css";
		}
		function change(color) {
			document.getElementById("findcss").href=color+".css";
		}
	</script>
</head>
<body οnlοad="init()">
	<div id="container">
		<div id="content">
				<div id="select">
					<input id="btn-red" type="button" οnclick="change('red')">
					<input id="btn-blue" type="button" οnclick="change('blue')">
					<input id="btn-white" type="button" οnclick="change('white')">
				</div>
				<div id="introduction">
					<h1>WEB前端开发</h1>
					<p>
						Web前端开发是指通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
					</p>
				</div>
		</div>
	</div>
</body>
</html>

然后重点来了：css部分↓
这里每一部分都用不同的颜色标出，以便观察

*{
	margin:0;
	padding:0;
}
body{
	background-color:black;
}
#container{
	width:700px;
	height:400px;
	margin:100px auto;
	/*外层盒子会被内层盒子撑起来，所以这里可以不用设height*/
	background-color: green;
}
#content{
	width:600px;
	height:400px;
	margin:50px auto;
	background-color: grey;
}
#select{
	width:600px;
	height:50px;
	background-color: yellow;
}
#introduction{
	width:600px;
	height:300px;
	/*margin-top:50px;*/
	text-indent:2em;
	line-height: 1.5em;
	font-family: "黑体";
	background-color:pink;
}
#introduction p{
	padding: 40px;
}
#introduction h1{
	text-align: center;
	padding-top:40px;
}
#btn-red,#btn-blue,#btn-white{
	width:20px;
	height:10px;
	float:right;
	margin-right:10px;
	margin-top:20px; 
}
#btn-red{
	background-color: red;
}
#btn-blue{
	background-color: blue;
}
#btn-white{
	background-color: white;
}

网页结果如下（嗯..清奇的配色）

在这里插入图片描述
点击右上角的三个按钮就可以实现背景色的变换了。（换的是container的颜色，被前面的颜色覆盖了）

一点总结：
个人认为，盒子模型的核心在于margin和padding两个属性的设置，至于怎么设置，要求粗一点就直接用眼估计再微调，细一点的话算就完事了，（父元素的宽度-子元素宽度）/2=子元素左右的margin。
注：WEB前端开发用的是h1标签，下面的文字用的是p标签，由于把网页margin和padding的所有默认值都去掉了，在设置标签css属性的时候对这两个标签设置的是padding属性（不是margin！）