扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
给子元素做定位。用position标签
10年积累的网站建设、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先做网站后付款的网站建设流程,更有纳雍免费网站建设让你可以放心的选择与我们合作。
示例:
html
head
style type="text/css"
p.pos_abs
{
position:absolute;
left:100px;
top:150px
}
/style
/head
body
p class="pos_abs"通过绝对定位,元素可以放置到页面上的任何位置。这段话设定为距离页面左侧 100px,距离页面顶部 150px。
/p
/body
/html
方法属性设置:positon:absolute; left:100px; top:150px;
还可以用right 和 bottom left距离左边的意思 right距离右边的意思,top距离顶部的意思,bottom距离底部的意思。
这里要解释一下position有5个值可以选择,分别对应不同的页面进行设置
absolute :生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed :生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative :生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static :默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit :规定应该从父元素继承 position 属性的值。
外联CSS与页面内部定义CSS方法是一样的,不同的只是一个引用.css文件,另一个是写在页面内部。
其中优先级顺序是:
元素内部 页面内部 外联
举个外联CSS的例子:
新建一个文本文件,保存为xxx.css,如style.css
修改文件内容:
DIV {background-color:red;/*....通用样式定义....*/}
DIV UL LI {color:#999999;/*....通用样式定义....*/}
DIV.ABC {background-color:green;/*....专用类定义....*/}
DIV.DEF {background-color:black;color:white;/*....专用类定义....*/}
DIV.ABC UL LI{color:white;/*....专用类定义....*/}
DIV.ABC LI.A1{font-size:10px;/*....专用类定义....*/}
DIV.ABC LI.A2{font-size:20px;/*....专用类定义....*/}
DIV.ABC LI.A3{font-size:30px;/*....专用类定义....*/}
保存在与html同级目录下(其他目录也可以,只不过在引用的时候需要把路径写清楚。)
在html文件的head/head中加入:
link href="style.css" rel="stylesheet" type="text/css" /
html中的body部分写成:
DIV class=ABC
div class=DEF标题/div
ULli class=A1..../li
li class=A1..../li
/UL
/DIV
DIV class=ABC
div class=DEF标题/div
ULli class=A2..../li
li class=A2..../li
/UL
/DIV
DIV class=ABC
div class=DEF标题/div
ULli class=A3..../li
li class=A3..../li
/UL
/DIV
DIV
div标题/div
ULli..../li
li..../li
/UL
/DIV
保存以后,打开html,看看是否是你想要的效果?
这是因为上面那个 .navlist a 的优先级比 .home 高(因为它是双选择器优先级累加),所以 .home 的样式不起效。
改成这样既可
.navlist a.home{color:red;}
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流