9.11上午 列表方块 格式和布局

样式表

六、列表方块

1.有序列表变无序列表

<ol>
        <li>张店</li>
        <li>桓台</li>
        <li>淄川</li>
    </ol>

网页上显示为1. 张店     2. 桓台   3. 淄川  (竖向显示)

<ol style="list-style:none">
        <li>张店</li>
        <li>桓台</li>
        <li>淄川</li>
    </ol>

网页上显示   张店     桓台    淄川

list-style:none将列表前面的序号去掉,成为了无序列表。

<ol style="list-style:inside"> 列表前面的序号和列表内容在一起

<ol style="list-style:outside">列表前面的序号和列表内容分开

<ol style="list-style-image:url(001.png)">将列表前面的序号变成图片

七、格式和布局

1.位置 position

①fixed固定   相对于浏览器边框位置固定,上下拉滚动条不随着滚动条的上下拖拉而变化。

<div style="width:200px; height:200px; position:fixed; top:"></div>

调整位置:top:距离上边距的位置  right:距离右边距的位置  bottom:距离下边距的位置  left:距离左边距的位置

<div style="width:200px; height:200px; background-color:#03F; position:fixed; top:20px; left:20px"></div>

②absolute   相对于父级元素(浏览器、绝对定位的上级,此处的上级就是<body>)。

<body>
        <div style="width:200px; height:200px; background-color:#03F; position:absolute; top:100px; left:50px"></div>

<div style="width:500px; height:500px; position:absolute; top:100px; left:100px; background-color:#FCC">
            <div style="width:200px; height:200px; background-color:#03F; position:absolute; top:100px; left:50px"></div>
        </div>

上面的代码里面的position的位置是相对于外面那一级的position的位置决定的。但是外面的那一级中也要有position并且值是absolute才可以,否则上一级对里面那一级就失去了约束作用。

③relative  相对位置  相对于原来自身的位置移动

网页上的元素都存在默认的边界(margin或者padding),在网页上布局开始时要把元素自身带的margin或者padding去掉,防止因为元素自身的边界不同而造成布局时各元素发生错乱,去掉方式为。

<title>无标题文档</title>
        <style type="text/css">
            *{ margin:0px; padding:0px}
           </style>
        </head>
        <body>

页面布局时一定要加上 *{ margin:0px; padding:0px} 如果 四周的 margin和padding如果一样的话写上一个值就可以。

实际上去掉边界时会写成 *{ margin:0px auto; padding:0px},加上auto里面的元素会水平居中

2.流  float

right   向右流

left    向左流

