11.06笔记整理、作业以及学习心得

最新推荐文章于 2021-11-06 11:02:21 发布

huqiang0816

最新推荐文章于 2021-11-06 11:02:21 发布

阅读量273

点赞数

本文链接：https://blog.csdn.net/huqiang0816/article/details/78463406

版权

11.06课堂笔记及作业

1、盒子模型内外边距和边框介绍

当浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四个部分组成：
1. Margin
2. Border
3. Padding
4. Content

1.1 边框

用border属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）、样式、颜色。

样式包括：solid（实线）、dotted（虚线）、dashed（虚线）、double（双实线）、inset、outset、ridge、groove 。
也可以通过设置样式为none或者hidden来移除边框。
如果一次只指定某个方向的边框，就用属性：

border-top  border-right border-bottom  border-left

1.2 外边距和内边距

用margin属性和padding属性分别设置外边距和内边距的宽度。

如果指定一个宽度，他将会作用于元素四周（按照顺时针方向：上、右、下、左）
如果指定两个宽度，第一个宽度会作用在顶部和底部，第二个宽度作用于右边和左边
也可以指定四个宽度

1.3 简写属性

h1{margin:10px    10px     10px     10px}     

 - 上下边框属性  左右边框属性
 - 上边框属性    左右边框属性   下边框属性
 - 上             右        下       左边框属性

1.4 行内元素的盒子模型

行内元素的盒子模型只能得到一行高度的空间，行高由line-height属性决定，没有设置该属性则为内容默认高度。所以不推荐对行内元素设置盒子属性，会影响其他元素以及页面布局。一般先用display属性设置内联元素为块级元素显示，再设置盒子属性。

2 display属性

2.1 元素的显示和隐藏

使用display：none将元素隐藏起来，此时元素不占用页面空间
使用visibility-hidden也可以隐藏元素，此时元素占用空间。

2.2 通过display改变内联元素或块级元素

（1）display：block就是将元素显示为块级元素
block元素的特点是：

总是在新行上开始
高度，行高以及顶和底边距都可控制
宽度默认是它的容器的100%，除非设定一个宽度

<div>,<p>,<h1>,<form>,<ul>和<li>都是块级元素的例子。

（2）display：inline就是将元素显示为行内元素
inline元素的特点是：
- 和其他元素都在一行上
- 高，行高及顶和底外边距不可改变
- 宽度就是它的文字或图片的宽度，不可改变

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

（3）display：online-block
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

3、position属性

CSS有三种基本的定位机制：普通流、浮动和绝对定位

3.1 static静态定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top,bottom,right,left属性的影响

3.2 fixed固定定位

脱离标准流，在页面中不占位置。不管页面有多大，永远相对于浏览器的边框来定位。

3.3 relative相对定位

不脱离标准流，在页面中占位置。相对于自己原来的位置来进行定位。

3.4absolute绝对定位

脱离标准流，在页面中不占位置（浮起来）。如果没有父元素，则相对于body定位；如果有父元素，但父元素没有定位，那么还是相对于body定位；如果父元素有定位，那么相对于父元素来定位。

3.5定位元素的重叠

z-index属性控制定位元素的重叠顺序，属性值是z轴上的值。
Z-index只能在绝对定位元素上奏效（position:absolute）。
Z-index的值是设置一个定位元素沿Z轴的位置，其值越大，离用户越近，所以若两个定位元素，Z-index值越大的将会覆盖值越小的定位元素。默认值是0，可以是正负数。

11.06作业

1、百度网页的临摹

（1）html部分

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta charset="UTF-8">
  <title> 百度一下，你就知道 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link type="text/css" rel="stylesheet" href="./css/baidu.css"></link>
 </head>

 <body>
  <div class="index">
        <div class="head">
            <div class="ul">
                <ul class="ul">
                    <li><a href="http://www.baidu.com/more/">更多产品</a></li>
                    <li><a href="http://www.baidu.com/gaoji/preferences.html">设置</a></li>
                    <li><a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F">登录</a></li>
                    <li><a href="http://tieba.baidu.com"><b>贴吧</b></a></li>
                    <li><a href="http://xueshu.baidu.com"><b>学术</b></a></li>
                    <li><a href="http://v.baidu.com"><b>视频</b></a></li>
                    <li><a href="http://map.baidu.com"><b>地图</b></a></li>
                    <li><a href="http://www.hao123.com"><b>好123</b></a></li>
                    <li><a href="http://news.baidu.com"><b>新闻</b></a></li>
                    <div class="clear"></div>
                </ul>
            </div>
        </div>

        <div class="img">
            <img src="./img/c1.png">
        </div>

        <div class="s-form">
            <div id="s-form">
                <form id="search" name="www.baidu.com" action="GET">
                    <span class="s-form-left">
                        <input id="input" type="text" name="f" value maxlength="255">

                        <span class="s-form-middle">
                            <img src="./img/c4.png">            
                        </span> 
                        <div class="clear"></div>
                    </span>

                    <span class="s-form-right">
                        <input id="sou" type="submit" value="百度一下" >
                    </span>

                    <div class="clear"></div>
                </form>
            </div>
        </div>

        <div class="qrcodeCon">
            <div class="qrcode">
                <div>
                    <img src="./img/c2.png">
                </div>

                <div class="qrcode-text">
                    <p><b>手机百度</b></p>
                </div>
            </div>

        </div>

        <div class="div-bottom">
            <div id="p-bottom">
                <p class="p-bottom">
                    <a  href="">把百度设为首页</a>
                    <a id="p-id" href="">关于百度</a></li>
                    <a id="p-id" href="">About Baidu</a>
                    <a id="p-id" href="">百度推广</a>
                </p>

                <p class="p-bottom">
                    @2017 Baidu
                    <a href="">使用百度前必读</a>
                    <a href="">意见反馈</a>
                    京ICP证030173号
                    <a id="p-id" href="">京公网安备11000002000001号</a>
                </p>
            </div>
        </div>
  </div>
 </body>
