HTML 三

【定位:】

1,如果盒子加了定位,默认后写的div在上面

2,z-index:1----叠放次序  值越大越在上面。默认值是0

3,dw里面如果定位,插入---布局对象--apdiv它的名字我们一般叫做层

【上合网底部】

1,background:#2d2d2d url(../images/footer-bg.png) repeat-x;背景图和背景色同时放在一起的写法

2,背景色   背景图  平铺   定位   固定定位

3,高度剩余法,这个效果在网站里面很常用,就不用内边距或者外边距也能控制文字之间的距离

需求:从1输出到100

【关于隐藏的问题】

1,overflow:hidden;-----裁剪多余的部分

2,visibility:hidden;---隐藏对象,它就是真正的把我们的盒子给隐藏了。

3,display:none;-----隐藏,在js里面用的特别的多,不占位隐藏

【css精灵---雪碧图】----为了减轻服务器的压力

1,css精灵,即CSS Sprite,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
    2,css精灵图必须是背景图,一般在200k左右

3,css精灵图一般是透明的png格式的图片

4,它以浏览器左上角为原点,0,0坐标    background-position:负值

【*****绝对定位】

1,position:absolute;----如果是行内元素有宽和高,只要加了绝对定位就不再用转换了。一般我们都要display:block    转换下,现在就可以不转换了

【*****浮动】

1,float浮动------如果是行内元素有宽和高,只要加了浮动就不用转换了,一般我们都要display:block    转换下,现在就可以不转换了

【ps如何制作精灵图】

1,首先精灵图一定要透明,大小一般以那个最大的精灵图来计算。
    2,相同类别的图片放在一起,不是你想怎么放就怎么放。
    3,每张图片间隔一般5个像素左右
    4,文件另存为psd格式,方便以后改动
    5,存储为WEB的格式  ---》PNG24的

【优化上合用css精灵】

1,fw可以直接打开ps的源文件格式psd的文件,打开只有锁定你的图层文件,防止一不小心碰了一下错位了。

【fw制作精灵图】

1,文件--新建---选择透明、或者先用白色画布,然后选择下面的画布把颜色去掉就可以了

2,ctrl+r---导入图片,当光标出现三角的时候直接点击就可以了

3,先让图片对齐

4,图片可以让他符合画布自动排列

*****平铺1个像素的精灵图一定是1个像素的宽,一定是垂直做的,从上往下排列。

【IE6的双倍边距问题】

1,最难调兼容的就是IE6,最稳定的最安全就是火狐浏览器

*****经典的IE6双倍边距问题,一旦盒子有了浮动并且还有外边距(left/right)那么在IE6下面一定会出现双倍边距

测IE6点击刷新下面的强制刷新(清除缓存)

_display:inline;---IE6的专用属性,解决IE6的双倍边距

2,【谷歌文本框出现边框的bug】

解决办法: outline:none;-----解决input出现边框的问题

3,【图片链接的bug】

解决办法:img{ border:none;}和img{ border:0;}-----都行--加了链接出现边框的bug

4,【图片缝隙的bug,如果链接里面有很多图片】
        <div>
            <a href="#">
            <img src="images/banner.png" width="980" height="597" />
            <img src="images/banner.png" width="980" height="597" />
            <img src="images/banner.png" width="980" height="597" />
            </a>
        </div>-----这样的结构图片下面就会出现5个像素左右的缝隙

****如果你就算不换行写图片,在IE6下面也会出现5个像素左右的bug

解决办法:

1):可以直接给图片加高度height:597px;和 overflow:hidden;  直接减去多余的高度

2):图片img是行内元素  然后要把它转换为display:block;---这个就解决了图片下面出现5个像素的bug

【滑动门事件】

1,导航图片是圆角,两边图片不一样,中间是一个图片的效果。滑动门一般都用在导航上面。也有可能用在table栏上面。

【如果是两张图】

*****左面一个圆角,剩下的都是右面的

*****背景图不能给宽度

【模板】

1,制作网页的公用文件的方法就叫做模板

作用:模板的好处可以一次性更新很多页面,页面越多越能显示模板的重要性。

步骤:

1)制作公用文件,但是不保存

2)插入可编辑区域---一直确定,第二行英文删掉

3)文件另存为模板

4)调用模板---点击更多----模板中的页----创建

5)更新模板

*****第一:模板的扩展名是.dwt,它会生成一个Templates的模板文件夹

【导航优化】

1,ctrl+shift+g---取消组合

2,ctrl+g---组合

3,网站导航  首页是静态的。后面频道、文字、列表都是动态的

4,高度剩余法

【淘宝网开始】

1,在线淘宝网

2,一般把一些相关性的代码会放在一个盒子里面

3,!important--权重最高

4,ctrl+alt+0----平铺整个画布

5,.hhs:hover----这个IE6不兼容

6,.site-nav-hd .hhs a:hover .hs-----这个是兼容IE6的

【ico小图标】

1,网站域名后面加favicon.ico-----获取它的ico小图标

2,http://www.ico.la----在线制作ico小图标

3,一般这个图尽量用logo,网站用的ico图标大小16*16
    4,桌面的ico小图标一般大小是32*32的

5,<link rel="shortcut icon" href="favicon.ico">---链接ico小图标

【利用浮动调滑动门bug】

1,如果盒子大小被撑开了,就加float:left;

2,淘宝logo优化的第二种方法

【滚动文字标签】

1,<marquee></marquee>---滚动标签

2,direction---滚动方向(left/right/up/down---左右上下)

