CSS学习（五）——阴影，超链接伪类，列表

最新推荐文章于 2022-07-31 21:20:13 发布

笔锋Sharpen

最新推荐文章于 2022-07-31 21:20:13 发布

阅读量144

点赞数

本文链接：https://blog.csdn.net/weixin_52725999/article/details/114306144

版权

阴影和超链接伪类

阴影：以选中的字体为原点，做直角坐标系。

超链接伪类：a:hover（记住这一个就够了，大概）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .a1{
            vertical-align: middle;
        }
        /*默认颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*重点记住：鼠标悬浮的效果*/
        a:hover{
            color: orangered;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: green;
        }
        /*!*为访问的连接*!*/
        /*a:link{}*/
        /*!*已访问的链接*!*/
        /*a:visited{*/
        /*    color: blue;*/
        /*}*/
        /*text-shadow:阴影的颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: yellow 10px 5px 10px;
        }
    </style>
</head>
<body>
<a href="">
    <img src="images/a.jpg" alt="">
</a>
<p class="a1">
    <a href="#">码出高效：Java开发手册</a>
</p>
<p id="price">￥99</p>
</body>
</html>

列表

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服务鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食物饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>
</body>
</html>

style.css

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 35px;
    background: blue;
}
#nav{
    width: 400px;
    background: #41d7b9;
}
/*ul li
    list-style:
        none;是没有样式，去掉圆点
        circle;空心圆
        decimal;数字
        square;正方形
*/
ul{
    background: #41d7b9;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;

}

笔锋Sharpen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习（五）——阴影，超链接伪类，列表

阴影和超链接伪类阴影：以选中的字体为原点，做直角坐标系。超链接伪类：a:hover（记住这一个就够了，大概）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .a1{ vertical-align: middle;
复制链接

扫一扫