热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

DIV+CSS经常用到的属性、参数及说明_经验交流

用过DIV+CSSseo教程布局网站的人都会喜欢上这种方式,虽然开始没有用传统的table直观,但用习惯了就会感觉出DIV+CSS的优越。实际应用中我搜索了DIV+CSS的常用定义项,并对其参数作了归纳和说明,与喜欢DIV+CSS的朋友共享。
通用类
overflow:hidden;自动隐藏超出的内容,防止撑开层和表格的范围
!important
指定样式规则的应用优先权
文字类 color: #FF0000;文字颜色 font-family: "Arial", "Helvetica", "sans-serif";字体 font-size: 9px;字号 text-align:center; 居中(left为居左,right为居右) line-height:28px;行高(可用150%值) font-style: italic;斜体(oblique偏斜体) font-weight: bold;服务粗体(bolder特粗,400粗值) font-variant: small-caps;小型大写字母 text-transform: capitalize;首字母大写 text-decoration: underline overline line-through blink;下划线,上划线,删除线,闪烁 text-indent: 2em;文字缩进2个字体高(或15px,即15象素)
  背景类 background-attachment: fixed;固定位置(scroll滚动) background: #0066CC;背景色(transparent透明) background: url(/image/more2.gif);背景图片 background-repeat: repeat;重复(repeat-x横向重复,repeat-y纵向重复) background-position: center top;水平居中 垂直顶部(left center水平居左 垂直居中) background:url(/image/dtbg.gif) #FEFEFE
  no-repeat
  right bottom(2px 5px);
  背景图片、
  背景颜色、图片不重复、背景图片从右下角开始(图片距左2px距上5px)
  框架位置类
  clear: both;两边拒排浮动对象(left左边拒排浮动对象,right右边拒排浮动对象)
  float: left;浮动对象位置居左(right, 最新列车时刻表位置居右)
  position:relative; 相对位置,一般在上级框架中设定 极品时刻表
  position:absolute; 绝对位置,配合上级框架的设定对本级框架设定,设置top、left值
  top:5px; 页面绝对或相对于框架顶端绝对位置
  left:10px; 页面绝对或相对于框架左边绝对位置
  width: 100px;宽100px
  height: 200px;高200px(可用auto和100%值)
  margin 上海火车时刻表:10px 20px 10px 20px;
  上右下左页边距(值相同可省写margin:10px)
  单独指定用margin-top:10px; (margin-right、margin-bottom、margin-left)
  padding:20px 10px 10px 20p;
  上右下左内容离边框的距离(值相同可省写padding:10px)
  单独指定用padding-top:10px;(padding-right、padding-bottompadding-left)
  border:#ccc 1px solid 成都列车时刻表;
  四边框颜色、线宽、实线(dotted虚线,dashed点画线,double双线,ridge脊线)
  单独指定用border-top:#ccc 1px solid;border-right:#ccc 1px solid
  等等
  项目列表类 list-style-position: outside;位置为外(inside内) list-style-image: url(/yh/image/more04.gif);项目符号图像 临客时刻表 list-style-type: disc;项目符号为圆点(circle圆圈,square方块)
  扩展类 cursor: e-resize;鼠标样式 filter: Blur(Add=4, Direction=8, Strength=4);滤镜 filter: FlipH;横向翻转(FlipV gprs流量费纵向翻转)
  单独设置链接
  #bottool a:link{color:#fff};未访问的颜色
  #bottool a:visited{color:#fff};已访问的颜色 流量软件
 #bottool a:hover{color:#ff0};鼠标在链接上
  这么多定义项, 其实常用也就下面几类:指定宽高值width,height;指定背景:background;指定位置:float,特殊的用position结合 top、left来定位;设定框架边距:margin;设定容器内框距:padding几项。其中在我的样式定义中取消了overflow、 clear、!important程序的定义项。1、取消overflow:hidden是因为经反复实验,该定义项只能隐藏超出容器高度的内容而不能隐藏超出宽度的内容。而我需要的就是要能自动隐藏超出容器宽度的内容,有时反而需要容器高度能随内容的多少而撑开容器高度。2、取消clear定义项是因为在实际应用中很真正达到理解的容器与容器的排列关系,框架或容器的位置还是用float、position、top、left等精确定位。 3、!important
  指定样式规则的应用优先权。这个主要用于在IE和其它的浏览器要区别显示出的效果,我的网站就是想固定显示效果,所以不存在什么优先权。
  我对DIV+CSS也还在研究之中,有不当之处请大家跟贴指正,有完善的地方也请跟贴完善。我认为用DIV+CSS来布局网站,最重要的是布局思路问题,不同的设计方案,设计的繁简大不一样。我着重框架或容器的通用性,设计出几种容器的样式,就象FS4中的标签样式,然后在需要的地方调用这个样式就行了,以达到通用性而不是专用性。今天就谈这些,以后再专门谈谈这个布局设计思路问题。
推荐阅读
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • Java容器中的compareto方法排序原理解析
    本文从源码解析Java容器中的compareto方法的排序原理,讲解了在使用数组存储数据时的限制以及存储效率的问题。同时提到了Redis的五大数据结构和list、set等知识点,回忆了作者大学时代的Java学习经历。文章以作者做的思维导图作为目录,展示了整个讲解过程。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文讨论了为什么在main.js中写import不会全局生效的问题,并提供了解决方案。在每一个vue文件中都需要写import语句才能使其生效,而在main.js中写import语句则不会全局生效。本文还介绍了使用Swal和sweetalert2库的示例。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
author-avatar
jelly62_736
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有