博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
XHTML+CSS页面布局概括
阅读量:6599 次
发布时间:2019-06-24

本文共 1231 字,大约阅读时间需要 4 分钟。

XHTML+CSS的布局的由来

  Table为了储存数据而Div是为了架构页面结构

  W3C(World Wide Web Consortium:万维网联盟)W3C标准是一系列标准的集合:结构标准、表现标准、动作标准,与结构标准对应的代表语言是XHTML,与表现标准对应的语言是CSS,与动作标准对应的语言是JavaScript。

  当我们将一个成品的网页制作成一个静态页面的时候,要符合前面两种标准:结构标准、表现标准,那么制作出来的界面就是标准界面,这种技术就被称之为“XHTML+CSS”

 

头部CSS样式的重置:

  每个浏览器都有一个内置的CSS文件,当你没有对某个标签设置属性的时候,浏览器会应用内置的CSS文件。

  *{

    padding:0;

    margin:0;

   }

  不过这样定义很不好,一开始的时候要重置太多标签属性了,加大了服务器的负担,是不可取的 ,有经验的开发者只会重定义一些自己常用的标签

CSS选择器的命名

  骆驼命名法:

      第一个单词的第一个字母用小写,第二个单词的第一个字母用大写,第三个单词的第一个字母也用大写,第四个单词的第一个字母还是用大写,同样后面所有单词的首字母都要大写。

  帕斯卡命名法(双驼峰):

      首字母大写,同骆驼命名法

  匈牙利命名法

      在名称前面加上一个或多个小写字母作为前缀,来让名称更加好认。

  eg:

    1. .navMenuRedButton
    2. .NavMenuRedButton
    3. .red_navMenuButton

div清除浮动

  在你想清除浮动的那个标签的后面和受你影响的那个标签的前面添加<div class="clear">设置其CSS样式为  .clear{   clear:both;  }

 

设计整个页面

  结构的好坏会直接影响到页面的加载速度,以及搜索引擎的抓取。

1:插入图片的常用方法

  一:a标签嵌套img标签

  二:直接设置CSS背景(background-img:url("图片位置");)

2:功能模块列表

  dl+dt+dd

dl ——define list——定义列表 

dt ——define list title——用于生成定义列表中各列表项的标题,重复使用可以定义多个列表项的标题。 
dd——define list define——用于生成定义列表各列表项的说明文字段,重复使用可以定义多个说明文字段。dd是对应dt的简短说明。

Position定位

  用定位来布局界面,父级元素的position属性必须是relative,而定位于父级内部的某个元素的位置最好用absolute,其不受父级元素padding的属性影响,如果要用relative的话,计算的时候不要忘记padding的值。

 

 

 

转载于:https://www.cnblogs.com/whiskey/p/6593445.html

你可能感兴趣的文章
Android经典应用程序开发
查看>>
ucos-6-系统启动和运行过程
查看>>
协议森林05 我尽力 (IP协议详解)
查看>>
backtrack查看软件版本信息
查看>>
java内存调优
查看>>
[解析苹果官方文档]之[自动布局-view.autoresizingMask]
查看>>
为什么要用PHP Migrations
查看>>
springMVC 中文乱码问题
查看>>
android 自定义组件 在 graphical layout 不显示的问题
查看>>
tomcat 目录映射
查看>>
mysql的库
查看>>
BOOTSTRAP基础学习小记(一)简介模板、全局样式-web前端
查看>>
C#如何使用数据库
查看>>
tomcat 压缩设置tomcat压缩gzip启用
查看>>
将代码托管到码云
查看>>
升级JFinal内置的jetty到9版本,并且支持ssl
查看>>
lvs
查看>>
C++中头文件与源文件的作用详解
查看>>
jQuery反向排序(倒序)子对象
查看>>
如何升华“海纳百川,有容乃大”——我们是高级生命
查看>>