CSS案例
第一部分
1.CSS的语法
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
}
h2{
color:blue;
}
</style>
</head>
<body>
<p>css语法内容</p>
<h2>观众：范文鑫</h2>
</body>
</html>
2.CSS应用样式
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.内部样式 */
p{
color:grey;
}
</style>
<!-- 3.外部样式，用link标签链接外部标签 -->
<!-- <link rel="stylesheet" type="text/css" herf="style/hello.css"> -->
<!-- 外部样式@import -->
<style>
/* @import "style/hello.css"; */
@import url(style/hello.css);
</style>
</head>
<body>
<p>welcome to css</p>
<p>欢迎来到CSS课堂！</p>
<!-- 2.行内样式 -->
<h2 style="color:yellow">web前端工程师</h2>
<h2>java开发工程师</h2>
<div>嘿嘿嘿</div>
<div>哈哈哈</div>
<div>吼吼吼</div>
</body>
</html>
div{
color:blue;
}
3.基础选择器
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
font-size:20px;
}
h2{
color:yellow;
}
/* 类选择器 */
.hello{
background:#cccccc;
}
.world{
font-weight:bold;
}
#heihei{
color:green;
}
</style>
</head>
<body>
<!-- 给p标签中的内容设置样式 -->
<p>welcome to class</p>
<p>hello world!</p>
<h2>web前端开发</h2>
<h3>java 开发</h3>
<hr>
<!-- 只想修改第一个p标签 -->
<p class="hello">hello world!</p>
<h2>web前端开发</h2>
<h3>java 开发</h3>
<!-- 只要应用了hello这个类选择器就生效，与标签无关 -->
<div class="hello">观众：范文鑫</div>
<!-- 既有背景，又加粗 -->
<div class="hello world">观众：范文鑫</div>
<span class="world">css从入门到精通</span>
<hr>
<h1 id="heihei">吼吼吼</h1>
</body>
</html>
4.复杂选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.标签选择器与类选择器的结合----复合选择器 */
h1.aaa{
color:pink;
}
/* 2.标签选择器与ID选择器的结合---复合选择器 */
p#bbb{
color:red;
}
/* 3.组合选择器 */
/* 分开书写 */
/* 一起书写 */
h1,p,div,span,.ccc{
font-size:30px;
}
.ccc{
font-weight:bold;
}
/* 嵌套选择器 */
div>h2>p{
color:blue;
text-decoration:underline;
}
/* 对div内部的类选择器进行修饰 */
div p.ddd{
color:yellow;
font-weight:bold;
}
</style>
</head>
<body>
<!-- 1.修改需求只修改aaa的h1 -->
<h1 class="aaa">welcome</h1>
<h4 class="aaa">css</h4>
<h1>hello</h1>
<hr>
<!-- 2.需求，修改ID属性为bbb的p标签 -->
<p id="bbb">world</p>
<p>html</p>
<h2 id="bbb">web开发</h2>
<hr>
<!-- 3.需求：将h1，p，div，span中的字号修改为30像素 -->
<h1>hello</h1>
<p>html</p>
<div>web开发</div>
<span class="ccc">java开发</span>
<hr>
<!-- 4.需求：修改div内部的p标签 -->
<div>
<p>div内部的p标签</p>
<h3>div内部的h3内部的标签</h3>
</div>
<hr>
<div>
<h2>
<p>div内部的h2标签内部的p标签</p>
</h2>
</div>
<hr>
<!-- 5.修饰div内部的h3 -->
<div>
<p>div内部的p标签</p>
<h3 class="ddd">div内部的h3</h3>
<p class="ddd">张云雷</p>
</div>
</body>
</html>
5.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* a:link{
font-size:12px;
color:black;
text-decoration:none;
}
a:visited{
font-size:15px;
color:yellow;
}
a:hover{
font-size:20px;
color:blue;
}
a:active{
font-size:40px;
color:green;
} */
a:link,a:visited,{
font-size:13px;
color:#666666;
text-decoration:none;
}
a:hover,a:active{
color:#ff7300;
text-decoration:underline;
}
/* 普通标签也可以使用伪类选择器 */
p:hover{
color:red;
}
p:active{
color:green;
}
</style>
</head>
<body>
<a href="04.复杂选择器.html">it教育，高教培训</a>
<p>css从入门到精通</p>
</body>
</html>
6.伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:first-letter{
color:red;
font-size:30px;
}
p:first-line{
background:yellow;
}
p:before{
content:"嘿嘿";
}
p:after{
content:"哈哈";
}
</style>
</head>
<body>
<p>hello world</p>
<hr>
<p>
hello,张云雷<br>
hello,尚九熙
</p>
</body>
</html>
7.选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <link rel="stylesheet" href="style/world.css"> -->
<style>
div{
font-size:20px;
color:red;
}
.hello{
font-weight:bold;
color:yellow !important;
}
#world{
text-decoration:underline;
color:green;
}
p{
color:red;
}
</style>
<link rel="stylesheet" href="style/world.css">
</head>
<body>
<div class="hello" id="world" style="color:pink;">css从入门到精通</div>
<p>观众：范文鑫</p>
</body>
</html>
css文件：
p{
color:blue;
}
8.字体相关的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:green;
/* background:#0F0; */
/* background-color: rgb(0, 0, 255); */
background-color:rgba(217, 16, 211, 0.5);
line-height:50px;
text-align:center;
}
img{
vertical-align:middle;
}
div{
text-indent:25px;
}
span{
text-decoration: underline;
text-transform:capitalize;
letter-spacing:1px;
word-spacing:5px;
}
h3{
width:300px;
height:200px;
background-color:grey;
white-space:nowrap;
overflow:hidden;
}
</style>
</head>
<body>
<p>welcome to css!</p>
<p>welcome to css!</p>
<p>welcome to css!</p>
<p>welcome to css!</p>
<p>welcome to css!</p>
<hr>
<img src="../image/12.jpg" alt="">
html与css
<hr>
<div>
张云雷，杨九郎，岳云鹏，孙越，尚九熙，何九华，秦霄贤，孙九香
</div>
<div>
张云雷，杨九郎，岳云鹏，孙越，尚九熙，何九华，秦霄贤，孙九香
</div>
<hr>
<span>hello world</span>
<hr>
<h3> 张云雷，杨九郎，岳云鹏，孙越，尚九熙，何九华，秦霄贤，孙九香,张云雷，杨九郎，岳云鹏，孙越，尚九熙，何九华，秦霄贤，孙九香,张云雷，杨九郎，岳云鹏，孙越，尚九熙，何九华，秦霄贤，孙九香
</h3>
</body>
</html>
9.文本相关属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:green;
/* background:#0F0; */
/* background-color: rgb(0, 0, 255); */
background-color:rgba(217, 16, 211, 0.5);
line-height:50px;
text-align:center;
}
img{
vertical-align:middle;
}
div{
text-indent:25px;
}
span{
text-decoration: underline;
text-transform:capitalize;
letter-spacing:1px;
word-spacing:5px;
}
h3{
width:300px;
height:200px;
background-color:grey;
white-space:nowrap;
overflow:hidden;
}
</style>
</head>
<body>
<p>welcome to css!</p>
<p>welcome to css!</p>
<p>welcome to css!</p>
<p>welcome to css!</p>
<p>welcome to css!</p>
<hr>
<img src="../image/12.jpg" alt="">
html与css
<hr>
<div>
张云雷，杨九郎，岳云鹏，孙越，尚九熙，何九华，秦霄贤，孙九香
</div>
<div>
张云雷，杨九郎，岳云鹏，孙越，尚九熙，何九华，秦霄贤，孙九香
</div>
<hr>
<span>hello world</span>
<hr>
<h3> 张云雷，杨九郎，岳云鹏，孙越，尚九熙，何九华，秦霄贤，孙九香,张云雷，杨九郎，岳云鹏，孙越，尚九熙，何九华，秦霄贤，孙九香,张云雷，杨九郎，岳云鹏，孙越，尚九熙，何九华，秦霄贤，孙九香
</h3>
</body>
</html>
第二部分
1.背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div{
/* background-color:grey;
background-color:transparent;
background-image:url('../image/11.jpg');
}*/
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>welcome to css welcome to css welcome to css</p>
<p>welcome to css welcome to css welcome to css</p>
<p>welcome to css welcome to css welcome to css</p>
<p>welcome to css welcome to css welcome to css</p>
<p>welcome to css welcome to css welcome to css</p>
</div>
<hr>
<p class="cart"></p>
购物车
<!-- <img src="../image/12.jpg" alt=""> -->
</body>
</html>
css文件
div{
color:orange;
/* background-color:grey; */
/* background-color:transparent; */
/* background-image:url('../image/8.jpg');
background-repeat:no-repeat;
background-position:right top;
width:200px;
height:100px;
background-attachment:scroll; */
background:red url(../images/qq.jpg) repeat-x 30px 100px;
}
.cart{
width:30px;
height:30px;
background-color:#ccc;
background-image:url('../images/icon.gif');
background-color:transparent;
/* background-position:; */
}
2.列表属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* li{
list-style-type:square;
} */
.first{
list-style-type:decimal;
}
.second{
list-style-image:url(../image/male.gif);
}
.third{
list-style-type:circle;
list-style-position:inside;
}
.forth{
list-style:square url(../image/female.gif) outside;
}
.nav{
list-style:none;
/* float:left; */
}
.nav li{
list-style:none;
float:right;
width:60px;
}
</style>
</head>
<body>
<ul>
<li class="first">hello</li>
<li class="second">欢迎</li>
<li class="third">你好</li>
<li class="forth">嘿嘿</li>
</ul>
<hr>
<nav>
<ul class="nav">
<li>新闻</li>
<li>地图</li>
<li>音乐</li>
<li>视频</li>
</ul>
</nav>
</body>
</html>
3.表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:500px;
border:1px solid red;
border-collapse:collapse;
}
td{
border:1px solid red;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
</table>
</body>
</html>
4.盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width:250px;
background:#ccc;
}
.first{
/* border-top-color:black;
border-top-width:2px;
border-top-style:solid;
border-right-color:blue;
border-right-width:2px;
border-right-style:inset;
border-bottom-color:pink;
border-bottom-width:6px;
border-bottom-style:dotted;
border-left-color:yellow;
border-left-width:3px;
border-left-style:double; */
border:2px dotted red;
}
.second{
/* padding-top:15px;
padding-left:10px;
padding-bottom:20px;*/
padding: 15px 20px 19px 4px;
}
.third{
/* 元素的水平居中 */
/* 1.块级元素的水平居中 */
margin:0 auto;
/* 提示：块级元素必须指定宽度 */
/* 2.文本的水平居中 */
text-align:center;
/* 3.垂直居中，将height和line-height设置为相同 */
height:100px;
line-height:100px;
}
</style>
</head>
<body>
<p class="first">welcome to css!</p>
<p class="second">welcome to html!</p>
<p class="third">welcome to java!</p>
</body>
</html>
5.盒子模型的默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* body默认的margin是不为0的 */
body{
margin:0;
}
/* p标签默认的margin也不为0 */
p{
margin:0;
}
/* ul默认margin和padding都不为0 */
ul{
list-style:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
welcome to css
<p>hello world</p>
<ul>
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
</ul>
</body>
</html>
6.外边距的合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:50px;
height:50px;
background:#ccc;
}
.div1{
margin-bottom:20px;
}
.div2{
margin-top: 30px;
}
.div3{
width:100px;
height:100px;
background:yellow;
margin-top:20px;
/* border:2px solid red; */
padding:;
}
.div4{
margin-top:10px;
}
p{
margin:20px 0;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<hr>
<div class="div3">
<div class="div4"></div>
</div>
<hr>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
</body>
</html>
7.定位方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width:800px;
border:1px solid #000;
position:relative;
}
.div1,.div2,.div3,.div4{
width:100px;
height:50px;
}
.div1{
background:red;
/* 默认为static */
position:relative;
top:20px;
left:50px;
z-index:-5;
}
.div2{
background:#ccc;
position:absolute;
left:100px;
bottom:50px;
z-index:-6;
}
.div3{
background:yellow;
position:fixed;
bottom:50px;
left:100px;
}
.div4{
background:blue;
}
</style>
</head>
<body>
<div id="container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</div>
</body>
</html>
8.浮动和清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
/* width:800px; */
border:1px solid #000;
}
.div1,.div2,.div3,.div4{
width:300px;
height:50px;
}
.div1{
background:red;
float:left;
}
.div2{
background:#ccc;
float:left;
clear:left;
}
.div3{
background:yellow;
float:left;
}
.div4{
background:blue;
float:left;
}
.clr{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="clr"></div>
</div>
welcome to css!
</body>
</html>
9.课后小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
}
#container{
width:732px;
margin:0 auto;
border:2px solid #0f0;
}
.div1,.div2,.div3,.div4{
width:200px;
height:180px;
float:left;
margin:6px;
border:6px outset #ff7300;
padding:10px;
}
#container img{
width:100%;
height:100%;
}
#container .clr{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div class="div1"><img src="../images/adv1.jpg" alt=""></div>
<div class="div2"><img src="../images/adv2.jpg" alt=""></div>
<div class="div3"><img src="../images/adv3.jpg" alt=""></div>
<div class="div4"><img src="../images/adv4.jpg" alt=""></div>
<div class="clr"></div>
</div>
<p>welcome to css</p>javascript
</body>
</html>
注意：container中的width=padding2+margin2+border*2+width
第五章
1.元素的显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
width:100px;
height:100px;
background:#ccc;
display:inline;
/* 将块级元素转化为行级标签进行显示，失去了块级元素会独占一行的特点 */
}
span{
width:100px;
height:100px;
background:yellow;
/* display:block; */
display:inline-block;
}
i{
display:inline-block;
width:100px;
height:100px;
background:red;
}
p{
width:50px;
height:50px;
background:red;
}
.p1{
/* display:none; */
visibility:visible;
}
#login{
display:inline-block;
width:100px;
text-decoration:none;
background:rgba(255, 0, 0, 0.7);
color:#fff;
padding:10px;
text-align:center;
border-radius:8px;
}
#login:hover{
background:rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="div1">div1</div>
<span>span1</span>
<i>嘿嘿</i>
<hr>
<p class="p1">哈哈</p>
<p class="p2">吼吼</p>
<hr>
<a href="javascript:alert('提交成功')" id="login">登 录</a>
</body>
</html>
2.轮廓属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
border:1px solid red;
/* outline-width:4px;
outline-color:yellow;
outline-style:dashed; */
outline:3px yellow dashed;
}
.usrname{
border:1px solid green;
/* 用户名文本框不设置轮廓 */
outline:none;
padding-left:3px;
/* width:300px; */
}
.email{
/* border:1px solid blue; */
border:0;
outline:0;
border-bottom:1px solid black;
}
.btnsubmit{
border:0;
padding:5px;
width:100px;
}
.mydiv{
width:100px;
height: 50px;
background:#ccc;
/* border:2px solid red; */
outline: 2px solid red;
}
</style>
</head>
<body>
<span>welcome to css</span>
<hr>
用户名：<input type="text" class="usrname">
<hr>
<a href="#">css</a>
<hr>
邮箱：<input type="text" class="email">
<input type="submit" value="提交" class="btnsubmit">
<div class="mydiv">哈哈</div>
</body>
</html>
3.其他属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
border:1px solid red;
min-width:500px;
}
div{
border:1px solid blue;
width:300px;
height:90px;
overflow:auto;
}
span{
cursor:wait;
}
</style>
</head>
<body>
<p>
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
</p>
<hr>
<div>
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
</div>
<hr>
<span>
光标形状
</span>hello world
</body>
</html>
4.表格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hello{
width:80%;
border:1px solid #ccc;
border-spacing:0;
border-collapse:collapse;
}
.hello th,.hello td{
border:1px solid #CCC;
padding:10px;
}
</style>
</head>
<body>
<table class="hello">
<thead>
<tr>
<th>th1</th>
<th>th2</th>
<th>th3</th>
<th>th4</th>
</tr>
</thead>
<tbody>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
</tbody>
</table>
</body>
</html>
5.简单布局1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="main">
main
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
style.css
@charset "utf-8";
body{
margin:0;
padding:0;
}
#container{
width:980px;
border:1px solid #ccc;
margin:0 auto;
}
#container .header{
width:100%;
height:100px;
background:red;
}
#container .main{
width:100%;
height:80px;
background:yellow;
}
#container .footer{
width:100%;
height:60px;
background:green;
}
6.简单布局2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<!-- <aside>
left side
</aside> -->
<section class="main">
main
</section>
<aside>
right aside
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
style2.css
@charset "utf-8";
body{
margin:0;
padding:0;
}
#container{
width:980px;
border:1px solid #ccc;
margin:0 auto;
}
#container .header{
width:100%;
height:80px;
background:red;
}
#container .wrapper{
width:100%;
height:600px;
background:blue;
margin:10px 0;
}
#container .wrapper .main{
background:cyan;
width:760px;
height:600px;
float:left;
margin-right:10px;
}
#container .wrapper aside{
background:pink;
width:200px;
height:400px;
float:left;
}
#container .footer{
width:100%;
height:120px;
background:green;
}
7.圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style3.css">
</head>
<body>
<header id="header">
header
</header>
<article id="wrapper">
<section class="main">
main
</section>
<aside class="left">
left aside
</aside>
<aside class="right">
right aside
</aside>
</article>
<footer id="footer">
footer
</footer>
</body>
</html>
style3.css
@charset "utf-8";
/*
父容器
1.溢出时隐藏
2.设置父容器的内边距padding，用来空出放置左右两个侧边栏
*/
#header{
width:100%;
padding-left:350px;
background:yellow;
}
#wrapper{
overflow:hidden; /* 超出部分隐藏 */
/* 实现左侧边栏和右侧边栏 */
padding:0 200px; /* 左右分别空出200px，用于放置左右侧边栏 */
min-width:300px;
border:1px solid #ccc;
}
/*
主体：
1.宽度自适应
2.设置一个浮动布局
*/
#wrapper .main{
width:100%;
height:300px;
background:green;
float:left;
}
#wrapper aside{
width:190px;
height:300px;
background:blue;
float:left;
position:relative;
}
#wrapper .left{
margin-left:-100%;
left:-200px;
}
#wrapper .right{
margin-left:-190px;
right:-200px;
}
8.圣杯布局2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style4.css">
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<section class="main">
main
</section>
<aside class="left">
left aside
</aside>
<aside class="right">
right aside
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
style4.css
@charset "utf-8";
body{
margin:0;
padding:0;
}
#container{
margin:0 auto;
}
#container .header{
width:100%;
height:80px;
background:yellow;
}
#container .wrapper{
overflow:hidden;
padding:0 200px;
min-width:300px;
margin:10px 0;
}
#container .main{
width:100%;
height:400px;
background:blue;
float:left;
}
#container aside{
float:left;
width:190px;
height:300px;
background:cyan;
position:relative;
}
#container .left{
margin-left:-100%;
left:-200px;
}
#container .right{
margin-left:-190px;
right:-200px;
}
#container .footer{
width:100%;
height:150px;
background:green;
}
9.双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style5.css">
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<section class="main">
<div class="main-wrapper">
main
</div>
</section>
<aside class="left">
left
</aside>
<aside class="right">
right
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
style5.css
@charset "utf-8";
body{
margin:0;
padding:0;
}
#container{
margin:0 auto;
}
#container .header{
width:100%;
height:80px;
background:red;
}
#container .wrapper{
overflow:hidden;
min-width:300px;
margin:10px 0;
}
#container .main{
width:100%;
float:left;
}
#container .main-wrapper{
background:pink;
height:400px;
margin:0 200px;
}
#container aside{
float:left;
width:190px;
height:300px;
background:cyan;
}
#container .left{
margin-left:-100%;
/* 此处的100%是main的100% */
}
#container .right{
margin-left:-190px;
left:200px;
}
#container .footer{
width:100%;
height:150px;
background:green;
}
583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
