15.布局流程

一、确定页面的版心;

二、确定页面中的行模块,以及每个页面中的列模块

三、制作HTML结构

例:.top+.banner+(.main>.left+.right)+.footer

高度剩余法:高度直接设置成-想用的margin的值,就能省略margin

16.消除浮动

<div class="fat">

    <div class="big"></div>

    <div class="son"></div>

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

</div>

这种情况-父标签不给高度,在子标签均浮动时,浮动流的特点就显现出来,

浮在了页面的上面,此时父标签就成了一条线

清除浮动的本质:解决父级元素因为子级浮动引起内部高度为0的问题.

一、额外标签法:

最后一个浮动标签的后面,新添加一个标签,清除浮动,父标签自动检测子标签的高度,以最高的为准

二、overflow: hidden;在父标签中添加这一句,意为:让父级管好子级

不是所有浮动都要消除,谁影响布局,就消除谁.

三、伪元素清除浮动,写一个clearfix的类,哪个盒子需要清除,就把这个类加到其类之中

.clearfix:after{

	content: "";

	display: block;

	height: 0;

	clear: both;

	visibility: hidden;

}

.clearfix{

	*zoom: 1;

}

四、双伪元素清除

.clearfix:before,.clearfix:after{

	content: "";

	display: table;

}

.clearfix:after{

	clear: both;

}

.clearfix{

	*zoom: 1;

}

17.定位

定位属性主要包括定位模式和边偏移,定位模式:static、relative、absolute、fixd

一、相对定位特点:

1.可以通过边偏移量移动位置,但原来所占的位置,继续占有

2.每次移动位置,都是以自己的左上角为基点移动

二、绝对定位特点(不占位置):

1.若所有父元素没有定位,以浏览器当前屏幕为准

2.若父元素有定位,则按照最近的已经定位的父元素为准

三、子绝父相

子元素是绝对定位,父元素是相对定位,例如:浮在兄弟标签上的三角,

如果给它相对定位,它就会占位置,就不能浮在其它上面;

父元素如果给绝对定位,因为它不占位置了,所以下面的盒子会浮上来.

所以大多情况下用子绝父相.

四、答疑解惑

1.浮动不能超过内边距
2.上下两张图片,上面那张float:left,下面那张上不去,所以浮动不是
完全脱标,绝对定位是完整意义的脱标
3.加了定位或者浮动的盒子,margin就会失效

4.引入ico图标-不是字体也不是图片,放到head标签中.

www.jd.com/favicon.ico

<link rel="shortcut icon" href="favicon.ico">  网站是这么写

django里这么写(用png显得不专业):

<link rel="apple-touch-icon" sizes="76x76"

href={% static "img/apple-icon.png" %}>

5.导航栏中不同a标签之间的竖线可以用一个宽1px高10px的li标签做.

logo部分的文字比较重要,不能删掉,让其移出去然后切掉

<div class="logo">

	<h1>

		<a href="#" title="京东网">京东</a>

	</h1>

</div>

text-indent:-9999px;overflow:hidden;

行内块元素之间有缝隙,用float可以消除

五、绝对定位的盒子水平/垂直居中
1.首先left50%,走到父盒子的一半大小;
2.然后走自己外边距负的一般值,margin-left
六、固定定位:fixd
1.是特殊的绝对定位,完全脱标,不占位置,不跟着滚动条滚动
2.固定定位的元素跟父标签没有关系,只认浏览器
3.定位模式转换:跟浮动一样,元素添加了绝对定位和固定定位之后,
元素模式也会发生转换,都转换为行内块元素,行内块的宽度和高度跟内容有关,
相对定位则没发生模式转换,背景图片在css中.
七、z-index
1.z-index默认属性是0,取值越大,定位元素在层叠元素中越居上;
2.取值相同,则根据书写顺序,后来居上,后面不能加单位;
3.只有相对定位、绝对定位、固定定位有此属性,其余标准流、浮动
静态定位都无此属性,也不能指定此属性.
例子:

div {

	width: 200px;

	height: 300px;

	border: 1px solid #ccc;

	float: left;

	margin-left: -1px;

}

div:hover{

	border: 1px solid #f40;

	position: relative;

}

相对定位比标准流高一级,浮在上面;但这种方式是:鼠标放在上面之后才变成相对定位,
但当div中有一层覆盖另一层时,div就需要有relative,这就需要用到z-index,

