【css学习_css布局案例】的更多相关文章

css学习_css布局案例

1.中间栏先加载  !!!(若不是这个条件的话  ,那可以用  calc 或者flex布局来实现  中间栏自适应,左右栏定宽) 2.中间栏自适应   width:100% 3.左右栏固定宽 左中右  浮动  (本来应该在一行显示的,但是中间栏宽100% ,所以左右会掉下来,此时就需要设置margin-left) 左margin-left:-100% 右 margin-left:  200px(自身宽) 父元素设置padding: 0  200px  (父元素不能右宽100%,保证左右留200给左…

css学习_css浮动

1.文档流介绍 网页布局的核心就是利用css来摆放盒子, 把盒子摆放在合适的位置. css的定位机制有以下3种(网页布局一般需要3种搭配使用): a.普通流(标准流) b.浮动 1.浮动只有左右. 2.浮动后找离他最近的父元素靠左/右对齐. 3.!!!一个父盒子里的子盒子,如果其中一个子元素有浮动的话,则其他子元素都需要浮动,这样才能一行显示. 4.浮动飘在标准流的上面,压住标准流. 5.浮动元素有哪些特性?(浮动影响盒子显示模式) 1.块级元素浮动后会有行内块特性 2.行内元素浮动后也具有行内…

css学习_css补充知识

1.渐进增强,优雅降级 2.浏览器前缀 3.背景渐变   4.css  验证工具 2种方式:第2种支持验证本地的css(推荐) 5.css压缩  ----(节约空间,节省带宽) 6.旋转轮播图 案例: 注意: 1.3d  旋转      3d 的translateZ 2.子盒子要一般要写transform-style属性 更有3d效果 3.过渡做动画 4.父元素透视属性  有3d效果…

css学习_css盒模型及应用

1.看透网页布局的本质 2.盒模型 margin.border.padding.width.height a. border: 1px solid red                (solid/dashed/dotted/double) 案例:table表格中  合并边框的写法 table {border-collapse:collapse} 案例:圆角边框(css3) border-radius:5px:(4个角都是5px,最大是变成一个圆) b.padding(内边距) padding…

CSS：绝对定位布局案例 position布局实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>绝对定位</title> <style type="text/css"> @charset "utf-8"; /* DIVCSS5-CSS初始化 */ body, div, ul, li,h3{margin:0; padding:0;font…

CSS学习摘要-布局

注:全文摘自MDN-介绍CSS布局 CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流.周边元素.父容器或者主视口/窗口的位置.在这个模块中将涉及更多关于页面布局技术的细节: 浮动 定位 CSS 表格 弹性盒子 网格 每种技术都有它们的用途,各有优缺点. 正常布局流 正常布局流是指在不对页面进行任何布局控制时,浏览器默认的HTML布局方式.让我们快速地看一个HTML的例子: <p>I love my cat.</p> <ul> <li>B…

css的网页布局案例

常见行布局: 导航使用position:fixed固定住 导航会脱离文档流,不占据空间 导致下面的元素上移,因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0;…

css学习_css伪元素的本质

1.伪元素的本质(插入了一个元素(行内元素/标签/盒子) 案例1: 案例2:…

css学习_css精灵技术、字体图标

1.精灵技术产生的背景(减少向服务器请求的次数,减小服务器压力) 2.精灵技术的本质(小的背景图集中在一张大图上) 3.精灵技术的使用 案例1: 案例2: 注意:产品类的图片一般不是用背景,而是用img标签 案例3: 4.字体图标---比精灵图标更占优势 字体图标使用流程(如果前2步不需要,可以直接从第3步开始) 推荐转换网站 如何下载字体图标(压缩包一定不要丢.把压缩包里的fonts文件放在自己的项目中) 使用步骤 注意fonts路径问题,别放错了. 如何追加新图标到原来的库里面?…

css学习_css用户界面样式

1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: outline:0/none(取消轮廓线) c.防止拖拽文本域 textarea{resize:none:} d.背景图片和背景颜色一起出现时,背景颜色在最底层. e.行内块和文字对齐 vertical-align  对块级元素不起作用 图片和文字默认基线对齐 f.去除图片底侧空白缝隙 g. 溢出的…