安居客简单页面

鹿蹊zz

已于 2022-05-16 20:49:37 修改

阅读量232

点赞数 2

分类专栏： html练习文章标签： css html 学习

于 2022-05-16 16:59:06 首次发布

本文链接：https://blog.csdn.net/m0_46461853/article/details/124803261

版权

html练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原图：

index.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>
        安居客
    </title>
    <link type="text/css" href="index.css" rel="stylesheet" />
   

</head>

<body>
    <div class="content">
        <div class="tit">
            <a href="#">合肥特色专区|服务大全>></a>
        </div>
        <ul class="dh">
            <li>
                <a class="bg1" href="#">家政</a>
            </li>
            <li>
                <a class="bg2" href="#">婚庆</a>

            </li>
            <li>
                <a class="bg3" href="#">装修</a>

            </li>
            <li>
                <a class="bg4" href="#">汽车</a>
            </li>
            <li>
                <a class="bg5" href="#">休闲</a>

            </li>
            <li>
                <a class="bg6" href="#">商务</a>

            </li>
            <li>
                <a class="bg7" href="#">旅游</a>

            </li>
            <li>
                <a class="bg8" href="#">医疗</a>

            </li>
            <li>
                <a class="bg9" href="#">餐饮</a>

            </li>
            <li>
                <a class="bg10" href="#">教育</a>

            </li>
            <li>
                <a class="bg11" href="#">加盟</a>

            </li>
        </ul>

    </div>
</body>

</html>

index.css

a{
    text-decoration: none;
}
li{
    list-style: none;
}

.content{
    width:1180px;
    height:120px;
    border:1px solid #dfdfe0;
}

.tit{
    font-family:微软雅黑;
    color: ;
    border-left:#f78015 solid 7px;
    padding-left:10px;
    font-size:14px;
    font-weight:700;
    margin-left:30px;
    margin-top:20px; 
}
.tit a{
    color: #0041D9;
}

.tit a:hover{
    color:red;
    text-decoration:underline;
}

.bg1{
    background:url(bg.png) 0 0 no-repeat;
}
.bg2{
    background:url(bg.png) -80px 0 no-repeat;
}
.bg3{
    background:url(bg.png) -159px 0 no-repeat;
}
.bg4{
    background:url(bg.png) -242px 0 no-repeat;
}
.bg5{
    background:url(bg.png) -321px 0 no-repeat;
}
.bg6{
    background:url(bg.png) -405px 0 no-repeat;
}
.bg7{
    background:url(bg.png) -487px 0 no-repeat;
}
.bg8{
    background:url(bg.png) -568px 0 no-repeat;
}
.bg9{
    background:url(bg.png) -649px 0 no-repeat;
}
.bg10{
    background:url(bg.png) -730px 0 no-repeat;
}
.bg11{
    background:url(bg.png) -813px 0 no-repeat;
}
.dh a{
    width:32px;
    padding-top:37px;
    height:14px;
    display:inline-block;
    margin-bottom:10px;
    text-align:center;
    font-size: 13px;
}

.dh{
    margin-top:10px;
    /* border: 1px solid red; */
}
.dh li{ 
    width: 90px;
    display: inline-block;
    margin-bottom: 10px;
    /* border: 1px solid green;    */
}
.dh li a{
    color: #0041D9;
}
.dh a:hover{
    color:#f78015;
    text-decoration: none;
}

bg.png图片

效果图：

鹿蹊zz

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
安居客简单页面

原图：index.html<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title> 安居客 </title> <link type="text/css" href="index.css" rel="stylesh.
复制链接

扫一扫