前情回顾

1、前期准备

2、html基础

3、css基本选择器

/css样式语法/
选择器{
css样式名称:值;
}

今日内容

1、css常用属性

  1. 文本
  2. 字体
  3. 颜色

  4. 背景

    1. <div id="box">
    2.         css常用属性
    3. </div>
    1. #box{
    2. /*a  文本*/
    3. /*text-align: center;*/
    4. text-indent: 2em;
    5. /*text-decoration: underline;*/
    6. text-decoration: line-through;
    8. /*b   字体*/
    9. font-size: 50px;
    10. font-family: "楷体";
    11. font-weight: bold;
    12. font-style:italic;
    14. /*c   颜色*/
    15. /*color: #008000;*/
    16. color: rgb(255,0,0);
    17. /*css属性来自 设计稿*/
    19. /*d   背景*/
    20. /*background: orange url("img/taohua2.jpg");*/
    21. /*background: orange url("img/taohua2.jpg") repeat-x;*/
    22. /*background: orange url("img/taohua2.jpg") repeat-y;*/
    23. background: orange url("img/taohua2.jpg") no-repeat;
    24. /*background-size: 100%,100%;*/
    25. background-size: 10%,10%;
    27. /*盒子模型*/
    28. width:300px;
    29. height: 400px;
    30. }

    2、盒子模型

    盒子模型.png
    把每个标签看成一个盒子，都有下面5个属性。网页的布局，排版就是由一个个标签组成的，也就是一个个盒子组成。通过下面5个属性，就可以设置每个盒子(标签)的 宽，高，内边距，外边距，边框。

  5. 宽

  6. 高
  7. 内边距:内容与边框的距离
  8. 外边距:盒子之间的距离

  9. 边框

    1. #box {
    2. width: 70px;
    3. margin: 10px;
    4. padding: 5px;
    5. }

    image.png

    3、布局-浮动

    改变元素布局的一种方式，默认块级元素会独占一行(不会换行)，要让块级元素水平排列，可以使用浮动，同时会脱离文档流，不占文档位置（会飘起来）。
    常见块元素：div,p,h1-h6,ul li,ol li,dl dt dd,table,form
    布局11.jpg ```html

  1. <a name="b4WcJ"></a>
  2. ### 4、布局-定位
  3. 改变元素位置，布局的一种方案，适合复杂布局，让一个元素在另一个元素上，不占文档位置。<br />![布局13.png](https://cdn.nlark.com/yuque/0/2022/png/575742/1646381515356-cdff5901-2eb4-43e8-a956-1e9050941c9e.png#clientId=u1319279e-05e5-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=uafd2c54a&margin=%5Bobject%20Object%5D&name=%E5%B8%83%E5%B1%8013.png&originHeight=768&originWidth=1024&originalType=binary&ratio=1&rotation=0&showTitle=false&size=6307&status=done&style=none&taskId=u77c72235-68c6-4740-891d-56a7e39b5d4&title=)
  4. ```html
  5. <style type="text/css">
  6.   *{padding:0;margin: 0;}
  7.   body{
  8.     /*整个给背景*/
  9.     background:#FEBE4F;
  10.   }
  12.   #nav{
  13.     height: 50px;
  14.     background-color: #C79DFF;
  15.     width: 100%;
  16.     margin:50px 0;
  17.     /*给一个定位属性，作为里面被包含的元素 定位的  参考点*/
  18.     position: relative;
  19.   }
  21.   #nav div{
  22.     width: 200px;
  23.     height: 80px;
  24.     background: #82FF26;
  25.     /*参考最近的父元素(标签) 进行绝对定位*/
  26.     position: absolute;
  27.     /*父元素是50，当前元素是80，往上走-15相信刚好垂直居中*/
  28.     top:-15px;
  29.     left: 30px;
  30.   }
  32.   .wrap{
  33.     height: 480px;
  34.     width: 1200px;
  35.     /*background: darkorange;*/
  36.     margin:0 auto;
  37.   }
  39.   /*left,right 是div标签，是块元素，默认会垂直排列，所以要使用浮动让水平排列*/
  40.   .wrap .left{
  41.     width: 590px;
  42.     /*里面 3个 item 每个height:150px，在加上 前2个item 又
  43.     下边距12px*/
  44.     /*150*3 + 2*15 = 480*/
  45.     height: 480px;
  46.     float:left;
  47.     /*background-color: #FF005A;*/
  48.     /*background-color: green;*/
  49.   }
  51.   .wrap .left .item{
  52.     width: 100%;
  53.     height: 150px;
  54.     background: #FF005A;
  55.     margin-bottom: 15px;
  56.   }
  58.   /*去掉最后一个的 下边距*/
  59.   .wrap .left .item:last-child{
  60.     margin-bottom: 0;
  61.   }
  63.   .wrap .right{
  64.     width: 590px;
  65.     height: 480px;
  66.     float:right;
  67.     background-color: #3494FF;
  68.   }
  70.   #footer{
  71.     /*满屏:宽度为100%*/
  72.     width: 100%;
  73.     height: 80px;
  74.     background:#E60BFF;
  75.     margin-top: 30px;
  76.   }
  77. </style>
  79. <div id="nav">
  80.   <div></div>
  81. </div>
  83. <div class="wrap">
  84.   <div class="left">
  85.     <div class="item"></div>
  86.     <div class="item"></div>
  87.     <div class="item"></div>
  88.   </div>
  89.   <div class="right"></div>
  90. </div>
  92. <div id="footer"></div>

5、练习

1、演示代码

  • day02 中演示代码
  • 下图效果图实现

image.png
素材：
arrow_rb.jpg
p3.pngp1.pngp2.png

2、博雅互动布局实现（选做）

博雅.png