前端初学学习进程X

最新推荐文章于 2024-07-26 08:00:00 发布

qq_38318537

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量221

点赞数

分类专栏：学习进程文章标签： css

本文链接：https://blog.csdn.net/qq_38318537/article/details/78009622

版权

学习进程专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这几天主要学习了CSS中的几个实例。感觉还是比较好的。

1.将图片作为列表项标记

<html>
<head>
<style type="text/css">
ul 
{
list-style-image: url(图片地址)
}
</style>
</head>

<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>

</html>

创建水平菜单栏

<html>
<head>
<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}
</style>
</head>

<body>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</body>
</html>

改变光标

<html>

<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>

</html>

4.浏览器的自动溢出处理

<html>
<head>
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: auto
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

5.使段落首字母浮动于左侧

<html>
<head>
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>

<body>
<p>
<span>H</span>ello World!
</p>
</body>
</html>

在看的过程中，感觉这些代码比较有用，所以列举了这5个代码，想看更多此类代码，可以去W3C。

qq_38318537

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端初学学习进程X

这几天主要学习了CSS中的几个实例。感觉还是比较好的。1.将图片作为列表项标记<html><head><style type="text/css">ul {list-style-image: url(图片地址)}</style></head><body><ul><li>1</li><li>2</li><li>3</li></ul></body></html>创建水平菜单栏
复制链接

扫一扫