HTML ul li 怎么用 比如我要加 很多文字 图片 我想知道CSS 里面 外嵌样式中怎么写

HTML ul li 怎么用 比如我要加 很多文字 图片 我想知道CSS 里面 外嵌样式中怎么写,第1张

UL LI,,是列表标签

<ul>

<li>内容</li>

<li>内容2</li>

</ul>

这是用法,你要加多少内容就直接加在里面就行了,,

只是默认UL是有PADDING值的,LI默认会有list-style值,LI默认是相对UL一行。

现在就是不知道你想要问什么,你就问怎么写,,你要想什么效果???

如果只是放图片文字,,那直接加在LI里就行了。

1、打开编辑测试的软件,设置一个div区域,li标签因为默认的需要换行,所以需要设置一个浮动点,float:left使其靠左浮动对齐;主要代码如下:

<style>

.ceshi{

    width:100%

    height:30px

    background-color:#F00

    color:#FFF

    }

.ceshi ul{ width:820px margin:0 auto}

.ceshi ul li{width:180px height:30px float:left list-style-type:none text-align:center line-height:30px border-right:1px solid #FFF}

</style>

<div class="ceshi">

    <ul>

        <li>li标签右边框</li>

        <li>li标签右边框</li>

        <li>li标签右边框</li>

        <li>li标签右边框</li>

    </ul>

</div>

详解:设置一个宽度:100%,高度为30px的区域,再次设置一下背景颜色与字体颜色,使其区分开;

设置一个ul宽度,让其在div区域中居中对齐;

最后也是最关键的li标签设置:宽度180px高度同样30px;靠左浮动float:leftlist-style-type:none去除左侧的点,然后使字体居中对齐center最后设置li标签的分隔线,这里用边框属性就可以实现此功能;border-right:1px solid #FFF   border是边框默认的是四周;border-right在li标签右侧添加边框也可以理解为分割线:solid为分隔线的样式;#FFF为分隔线的颜色;

2、网页中实现的效果为:


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11750561.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-18
下一篇2023-05-18

发表评论

登录后才能评论

评论列表(0条)

    保存