A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

段国庆

初级黑马

  • 黑马币:22

  • 帖子:7

  • 精华:0

[学习交流] 技术贴

© 段国庆 初级黑马   /  2019-6-8 17:57  /  663 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

写静态页面首先就是要分析一下页面的布局,只有分析清楚了布局写的时候才能顺利的写出页面。布局分析无非就是看页面可分为多少个盒子(div),理清盒子与盒子之间的关系。
html的结构是必不可少的
<html>
      <head>
                <title>标题</tilte>
      </head>
      <body>
              网页主体内容
      </body>
</html>
盒子模型组成
    内容:  实体化宽高和里面的文字图片等等
     边框  border
  内边距:   padding   拉开内容到盒子边缘的距离;
  外边距   margin    拉开盒子与盒子之间的距离;
浮动:
浮动布局的原理应用 让元素脱离文档流,进行页面效果的布局;
作用:
让多个盒子水平排列一行显示实现网页布局,盒子左右对齐,最早是用来实现文字环绕文字;
属性:float取值:left  right  none(不浮动默认就是)  浮动的特点浮:浮动之后的元素脱离了标准流; 漏:盒子浮动之后脱离的标准流原来的位置就空了,下面的盒子会补上来1、浮动之后的盒子的显示模式会更改为行内块元素的特点;2、浮动之后的元素之间的没有缝隙的,紧贴在一起,顶部对齐;
3、如果父级盒子不够宽装不下浮动的盒子,盒子会掉下来另起一行;
浮动和定位能防止外边距合并
如果盒子有嵌套关系,给子级添加了margin-top就会出现外边距塌陷,但是如果用了浮动或者绝对定位和固定定位,就不会出现这样的问题;
清除浮动的方法:额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法;
after伪元素法
/*声明清除浮动的样式*/
.clearfix:after {
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
  }
.clearfix {
     *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}
双伪元素清除浮动
/*声明清除浮动的样式*/
.clearfix:before ,.clearfix:after {
        content: "";
        display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
             *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}
谁里面有浮动就在谁的开始标签身上添加class=clearfix
定位属性:position 取值不同实现的效果不同,如下:
静态定位position:static;
相对定位position:relative;
绝对定位position:absolute;
固定定位position:fixed;
overflow溢出隐藏
• overflow:hideen; 溢出隐藏,将超出固定宽高范围内的内容隐藏起来,不是删除了;
• overflow:scroll; 显示横向和竖向的滚动条显示(不用);
• overflow:auto;溢出滚动, 将超出固定宽高范围的内容以滚动条的形式显示(不用);
用户界面-鼠标样式
鼠标样式:cursor
小白(默认) cursor:default;
小手: cursor:pointer;
移动: cursor:move;
文本: cursor:text;
禁止: cursor:not-allowed;
css实现三角形效果
第一步 ,设置盒子的宽度高度为0
第二步,设置边框的宽度粗细border-width,最终显示为三角形
边框的线条样式 border-style
第三步,设置边框的颜色 border-color,4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了;
第四步为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马