</html>

（2）CSS部分


.head{
}
.ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
.ul a{
    display:block;
    float:right;
    padding:10px 10px;
    color:#333;
}
.ul a:hover{
    color:blue;
}
.clear{
    clear:both;
}

.img{
    margin:0 auto;
    text-align:center;

}

.s-form{
    /*border:2px solid red;*/
}
#s-form{
    margin:auto auto;
    width:671px;
    height:37px;

}
#search{
    /*border:2px solid blue;*/
    margin:0 auto;
    width:642px;
    height:37px;
}
#search span{
    display:block;
    /*float:left;
    margin:auto auto;*/
}

.s-form-left{
    border:1px solid #6c6c6c;
    float:left;
    width:540px;
    height:36px;

}

.s-form-middle{
    /*display:block;*/
    float:right;
    margin-top:8px;
    margin-right:0;
}

.s-form-right{
    width:100px;
    height:38px;
    float:right;
}

#input{
    width:500px;
    height:22px;
    margin-top:4px;
    margin-left:5px;
    border:none;
    display:block;
    float:left;
}
#sou{
    background-color:#6a6aff;
    border:none;
    border-bottom:1px;
    width:100px;
    height:37px;
    color:#ffffff;
    /*display:block;*/
    width:100px;
    height:38px;
}
.qrcode{
    margin-top:200px;
}
.qrcode div{
    text-align:center;
}
#p-bottom{
    margin:0;
    padding:0;
}
.p-bottom{
    text-align:center;
    color:#8e8e8e;
    display:block;
    line-height:22px;
    margin:0;
    padding:0;
    font-size:14px;
}
.p-bottom a{
    color:#8e8e8e;
    font-size:14px;
}
#p-id{
    display:online-block;
    margin-left:25px;
}

2、尝试给CODING COFFEE加一波页面广告。（使用固定定位）

（1）html部分

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Coding Coffee</title>
  <link type="text/css" rel="stylesheet" href="./css/shop.css"> </link>
 </head>


 <body>
    <ul class="navigator">
        <li><a href="./html/list.html">产品列表</a></li>
        <li><a href="./html/shoplist.html">分店列表</a></li>
        <li><a href="./html/Join Us.html">欢迎加入我们</a></li>
        <li><a href="./html/order.html">网上预订</a></li>
        <div class="clear"></div>
    </ul>
    <div class="ad">
        <img src="./img/c10.jpg">
    </div>
    <div id="ad">
        <img src="./img/c11.jpg">
    </div>
    <div class="index">
        <h1 style="color:blue">欢迎光临Coding Coffee</h1>

        <img src="./img/c1.jpg">

        <p>敬请<span>关注</span>我们定期的<a href="./html/list.html">产品列表</a>，<br>

          <b>Coding Coffee</b>是一家只对<strong>程序员</strong>开放的<em>互联网咖啡馆</em>。

        </p>

        <p>
        请关注我们的<a href="./html/shoplist.html">分店列表</a>!
        </p>

        <p>网络招聘：<a href="./html/Join Us.html">欢迎加入我们！</a></p>

         <p><a href="./html/order.html">网上预定</a></p>
    </div>
 </body>
</html>

（2）CSS部分

        h1{
            color:yellow;font-size:60px;
            /*
            border:3px;
            border-style:solid;
            border-color:red;
            */
            margin:30px;
            padding:50px;
        }

        .navigator{     
            list-style-type:none;
            background-color:#333;
            margin:0px;
            padding:0px;
        }

        .navigator li a{
            display:block;
            float:left;
            padding:18px 18px;
            text-decoration:none;
            color:white;
        }

        li a:hover{
            background-color:#ccc;
        }

        .clear{
            clear:both;
        }

        .ad{
            position:fixed;
            left:50px;
            top:100px;
        }

        #ad{
            position:fixed;
            right:50px;
            top:100px;
        }

        div{
            text-align:center;
        }

        body{
            background-image:url('../img/c3.jpg');
            background-repeat:no-repeat;
            background-attachment:fixed;
            background-position:center center;
            background-size:100% 100%;
            /*background-color:#cccccc;*/
        }

        .index a:link{color:green;text-decoration:none;}
        .index a:visited{color:red;text-decoration:none}
        .index a:hover{color:yellow;text-decoration:underline;}
        .index a:active{color:blue;text-decoration:underline;}

3、学习心得

今天学习了盒子模型的边距和边框以及display属性，详细讲解了浮动和清除浮动，用position属性对元素进行设置定位类型，了解了四种position的属性值：static、fixed、relative、absolute。
自己尝试临摹百度网页，尝试不同的页面设计技巧，加强知识记忆，增强动手能力！