无样式
整体布局 最外面是Body
里面三个分别是 Header Wrapper bottom
开始我也不知道为什么要这样弄好几个 后来才发现这样的好处 大家可以自己打代码先不这样布局 都弄成一块一块 然后你们就能理解了
<body> //最外层
<div id="header">
<h1>
欢迎访问我的首页
</h1>
<p>
请使用菜单来选择不同的样式表
</p>
</div>
<div id="wrapper">
<div id="meum">
<ul id="meumlist"> //ul是一个项目列表 li是列表项
<li class="meuitem" onclick="reStyle(0)">样式1</li> //onclick是为了以后
<li class="meuitem" onclick="reStyle(1)">样式2</li> //切换 样式用的
<li class="meuitem" onclick="reStyle(2)">样式3</li>
<li class="meuitem" onclick="reStyle(3)">样式4</li>
<li class="meuitem" onclick="reStyle(4)">无样式</li>
</ul>
</div>
<div id="main">
<h1>
相同页面不同的样式表
</h1>
<p>
这是不同样式表如何更改HTML页面布局的演示。您可以通过在菜单中选择不同的样式表或选择以下链接之一来更改此页面的布局：
</br>
<a href="#" onclick="reStyle(0)" ;>样式1</a>
<a href="#" onclick="reStyle(1)" ;>样式2</a>
<a href="#" onclick="reStyle(2)" ;>样式3</a>
<a href="#" onclick="reStyle(3)" ;>样式4</a>
</p>
<h2>
无样式
</h2>
<p>
此页面使用 div 元素对 HTML 页面的不同部分进行分组。单击此处查看没有样式表的页面的外观：</br>
<a href="#" onclick="reStyle(4)" ;>无样式</a>
</p>
</div>
<div id="sidebar">
<h3>侧栏</h3>
侧边栏其实就是一种比较经典的网站导航设计，它的形式通常为竖向的一列，展示在网站的右侧或者左侧，具体的位置当然是取决于整体的设计。</p>
</div>
</div>
<div id="bottom">
<P>网站的页脚是位于每个页面底部的内容区域，在主内容的下面。</P>
<p>术语“页脚”来自于印刷，其中页脚是贯穿文档所有页面的一致性设计元素。</p>
</div>
</body>
样式一
<style>
body{
font:100% Lucida Sans,Verdana; //字体
margin: 20px; //margin是控制边框外围的 下面有图片描述
line-height: 26px; //行高
}
#header ,#sidebar { //第二个是后来加的
border-radius: 4px; //控制边框弧度
margin:4px;
padding: 2px; //控制边框内文字到它的距离
}
#header {
background-color: #4CAF50; //颜色
color: white;
}
#wrapper { //这里我也不太理解 如果不加这个 我的侧栏 不能到现在 这个位置
position: relative; //这里大家可以先不打试一下 就懂了 等我明白了
overflow: auto; //在来填这个坑
}
.meuitem{
border-radius: 4px;
margin: 4px;
}
#meum{
width: 200px;
float: left; //这个是浮动 大家可以CSDN搜搜 就可以理解了 连接在下面
}
#meumlist{
margin: 0;
padding: 0;
}
.meuitem{ 这里大家可以一行一行打 细细体会
background-color: #f1f1f1;
border: 1px solid #d4d4d4;
list-style-type: none; //清除 格式 可以把那个小圆点去掉
border: 1px solid #eeeeee ; 让边框显示出来
padding: 2px;
cursor: pointer; 鼠标光标变成小手
}
.meuitem:hover{ 这个hover就是 我光标放到上面的时候 反应 不一定点击
background-color: #ffffff;
}
.meuitem:first-child { 这个是设置一下 刚进页面 第一个样式一那里的样式
background-color:#4CAF50;
color: white;
font-weight:bold;
}
#main { 这些位置开始也不知道什么合适 我太菜了 是一点一点试出来的
padding: 15px;
margin: 0 200px;
}
a{
color: #32a4e7;
}
a:hover{
text-decoration: none; // 当光标在上面时候下划线清除
}
#sidebar {
width: 180px;
background-color: #32a4e7;
color: white;
padding: 10px;
bottom: 0; //这几个0我最开始理解是放到 他所在板块 wrapper板块的
top: 0; //右上角 但这个bottom也是0 他和上面那个wrpper代码
right: 0; //有关联
position: absolute; //不太能理解这种自适应
}
#bottom {
border: 1px solid #d4d4d4;
background-color: #f1f1f1;
text-align: center; //文字在中央
padding: 10px;
font-size: 70%; //字体变到70%
line-height: 14px;
}
</style>
写了一遍发现好多还很模糊 还得去理解
剩下三个 大家自己可以看看代码理解理解 我就不注释了 如果有需要 可以留言我在注释
margin
样式切换 js
<script>
reStyle(0);
function noStyles() { //下面调用 先把1-4格式都关了
document.styleSheets[0].disabled = true; //样式列表 他这里应该是自动 从0开始排
document.styleSheets[1].disabled = true; //我目前是这样理解的
document.styleSheets[2].disabled = true;
document.styleSheets[3].disabled = true;
}
function reStyle(n) {
noStyles()
document.styleSheets[n].disabled = false; //打开相对的样式
}
</script>
这是完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font:100% Lucida Sans,Verdana;
margin: 20px;
line-height: 26px;
}
#header ,#sidebar {
border-radius: 4px;
margin:4px;
padding: 2px;
}
#header {
background-color: #4CAF50;
color: white;
}
#wrapper {
position: relative;
overflow: auto;
}
.meuitem{
border-radius: 4px;
margin: 4px;
}
#meum{
width: 200px;
float: left;
}
#meumlist{
margin: 0;
padding: 0;
}
.meuitem{
background-color: #f1f1f1;
border: 1px solid #d4d4d4;
list-style-type: none;
border: 1px solid #eeeeee ;
padding: 2px;
cursor: pointer;
}
.meuitem:hover{
background-color: #ffffff;
}
.meuitem:first-child {
background-color:#4CAF50;
color: white;
font-weight:bold;
}
#main {
padding: 15px;
margin: 0 200px;
}
a{
color: #32a4e7;
}
a:hover{
text-decoration: none;
}
#sidebar {
width: 180px;
background-color: #32a4e7;
color: white;
padding: 10px;
bottom: 0;
top: 0;
right: 0;
position: absolute;
}
#bottom {
border: 1px solid #d4d4d4;
background-color: #f1f1f1;
text-align: center;
padding: 10px;
font-size: 70%;
line-height: 14px;
}
</style>
<style>
body {
font-family: Arial;
background-color: #d14836;
line-height: 20px;
}
#header{
color: #ffffff;
padding:15px;
font-size: 30px;
line-height: 20px;
}
#header h1 {
margin:0;
line-height: 50px;
}
#header p{
margin-top: 60px;
}
#wrapper{
background-color: white;
padding: 5px;
}
#meum {
float:right;
width: 190px;
font-size: 100%;
margin-top: -15px;
}
#meumlist {
padding:0;
font: 16px verdana;
}
.meuitem {
background-color: red;
border:1px solid #d14836;
border-radius: 40px;
list-style-type: none;
color: white;
width: 155px;
margin:10px;
padding: 5px;
text-align: center;
cursor: pointer;
}
.meuitem:hover{
background-color: #ffffff;
color: #d14836;
}
.meuitem:nth-child(2){
background-color: white;
color: red;
}
#main{
padding: 5px;
font-size: 80%;
}
#main h1,h2,a {
color: #d14836;
}
#main a {
text-decoration:none ;
}
#main a:hover{
text-decoration: underline;
}
#sidebar {
background-color: #F6DAD7;
color: #d14836;
padding: 10px;
}
#bottom{
text-align: center;
color: white;
font-size: 80%;
}
</style>
<style>
body{
padding: 12px;
}
#header h1{
color: #84c754;
}
#header p{
margin-top: 60px;
}
#meum{
margin-top: 40px;
}
#meumlist{
margin-left: -43px;
}
.meuitem {
list-style-type: none;
width: 150px;
background-color: #555555;
color: white;
float: left;
margin-left: 5px;
text-align: center;
padding: 2px;
line-height: 26px;
cursor: pointer;
}
.meuitem:nth-child(3){
background-color: #84c754;
}
.meuitem:hover{
background-color: #d4d4d4;
}
#main {
padding-top: 40px;
}
h1 ,h2 , h3 {
color: #84c754;
}
#sidebar{
background-color:#eeeeee;
padding: 10px;
}
#bottom {
text-align: center;
font-size: 50%;
}
</style>
<style>
body {
margin: 4px;
padding: 2px;
background-color: black;
}
#header {
color: #84c754;
}
#wrapper {
position: relative;
overflow: auto;
}
#meum {
margin: 2px;
color: #84c754;
}
.meuitem{
cursor: pointer;
margin-top: 2px;
}
.meuitem:hover{
color: #eeeeee;
}
.meuitem:nth-child(4){
color: white;
}
#main{
margin-top: 10px;
color: #84c754;
}
#main a{
color: white;
}
#main a:hover{
color: limegreen;
}
#sidebar{
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
padding: 10px;
width: 320px;
top: 0;
right: 0;
position: absolute;
font-size: 80%;
line-height: 20px;
}
#bottom{
text-align: center;
font-size: 70%;
border: 1px solid white;
color: white;
}
</style>
<style>
</style>
</head>
<body>
<div id="header">
<h1>
欢迎访问我的首页
</h1>
<p>
请使用菜单来选择不同的样式表
</p>
</div>
<div id="wrapper">
<div id="meum">
<ul id="meumlist">
<li class="meuitem" οnclick="reStyle(0)">样式1</li>
<li class="meuitem" οnclick="reStyle(1)">样式2</li>
<li class="meuitem" οnclick="reStyle(2)">样式3</li>
<li class="meuitem" οnclick="reStyle(3)">样式4</li>
<li class="meuitem" οnclick="reStyle(4)">无样式</li>
</ul>
</div>
<div id="main">
<h1>
相同页面不同的样式表
</h1>
<p>
这是不同样式表如何更改HTML页面布局的演示。您可以通过在菜单中选择不同的样式表或选择以下链接之一来更改此页面的布局：
</br>
<a href="#" οnclick="reStyle(0)" ;>样式1</a>
<a href="#" οnclick="reStyle(1)" ;>样式2</a>
<a href="#" οnclick="reStyle(2)" ;>样式3</a>
<a href="#" οnclick="reStyle(3)" ;>样式4</a>
</p>
<h2>
无样式
</h2>
<p>
此页面使用 div 元素对 HTML 页面的不同部分进行分组。单击此处查看没有样式表的页面的外观：</br>
<a href="#" οnclick="reStyle(4)" ;>无样式</a>
</p>
</div>
<div id="sidebar">
<h3>侧栏</h3>
侧边栏其实就是一种比较经典的网站导航设计，它的形式通常为竖向的一列，展示在网站的右侧或者左侧，具体的位置当然是取决于整体的设计。</p>
</div>
</div>
<div id="bottom">
<P>网站的页脚是位于每个页面底部的内容区域，在主内容的下面。</P>
<p>术语“页脚”来自于印刷，其中页脚是贯穿文档所有页面的一致性设计元素。</p>
</div>
<script>
reStyle(0);
function noStyles() {
document.styleSheets[0].disabled = true;
document.styleSheets[1].disabled = true;
document.styleSheets[2].disabled = true;
document.styleSheets[3].disabled = true;
}
function reStyle(n) {
noStyles()
document.styleSheets[n].disabled = false;
}
</script>
</body>
</html>
昨天刚开始学 如果有错的地方大家多多指正
写出来才能发现自己更多的问题
我会继续完善那几个坑 希望和大家一起进步
哪里不懂可以私我
5215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
