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. 为什么要用 ORM? 和 JDBC 有何不一样?

    orm是一种思想,就是把object转变成数据库中的记录,或者把数据库中的记录转变objecdt,我们可以用jdbc来实现这种思想,其实,如果我们的项目是严格按照oop方式编写的话,我们的jdbc程序 ...

  2. pandas-Notes2

    #coding = utf-8 import pandas as pd import numpy as np import matplotlib as plt dates = pd.date_rang ...

  3. 算法学习记录-查找——折半查找（Binary Search）

    以前有个游戏,一方写一个数字,另一方猜这个数字.比如0-100内一个数字,看谁猜中用的次数少. 这个里面用折半思想猜会大大减少次数. 步骤:(加入数字为9) 1.因为数字的范围是0-100,所以第一次 ...

  4. HDU 4738 双连通分量 Caocao's Bridges

    求权值最小的桥,考虑几种特殊情况: 图本身不连通,那么就不用派人去了 图的边双连通分量只有一个,答案是-1 桥的最小权值是0,但是也要派一个人过去 #include <iostream> ...

  5. 深入Python底层，谈谈内存管理机制

    说到内存管理,就先说一下垃圾回收吧.垃圾回收是Python,Java等语言管理内存的一种方式,说的直白些,就是清除无用的垃圾对象.C语言及C++中,需要通过malloc来进行内存的申请,通过free而 ...

  6. MongoDB学习-->Spring Data Mongodb框架之Repository

    application-dev.yml server: port: 8888 mongo: host: localhost port: 27017 timeout: 60000 db: mamabik ...

  7. Python ORM

    本章内容 ORM介绍 sqlalchemy安装 sqlalchemy基本使用 多外键关联 多对多关系 表结构设计作业 ORM介绍 如果写程序用pymysql和程序交互,那是不是要写原生sql语句.如果 ...

  8. Leetcode 423.从英文中重建数字

    从英文中重建数字 给定一个非空字符串,其中包含字母顺序打乱的英文单词表示的数字0-9.按升序输出原始的数字. 注意: 输入只包含小写英文字母. 输入保证合法并可以转换为原始的数字,这意味着像 &quo ...

  9. 【瓜分5000元奖金】Wannafly挑战赛13

    链接:https://www.nowcoder.com/acm/contest/80/A来源:牛客网 zzy的小号 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他 ...

  10. poj1985&&第四次CCF软件认证第4题 求树的直径

    Cow Marathon Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 4216   Accepted: 2137 Case ...