您现在的位置是:首页 > 其他 > 物联网物联网

css学习笔记

2021-06-05 09:10:36物联网人已围观

简介css学习笔记相关案列展示:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> p{ m

css学习笔记

相关案列展示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        p{
            margin: 0;
        }
        ul{
            padding: 0;
            margin: 0;
        }
        nav li:hover:nth-child(1){
            background-image: url(素材/images/bg5.png);
        }
        .t1{
            background-image: url(素材/images/bg1.png);
        
        }
        nav li:hover:nth-child(2){
            background-image: url(素材/images/bg5.png);
        }
        .t2{
            background-image: url(素材/images/bg2.png);
        
        }
        nav li:hover:nth-child(3){
            background-image: url(素材/images/bg2.png);
        }
        .t3{
            background-image: url(素材/images/bg3.png);
        
        }
        li:hover:nth-child(4){
            background-image: url(素材/images/bg6.png);
        }
        .t4{
            background-image: url(素材/images/bg4.png);
        
        }
        nav li{
            width: 120px;
            height: 58px;
            line-height: 50px;
            display: inline-block;
            text-align: center;
        }
        .p1{
            background-color:#0f7cbf;
            font-size: 18px;
            line-height: 35px;
            text-indent:2px;
            color: white;
            width: 220px;
        } 
    
        .j1{
            
        }
        .p2{
            font-size: 14px;
            background-color: #e4f1fa;
            width: 220px;
            text-indent:4px;
            color: #0F7CBF;
        }
        .li1 {
            font-size: 12px;
            padding: 1em;
            width: 150px;
        }
        .li1 li{
            list-style-type: none;
            color:#666 ;
            display: inline-block;
            /*line-height: 24px;*/
            /*//text-indent: 2px;*/
            
            
        }
        .p2:hover{
            text-decoration:underline;
        }
        .li1 li:hover{
            text-decoration:underline;
            color:#F60 ;
        }
    </style>
    <body>
        <nav>
        <ul>
            <li class="t1">五彩导航</li>
            <li class="t2">五彩导航</li>
            <li class="t3">五彩导航</li>
            <li class="t4">五彩导航</li>
        </ul>
        </nav>
    <hr />
    <p class="p1">家用电器</p>
    <p class="p2"><b>大家电</b></p>
    <ul class="li1">
        <li>平板电视  &nbsp;&nbsp;</li> <li>洗衣机</li> &nbsp;&nbsp; <li>冰箱</li>
        <li>空调</li> &nbsp;&nbsp;  <li>烟机/灶具</li>  &nbsp;&nbsp; <li>热水器</li>
        <li>冷柜/酒柜</li>  <li>消毒柜</li>  <li>家庭影院</li>
    </ul>
    <p class="p2"><b>生活电器</b></p>
    <ul class="li1">
        <li>电风扇  &nbsp;&nbsp; 净化器 &nbsp;&nbsp; 吸尘器</li>
        <li>净水设备 &nbsp;&nbsp;  挂烫机  &nbsp;&nbsp; 电话机</li>
    </ul>
    <p class="p2"><b>五金家装</b></p>
    <ul class="li1">
        <li>淋浴/水槽  &nbsp;&nbsp;电动工具 &nbsp;&nbsp; 手动工具</li>
        <li>仪器仪表 &nbsp;&nbsp; 浴霸/排气  &nbsp;&nbsp; 灯具</li>
    </ul>
    </body>
</html>

效果展示:

文章来源:https://blog.csdn.net/qq_45868384/article/details/117525219

Tags:css html css3 

很赞哦! ()

随机图文

文章评论

留言与评论(共有 0 条评论)
   
验证码:

本栏推荐

站点信息

  • 文章统计247968篇文章
  • 浏览统计18356次浏览
  • 评论统计1个评论
  • 标签管理标签云
  • 统计数据:统计代码
  • 微信公众号:扫描二维码,关注我们