<style type="text/css">
    *{ margin:0px auto; padding:0px}
    .text{ width:200px; height:200px; background-color:#63C; margin:0px 0px 0px 10px; float:left}
    </style>
    </head>
    <body>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>

使用  流  时,里面的元素会默认的浮上一层,流结束后,要把流清掉,清掉方式是在流结束的位置加上<div style="clear:both"></div>。使用margin时,一般要配合着流使用,自己使用没有效果。

以下代码是一个简单的导航栏

<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑}
#menu{ width:800px; height:45px; background-color:#CCC; margin-top:20px}
.text{ width:100px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
.text:hover{ background-color:#63C; color:#FFF; cursor:pointer}
</style>
</head>
<body>
<div id="menu">
<div class="text">首页</div>
<div class="text">产品中心</div>
<div class="text">产品介绍</div>
<div class="text">图集</div>
<div class="text">联系我们</div>
<div class="text">友情链接</div>

<div style="clear:both"></div>

:hover表示鼠标放上来,当鼠标放到这些元素上来以后

.text:hover{ background-color:#63C; color:#FFF; cursor:pointer}   表示把鼠标变成手。background-color:#63C表示鼠标放上后变成的背景色。 color:#FFF表示鼠标放上后文字变成什么颜色。

导航栏除了用<div>制作以外,还可以用序列制作。

<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑}
#menu{ width:800px; height:45px; background-color:#CCC; margin-top:20px}
#menu1{width:800px; height:45px; background-color:#CCC; margin-top:20px; list-style:none}
.text{ width:100px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
.text:hover{ background-color:#63C; color:#FFF; cursor:pointer}
</style>

<ul id="menu1">
<li class="text">首页</li>
<li class="text">产品中心</li>
<li class="text">产品介绍</li>
<li class="text">图集</li>
<li class="text">联系我们</li>
<li class="text">联系我们</li>
</ul>

用列表制作的导航栏和用<div>制作的是一样的效果。

<div style="width:300px; height:300px; background-color:#0F0; z-index:3; position:relative"></div>
<div style="width:300px; height:300px; background-color:#F00; position:relative; top:-100px; left:-50px; z-index:6"></div>

z-index表示分层,z-index的值越大表示图层越靠上。

时间: 2024-10-04 16:59:14

9.11上午 列表方块 格式和布局的相关文章

css样式表----------样式属性(背景与前景、边界和边框、列表与方块、格式与布局)

一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url(路径); /*设置背景图片(默认为平铺.)*/ background-repeat:no-repeat/repeat-x/repeat-y;no-repeat /*不平铺 repeat-x 橫向平铺 repeat-y 纵向平铺 */ background-position:center; /*背景图片居中

Java 新手学习 CSS样式列表 排版 格式布局

1,样式表分为  内联样式表   内嵌样式表  外部样式表  三种. 内联样式表是直接写在标签里面的  比如 <p style=“”></p>  <div style=""></div> 内嵌样式表是必须写在head 标签里面的  比如 <style> p{样式} </style> 只针对body 里的p 标签 改变样式 也可以是 <style> div{样式(样式可以自己设定)比如 width:200

作业:做一个网站页面。列表方块。{0911上}

列表方块: list-style: none 将列表前面的序号去掉 list-style-image 可以将前面的序号变为图片 格式与布局: 位置  position fixed 固定  相对于浏览器边框位置固定 absolute  绝对位置     相对于父级元素(浏览器,绝对定位的上级) relative 相对位置      相对于自身应该出现的位置 top   距离上边的距离 right    距离右边的距离 bottom   距离下边的距离 left    距离左边的距离 流:   fl

css样式,边界和边框,格式和布局

1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图片的平铺方式.no-repeat:不平铺,repeat:平铺,repeat-x:水平平铺,repeat-y:垂直平铺 4)background-position:图片位置.center,left,right,top,bottom:eg:左上:left 20px top 20px 5)backgrou

Css样式表【边界边框】【列表方块】

一.如何给div加边框?[边界边框] 我们先做一个整个边框,并附加成绿色的边框. ①使用属性border进行设置. →→ ②也可以单独更改某个边的边框线的颜色,利用border属性更改. 如果将div中的长宽的值设置为0,那么整个div就全都是边框了. → ③如果做倒三角? 当然,我们只要调整div中边框的颜色就和像素可以做出我们想要的形状. #a1{ width: 0px; height: 0px; border-top: 100px solid darkslategray; border-b

一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给div定位 1.position:fixed;锁定位置(相当于浏览器窗口的位置),默认层数最高.例如有些网站的右下角弹窗. 练习:在右下角做一个弹窗,锁定位置,不随网页滚动而滚动. 步骤: 一.先做一个文字的弹窗 <head> <meta http-equiv="Content-Typ

css样式表:样式分类,选择器。样式属性,格式与布局

样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立的区域内嵌在网页里,必须写在head里边. <style type="text/css"> p  //格式对p起作用 {样式: } </style> 3.外部样式表 新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→

0503格式与布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #cs_fixed{ width: 200px; height: 200px; background-color: orange; positi

HTML基础(五)——-css样式表——样式属性——格式与布局

一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute     绝对位置: 1.外层没有position:absolute(或relative):那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素). 2.外层有position:absolute(或relative):那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素). 示