css杂

最新推荐文章于 2024-07-24 22:36:56 发布

soul9999

最新推荐文章于 2024-07-24 22:36:56 发布

阅读量100

点赞数

分类专栏： css 文章标签： CSS ASP F#

本文链接：https://blog.csdn.net/soul9999/article/details/83441616

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

[size=medium]
[url='http://www.w3school.com.cn/tiy/t.asp?f=csse_list-style-image']用图像来作列表项标记：[/url]
list-style-image: url('/i/eg_arrow.gif')

[url='http://www.w3school.com.cn/tiy/t.asp?f=csse_float']使图像浮动于一个段落的右侧。[/url]
float:right

[url='http://www.w3school.com.cn/tiy/t.asp?f=csse_float5']创建水平菜单 [/url]
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;//文字装饰为无，默认的连接是有下划线的，这样可以去除下划线
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline} //li 元素显示为行内元素
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>
</body>

[url='http://www.w3school.com.cn/tiy/t.asp?f=csse_link']给超连接着色：[/url]
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

[url='http://www.w3school.com.cn/tiy/t.asp?f=csse_zindex2']Z-index [/url]
[url='http://www.w3school.com.cn/tiy/t.asp?f=csse_overflow']如何使用滚动条来显示元素内溢出的内容[/url]
overflow: scroll

[url='http://www.w3school.com.cn/tiy/t.asp?f=csse_dim_width_percent']使用百分比来设置元素的宽度[/url]
img {width: 50%}

[url='http://www.w3school.com.cn/tiy/t.asp?f=csse_list-style-type']在无序列表中的不同类型的列表标记[/url]
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>

[/size]