2009.12.22——div+css的一些知识
1.border:1px solid #999900;
用来设置边框的,其实每个元素外面都可以设置边框
border其实是一个简写,
border:border-width border-style border-color
A:border-width
边框的宽度,可以取thin(细),medium,thick(粗),也可以和长度的表示法一样。
border-width也是个简写
border-width:border-top-width border-right-width border-bottom-width border-left-width;
B:border-style
边框的样式,可以取none,hidden,dotted(点线),dashed(虚线),solid(实线),double(双线),groove(槽
装),ridge(脊装,和groove相反),inset(凹陷),outset(凸起)
注意:border-style的初始值为none,所以除非设置了边框样式,否则边框将无法看见
border-style:border-top-style border-right-style border-bottom-style border-left-style;
C:border-color 边框的颜色 就不用说了吧
2.background-color:#CCFF99;
background:
color: 文字的颜色
background 设置背景,包含文字的p段落,div层,page页面等的颜色与背景图片可以使用background属性
background包含5个属性,
background:color,image,repeat,position,attachment
A:background-color
背景的颜色,默认值为transparent(透明)
B:background-image
背景的图片,默认为none
background: url("imags/mainMenu.bmp")
C:background-repeat
背景图片的重复方式
取值:repeat(上下左右平铺整个),repeat-x(左右平铺),repeat-y(上下平铺),no-repeat(不平铺)
D:background-position
背景图片的位置 初始值:0% 0%
取值:水平 left,center,right
垂直 top,center,bottom
垂直与水平 x% y%
下面是一些等式
top left, left top 等价于 0% 0%.
top, top center, center top 等价于 50% 0%.
right top, top right 等价于 100% 0%.
left, left center, center left 等价于 0% 50%.
center, center center 等价于 50% 50%.
right, right center, center right 等价于 100% 50%.
bottom left, left bottom 等价于 0% 100%.
bottom, bottom center, center bottom 等价于 50% 100%.
bottom right, right bottom 等价于 100% 100%.
E:background-attachment
背景图片随滚动轴的移动方式
取值:scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
4.margin: auto; 让整个div居中
5.FF和IE的一个区别
#sideBar{
/*background: bule;*/
height: 82%;
width: 25%;
/*border: 2px solid #04E;*/
background-color: blue;
position: relative;
overflow: hidden;
float: right;
}
#content{
/*background: darkblue;*/
height: 82%;
width: 75%;
float: right;
/*border: 2px solid #555;*/
background-color: green;
overflow: hidden;
}
在FF里面 我的#sideBar里面的float是可以不写的,仍然能够正常显示,但是在IE里面,如果不写的话,
#sideBar就会跑到外面,所以要加上float,不过这里的right或者lift都行的,因为我的sideBar和Content
的width加起来正好是100%;
分享到:
相关推荐
《深入理解:基于Div+CSS的网页设计与布局》 Div+CSS是现代网页设计中的核心技术,它在构建Web标准的网页布局中扮演着至关重要的角色。本篇将围绕"简单设计Div+CSS模板"这一主题,深入探讨Div+CSS的基础概念、网页...
"韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT...本资源提供了 DIV+CSS 的基础知识和应用,包括 DIV 元素的概念、CSS 的基础知识、DIV+CSS 的优点、快速体验 DIV+CSS、DIV+CSS 的发展历史、CSS 的必要性和分类等内容。
关于页面设计方面的。大家可以看看。DIV+CSS标准化网页布局.ppt。
在网页设计中,`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`<div>`元素作为容器来组织内容,并利用CSS(层叠样式表)来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...
- **布局方式**:采用DIV+CSS布局,这是一种常见的网页布局方法,能够实现更加灵活的页面布局与样式控制。 - **页面数量**:包含多个页面,每个页面都具有不同的主题内容与设计风格。 - **色彩运用**:色彩鲜艳且...
**DIV+CSS简介** 在网页设计领域,`DIV+CSS`是一种常见的布局技术,它将内容(HTML元素)与样式(CSS样式表)分离,提高了网页的可维护性和易读性。`DIV`(Division,分隔)是HTML中的一个容器元素,常用来组织和...
主要学会: 一、DIV+CSS的概述 二、盒子模型 三、css中的定位与显示(相对定位、绝对定位等等) 四、div+css中常见的错误
【标题】"33套DIV+CSS简历模版.rar"所涵盖的知识点主要集中在网页布局技术和前端设计领域,特别是利用CSS(层叠样式表)和DIV(定义文档结构的HTML标签)来创建简历模板。这一资源集合提供的是33个不同的简历设计...
《深入理解Div+CSS布局:构建高效网页设计》 在网页设计领域,Div+CSS布局是一种广泛应用的技术,它能够帮助开发者实现清晰、灵活且高效的页面布局。本资料将全面解析Div+CSS布局的核心概念和实战技巧,旨在提升...
微信小程序——移动端商城(截图+源码).zip 微信小程序——移动端商城(截图+源码).zip 微信小程序——移动端商城(截图+源码).zip 微信小程序——移动端商城(截图+源码).zip 微信小程序——移动端商城(截图+...
10. **最佳实践**:书中可能还会涵盖一些最佳实践,如避免使用内联样式、保持CSS代码整洁、合理使用CSS预处理器(如Sass或Less),以及优化性能的技巧。 《Div+CSS布局大全》这本书应该会全面讲解这些概念,并通过...
【标题】"十天学会DIV+CSS(WEB标准)" 是一本旨在帮助初学者在短时间内掌握网页布局技术的教程。本书的核心是教导读者如何利用HTML的`<div>`元素结合CSS(层叠样式表)来创建符合WEB标准的网页设计。在WEB开发中,`...
微信小程序——用户反馈组件(截图+源码).zip 微信小程序——用户反馈组件(截图+源码).zip 微信小程序——用户反馈组件(截图+源码).zip 微信小程序——用户反馈组件(截图+源码).zip 微信小程序——用户反馈...
"div+css源码"是网页布局和设计中常见的技术组合,主要应用于前端开发领域。Div(Division)是HTML中的一个容器元素,用于组织和分隔页面内容,而CSS(Cascading Style Sheets)则是样式表语言,用来描述HTML或XML...
在CentOS 7 x86_64平台上,安装GCC 11.0.2这一高级C++编译器时,会依赖一个至关重要的动态链接库——libstdc++.so.6.0.29。本文将深入探讨这个库的作用、它与GCC的关系以及如何在系统中管理和使用它。 libstdc++是...
Div+CSS布局是网页设计中的核心技术,用于实现页面的结构化和样式分离。这个压缩包包含的《Div+CSS布局入门教程.chm》和《Div+CSS_布局大全.pdf》两份资料,都是针对初学者设计的教程,旨在帮助他们理解和掌握这一...
php+MYSQL+HTML+DIV+CSS.pdf
通过这两份资料,初学者不仅可以学习到Div和CSS的基础知识,还能通过实例加深理解,逐步掌握网页布局的技巧。无论是想要制作个人网站,还是进一步深入Web开发,这份资料都是宝贵的入门资源。在实践中不断学习和探索...
标题"DIV+CSS.rar_css"暗示了我们将会探讨如何使用CSS来布局基于`div`元素的网页。 **Div元素**是HTML中的一个块级元素,全称为“division”,意为分区。它是组织和结构化页面内容的强大工具,通过CSS可以设置其...
本教程将引导初学者进入这个精彩的世界,通过设计图和源文件的实际操作,帮助理解并掌握`div+css`的基础知识。 1. **HTML Div元素** - `div`元素:一个块级元素,可以容纳文本、图像、表格、其他`div`等任何HTML...