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

原始的代码来自北京林业大学的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！）

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

php与html网页制作,web 一个简单地三级网页的设计和编写，html+css，适合学习制作的新手 WEB(ASP,PHP,...) 238万源代码下载- www.pudn.com...
文件名称: web下载收藏√ [ 5 4 3 2 1 ] 开发工具: HTML 文件大小: 4716 KB 上传时间: 2013-06-25 下载次数: 7 提供者: ericc 详细 ...
制作一个简单HTML个人网页网页（HTML+CSS）源码
一个简单的HTML网页,可用于大学html期末作业,照片都是网上找的看一下成品图: 主页代码,这里的<link href="images/css.css" rel=&quo ...
用HTML+CSS+JS做一个简单的个人网页
暑假在家闲的没事,写了一个简单的小网页,从网上找了些图片和视频拼起来的,由于经验不足的关系,没有将想添加的东西放进去. 先来看看整个网页效果的视频吧效果的图片如下(最右边空出来的其实是滑动条,截长屏 ...
使用HBuilder制作一个简单的HTML5网页
使用HBuilder制作一个简单的HTML5网页写在前面:开始入门网页制作,写下第一篇博文作为记录.纯纯小白一个,如有阅览者,欢迎批评指正!❤ 先放上效果图: 使用HBuilderX编辑器创建一个& ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
制作一个简单HTML游戏网页（HTML+CSS）_英雄联盟 lol 7页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |游戏官网 | 游戏网站 | 电竞游戏 | 游戏介绍 | 等网站的 ...
制作一个简单HTML学校网页（HTML+CSS山东传媒职业学院）
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 ...
制作一个简单HTML游戏网页（HTML+CSS）米哈游 1页带轮播图
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游戏官网 | 游戏网站 | 电竞游戏 | 游戏介绍 | 等网站 ...
制作一个简单HTML家乡网页（HTML+CSS）---家乡邢台页面7个
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 家乡旅游景点 | 家乡民生变化 | 介绍自己的家乡 | 我的家 ...

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

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

最新文章

热门文章