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. Manjaro 添加国内源和安装搜狗输入法

    Manjaro 系统虽然比 Ubuntu 用着稳定,但有些小地方没有 Ubuntu 人性化,比如默认安装完的系统貌似没有中国的,Ubuntu 估计是用的人多,所以安装完后会根据所在地给你配置更新的源. ...

  2. drf分页器

    drf分页器 1.第一种分页: 类似于django中的分页 2.第二种分页: 偏移分页 3.第三种分页: 加密分页(查询速度快) 无法跳跃 基本参数 from rest_framework.pagin ...

  3. POJ：2060-Taxi Cab Scheme（最小路径覆盖）

    传送门:http://poj.org/problem?id=2060 Taxi Cab Scheme Time Limit: 1000MS Memory Limit: 30000K Total Sub ...

  4. BZOJ 4479: [Jsoi2013]吃货jyy

    一句话题意:求必须包含某K条边的回路(回到1),使得总权值最小 转化为权值最小的联通的偶点 令F[i]表示联通状态为i的最小权值,(3^n状压)表示不在联通块内/奇点/偶点,连边时先不考虑必选的边的度 ...

  5. Python选修课第二届Turtle绘图大赛~~画猫猫

    (a)20161401167 夏思敏 20161401179 段梦格 (b)代码执行视频链接 点击查看:Python使用turtle库画猫猫 (c)程序源码 import turtle turtle. ...

  6. executing an update/delete query问题

    是因为在做SpringDataJpa更新和删除操作的时候Repository层没有加事务的注解,加上就行了: @Transactional @Query(value = "update ms ...

  7. luogu2763 试题库问题

    倘若某个试题已经被选到某个类型里了,那么它就不可再被选进别的类型了. 所以,对于每个类型,我们将其与汇连边,权值是它的要求的题目数量. 对于每个题目,我们将源与其连边,权值是1,代表只能用一次.然后再 ...

  8. Leetcode4--->求两个排序数组的中位数

    题目:给定两个排序数组,求两个排序数组的中位数,要求时间复杂度为O(log(m+n)) 举例: Example 1: nums1 = [1, 3] nums2 = [2] The median is ...

  9. python之路 --- python基础

    一.python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...

  10. Django--------问题：在terminal命令行创建超级用户时入到password时输入为什么没有反应？

    首先如果遇到这样的问题不用担心,一般一会儿就可以解决: 其实,输入的时候并不是没有反应,只是你输入的时候命令行没有将你的输入显示出来,关键是输入行对Password:********也不是采用这种方式 ...