3,scrollamount="100"---滚动速度---值越大越快,越小越慢。默认值2---3

4,鼠标事件:onmouseover="this.stop()---鼠标经过onmouseover  this--自身

5,onmouseout="this.start()"---鼠标离开onmouseout

6,behavior--》滚动文字的方式3种behavior="alternate--来回滚动"、scroll--一圈一圈的走、slide----只走一次停在页面。
    7,loop---控制文字滚动次数,-1代表无数次,2滚动两次

8,scrolldelay------滚动延迟

时间: 2024-10-06 22:15:06

HTML 三的相关文章

angularJs中关于ng-class的三种使用方式说明

在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组 第三种:通过key/value 下面简单说下这三种: 第一种:通过数据的双向绑定 实现方式: function changeClass(){   $scope.className = "change2"; } <div clas

三百六十度全景图如何拍摄?

三百六十度全景图如何拍摄?随着全景技术的发展,全景拍摄也成为了一种十分新潮的摄影方式.全景摄影也有很多学问,而且随着全景照片的用途越来越多,拍摄全景的设备也越来越多.今天我们就介绍几种十分另类的360全景图拍摄方法,这些酷雷曼360全景图拍摄方法让你大开眼界. 工具/原料 相机 鱼眼镜头 云台 三角支架 方法/步骤 1 吊锤辅助360全景图拍摄方法 吊线保证拍摄时相机以节点旋转,使用吊线进行全景拍摄线不要太长,50CM以内比较容易控制,有时也到一米多在胸口位置进行拍摄,重锤容易晃动,很难对准.吊

关于SVM数学细节逻辑的个人理解(三) :SMO算法理解

第三部分:SMO算法的个人理解 接下来的这部分我觉得是最难理解的?而且计算也是最难得,就是SMO算法. SMO算法就是帮助我们求解: s.t.   这个优化问题的. 虽然这个优化问题只剩下了α这一个变量,但是别忘了α是一个向量,有m个αi等着我们去优化,所以还是很麻烦,所以大神提出了SMO算法来解决这个优化问题. 关于SMO最好的资料还是论文<Sequential Minimal Optimization A Fast Algorithm for Training Support Vector

三件软件作品评价

先交代三件软件作品的相关资料.   软件一 软件二 软件三 软件名称 蜗牛词典APP 24点小游戏APP 物理实验网站 学校 2017集美大学1412软工实践  集美大学1411 北京航天航空大学计算机学院 团队名称 SNS1412 hexagon 软剑攻城队 团队博客地址 http://www.cnblogs.com/jmu-sns/ http://www.cnblogs.com/24app/ http://www.cnblogs.com/buaase/ Git地址 https://codin

MVC4 自定义错误页面(三)

一.概述 MVC4框架自带了定义错误页,该页面位于Shared/Error,该页面能够显示系统未能捕获的异常,如何才能使用该页面: 二.使用步骤: 1.配置WebConfig文件,在System.Web节点下加上 <customErrors mode="On"  defaultRedirect="~/Shared/Error" /> 翻阅一些大神写的博客,在他们的博客中指出defaultRedirect是指向错误页面的URL,可是经过本人测试的时候,发现

Django(三) ORM 数据库操作

比较有用 转自 http://blog.csdn.net/fgf00/article/details/53678205 一.DjangoORM 创建基本类型及生成数据库表结构 1.简介 2.创建数据库 表结构 二.Django ORM基本增删改查 1.表数据增删改查 2.表结构修改 三.Django ORM 字段类型 1.字段类型介绍 2.字段参数介绍 3.Django ORM 外键操作 一.DjangoORM 创建基本类型及生成数据库表结构 1.简介 ORM:关系对象映射.定义一个类自动生成数

微信 小程序布局 左右三区块

/* 3三区块部分 *************/ .wear-diamonds{ display: flex; width: 100%; height: 300rpx; } .wear-diamonds>view{ width: 50%; height:100%; border: 1px solid black; } .diamonds-right>view{ width: 100%; height: 50%; border: 1px solid #000; } //-------------

Redis实战(三)Redis主从复制

从架构 1.主从架构图 2.通过命令 mkdir redisCluster创建redis集群文件夹 3.通过命令mkdir 6380   mkdir 6381   mkdir 6382在redisCluster文件夹下创建三个文件夹 4.通过以下命令将redis.conf分别拷贝到6380.6381. 6382文件夹下 cp /usr/local/redis/redis-3.0.2/redis.conf  ./6380 cp /usr/local/redis/redis-3.0.2/redis.

算法 排序lowB三人组 冒泡排序 选择排序 插入排序

参考博客:基于python的七种经典排序算法   [经典排序算法][集锦]     经典排序算法及python实现 首先明确,算法的实质 是 列表排序.具体就是操作的列表,将无序列表变成有序列表! 一.排序的基本概念和分类 所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作.排序算法,就是如何使得记录按照要求排列的方法. 排序的稳定性: 经过某种排序后,如果两个记录序号同等,且两者在原无序记录中的先后秩序依然保持不变,则称所使用的排序方法是稳定的,反之是不稳定

三:QJM HDFS高可用

本文介绍的是HDFS的一种HA方案.虽然有checkpoint node \backup node等,但是不能实现自动的failover. http://hadoop.apache.org/docs/r2.6.3/hadoop-project-dist/hadoop-hdfs/HDFSHighAvailabilityWithQJM.html 1.在2.0.0版本以下,namenode是单个的,如果namenode宕机,就会导致整个集群不可用.QJM 是HA的一种实现方式,通过master/sla