电商网站开发:使用20CSS解决常见错误和修复

2018.12.29

0


  使用20CSS解决常见错误和修复
  
  毫无疑问,深圳的网站制作,合理的结构布局是最好的方式。不仅浏览器有不同的布局,而且CSS还有很多方法来定位每个元素。今天,我们想分享一些关于如何避免创建CSS布局时陷阱的快速提示。
  
  这是本系列的第一部分,因为有很多好的技巧,如果你看到一个简单或者更好的方法,那么给我写评论或者发邮件。我会尽力在下一篇文章中包括它。
  
  IE浏览器中的错误修复
  
  1-错误修复:IE双边偏移浮点错误――Internet Explorer特有的错误,其中一个元素是浮动的,而边距是浮动在相同方向上,最终结果是指定边距大小的两倍。解决方案非常简单。您只需要显示:浮动元素的内联规则。所以只能这样做像这样的事情:
  
  γ含量
  
  浮动:左;
  
  宽度:500 px;
  
  填料:10px 15px;
  
  左边距:20px;}
  
  像这样的事情:
  
  γ含量
  
  浮动:左;
  
  宽度:500 px;
  
  填料:10px 15px;
  
  左边:20px;
  
  显示:内联;
  
  }
  
  2-克服盒模型黑客-如果你想指定任何div的宽度,不要指定填充或利润。只要创建一个内部div,没有宽度设置,然后指定其填充和边距。所以不要这样做:
  
  主要的div
  
  宽度:150 px;
  
  边界:电商网站开发5PX;
  
  填料:20px;
  
  }
  
  做这样的事:
  
  主要的div
  
  宽度:150 px;
  
  }
  
  #main-div div{
  
  边界:5PX;
  
  填料:20px;
  
  }
  
  3分钟高度在Firefox的IE最小高度属性中忽略了这个属性,但是IE忽略了它。IE的高度是FF的最小高度。注意:IE 7中的问题是固定的。
  
  容器{
  
  宽度:20EM;
  
  填料:0.5微米;
  
  边框:1px固体#000;
  
  最小身高:8米;
  
  高度:自动;
  
  }
  
  *HTML。容器{
  
  高度:8EM;
  
  }
  
  4。在IE浏览器中,最小宽度固定为Internet Explorer中最小宽度的缺失。
  
  集中块元素
  
  5-居中块元素-具有居中块元素的多种技术;技术的选择取决于您设置的百分比还是绝对值。
  
  对于整个页面的内容:
  
  身体{
  
  文本对齐:中心;
  
  }
  
  α容器
  
  {
  
  文本对齐:左;
  
  宽度:960px;
  
  保证金:0自动;
  
  }
  
  6-.with CSS-如果你想知道如何以正确的方式实现垂直对齐功能,只需指定文本行的相同高度,容器。
  
  {包装器{
  
  宽度:530px;
  
  高度:25px;
  
  背景:URL(容器)。gif)不重复左上角;
  
  填料:0px10px;
  
  }
  
  β包装器P{
  
  线高:25px;
  
  }
  
  这七个主要原因是CSS列乱七八糟――关于如何使用有用的图形和代码片段修复常见的CSS列问题的简单易懂的文章。
  
  CSS技能
  
  8-当您试图创建一个两列的浮动布局时,扩展框是错误的。IE将创建一个浮动下拉列表,因为固定宽度的浮点div中内容太多,并且它必须与布局中的特定位置匹配。
  
  9了解CSS位置第1部分-一个有趣的系列文章,不仅包括定位,还包括属性定义布局,如显示和浮动,以及预览新的CSS3模块布局。第一部分将介绍位置和显示属性。一、二、三向您提供了可能性,您的定位具有深刻的理解NG。
  
  绝对定位和相对定位有什么区别对于那些刚刚开始使用CSS的用户来说,是否使用相对定位或绝对定位是非常令人沮丧的。这个问题的答案将为这种混淆增加一点透明度。
  
  红方
  
  {
  
  职位:亲戚;
  
  底部:40PX;
  
  右:40PX;
  
  }
  
  11hangtab-从浏览器窗口的边缘创建粘性标签(甚至核心内容)。看看他们的软件公司Panic的网站。
  
  Hang-HuangTab{
  
  职位:绝对;
  
  顶部:7PX;
  
  左:0px;
  
  宽度:157px;
  
  高度:93Px;
  
  }
  
  12CSS浮动理论:你应该知道的-粉碎gmagazine浏览几十个相关的文章,并选择最重要的事情,你应该记住,在开发CSS花车布局。
  
  一些内容
  
  不在浮动中的文本
  
  13浮动教程简单教程:CSS浮动-浮动教程通过浮动元素,如图像,基本知识帽下降,下一步和返回按钮,图像库,内联表和多列布局。
  
  14要清楚的是,浮动路径浮动可能是CSS开发中最令人沮丧的方面之一,最好的方法之一是使用easyclearing。
  
  #.:之后
  
  {
  
  内容:
  
  显示:块;
  
  身高:0;
  
  清楚:两者;
  
  可见度:隐藏;
  
  }
  
  α容器
  
  {display:内联块;}
  
  *HTML#容器
  
  {高度:1%;}
  
  α容器
  
  {显示:块;}
  
  简单圆角问题的求解
  
  15-Mike要求CSS人员建议圆角――最简单的方法是使用一个巨大的GIF,然后我会标记我的盒子。
  
  包装精美的段落
  
  圆框{
  
  背景:透明URL(roundBox)。gif)不重复左上角;
  
  宽度:340px;
  
  填料:20px;
  
  }
  
  圆盒。盒底{
  
  背景:白色URL(roundBox)。gif)不重复左下角;
  
  字体大小:1px;
  
  线高:1px;
  
  高度:14px;
  
  余量:0-20px-20px-20px;
  
  }
  
  还有,askthecssgue解释了Google Analytics的使用,Google Analytics通过将像素间隙的每个角落生效来使用静态图像创建圆形角落。
  
  CSS技能
  
  圆角编码-Alen Grakalic固定宽度圆角编码方法16-3步简单,三步简单。他还在这里创建了一个演示。
  
  CSS样式的问题
  
  17通过我们的浮动标签,一些提示创建了不起的Web表单――Cris Coyer股票提示:聚焦伪类、使用提示等等。他还创建了良好而简单的联系信息,这是他在这里的第一份出版物。
  
  标记{
  
  浮动:左;
  
  文本对齐:右;
  
  右边距:15px;
  
  宽度:100px;
  
  }
  
  18-清洁和纯CSS表单设计-对于CSS爱好者,本教程演示如何使用HTML表设计纯CSS表单。您可以在这里获取替换代码。
  
  CSS技能
  
  19自动填充文本输入字段和JavaScript――有时我们需要向用户解释他电商网站开发们应该输入文本输入字段。当没有标签可以显示时,一个常见的解决方案是在文本字段中放置一些占位符文本,并让它被标记。本教程介绍了一个好的解决方案。通过启用JavaScript,标记元素被隐藏,并且输入元素的title属性的值被复制到value属性。如果禁用JavaScript,标签将显示在文本输入上方,文本输入为空。这里是一个简单的演示,您可以看到该操作。
  
  20-跨浏览器水平规则和背景图像-你想创建一个跨浏览器水平规则,使用自定义图像作为内容分隔符。
  
  H.{
  
  背景:#FFF URL(myhrimg.gif)不重复滚动中心;
  
  高度:10px
  
  }
  
  HR HR
  
  显示:无
  
  }
  
  你的标签应该像这样:
  
  

最新案例

联系电话 400-6065-301

微信咨询 寒总监