在实际的开发中：
前期要对项目进行充分的分析，以减少在项目中期开发的工作量。
该课程属于 0元参加 Java+ORACLE+HTML 【0计划】学习班
请加入后再学习
阴影：圆角加阴影值
个性边框：圆角边框
边框阴影
颜色渐变渐变可以创建类似于彩虹的的效果
盒子模型定位 CSS定位
盒子模型
网页布局《盒子模型》网页是由多个人盒子组成
块元素，做布局用块元素 ，，
span和div的区别
div是块元素
可以设置有一个宽度，高度，内外边距
span是内联行元素
不可以设置宽度，高度，内外边距，宽度就是她的文字或图片的宽度
盒子的浮动与清除浮动
css有一个float属性，默认值是none
还有的是left right
用浮动以后会变为三维的
1.假如三个div都设为left则三个div并排排放
2.清除浮动(被其他浮动影响的元素
clear:（left right both none）
如果设为both表示该盒子左边右边都不允许有浮动现象
实例：
在下面的段落中，我们添加了一个样式为 float:right 的图像。结果是这个图像会浮动到段落的右侧。
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
<p>
css{
img
{
float:right
}
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>
<body>
<div>
<img src="/i/eg_cute.gif" /><br />
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<html>
<head>
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>
<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
</p>
</body>
</html>
4.创建水平菜单
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>
</body>
</html>
span和div的区别
div是块元素
可以设置有一个宽度，高度，内外边距
span是内联行元素
不可以设置宽度，高度，内外边距，宽度就是她的文字或图片的宽度
盒子的浮动与清除浮动
css有一个float属性，默认值是none
还有的是left right
用浮动以后会变为三维的
1.假如三个div都设为left则三个div并排排放
2.清除浮动(被其他浮动影响的元素
clear:（left right both none）
如果设为both表示该盒子左边右边都不允许有浮动
span和div的区别
div是块元素
可以设置宽度，高度，内外边距
span是内联行元素
不可以设置宽度，高度，内外边距，宽度就是她的文字或图片的宽度
sdfsdfsdfdsf
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#header{
width:1000px;
height:100px;
background:#b3d4fc;
margin:auto;
}
#con{
width:1000px;
height:50px;
background:#c0c0c0;
margin:auto;
}
#main{
width:1000px;
background:#b3d4fc;
margin:auto;
}
#nav{
width:200px;
background:red;
height:500px;
float:left;
margin:0px 10px;
}
#content{
width:540px;
background:blue;
height:500px;
float:left;
margin:0px 10px;
}
#side{
width:200px;
background:green;
height:500px;
float:right;
margin:0px 10px 0px 10px;
}
#footer{
width:1000px;
background:#ff00ff;
height:100px;
margin:auto;
clear:both;
}
</style>
</head>
<body>
<div id="header">顶部</div>
<div id="con">菜单</div>
<div id="main">
<div id="nav">内容1</div>
<div id="content">内容2</div>
<div id="side">内容3</div>
<div id="footer">
<center>地址：XXXXXXXX 电话：XXXXXXXX</center>
</div>
</div>
</html>
table布局，div布局，是html的两种布局方式。
盒子模型：
body里面
header
container
nav content side
footer
互联网的起源：局域网->城域网->广域网。民用网络使用的是因特网，除了因特网之外还有很多其他用途的网络，如教育网、军用网等。
蒂姆·伯纳斯·李研究出了www协议，开启了互联网时代相互访问的大门。作为科学家，蒂姆品德高尚，为了保证用户体验，因此退出商业而从事幕后的标准制定，最终用户使用到的访问互联网的工具浏览器就比较统一，只是内核不同。只有根据标准制作出产品才使得产品更为易用，使得互联网不至于分裂。
浏览器的内核：MS，Web-kit,Moz，opera。
万维网联盟：W3C，一个制定万维网标准的组织
课程内容版权均归魔乐科技MLDN所有 京ICP备09081638号-6
Powered by EduSoho v24.1.2 ©2014-2024