能不能把取色器关了，整节课鼠标上都有一个大圆圈取色器
小图标是精灵图把
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}/* https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ */
.nav{
height:56px;
padding:0px 10px;
background-color: #212121;/* 屏幕取色器 https://colorpix.en.softonic.com */
}
.nav_left{
height:56px;
float:left;
}
.nav_left img{
display:block;
float:left;
height:50px;
margin-top:3px;
margin-left:5px;
}
.nav_left ul{
list-style-type:none;
float:left;
margin:0px 0px 0px 40px;
padding:0px;
}
.nav_left ul li{
margin:0px 40px 0px 0px;
padding:0px;
float:left;
font-size:14px;
color:#c1c1c1;
line-height:56px;
}
.nav_right{
height:56px;
float:right;
}
.slider{
height:451px;
background-color:#16232b;
}
.slider img{
display:block;/* img是行内元素，需要设置为块元素，才会显示在中间 */
height:451px;
margin:0 auto;
}
.course_list{
min-height:500px;
}
.course_list h2{
font-size:32px;
color:#313131;
font-weight:500;
text-align:center;
margin-top:50px;
margin-bottom:10px;
}
.course_list h4{
font-size:16px;
color:#919191;
font-weight:400;
text-align:center;
}
.course_nav{
width:1170px;
height:80px;
margin:40px auto 0px;
}
.course_nav a{
font-size:14px;
color:#616161;
margin-right:30px;
padding:15px;
border-radius:5px;
}
.course_nav a:hover{
background-color:#ece8e8;
cursor:pointer;
}
.selected{
background-color:#43bc60;
color:white !important;/* !important 让这个属性的优先级更高 */
}
.course_container{
width:1170px;
margin:0 auto;
min-height:30px;
/* background-color:blue; */
}
.course{
float:left;
width:248px;
padding:0px 10px;
margin:0px 10px;
border:1px solid #e4ecf3;
height:230px;
background-color:#ffffff;
border-radius:5px;
margin-bottom:30px;
}
.course img{
width:248px;
height:138px;
margin-top:10px;
}
.course_title{
display:block;/* span标签是行内元素 */
font-size:14px;
color:#616161;
margin-top:20px;
}
.course .person{
width:20px;
height:15px;
margin-top:10px;
}
.course .number{
font-size:14px;
color:#c1c1c1;
position:relative;
bottom:3px;
}
.class_list{
min-height:500px;
}
.introduction{
height:422px;
background-color: #43bc60;
}
.footer_link{
height:254px;
background-color: #2e2e2e;
}
.copyright{
height:105px;
background-color: #212121;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
<div class="nav">
<div class="nav_left">
<img src="img/logo.png" />
<ul>
<li>首页</li>
<li>Unity</li>
<li>虚幻</li>
<li>关于我们</li>
</ul>
</div>
<div class="nav_right"></div>
</div>
<div class="slider">
<img src="img/a.jpg" />
</div>
<div class="course_list">
<h2>网校课程</h2>
<h4>精选网校课程，满足你的学习兴趣。</h4>
<div class="course_nav">
<a class="selected">全部课程</a>
<a>Unity</a>
<a>虚幻</a>
<a>JavaEE</a>
</div>
<div class="course_container">
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="course">
<img src="img/course.png" />
<span class="course_title">Web前端第一季（HTML）</span>
<img class="person" src="img/person.png" />
<span class="number">1507</span>
</div>
<div class="clear"></div>
</div>
</div>
<div class="class_list"></div>
<div class="introduction"></div>
<div class="footer_link"></div>
<div class="copyright"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}/* https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ */
.nav{
height:56px;
padding:0px 10px;
background-color: #212121;/* 屏幕取色器 https://colorpix.en.softonic.com */
}
.nav_left{
height:56px;
float:left;
}
.nav_left img{
display:block;
float:left;
height:50px;
margin-top:3px;
margin-left:5px;
}
.nav_left ul{
list-style-type:none;
float:left;
margin:0px 0px 0px 40px;
padding:0px;
}
.nav_left ul li{
margin:0px 40px 0px 0px;
padding:0px;
float:left;
font-size:14px;
color:#c1c1c1;
line-height:56px;
}
.nav_right{
height:56px;
float:right;
}
.slider{
height:451px;
background-color:#16232b;
}
.slider img{
display:block;/* img是行内元素，需要设置为块元素，才会显示在中间 */
height:451px;
margin:0 auto;
}
.course_list{
min-height:500px;
}
.course_list h2{
font-size:32px;
color:#313131;
font-weight:500;
text-align:center;
margin-top:50px;
margin-bottom:10px;
}
.course_list h4{
font-size:16px;
color:#919191;
font-weight:400;
text-align:center;
}
.course_nav{
width:1170px;
margin:40px auto 0px;
}
.course_nav a{
font-size:14px;
color:#616161;
margin-right:30px;
padding:15px;
border-radius:5px;
}
.course_nav a:hover{
background-color:#ece8e8;
cursor:pointer;
}
.selected{
background-color:#43bc60;
color:white !important;/* !important 让这个属性的优先级更高 */
}
.class_list{
min-height:500px;
}
.introduction{
height:422px;
background-color: #43bc60;
}
.footer_link{
height:254px;
background-color: #2e2e2e;
}
.copyright{
height:105px;
background-color: #212121;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
<div class="nav">
<div class="nav_left">
<img src="img/logo.png" />
<ul>
<li>首页</li>
<li>Unity</li>
<li>虚幻</li>
<li>关于我们</li>
</ul>
</div>
<div class="nav_right"></div>
</div>
<div class="slider">
<img src="img/a.jpg" />
</div>
<div class="course_list">
<h2>网校课程</h2>
<h4>精选网校课程，满足你的学习兴趣。</h4>
<div class="course_nav">
<a class="selected">全部课程</a>
<a>Unity</a>
<a>虚幻</a>
<a>JavaEE</a>
</div>
</div>
<div class="class_list"></div>
<div class="introduction"></div>
<div class="footer_link"></div>
<div class="copyright"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}/* https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ */
.nav{
height:56px;
padding:0px 10px;
background-color: #212121;/* 屏幕取色器 https://colorpix.en.softonic.com */
}
.nav_left{
height:56px;
float:left;
}
.nav_left img{
display:block;
float:left;
height:50px;
margin-top:3px;
margin-left:5px;
}
.nav_left ul{
list-style-type:none;
float:left;
margin:0px 0px 0px 40px;
padding:0px;
}
.nav_left ul li{
margin:0px 40px 0px 0px;
padding:0px;
float:left;
font-size:14px;
color:#c1c1c1;
line-height:56px;
}
.nav_right{
height:56px;
float:right;
}
.slider{
height:451px;
background-color:#16232b;
}
.slider img{
display:block;/* img是行内元素，需要设置为块元素，才会显示在中间 */
height:451px;
margin:0 auto;
}
.course_list{
min-height:500px;
}
.class_list{
min-height:500px;
}
.introduction{
height:422px;
background-color: #43bc60;
}
.footer_link{
height:254px;
background-color: #2e2e2e;
}
.copyright{
height:105px;
background-color: #212121;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
<div class="nav">
<div class="nav_left">
<img src="img/logo.png" />
<ul>
<li>首页</li>
<li>Unity</li>
<li>虚幻</li>
<li>关于我们</li>
</ul>
</div>
<div class="nav_right"></div>
</div>
<div class="slider">
<img src="img/a.jpg" />
</div>
<div class="course_list"></div>
<div class="class_list"></div>
<div class="introduction"></div>
<div class="footer_link"></div>
<div class="copyright"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}/* https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ */
.nav{
height:56px;
padding:0px 10px;
background-color: #212121;/* 屏幕取色器 https://colorpix.en.softonic.com */
}
.nav_left{
height:56px;
float:left;
}
.nav_left img{
display:block;
float:left;
height:50px;
margin-top:3px;
margin-left:5px;
}
.nav_left ul{
list-style-type:none;
float:left;
margin:0px 0px 0px 40px;
padding:0px;
}
.nav_left ul li{
margin:0px 40px 0px 0px;
padding:0px;
float:left;
font-size:14px;
color:#c1c1c1;
line-height:56px;
}
.nav_right{
height:56px;
float:right;
}
.slider{
height:451px;
}
.course_list{
min-height:500px;
}
.class_list{
min-height:500px;
}
.introduction{
height:422px;
background-color: #43bc60;
}
.footer_link{
height:254px;
background-color: #2e2e2e;
}
.copyright{
height:105px;
background-color: #212121;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
<div class="nav">
<div class="nav_left">
<img src="img/logo.png" />
<ul>
<li>首页</li>
<li>Unity</li>
<li>虚幻</li>
<li>关于我们</li>
</ul>
</div>
<div class="nav_right"></div>
</div>
<div class="slider"></div>
<div class="course_list"></div>
<div class="class_list"></div>
<div class="introduction"></div>
<div class="footer_link"></div>
<div class="copyright"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}/* https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ */
.nav{
height:56px;
padding:0px 10px;
background-color: #212121;/* 屏幕取色器 https://colorpix.en.softonic.com */
}
.slider{
height:451px;
}
.course_list{
min-height:500px;
}
.class_list{
min-height:500px;
}
.introduction{
height:422px;
background-color: #43bc60;
}
.footer_link{
height:254px;
background-color: #2e2e2e;
}
.copyright{
height:105px;
background-color: #212121;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
<div class="nav"></div>
<div class="slider"></div>
<div class="course_list"></div>
<div class="class_list"></div>
<div class="introduction"></div>
<div class="footer_link"></div>
<div class="copyright"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>siki学院首页</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f5f8fa;
}
.bar_menu{
background-color:#ffffff;
width:35px;
position:fixed;
top:0px;
bottom:0px;
right:0px;
border-left:1px solid aliceblue;
}
.bar_menu a{
display:block;/* a是行内元素，盒子模型适用于块元素 */
margin-top:100px;
width:35px;
text-align:center;
color:#616161;
font-size:14px;
padding:20px 0px;
}
.bar_menu a:hover{/* 伪类选择器的使用 */
cursor:pointer;/* 设置鼠标指针样式，小手可点击的样式 */
background-color: #43bc60;
color:white;
}
</style>
</head>
<body>
<div class="bar_menu">
<a>学<br />习<br />中<br />心</a>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>京东例子</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f0f3ef;
}
.title{
text-align:center;
font-family:"fzzzh";
color:#222;
}
.container{
/* background-color:red; */
width:1190px;
height:450px;
margin:0 auto;
}
.left,.center,.right{
width:390px;
height:450px;
float:left;
background-color:white;
}
.left{
background-color:transparent;
}
.left,.center{
margin-right:10px;
}
.border{
width:340px;
height:420px;
border:5px solid black;
position:relative;
top:20px;
}
.border img{
position:absolute;
bottom:25px;
left:45px;
}
.box_hd{
width:350px;
height:60px;
line-height:44px;
padding:0 20px;
}
.box_hd h3{
margin:0px;
padding:0px;
font-size:22px;
line-height:44px;
font-weight:normal;
margin-top:8px;
}
.box_bd{
padding:0px 20px;
}
.box_bd img{
margin-bottom:7px;
margin-right:2px;
}
.last{
margin-right:0px;
}
</style>
</head>
<body>
<h3 class="title">--- 居家优品 ---</h3>
<div class="container">
<div class="left">
<div class="border">
<img src="img/left.jpg" />
</div>
</div>
<div class="center">
<div class="box_hd">
<h3>家电馆</h3>
</div>
<div class="box_bd">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img class="last" src="img/3.jpg" />
</div>
</div>
<div class="right">
<div class="box_hd">
<h3>家电馆</h3>
</div>
<div class="box_bd">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img class="last" src="img/3.jpg" />
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>京东例子</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f0f3ef;
}
.title{
text-align:center;
font-family:"fzzzh";
color:#222;
}
.container{
/* background-color:red; */
width:1190px;
height:450px;
margin:0 auto;
}
.left,.center,.right{
width:390px;
height:450px;
float:left;
background-color:white;
}
.left{
background-color:transparent;
}
.left,.center{
margin-right:10px;
}
.border{
width:340px;
height:420px;
border:5px solid black;
position:relative;
top:20px;
}
.border img{
position:absolute;
bottom:25px;
left:45px;
}
</style>
</head>
<body>
<h3 class="title">--- 居家优品 ---</h3>
<div class="container">
<div class="left">
<div class="border">
<img src="img/left.jpg" />
</div>
</div>
<div class="center">2</div>
<div class="right">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>京东例子</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f0f3ef;
}
.title{
text-align:center;
font-family:"fzzzh";
color:#222;
}
.container{
background-color:red;
width:1190px;
height:450px;
margin:0 auto;
}
.left,.center,.right{
width:390px;
height:450px;
float:left;
background-color:white;
}
.left,.center{
margin-right:10px;
}
</style>
</head>
<body>
<h3 class="title">--- 居家优品 ---</h3>
<div class="container">
<div class="left">1</div>
<div class="center">2</div>
<div class="right">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>京东例子</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
background-color:#f0f3ef;
}
.title{
text-align:center;
font-family:"fzzzh";
color:#222;
}
.container{
background-color:red;
width:1170px;
height:450px;
margin:0 auto;
}
</style>
</head>
<body>
<h3 class="title">--- 居家优品 ---</h3>
<div class="container"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
}
.one {
/* 静态定位 普通文档流的形式 */
position: static;
background-color: red;
}
.two {
/* width: 100px;
height: 100px; */
/* 相对定位，相对于自身原来的位置。原来的框还在文档流里面占有空间。
position: relative; */
/* 绝对定位的元素的位置相对于最近的已定位祖先元素 */
/* position: absolute; */
/* top: 20px;
left: 50px; */
/* bottom: 10px; */
/* right: 10px; */
background-color: green;
right: 0px;
bottom: 0px;
position: fixed;
}
.three {
position: relative;
background-color: blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
<p>1 2 3</p>
</body>
</html>
固定定位不会随着滚动条滚动)
绝对定位的元素会相对于滚动条滚动的
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
}
.one {
/* 静态定位 普通文档流的形式 */
position: static;
background-color: red;
}
.two {
width: 100px;
height: 100px;
/* 相对定位，相对于自身原来的位置。原来的框还在文档流里面占有空间。
position: relative; */
/* 绝对定位的元素的位置相对于最近的已定位祖先元素 */
position: absolute;
/* top: 20px;
left: 50px; */
bottom: 10px;
right: 10px;
background-color: green;
}
.three {
position: relative;
background-color: blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="three">
<div class="two"></div>
</div>
</body>
</html>
框的position属性
static 静态定位，自然定位。正常，默认属性。
relative 相对定位，相对于自身原来的位置。原来的框还在文档流里面占有空间。
absolute 绝对定位，相对于父元素，自身会脱离文档流。
fixed 固定定位，相对于浏览器的窗口来说的。
不会随着浏览器滚动而滚动
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
}
.one {
/* 静态定位 普通文档流的形式 */
position: static;
background-color: red;
}
.two {
/* 相对定位，相对于自身原来的位置。原来的框还在文档流里面占有空间。 */
position: relative;
top: 20px;
left: 50px;
background-color: green;
}
.three {
background-color: blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
}
.one {
height: 350px;
background-color: red;
float: left;
/* none | right | left */
}
.two {
width: 350px;
background-color: green;
float: right;
}
.three {
background-color: blue;
float: right;
}
p {
height: 100px;
background-color: green;
/* clear: both; */
/* both既清除右浮动，也清除左浮动 */
}
.clear {
height: 0px;
clear: both;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="clear"></div>
<p></p>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>文字环绕图片</title>
<style type="text/css">
img {
float: right;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<img src="img/api.jpg" />
<div class="clear"></div>
<p>其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。
哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。
同年，W3C组织（World WideWeb
Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯·莱尔顿(Thomas
Reaxdon)，他的努力最终令Internet
Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level
1）完成，成为w3c的推荐标准。
</p>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
}
.one {
background-color: red;
float: left;
/* none | right | left */
}
.two {
width: 350px;
background-color: green;
float: left;
}
.three {
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>普通文档流</title>
</head>
<body>
<div>1 2 3</div>
<div>4 5 6</div>
<p>7 8 9</p>
<div>10 11 12</div>
<div>13 14 15</div>
<div>16 17 18</div>
<h1>19 20 21</h1>
<span>22 23 24</span>
<span>22 23 24</span>
<span>22 23 24</span>
<span>22 23 24</span>
<span>22 23 24</span>
<span>22 23 24</span>
<span>22 23 24</span>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
}
.one{
background-color:red;
float:left;/* none | right | left */
}
.two{
width:350px;
background-color:green;
}
.three{
background-color:blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
一些皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
CSS的几种定位机制
普通文档流
浮动
绝对定位、相对定位、固定定位
普通文档流
块级元素单独占一行，行内元素放在一行，从上到下排布。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>边框颜色</title>
<style type="text/css">
div{
/* background-color: red; */
width:500px;
height:500px;
/* border-style:dashed;
border-width:20px;
border-color:#0000FF #008000 #00FFFF #DEB887; */
/* border-top-color:#0000FF;
border-right-color:#008000;
border-bottom-color:#00FFFF;
border-left-color:#DEB887; */
/* border:20px dashed yellow; */
/* border-width border-style border-color
border-top/right/bottom/left-width/style/color; */
border:2px solid;
border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>边框宽度</title>
<style type="text/css">
div{
background-color: red;
width:500px;
height:500px;
border-style:double;
border-width:10px 20px 30px 40px;/*10px 20px|10px 20px 30px*/
/* border-top-width:10ox;
border-right-width:20px;
border-bottom-width:30px;
border-left-width:40px; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框
border:5px solid red;
border-top...
border-style: outset;
border-style: solid dotted dashed double; 上右下左
border-right..-style
border-style: none; 没有边框
border-width: 5px;thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px
border-width: 15px 5px 15px 5px;
border-width: 15px 5px; 值复制
border-right..-width
border-color: blue rgb(25%,35%,45%) #909090 red;
border-right...-color
border-color: transparent; 透明边框，有边框，只不过不可见
border-radius 边框转角
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>边框border</title>
<style type="text/css">
div{
width:500px;
height:500px;
/* border:10px solid green; */
border:10px;
/* border-style:groove; 默认none; dashed短虚线; dotted圆点虚线; double双实线; groove 有点3D感觉的线; hidden */
/* border-top-style:dashed;
border-right-style:dotted;
border-bottom-style:double;
border-left-style:outset; */
border-style:dashed dotted double outset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框
border:5px solid red;
border-top...
border-style: outset;
border-style: solid dotted dashed double; 上右下左
border-right..-style
border-style: none; 没有边框
border-width: 5px;thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px
border-width: 15px 5px 15px 5px;
border-width: 15px 5px; 值复制
border-right..-width
border-color: blue rgb(25%,35%,45%) #909090 red;
border-right...-color
border-color: transparent; 透明边框，有边框，只不过不可见
border-radius 边框转角
授课教师
SiKi学院老师
课程特色
下载资料(1)
视频(47)
最新学员
学员动态
火舞清扬
开始学习 503-利用绝对定位和相对定位...
火舞清扬
开始学习 502-京东切分三框布局
DRAGON943
开始学习 512-案例结束（课程结束）
DRAGON943
加入学习
火舞清扬
开始学习 501-京东案例开发
