盒子模型案例
案例：如图所示：
代码：
box3.html代码：
box3.css文件代码:
body{
margin:0px;
padding:0px;
}
.div{
width:600px;
height:700px;
border:1px solid #b4b4b4;
margin-top:10px;
margin-left:10px;
}
.span{
color:black;
font-size:10px;
font-weight:bold;
margin-top:2px;
margin-left:2px;
}
.span a{
/*margin-left:500px;*/
float:right; /* 将span里面的链接自动居右*/
color:blue;
text-decoration:none;
font-size:8px;
}
a:link{
color:blue;
text-decoration:none;
font-size:8px;
margin-right:5px;
}
.faceul{
width:490px;
height:130px;
border:0;
margin-top:2px;
margin-left:2px;
list-style-type:none;
}
.faceul li{
width:158px;
height:130px;
float:left;
}
.faceul img{
width:155px;
height:125px;
margin-top:3px;
margin-left:3px;
margin-bottom:5px;
}
.faceul a{
color:blue;
text-decoration:none;
font-size:10px;
margin-left:65px;
}
实战演练：
搜狐首页面布局：
sohu.css文件：
body{
margin:0px auto;
width:1200px;
height:2000px;
border:1px solid#b4b4b4;
}
.style1{
height:27px;
width:1197px;
margin-left:3px;
background-color:green;
border:1px solid red;
padding:0px;
magrin-bottom:3px;
}
.faceul{
margin-top:4px;
width:300px;
/*text-align:center;*/
list-style-type:none;
float:left;
margin-left:5px;
padding:0px;
}
.faceul li{
float:left;
margin-left:5px;
}
.style2{
float:left; /*必须得浮动一下否则两个div不会并列在同一行*/
width:100px;
height:90px;/* text-align:center;*/ /*div中不识别text-align不能把图片完全居中不过可以使用table的方式来使图片完全居中*/
margin-left:3px;
border:1px solid red;
background-color:yellow;
clear:left; /*清除浮动以让出右面的位置给其他的块使用*/
}
.style3{
width:1085px;
margin-left:2px;
border:1px solid yellow;
float:right; /*必须得浮动一下否则两个div不会并列在同一行*/ /*padding:0px;*/
background-color:green;
}
.style2 img{
width:100px;
height:90px;
}
.style4{
width:100px;
height:200px;
/*clear:right;*/
float:left; /*必须得浮动一下否则两个div不会并列在同一行*/
border:1px solid black;
background-color:pink;
margin-left:3px;
margin-top:3px;
}
.style5{
width:500px;
height:200px;
/*clear:right;*/
float:left; /*必须得浮动一下否则两个div不会并列在同一行*/
border:1px solid black;
background-color:red;
margin-left:3px;
margin-top:3px;
}
.style6{
width:300px;
height:200px;
/*clear:right;*/
float:left; /*必须得浮动一下否则两个div不会并列在同一行*/
border:1px solid black;
background-color:silver;
margin-left:3px;
margin-top:3px;
}
.style7{
width:280px;
border:1px solid yellow;
background-color:green;
float:right; /*必须得浮动一下否则两个div不会并列在同一行*/
margin-top:3px;
}
sohu.html文件：
- 通行证
- 用户名
- 密码
- 登陆
- 注册
- 帮助
- 设搜狐为首页
- 搜狐
- ChinaRen
- 焦点房地产
- 17173
- 搜狗
版本2：搜狐首页的另一种方法：
sohu1.html文件：
span1span2span3
sohu1.css文件：
body{
border:1px solid red;
margin:0auto;
width:1300px;
height:2000px;
}
.style1{
/*border:1px solid black;*/
width:1298px;
height:25px;
background-color:pink;
}
.style1span{
border:1px solid green;
width:150px;
height:23px;
margin-left:280px;
background-color:green;
}
.style2{
border:1px solid yellow;
background-color:yellow;
width:143px;
height:90px;
float:left; /*float是为了让div2和div3并列在同一行*/
margin-left:2px;
margin-top:3px;
}
.style3{
border:1px solid yellow;
background-color:green;
width:1148px;
height:90px;
float:left; /*float是为了让div2和div3并列在同一行*/ margin-left:2px;
margin-top:3px;
}
.style4{
border:1px solid silver;
/*background-color:red;*/
width:1115px;
height:120px;
float:left; /*float是为了让div4和div5并列在同一行*/ margin-left:2px;
margin-top:3px;
}
.ad1{
width:143px;
height:118px;
/* border:1px solid black;*/
background-color:pink;
float:left; /*float是为了让大的div中的三个小的和div并列在同一行*/ margin-left:1px;
}
.ad2{
width:143px;
height:118px;
/* border:1px solid black;*/
background-color:yellow;
float:left; /*float是为了让大的div中的三个小的和div并列在同一行*/ margin-left:3px;
}
.ad3{
width:821px;
height:118px;
/* border:1px solid black;*/
background-color:green;
float:left; /*float是为了让大的div中的三个小的和div并列在同一行*/ margin-left:3px;
}
.style5{
border:1px solid silver;
background-color:pink;
width:176px;
height:120px;
float:left; /*float是为了让div4和div5并列在同一行*/
margin-left:2px;
margin-top:3px;
}
javaScript
一、JS基本语法：
javaScript 是一种广泛用于客户端web开发的脚本语言，常用来给html网页添加动态功能，比如：响应用户的各种操作。
1、脚本语言是什么？
<1>脚本语言往往不能独立使用，它和HTML/jsp/php/asp/https://www.sodocs.net/doc/c42912074.html,配合使用。
<2>脚本语言也有自己的变量，函数，控制语句（顺序、分支、循环）。
<3>脚本语言实际上是解释性语言（即在执行时直接对源码进行执行）。
<4>脚本语言一般都有相应的脚本引擎来解释执行，javaScript的脚本引擎就是浏览器（js 引擎来解释执行）。
<5>javaScript 大多数都是在客户端执行，也有少部分可以在服务器端执行。
2、Js的开发工具选择：
Eclipse 、记事本
3、案例：
需求：
hello1.html文件：