DIV+CSS排版问题技巧总结

首先,做网页,要把这个页面区块化,而div就是页面中的块,div有很多属性,比如宽,高等,这些都是div一些特征,而css是层叠样式表,他的作用对div进行样式应用,针对不用的div,应用不同的样式,当然在静态页面中如果你当很多样式进去就闲的页面臃肿,这样对于优化,对于控制页面都不利,所以我们把css样式放在页面的外部,当然也有一些放在页面中,这么做是因为有写css样式只针对一个独特的页面来应用的,针对排版,div的,float属性很重要,这个主要就是针对div浮动的。

思路:

  1、 整个网页分哪几部分

  2、 每个部分的位置

  3、 依照从上到下,从左到右,从大到小,从整体设计,到单独修改。

  一、 导航栏

  构成:html  由ul构成

  背景图片在CSS页使用背景添加方法进行设计。

  做法:

  1、确定globallink 宽度,和高度,根据背景图片进行设置,高度略微多一些,设计背影颜色。

  2、ul 定位为绝对定位 position:absolute.  Margin:0px;padding:0px;  list-style-type:none;

  可以设置它的宽度。

  在设置li  float定位 设置它的padding.

  最后在设置它的伪属性。A:link  a:visited  a:hover

  二、 列表页

  遵照从大到小,从左到右的顺序进行设置

  设置Paramter

  1、 float:left

  2、 width:210px;

  3、 margin:0px;padding:0px

  4、 position:relative

  设置子块 #author

  注:子块内部没有设置宽度,所以它会自动填充在父块中

  #parameter div#author {

  Text-align:center;

  Margin-top:5px;

  Background:url(…) no-repeat;

  }

  设置 div#author p

  Margin:0px 10px 0px 10px;

  Padding:3px 0px 3px 0px;

  border-bottom

  Border-top

  设置 div#author p.mypic

  设置边框为无

  确定padding-top

  Margin-bottom

  在设置 div#author p img

  加上边框  padding:2px ;margin:0px;

  三、 内容页

  四、 脚注

时间: 2024-10-08 10:15:19

DIV+CSS排版问题技巧总结的相关文章

【笔记-前端】div+css排版基础,以及错误记录

现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可能不好理解,所以简单描述一下使用div+css排版基础. 下图是一个使用div+css排版的示例: html和css: <html> <head> <style> body{font-size:20px;font-weight:bold;color:white;} .bac

div+css是网页排版技巧_html/css_WEB-ITnose

div+css是网页排版技巧_html/css_WEB-ITnose 以下是兄弟连培训总结的一些技巧,留下备用,希望对看到的人有用~~ 1,ul:默认的ul的margin和padding不是0,如果在导航中用到了左浮动的li,往往会把外部的div撑大,导致页面变形,改成: ul{margin:0px; padding:0px;} 2.img:1.这里牵涉的不同浏览器的问题,ie6里显示的图片height总是要大于准确值,这里就需要我们记住下面这一点 img{ display:block}:2.页

CSS技巧----DIV+CSS规范命名大全集合

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命名目录 命名规则说明 重要CSS命名 CSS命名参考表 命名技巧 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明:   -   TOP 1).所有的命名最好都小写2).属性的值

div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)

在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决?CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决. 解决方法有两种: 第一种,让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形. 比如淘宝,要求店铺主上传

2天驾驭DIV+CSS (技巧篇)(转)

这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区[知识三] 什么是W3C标准?[基础一] CSS如何控制页面[基础二] CSS选择器[基础三] CSS选择器命名及常用命名[基础四] 盒子模型[基础五] 块状元素和内联元素 实战篇[第一课] 实战小热身[第二课] 浮动[第三课] 清除浮动[第四课] 导航条(上) | 导航条(下)[大练

HTML、DIV+CSS网页制作中排版混乱的几种常见的情况

对于Web前端初学者或者经验不够丰富的人来说,出现页面排版布局混乱的情况并不罕见,有时候明明前面部分的网页都很整齐美观,可是在接下来的部分中经常会出现网页布局混乱,比如content无法调整到开发者需要的位置,或者出现页面重叠的现象.以下内容是我个人在网页制作过程中关于网页排版混乱及其解决办法的一些经验总结,不足之处,希望大家互相补充学习. )DIV+CSS网页错位的原因与解决方法 常常我们会遇到我们要设置在一行显示的布局,却因为种种原因造成了错位,看到结果是在一行的最后一个盒子布局错位掉下去了

DIV+CSS常用网页布局技巧!

以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left sidebar</div>  <div id="content">Main Content</div> CSS Code <style type="text/css"> *{    margin: 0;    paddi

DIV CSS优化 CSS压缩技巧教程

DIV CSS优化 DIVCSS5为大家介绍简单的CSS优化.涉及优化内容:CSS代码优化.CSS重用优化.缩短字符.删除换行等处优化 目录 CSS样式单词简写优化 标点符号优化 删除换行 CSS重用优化 CSS代码优化简写总结 一.CSS样式属性单词代码简写优化 - TOP 1.border(CSS边框)简写: 1).4个边边框宽度为1px,颜色为#000 border-color:#000; border-style:solid; border-width:1px 可以简写为:体感音乐放松椅

DIV+CSS盒子模型之网页排版

DIV+CSS 1.div是HTML里的一个标签,起块级作用的标签,可以设置该块级元素的宽和高.css是对该块级元素的样式设定.盒子模型,形象的理解为一个个的盒子在网页里面,这是编写样式,就可以让盒子放在一定的位置上,并给这个盒子设定一定的样式. 2.看看下面这段代码. HTML: css: 浏览器中的效果: 盒子模型,宽高分别为 内容(content) 边框(border) 内边距(margin) 外边距(pandding).   盒子在组合上css就可以很快速的做出网页想达到的那种效果.排版