无为清净楼资源网 Design By www.qnjia.com
1.今天在做一个页面的时候碰到了箭头居中的效果:由于想实现点击区域很大所以用了padding-top:23%。但是在计算23%的时候出现了问题,经过研究发现:padding-top的百分比是根据期父元素的width而不是height来计算的,很奇怪吧?哪位大牛能给解释下。
2.某个层加了浮动后又加margin后在ie6下一定会出现双倍边距。----------解决方法是display:inline;(虽然知道,但是每次都忘)。
3.左侧定宽右侧自适应+左右定宽中间自适应的框架一定要会运用,很多时候都会运用上,
demo1(左侧定右侧自适应):
复制代码代码如下:
<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>双列布局,左侧定宽,右侧自适应</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; }
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#middle { width:100%; height:200px; background:#F00; }
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
</div>
<div id="footer">footer</div>
</body>
</html></span><span style="font-family:'Microsoft YaHei'">
</span></span>
demo2(左右定中间自适应):
复制代码代码如下:
<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>双列布局,左侧定宽,右侧自适应</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; padding-right: 200px;}
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#right { width:200px; height:200px; position:absolute; right:0; background:#FF0; float:left;}
#middle { width:100%; height:200px; background:#F00; float:left;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
<html></span><span style="font-family:'Microsoft YaHei'">
</span></span>
4.在ie6下插入图片时候用img标签会有img下会有几个像素的空白会导致你跟设计稿做的东西不一样(会被主管火眼看出来然后挨骂)---解决办法是将img变成块级元素;display:block;
5.让文本在块内垂直的方法是:1).vertical-align:middle.2).line-height:***; -------------一般的第二个比第一个好用,具体我也不知道为什么。
6.a标签的lvha不是很常用,但是一定会用:a:link{} a:visited{};a:hover{}a:active{}
7.文本截断不换行貌似很常用(这几天天天用):white-space:nowrap;overflow:hidden;text-overflow:ellipsis;(换行为:word-wrap:break-word;)
8.清除浮动的方法很多,这几天主要用的三种:1)clear:both;2)overflow:hidden;3).我的指导人最爱用的:#a:after{display:block;clear:both;visibility:hidden;height:0;content'.';}
9.鼠标手势有的时候在ie下会消失,这个情况这两天也出现过几次。----------------解决办法是corsor:pointer;(注意不能是hand--指导人特别提醒)
10.定义一个只有2像素的高度的容器的时候在ie6下会有bug--解决方法是将各种属性清零,尤其是font-size:0;height:0;line-height:0;
11.max-width在ie6下会不起作用---解决办法是_width:*;(上个周遇到过这个问题)
12.!important 规则--以前从来没用过这个属性,直到前天主管看我的代码时候提醒我在一个页面响应式的时候后来的width会覆盖本身的width:100%;所以要加width:100%!important;
13.清除浮动非常非常重要---比如有的时候容器无法自适应高度你就要用到它的!!!
14.点击文字的时候也会点击上单选框或者复选框了比如csdn的这个功能: 方法是用lable包住单选框或者用lable for“id”。
15.display:none--------消失不占位置。visibility:hidden;--------------消失后占位置。
2.某个层加了浮动后又加margin后在ie6下一定会出现双倍边距。----------解决方法是display:inline;(虽然知道,但是每次都忘)。
3.左侧定宽右侧自适应+左右定宽中间自适应的框架一定要会运用,很多时候都会运用上,
demo1(左侧定右侧自适应):
复制代码代码如下:
<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>双列布局,左侧定宽,右侧自适应</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; }
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#middle { width:100%; height:200px; background:#F00; }
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
</div>
<div id="footer">footer</div>
</body>
</html></span><span style="font-family:'Microsoft YaHei'">
</span></span>
demo2(左右定中间自适应):
复制代码代码如下:
<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>双列布局,左侧定宽,右侧自适应</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; padding-right: 200px;}
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#right { width:200px; height:200px; position:absolute; right:0; background:#FF0; float:left;}
#middle { width:100%; height:200px; background:#F00; float:left;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
<html></span><span style="font-family:'Microsoft YaHei'">
</span></span>
4.在ie6下插入图片时候用img标签会有img下会有几个像素的空白会导致你跟设计稿做的东西不一样(会被主管火眼看出来然后挨骂)---解决办法是将img变成块级元素;display:block;
5.让文本在块内垂直的方法是:1).vertical-align:middle.2).line-height:***; -------------一般的第二个比第一个好用,具体我也不知道为什么。
6.a标签的lvha不是很常用,但是一定会用:a:link{} a:visited{};a:hover{}a:active{}
7.文本截断不换行貌似很常用(这几天天天用):white-space:nowrap;overflow:hidden;text-overflow:ellipsis;(换行为:word-wrap:break-word;)
8.清除浮动的方法很多,这几天主要用的三种:1)clear:both;2)overflow:hidden;3).我的指导人最爱用的:#a:after{display:block;clear:both;visibility:hidden;height:0;content'.';}
9.鼠标手势有的时候在ie下会消失,这个情况这两天也出现过几次。----------------解决办法是corsor:pointer;(注意不能是hand--指导人特别提醒)
10.定义一个只有2像素的高度的容器的时候在ie6下会有bug--解决方法是将各种属性清零,尤其是font-size:0;height:0;line-height:0;
11.max-width在ie6下会不起作用---解决办法是_width:*;(上个周遇到过这个问题)
12.!important 规则--以前从来没用过这个属性,直到前天主管看我的代码时候提醒我在一个页面响应式的时候后来的width会覆盖本身的width:100%;所以要加width:100%!important;
13.清除浮动非常非常重要---比如有的时候容器无法自适应高度你就要用到它的!!!
14.点击文字的时候也会点击上单选框或者复选框了比如csdn的这个功能: 方法是用lable包住单选框或者用lable for“id”。
15.display:none--------消失不占位置。visibility:hidden;--------------消失后占位置。
标签:
web前端,布局技巧
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年06月01日
2024年06月01日
- PUCK《天蓝色的彼岸》[FLAC/分轨][74.02MB]
- Edward Chan《Blueprint of Memories》[320K/MP3][48.3MB]
- 张敬轩.2007-MY1STCOLLECTION【环球】2CD【WAV+CUE】
- 著名歌手绝美音色经典老歌《超级音效王》DTS-WAV
- 流行靓声-群星《情网HQ》DTS[WAV]
- 群星《经典情歌对唱迟来的爱HQ》DTS[WAV]
- 群星2024《传承(太平洋影音四十五周年纪念专辑)4CD》[FLAC]
- 太平洋唱片中国轻音乐1-10全集[竹锦+影视篇+民歌篇+创作篇等]10CD[APE分轨+CUE]
- 群星《2024第一季度百度排行100首》[FLAC/分轨][2.3G]
- 证声音乐图书馆《聆听·心流·爵士 Flow Jazz》[320K/MP3][77.28MB]
- 证声音乐图书馆《聆听·心流·爵士 Flow Jazz》[FLAC/分轨][132.74MB]
- dnf手游为什么不上线了
- dnf手游韩服怎么重新转职
- 雷婷《婷婷醉歌》发烧版K2HD[正版CD低速原抓WAV+CUE]
- 西卿.1997-西北风(布袋戏精选)【金瓜石】【WAV+CUE】