div+css 技巧摘录

盒子理论学习：
[url]http://www.chinaui.com/school/schoolView.aspx?ARTICLE_ID=297[/url]

十步学DIV+CSS建站：
[url]http://jorux.com/archives/10steps-built-web-with-css/[/url]

技巧摘录：
1、并排排列　　like this:[url]http://www.blueidea.com/articleimg/2007/03/4545/css1.html[/url]
<style type="text/css">
<!--
.mainBox {
float: left;/*这个很重要哦！*/
/*还有很多其他标签，省略*/

}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>熟悉步骤</h3>
<p>正文内容 </p>
</div>

2、通配符使用：
* {
margin: 0px;
padding: 0px;
}
这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。

3、当两个并排内容需要其中一个靠右的话，需要使用到浮动向右：
#right {
float: right;
width: 280px;
background: darkgreen;
}
因为向右浮动，可以理解为浮动于整个盒子之上向右，它的下面还是可以让#left_content 填东西的，所以需要：
#left_content {
margin-right: 280px;
background: green;
}
这样就不会#right的内容和#left_content 的内容重叠了。

4、clear:both的使用:
若出现这种情况：
表现如下：

怎么让Footer像这样呢?

那就需要用到
#footer {
clear: both;
}

转载于:https://blog.51cto.com/jenny0927/61228

div+css 技巧摘录相关推荐

DIV+CSS 网页兼容性问题（IE6 IE7 IE8 IE9 火狐 chorm）
本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考. CSS兼容常用技巧请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTY ...
div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
div css表单布局的五个小技巧
div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加 ...
有利于SEO的div+CSS的命名规则小结（技巧）
一.CSS文件及样式命名 1.CSS文件命名规范全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print. ...
小技巧助你解决div+css网页内容显示不完整
今天调一个布局,调了老一会没调好,就是内容显示不全,然后突然看到这篇文章得到点启发,所以转发下支持下在测试网页效果时,你是否为网页在IE6版本的浏览器中能正常打开,网页显示完整.而在IE7及以上版 ...
html div自动高度,CSS技巧：3种常用方法解决div列高度自适应
本文向大家介绍一下解决div列高度自适的3种常用方法,分别是利用"clear:both"背景填充,使用脚本控制高度和margin负值父子容器高度继承三种. CSS技巧:解决div列 ...
DIV+CSS布局概述、属性（浮动、定位等）、布局类型、常见布局技巧
文章目录布局概述网页布局页面元素定位机制布局常用属性浮动属性(float) 清除属性(clear) 定位属性(position) 溢出属性(overflow) 层叠属性(Z-index) 布 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧（转）
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...

div+css 技巧摘录

div+css 技巧摘录相关推荐

最新文章

热门文章