div {

	width: 200px;

	height: 300px;

	border: 1px solid #ccc;

	float: left;

	margin-left: -1px;

	position: relative;

}

div:hover{

	border: 1px solid #f40;

	z-index: 1;

}

子标签浮动-父标签清除浮动,子标签绝对定位-父标签相对定位

18.其他
一、display-显示
display:none-隐藏某个元素;display:block-显示某个元素
隐藏之后不再保留位置
二、visibility-可见性
visible:对象可视;hidden:对象隐藏
隐藏之后,继续保留原有位置.
土豆案例:
鼠标经过a,然后a里面的mask就显示出来,所以用后代选择器

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        a{

            display: block;

            width: 376px;

            height: 319px;

            margin: 100px;

            position: relative;

        }

        .mask{

            width: 100%;

            height: 100%;

            background: rgba(0,0,0,0.4) url("../image/arr.png") no-repeat center;

            position: absolute;

            top: 0;

            left: 0;

            display: none;

        }

        a:hover .mask{

            display: block;

        }

    </style>

</head>

<body>

    <a href="#">

        <img src="../image/tudou.png" height="319" width="376">

        <div class="mask"></div>

    </a>

</body>

土豆视频

三、overflow
visible:不剪切内容也不添加滚动条;hidden:溢出隐藏,不显示超出部分
scroll:总是显示滚动条;auto:在需要时剪切内容并添加滚动条
19.用户界面样式
一、cursor-鼠标样式

<ul>

	<li style="cursor: default">默认</li>

	<li style="cursor: pointer">小手</li>

	<li style="cursor: move">移动</li>

	<li style="cursor: text">文本</li>

</ul>

二、消除轮廓线
input{outline:none}
一个input搜索框一般这么做:

input{

	outline: none;

	border: 1px solid #ccc;

	width: 200px;

	height: 25px;

	background: url("../image/arr.png") no-repeat 20px center;

}

三、文本域防拖拽
textarea{resize: none;}
四、解决图片底部有缝隙问题
给img:middle|top等,让图片不要和基线对齐
img{vertical-align: middle;border: 0;}
转换为块级元素可以:img{display: block;border: 0;}
vertical-align只针对行内元素或者行内块元素,特别是行内块元素,
通常用来控制图片/表单与文字的对齐
五、溢出的文字隐藏
white-space设置文本显示方式
normal:默认处理方式;
nowrap:强制同一行内显示所有文本,知道文本结束或br标签才换行
overflow: hidden
text-overflow: ellipsis;溢出的部分用省略号代替
想实现这种效果必须有这三句话
20.精灵技术
一、CSS精灵是一种处理网页背景图像的方式,把多个小背景图整合到一张大图中,
其目的是减少服务器请求次数,提高页面的加载速度.
使用background-position属性精确定位
例子:

span{

	display: inline-block;

	background: url("../image/tudou.png") no-repeat;

}

.aa{

	width: 110px;

	height: 120px;

	background-position: -363px -8px;

}

二、滑动门例子:
a包着span,精灵图左边给a标签,右边给span,内容在span中

<style>

    .nav li{

    }

    .nav a{

        height: 33px;

        line-height: 33px;

        color: #fff;

        text-decoration: none;

        display: inline-block;

        background: url("../image/arr.png") no-repeat;

        padding-left: 15px;

    }

    .nav span{

        display: inline-block;

        height: 33px;

        background: url("../image/arr.png") no-repeat right;

        padding-right: 15px;

    }

    .nav a:hover, .nav a:hover span{

        background-image: url("../image/ao.png");

    }

</style>

</head>

<body>

<div class="nav">

    <ul>

        <li>

            <a href="#">

                <span>首页</span>

            </a>

        </li>

        <li>

            <a href="#">

                <span>新闻客户端</span>

            </a>

        </li>

    </ul>

</div>

</body>

样式最后一行的意思是:只替换图片,之后的属性不替换.

滑动门

