HTML.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>hahaha</h2>
</body>
</html>
网页效果：
案例2 CSS应用样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*1.内部样式*/
p{
color:red;
}
</style>
<!-- 外部样式 link标签链接样式文件 -->
<!-- <link rel="stylesheet" href="text/css" href="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:blue">WEB前端工程师</h2>
<h2>JAVA开发工程师</h2>
<div>哈哈</div>
<div>呵呵</div>
</body>
</html>
div{
color:green;
}
网页效果：
案例3 基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1、标签选择器 */
p{
color:red;
font-size:20px;
}
h2{
color:yellow;
}
/* 类选择器 */
.hello{
background:#cccccc;
}
.world{
font-weight:bold;
}
#heihei{
color:blue;
}
</style>
</head>
<body>
<!-- 给p标签中的内容设置样式 -->
<p>welcome to CSS</p>
<p>hello world!</p>
<h2>WEB前端开发</h2>
<h3>JAVA开发</h3>
<hr>
<!-- 只想修改第一个p标签-->
<p class="hello">welcome to CSS</p>
<p>hello world!</p>
<h2>WEB前端开发</h2>
<h3>JAVA开发</h3>
<!-- 只要应用了hello这个类选择器就生效，与标签无关 -->
<div class="hello">主讲</div>
<!-- div中既要加粗，又有背景颜色 -->
<div class="hello world">主讲</div>
<span class="world">花花</span>
<hr>
<h1 id="heihei">嘿嘿</h1>
</body>
</html>
网页效果：
div class=“hello world”>主讲
花花
<h1 id="heihei">嘿嘿</h1>
网页效果：
案例4 复杂选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.标签选择器与类选择器结合起来------复合选择器 */
h1.aaa{
color:red;
}
/* 2.标签选择器与ID选择器结合起来------复合选择器*/
p#bbb{
color:blue;
}
/* 组合选择器 */
/* 分开书写 */
h1,p,div,span,.ccc{
font-size:30px;
}
div{
background:#cccccc;
}
.ccc{
font-weight:bold;
}
/* 3.嵌套选择器 */
div>p{
color:green;
text-decoration: underline;
}
/* 对div内部的类选择器进行修饰 */
div h3.ddd{
color:pink;
}
</style>
</head>
<body>
<!-- 1.需求，修改class为aaa的h1 -->
<h1 class="aaa">welcome</h1>
<h4 class="aaa">css</h4>
<h1>hello</h1>
<hr>
<!-- 需求，修改id属性为bbb的p标签 -->
<p id="bbb">world</p>
<p>heml</p>
<h2 id="bbb">WEB开发</h2>
<hr>
<!-- 需求，将h1.p.div.span中的内容的字号设置为30像素 -->
<h1>hello</h1>
<p>html</p>
<div>web开发</div>
<span class="ccc">JAVA开发</span>
<hr>
<!-- 需求：设置div内部的p标签的样式 -->
<div>
<p>div内部的p标签</p>
<h3>div内部的h3标签</h3>
</div>
<hr>
<div>
<h2>
<p>div内部的h2标签内部的p标签</p>
</h2>
</div>
<hr>
<!-- 需求：修饰div内部的h3 -->
<div>
<p>div内部的p标签</p>
<h3 class="ddd">div内部的h3</h3>
<p class="ddd">pppp</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:red;
}
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:blue;
}
</style>
</head>
<body>
<a href="02.css应用样式.html">豪华烤冷面</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 world！<br>
welcome to css!
</p>
</body>
</html>
网页效果：
案例7 选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
font-size:20px;
color:red;
}
.hello{
font-weight:bold;
color:blue;
}
#word{
text-decoration:underline;
color:green;
}
p{
color:red!important;
}
</style>
<link rel="stylesheet" href="style/world.css">
</head>
<body>
<div class="hello" id="world" style="color:pink;">CSS从入门到精通</div>
<p>主讲：</p>
</body>
</html>
网页效果：
案例8 字体相关的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
font-size:30px;
}
p{
/* font-size:20px; */
/* font-size:80%; */
font-size:2em;
}
span{
font-size:1em;
}
span.hello{
/* font-size:80%; */
font-size:2em;
}
body{
font-size:62.5%;
}
#ddd{
font-size:3em;
}
ul li{
/* font-size:30px;
font-weight:500;
font-family: 华文行楷,黑体,宋体;
font-style:normal; */
font:italic normal 20px 黑体,楷体,宋体;
}
</style>
</head>
<body>
<p>
css从入门到精通
<span>主讲：高教培训</span>
</p>
<span id="ddd">主讲:hector</span>
<hr>
<div>
我的div
<p>
css从入门到精通
<span>主讲：高教培训</span>
</p>
</div>
<hr>
<span class="hello">主讲：高教培训</span>
<hr>
<ul>
<li>嘿嘿</li>
</ul>
</body>
</html>
网页效果：
案例9 文本相关的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
/* background-color:#0F0; */
/* background-color:rgb(0, 0, 255); */
background-color:#54d3ce;
line-height:50px;
text-align: center;
}
img{
vertical-align:middle;
}
div{
text-indent:25px;
}
span{
text-decoration:line-through;
text-transform:capitalize;
letter-spacing:3px;
word-spacing:8px;
}
h3{
width:300px;
height:200px;
background-color:#cccccc;
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="../images/qq.jpg" alt="">
html和css很简单
<hr>
<div> hahahahahahahahahahahhahahahahah
ahahahahahahahahaha
hahahahahahahahah</div>
<div>hahahahahahahahahahahhahahahahah
ahahahahahahahahaha
hahahahahahahahahwelcome to CSS!welcome to CSS!welcome to CSS!
welcome to CSS!welcome to CSS!</div>
<hr>
<span>haha哈哈</span>
<hr>
<h3>welwelcome 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!come to CSS!</h3>
</body>
</html>
网页效果：
案例10 背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* div{
color:red;
background-color:#cccccc;
background-image:url(../images/bg.gif);
background-color:transparent;
background-image:url(../images/heihei.gif);
} */
</style>
<link rel="stylesheet" type="text/css" 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="icon"></p>
购物车
</body>
</html>
网页效果：
案例11 列表属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* li{
list-style-type:decimal;
} */
.first{
list-style-type:decimal;
}
.second{
/* list-style-type:square; */
list-style-image:url(../images/male.gif);
}
.third{
list-style-type:circle;
list-style-position:inside;
}
.fourth{
/* list-style:square url(../images/female.gif) inside; */
list-style:none;
}
.nav li{
list-style:none;
float:left;
width:50px;
}
</style>
</head>
<body>
<ul>
<li class="first">hello</li>
<li class="second">hello</li>
<li class="third">hello</li>
<li class="fourth">hello</li>
</ul>
<hr>
<nav class="nav">
<ul>
<li>新闻</li>
<li>地图</li>
<li>视频</li>
<li>贴吧</li>
</ul>
</nav>
</body>
</html>
网页效果：
案例12 表格属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width:500px;
border:1px solid pink;
border-collapse:collapse;
}
td{
border:1px solid pink;
}
</style>
</head>
<body>
<!-- table>(tr>td{td$}*4)*5</-->
<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>
网页效果：
案例13 盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width:250px;
background:#ccc;
}
.first{
/* border-top-color:red;
border-top-width:1px;
border-top-style:solid;
border-right-color:blue;
border-right-width:2px;
border-right-style:dashed;
border-bottom-color:green;
border-bottom-width:4px;
border-bottom-style:dotted;
border-left-color:gray;
border-left-width:6px;
border-left-style:dotted;
*/
/* border-color:red yellow blue green;
border-width:1px 2px 4px 6px;
border-style:solid dashed dotted double; */
/* border-color:red green pink;
border-width:1px 2px 4px 6px;
border-style:solid dashed dotted double; */
border:1px dotted red;
}
.second{
/* padding-top:15px;
padding-left:10px;
padding-bottom:20px;
padding-right:30px; */
/* padding:1px 2px 4px 6px; */
padding:5px;
}
</style>
</head>
<body>
<p class="first">welcome to html</p>
<p class="second">welcome to css</p>
<p class="third">welcome to java</p>
</body>
</html>
网页效果：
案例14 盒子模型默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* body默认margin不为0 */
body{
margin:0;
padding:0;
}
/* p默认的margin也不为0 */
p{
margin:0;
}
/* ul默认的margin和padding都不为0 */
ul{
list-style:none;
margin:0;
padding:0;
}
body,ul,ol,dl,li,p,h1,h2,h3,h4,h5,h6,form{
margin:0;
padding:0;
}
</style>
</head>
<body>
welcome to css
<p>hello world</p>
<!-- ul>li{hello$}*3 -->
<ul>
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
</ul>
</body>
</html>
网页效果：
案例15 外边距的合并
<!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:blue;
margin-top:20px;
/* border:1px solid red; */
padding:1px;
}
.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{p$}*8 -->
<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>
网页效果：
案例16 定位方式
<!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:static; */
position:relative;
top:20px;
left:50px;
z-index:-5;
}
.div2{
background:blue;
position:absolute;
left:100px;
bottom:50px;
z-index:-8;
}
.div3{
background:green;
position:fixed;
bottom: 50px;
left:100px;
}
.div4{
background:cyan;
}
</style>
</head>
<body>
<div id="container">
<!-- div.div${div$}*4 -->
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</div>
</body>
</html>
网页效果:
案例17 浮动和清除
<!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:blue;
float:left;
clear:left;
}
.div3{
background:green;
float:left;
}
.div4{
background:cyan;
float:left;
}
.clr{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<!-- div.div${div$}*4 -->
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="clr"><!-- aaa --></div>
</div>
welcome to CSS
</body>
</html>
网页效果：
案例18 练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
}
#container{
width:960px;
margin:0 auto;
border:2px solid #0f0;
}
.div1,.div2,.div3,.div4{
width:200px;
height:180px;
float:left;
margin:5px;
border:5px outset #ff7300;
padding:10px;
}
#container img{
width:100%;
height:100%;
}
#container .clr{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div1 class="div1"><img src="../images/adv1.jpg" alt=""></div1>
<div2 class="div2"><img src="../images/adv2.jpg" alt=""></div2>
<div3 class="div3"><img src="../images/adv3.jpg" alt=""></div3>
<div4 class="div4"><img src="../images/adv4.jpg" alt=""></div4>
<div class="clr"></div>
</div>
<p>welcome to css</p >javascript
</body>
</html>
网页效果：
案例19 元素的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
width:100px;
height:100px;
background:blue;
/* display:none; */
display:inline;
/* 将块级元素转换为行级元素进行显示，失去了块级元素独占一行的特点 */
}
span{
width:100px;
height:100px;
background:yellow;
display:block;
/* 将行级元素转换为块级元素进行显示，独占一行进行显示 */
/* 既对行级元素设置宽和高，还想让他在一行显示 */
/* 方法一：设置浮动 */
/* float:left; */
display:inline-block;
}
i{
display:inline-block;
width:100px;
height:100px;
background:red;
}
p{
width:50px;
height:50px;
background:red;
}
.p1{
display:none;
visibility:hidden;
}
#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, 5);
}
</style>
</head>
<body>
<div class="div1">dv1</div>
<span>span1</span>
<i>呵呵</i>
<hr>
<p class="p1">p1</p>
<p class="p2">p2</p>
<hr>
<a href="javascript:alert('哈哈')" id="login">登 录</a>
</body>
</html>
网页效果：
案例20 轮廓属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
border:2px solid red;
outline-width:4px;
outline-color:blue;
outline-style: dashed;
}
.usrname{
border:1px solid red;
outline:none; /* 用户名文本框不设置轮廓 */
padding-left:3px;
width:80px;
}
.email{
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">
<hr>
<div class="mydiv">div</div>
</body>
</html>
网页效果：
案例21 其他属性
!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:80px;
overflow:auto;
}
span{
cursor:help;
}
</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
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
welcome to css welcome to css welcome to css welcome to css
</div>
<hr>
<span>光标形状</span>
</body>
</html>
网页效果：
案例22 表格属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hello{
/* width: 600px; */
width:80%;
border:1px solid #ccc;
border-spacing:0;
border-collapse:collapse;
}
.hello th,.hello td{
border:1px solid #ccc;
padding:5px;
}
</style>
</head>
<body>
<!-- table>(thead>tr>th{th$}*4)+tbody>(tr>td{td$}*4)*6 -->
<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>
网页效果：
案例23 简单布局1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="main">
main
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
@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 .main{
width: 100%;
height: 600px;
background:blue;
margin:10px 0;
}
#container .footer{
width: 100%;
height: 120px;
background:green;
}
网页效果：
案例24 简单布局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 aside
</aside> -->
<section class="main">
main
</section>
<aside>
right aside
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
@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:0 10px;
}
#container .wrapper aside{
background:pink;
width: 200px;
height: 400px;
float:left;
}
#container .footer{
width: 100%;
height: 120px;
background:green;
}
网页效果：
案例25 圣杯布局1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style3.css">
</head>
<body>
<article id="wrapper">
<section class="main">
main
</section>
<aside class="left">
left aside
</aside>
<aside class="right">
right aside
</aside>
</article>
</body>
</html>
style3.css
@charset "utf-8";
/* 父容器
1.溢出时隐藏
2.设置容器的内边距padding，用来空出位置，放置左右侧边栏
*/
#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;
}
网页效果：
案例26 圣杯布局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 id="wrapper">
<section class="main">
main
</section>
<aside class="left">
left
</aside>
<aside class="right">
right
</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:red;
}
#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;
left:200px;
}
#container .footer{
width: 100%;
height: 150px;
background:green;
}
网页效果：
案例27 双飞翼布局
<!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%;
}
#container .right{
margin-left:-190px;
}
#container .footer{
width: 100%;
height: 150px;
background:green;
}
网页效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
