8月17日作业 - 前端基础知识

首页 > 博客列表 > 8月17日作业

博主信息

博文 14

粉丝 0

访问量 6441

专题推荐

更多>

实例

1.双飞翼布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        .header,.footer {
                                  width:100%;
                                  height:60px;
                                  background-color:lightgrey;
                              }
        .content {
            width:1000px;
            min-height: 100%;
            background-color: gray ;
            text-align: center ;
            margin: auto ;
            line-height: 60px;
        }
        .container {
            width:1000px;
            margin: auto ;
            background-color: yellow;
            overflow: hidden;
        }
        .wrap {
            width: 100%;
            background-color:cyan ;
            float:left;
        }
        .main {
            min-height: 600px;
            background-color: wheat ;
            margin-left: 210px ;
            margin-right: 210px ;
        }
        .left {
            width:200px;
            min-height: 600px ;
            background-color: red ;
            float:left ;
            margin-left: -100% ;
        }
        .right {
            width:200px;
            min-height: 600px ;
            background-color: pink  ;
            float:left ;
            margin-left : -200px ;
        }

    </style>



</head>
<body>
<div class="header">
    <div class="content">吉林嘉梦科技</div>
</div>

<div class="container">
    <div class="wrap">
        <div class="main">主体部分</div>
    </div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>
<div class="footer">
    <div class="content">底部</div>

</body>
</html>

2、圣杯布局

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
.herder,.footer {
width:100%;
height:60px;
background-color:lightslategrey;
}
.content {
width:1000px;
min-height: 100%;
background-color: gray ;
text-align: center ;
margin: auto ;
line-height: 60px;

}
.container {
width: 600px;
margin: auto;
background-color: lightsalmon;
}
.container .main {
width:100%;
min-height: 650px ;
background-color: lightgreen;
float: left;
}
.container .left {
width:200px;
min-height: 650px ;
background-color: yellow;
float: left;
margin-left: -100%;
position: relative;
left:-200px;
}
.container .right {
width:200px;
min-height: 650px ;
background-color: blue ;
float: left;
margin-left: -200px;

position: relative;
right :-200px;
}
.footer {
clear: both;
}

</style>
</head>
<body>
<div class="herder">
<div class="content">头部</div>
</div>
<div class="container">

<div class="main">主题内容</div>

<div class="left">左</div>

<div class="right">右</div>
</div>
<div class="footer">
<div class="content"> 底部</div>
</div>
</body>

</html>

3.QQ kefu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
</head>
<style>
.body {
margin:0;
height: 2000px;
}
.box1{
position: fixed ;
bottom: 0;
right :0;
}
.close {
position: absolute;
right: 20px;
top:10px;
color: aliceblue;
}
</style>
<div class="box1">
<a href="">
<img src="qq.jpg" alt="在线kefu">
<span class="close" onclick="this.parentNode.style.display= "none" >X
</span>
</a>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写部分：

已经完成，上传失败，图片

批改状态：合格

老师批语：加油！作业标题还是得改一下！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

8月10日作业

2018-08-21 15:28:16

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

实例