css查缺补漏2的更多相关文章

  1. CSS查缺补漏篇

    前面的话:关于CSS,之前我已经做过一些基础的知识点介绍.CSS主要是用来给页面设置样式的,一般说来,在一个网站中,CSS应该独立封装在一个单独的.css外部文件中.样式的设置总体来说是不难的,但是需 ...

  2. HTML和CSS查缺补漏

    margin的问题: 1.margin-top向上传递 解决:1.父元素border边框,2.父元素使用overflow:hidden 3.为父元素或者子元素声明绝对定位,4.为父元素或者子元素声明浮 ...

  3. css查缺补漏1

    css可以写在哪里 1.和要装饰的标签写在一起 2.内部样式表(内嵌式)是写在head头部标签中,并且用style标签定义 3.外部样式表(外链式) <head><link rel= ...

  4. 「查缺补漏」巩固你的Nginx知识体系

    Nginx篇 基本介绍 Nginx是一款轻量级的 Web服务器 / 反向代理服务器 / 电子邮件(IMAP/POP3)代理服务器,主要的优点是: 支持高并发连接,尤其是静态界面,官方测试Nginx能够 ...

  5. Android查缺补漏--Activity生命周期和启动模式

    一.生命周期 onCreate():启动Activity时,首次创建Activity时回调. onRestart():再次启动Activity时回调. onStart():首次启动Activity时在 ...

  6. Android查缺补漏--BroadcastReceiver的类型与使用

    Broadcast 是一种被用于应用内和应用之间传递信息的机制.一个广播可以对应多个接受者.一个完整的广播机制,需要具有以下三个要素: 发送广播的Broadcast 接受广播的BroadcastRec ...

  7. Android查缺补漏（View篇）--在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0？

    在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0 ? @Override protected void onCreate(Bundle savedInstanc ...

  8. Android查缺补漏--ContentProvider的使用

    ContentProvider (内容提供者)是一种共享型组件,可以为系统内应用于与应用之间提供访问接口. ContentProvide要想正常工作需要三个关键点: ContentProvider:对 ...

  9. Android查缺补漏--Service和IntentService

    Service的运行不依赖界面,即使程序被切换到后台,Service仍然能够保持正常运行.当某个应用程序进程被杀掉时,所有依赖于该进程的Service也会停止运行. Service 分为启动状态和绑定 ...

随机推荐

  1. and和or运算

    and和or的运算,从前向后按顺序计算,当True结果遇到or就停止,返回True:当False结果遇到and就停止,返回False:False遇到or,继续走:True遇到and,继续走. > ...

  2. 关于stm32优先级大小的理解

    转载自:https://www.cnblogs.com/ZKeJun/p/6112591.html 一. 组别:0>1>2>3>4   组别优先顺序(第0组优先级最强,第4组优 ...

  3. stm32L0系列学习（一）

    开发用到的具体芯片是stm32L011F3 stm32L0总体特性,定位: 可见容量是比较少的,功耗很低,adc12位,7种低功耗模式 jlink和sdk的引脚关系图: HAL的库框图 官方给出的HA ...

  4. debian 7 stable 不能编译android源码

    rebuilts/gcc/linux-x86/arm/arm-linux-androideabi-4.8-linaro/bin/arm-linux-androideabi-gcc: /lib/x86_ ...

  5. BZOJ 3590: [Snoi2013]Quare

    首先有一个性质,一个双联通图一定可以拆成一个小的双联通子图和一条链 一个点可以视为权值为0的双联通图或者一个点的链 状压DP,枚举子集 O(3^n*n^2) #include<cstdio> ...

  6. js 常用判断

    JS三元运算符 三元运算符: 如名字表示的三元运算符需要三个操作数. 语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2.满足条件时结果 ...

  7. 智能DNS解析之edns-client-subnet篇

    摘要:智能DNS解析是CDN的重要组成部份,所谓的智能也就是根据请求用户来对同一域名作出相应不同解析(目前大多数域名注册商还没提供线路解析的服务),所以CDN的调度准确性也就完全依靠DNS智能解析,但 ...

  8. 前端 五——ajax

    内容概要: 1.ajax的特点 2.基于JS的ajax 3.基于jQuery的ajax 1.特点: 局部刷新 异步传送(交互) 缺点: (1)无形中向服务器发送的请求次数太多,导致服务器压力增大. ( ...

  9. luogu2114 [NOI2014]起床困难综合症

    大约是第一次做近几年NOI题(尽管是签到题)? 制作一个真值表,要是有哪一位原本是0但是能变成1那真是太好啦,要是有哪一位原来是1能变成1并且算上它不会超过m那也不错. #include <io ...

  10. 初试webpack打包

    第一次接触webpack,学习了如何用webpack打包,记录一下过程. 1.在项目根目录安装webpack $ npm install webpack --save-dev 2.新建一个webpac ...