html与css核心基础1动态导航.docVIP

基本css选择器: 标记选择器; 类别选择器 Id选择器; 符合选择器: “交集”选择器; “并集”选择器 后代选择器; Css的继承特性:对任何元素的特性设置都会影响到他的子元素的特性,不会影响到它的父元素的特性. Css的层叠性:行内选择器ID样式类别样式标记样式 下面是一个禅意盒子网站，里面全是css样式网页： 深入理解盒子模型： 在css的属性给值的时候可以简写；例如： border-color:red;这里我们将边框的四个颜色都设置为红色，如果我们想用不同芳容颜色来显示四个人边框的不同颜色的话可以给出多个属性值，如：border-color:red,gerrn;属性值之间用逗号隔开，属性值一到四个之间。 Border-style：dotted,dashed,solid,double;以此上右下左的顺序为：点线、虚线，实线，双线。 外边距（margin）; 内边距（） div标记与span标记: Div块级元素在页面以从上到下的顺序摆放； Span是行级元素在页面里从左到右的顺序摆放； 标准流的定位原则： 行内元素之间的magin: 行内元素之间的magin值是叠加的 块级元素之间的magin： 块级元素之间的magin值不会叠加，之间magin值重合，取较大的值。 盒子的浮动与定位：（float，clear，position） 盒子的浮动： 当一个标准流设置浮动后就会脱离标准流，其他的标准流会占据其位置，但是文字会围绕着浮动的文字排列 盒子的定位：（position） static：这是默认的属性值，静态定位方式 relative：称为相对定位方式 absolute：绝对定位方式 fixed：称为固定定位方式 盒子的Display属性： Display属性可以将块级元素转换成行级元素，也可以吧行级元素转换成会计元素 案例： html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style .p1{ width:300px; height:140px; float:left; text-align:center; background:#F00; margin:20px; line-height:2; border-width:2px; border-color:#FFF; border-style:solid; border-top-left-radius:2em; border-bottom-right-radius:2em; } .main{ line-height:1.5; color:#000; margin:0px; background:#999; border-width:2px; border-style:solid; border-color:#000; border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em; } .m1{ font-size:36px; float:left; color:#0FC; } /style /head body p class=p1 一字诗br/nbsp;nbsp;nbsp;nbsp;[清]陈沆br / 一帆一江一渔舟，一个渔翁一钓钩。br/一府一仰一场笑，一江明月一江秋。 /p div class=main pspan class=m1赏/span析：这首诗是清代学者陈沆所作。在短短的四句诗中，一连用了十个数字“一”，十分恰当，十分精妙。有景有情，有声有色，有人物有动作，描绘出多彩多姿的垂钓的画面，充满诗情画意，令人回味无穷，百读不厌。钓鱼是一种积极的休息养神方法，也是有条件或由此爱好的老年人一种有益的娱乐活动，有利于老年人的身心健康。正像诗中所描述的那样，垂钓水边，优美宁静，青山绿水，明月高挂，清风拂拂，微波荡漾，空气清新，使人心旷神怡，精神爽快。钓鱼时，俯身观鱼上钩，全神贯注，凝神静气，怡养耐性；一旦鱼儿上钩，仰身拉钩获鱼，那种欢笑、轻松之情，油然而生，其乐无穷。正是，一俯一仰一阵笑，百病千愁全消掉。br / /p pnbsp;/p /div /body /html 运行效果： 链接与导航： 动态超链接： 导航条示例： 一、设置导航条的初始样式，及鼠标滑过，和激活后的样式： !DOCTYPE html PUBLIC -//