仿豆瓣

最新推荐文章于 2021-12-18 17:33:00 发布

hanyuwebant

最新推荐文章于 2021-12-18 17:33:00 发布

阅读量736

点赞数 2

CC 4.0 BY-SA版权

分类专栏：仿豆瓣，学习笔记文章标签： html 豆瓣 css PHP

本文链接：https://blog.youkuaiyun.com/hanyuwebant/article/details/68244279

仿豆瓣，学习笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的仿豆瓣网页的设计过程，包括HTML框架结构及CSS样式设置，详细展示了如何使用HTML和CSS实现类似豆瓣网站的基本布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习仿豆瓣网页学习过程：

html框架：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="./css.css">
    </head>
    <body>
        <!-- 顶部 -->
        <div id="hd-header">
        <a href="" class="header-logo"></a>
        <form action="">
            <input type="text" class="header-search" value="电影、音乐、书籍" />
            <p></p>
        </form>
        <ul>
            <li><a href="" class="header-book"></a></li>
            <li><a href="" class="header-movie"></a></li>
            <li><a href="" class="header-music"></a></li>
            <li><a href="" class="header-group"></a></li>
            <li><a href="" class="header-local"></a></li>
            <li><a href="" class="header-fm"></a></li>
            <li><a href="" class="header-dong"></a></li>
            <li><a href="" class="header-fair"></a></li>
        </ul>
            
        </div>
        <!-- 顶部结束 -->

        <!-- 注册区 -->
        <div>
            

            
        </div>
        <!-- 注册区结束 -->
    </body>
</html>

css样式：

/*清零*/
*{
    margin: 0px;
    padding: 0px;
}
a{
    text-decoration: none;
}
img,input{
    border: 0px;
    border: 1px solid none;
}
li{
    list-style: none;
}
/*头部*/
#hd-header{
    width: 950px;
    height: 90px;
    margin: 0 auto;
    position: relative;/*相对定位*/
}

#hd-header .header-logo{
    display: block;
    width:154px;
    height:30px;
    position:absolute;/*绝对定位*/
    background:url(./img/logo_db.png);
    left:0px;
    top:29px;
}
#hd-header .header-search{
    width:273px;
    height:33px;
    border:1px solid #c3c3c3;
    position: absolute;
    left:183px;
    top: 31px;
    color:#e4e4e4;
    padding-left: 7px;
}
#hd-header p{
    width:13px;
    height:13px;
    background:url(./img/bn_srh_1.png) no-repeat;
    position:absolute;
    left: 431px;
    top: 40px;
}
#hd-header ul{
    width:468px;
    height:22px;
    position:absolute;
    right: 0px;
    top: 36px;
    
}
#hd-header ul li{
    float:left;
    margin-right: 19px;
}
#hd-header ul li a{
    display:block;
    width:39px;
    height:22px;
    
}
#hd-header ul li a.header-book{
    background:url(./img/anony_nav_logo.png) 0px 0px no-repeat;
}
#hd-header ul li a.header-movie{
    background:url(./img/anony_nav_logo.png) -60px 0px no-repeat;
}
#hd-header ul li a.header-music{
    background:url(./img/anony_nav_logo.png) -120px 0px no-repeat;
}
#hd-header ul li a.header-group{
    background:url(./img/anony_nav_logo.png) -180px 0px no-repeat;
}
#hd-header ul li a.header-local{
    background:url(./img/anony_nav_logo.png) -239px 0px no-repeat;
}
#hd-header ul li a.header-fm{
    background:url(./img/anony_nav_logo.png) -300px 0px no-repeat;
}
#hd-header ul li a.header-dong{
    background:url(./img/anony_nav_logo.png) -359px 0px no-repeat;
}
#hd-header ul li a.header-fair{
    width:42px;
    background:url(./img/anony_nav_logo.png) -421px 0px no-repeat;
}
/*头部结束*/

/*注册区*/
#hd-reg-backgroud{
    background:#e8edf1;
    width:100%;
}


/*注册区结束*/

/*公共样式*/
a{
    color: #3377aa;
}
a:hover{
    background: #3377AA;
    color:#fff;
}