HTML5学习(二)

作者: 天下林子 | 来源:发表于2019-01-03 16:53 被阅读14次

HTML5学习笔记之表格标签
HTML5学习笔记之表单标签
HTML5学习笔记之基础标签
HTML5学习笔记之音视频标签
HTML5基本介绍
1.1 html5基础知识1
HTML5学习(二)
2018-03-26
HTML5游戏开发(1) - 前期准备
扣丁学堂HTML5怎么学更快捷

##盒子模型

网页上的每一个标签都是一个盒子
每个盒子都有四个属性

内容（content）

盒子里装的东西
网页中通常是指文字和图片

填充（padding,内边距）

怕盒子里装的东西损坏，添加的泡沫或者其他辅料

边框：盒子本身

边界(margin,外边距)

盒子摆放的时候不能全部堆在一起

image.png

IE盒子模型

image.png

内容（content）- 属性

属性	描述
height	设置元素高度
max-height	设置元素最大高度
max-width	设置元素最大宽度
min-height	设置元素最小高度

填充(padding 内边距) - 属性

image.png

示例：


padding: 10px 5px 15px 20px;

上内边距 10px
右内边距 5px
下内边距 15px
左内边距 20px


padding: 10px 5px ;

上内边距和下内边距是 10px
右内边距和左内边距是 5px

padding: 10px 5px 15px;

上内边距 10px
右内边距和左内边距是5px
下内边距是15px

padding: 10px;

所有4个内边距都是10px；

边框(border) - 属性

image.png

边界(margin, 外边距) - 属性

image.png

边界(margin, 外边距)- 属性

示例

margin： 10px 5px 15px 20px;

上外边距是10px
右外边距是5px
下外边距是15px
左外边距是 20px

margin： 10px 5px ;

上外边距和下外边距是10px
右外边距和左外边距是5px

margin： 10px 5px 15px

上外边距是 10px
右外边距和左外边距是5px
下外边距是15px

margin： 10px;

所有4个外边距都是10px

CSS布局

默认情况下，所有的网页标签都在标签流布局中
从上到下，从左到右
脱离标准流的方法有
float属性
position属性和left，right，top，bottom属性

CSS布局- float属性

float属性的常用取值
left：脱离标准流，浮动在父标签的最左边
right：脱离标准流，浮动在父标签的最右边

CSS布局- position属性

image.png

>>>>仿写一个Mac桌面>>>


a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0;
    margin:0;
}

a{
    color: black;
}

ul{
    list-style: none;
}

body{
    background: url("../images/apple.jpg");
    /*尺寸*/
    background-size: cover;
}


/*头部*/
#header{
    background-color: rgba(241,241,241,0.8);
    height: 38px;
    line-height: 38px;
    width: 100%;

    /*定位*/
    position: fixed;
    top: 0;

    font-size: 18px;
}

.header-left li{
    float: left;
    /*设置左边距*/
    margin-left: 8px;
}

.header-right{
    float: right;
}

.header-right li{
    /*设置右边距*/
    margin-right: 8px;
}

#content{
    padding-top: 100px;
    color: white;
    /*text-align: center;*/
}

#content .file{
    margin-left: 50px;
    /*text-align: center;*/
}

#content img{
    width: 60px;
    height: 60px;
}



/*尾部*/
#footer{
    /*background-color: red;*/
    height: 60px;
    line-height: 60px;
    width: 100%;

    position: fixed;
    bottom: 0;
}

.dock{
    height: 100%;
    width: 60%;
    background: url("../images/dock_bg.png");

    /*居中*/
    margin:0 auto;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    text-align: center;
}

#footer .dock img{
    width: 50px;
    height: 50px;
    margin:0 5px;
}

#footer .dock ul{
    display: inline-block;
}

#footer .dock li{
    float: left;

    /*动画的过度效果*/
    -webkit-transition: linear 0.25s;
    -moz-transition: linear 0.25s;
    -ms-transition: linear 0.25s;
    -o-transition: linear 0.25s;
    transition: linear 0.25s;
}


#footer .dock li:hover{
    /*动画方向*/
    -webkit-transform-origin: center bottom;
    /*设置动画的效果*/
    -webkit-transform: scale(1.5);
}

+++++++++++++++++++++++++++++


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mac桌面</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--头部-->
<div id="header">
    <ul class="header-left">
        <li><a href="#" class="glyphicon glyphicon-apple"></a></li>
        <li><a href="#">520IT</a></li>
        <li><a href="#">文件</a></li>
        <li><a href="#">编辑</a></li>
        <li><a href="#">显示</a></li>
        <li><a href="#">帮助</a></li>
    </ul>
    <ul class="header-right">
        <li class="glyphicon glyphicon-volume-up"></li>
        <li class="glyphicon glyphicon-align-left"></li>
        <li class="glyphicon glyphicon-question-sign"></li>
        <li class="glyphicon glyphicon-leaf"></li>
    </ul>
</div>
<!--中间内容-->
<div id="content">
    <div class="file">
        <img src="images/file.png">
        <p>mac</p>
    </div>
    <div class="file">
        <img src="images/file.png">
        <p>mac</p>
    </div>
    <div class="file">
        <img src="images/file.png">
        <p>mac</p>
    </div>
</div>
<!--尾部-->
<div id="footer">
    <div class="dock">
        <ul>
            <li><a href="#"><img src="images/zurb-icon.png"></a></li>
            <li><a href="#"><img src="images/linkedin-icon.png"></a> </li>
            <li><a href="#"><img src="images/notable-icon.png"></a> </li>
            <li><a href="#"><img src="images/lastfm-icon.png"></a> </li>
            <li><a href="#"><img src="images/facebook-icon.png"></a> </li>
            <li><a href="#"><img src="images/google-icon.png"></a> </li>
            <li><a href="#"><img src="images/notable-icon.png"></a> </li>
            <li><a href="#"><img src="images/lastfm-icon.png"></a> </li>
            <li><a href="#"><img src="images/facebook-icon.png"></a> </li>
            <li><a href="#"><img src="images/google-icon.png"></a> </li>
        </ul>
    </div>
</div>
</body>
</html>

效果图

image.png