多语言展示
当前在线:380今日阅读:113今日分享:31

div+css技术,网页前端必学技术。

开始学习,因为刚开始不懂,所以先拿别人的Div+Css页面看,当初我选择的是网页设计师这个站,上边有有很多实例
方法/步骤
1

大家可以从这看起 实例 当看到 “第12天:校验及常见错误”时你 会对Div+Css有一定的了解 现在咱先来看一些比较常用属性 font 字体 color 颜色 font-size 字体大小 text-align 文本位置 background 背景 margin 外补丁 padding 内补丁 border 边框 float 布局 这些在苏昱的Css手册(这是HTML版)里边都可以找到,可以具体看看。

2

CSS布局常用的方法:float:none|left|right  取值: none:默认值。对象不飘浮 left:文本流向对象的右边 right:文本流向对象的左边 它是怎样工作的,看个一行两列的例子  xhtml代码:   这里是第一列

  这里是第二列
  
 /*这是违背web标准意图的,只是想说明在它下面的元素需要清除浮动*/  
 CSS代码: #wrap{width:100;height:auto;}  #column1{float:left;width:40;}

3

#column2{float:right;width:60;}  .clear{clear:both;} position:static|absolute|fixed|relative 取值: static:默认值。无特殊定位,对象遵循HTML定位规则 absolute:将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 relative:对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置 它来实现一行两列的例子  xhtml代码:   这里是第一列

  这里是第二列   CSS代码: #wrap{position:relative;/*相对定位*/width:770px;}  #column1{position:absolute;top:0;left:0;width:300px;}  #column2{position:absolute;top:0;right:0;width:470px;} 他们的区别在哪?  显然,float是相对定位的,会随着浏览器的大小和分辨率的变化而改变,而position就不行了,所以一般情况下还是float布局! CSS常用布局实例 单行一列 body{margin:0px;padding:0px;text-align:center;}  #content{margin-left:auto;margin-right:auto;width:400px;} 两行一列  body{margin:0px;padding:0px;text-align:center;}  #content-top{margin-left:auto;margin-right:auto;width:400px;}  #content-end{margin-left:auto;margin-right:auto;width:400px;} 三行一列  body{margin:0px;padding:0px;text-align:center;}  #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}  #content-mid{margin-left:auto;margin-right:auto;width:400px;}  #content-end{margin-left:auto;margin-right:auto;width:400px;}

推荐信息