豆瓣页面 (html 和css)

最新推荐文章于 2023-11-22 21:50:08 发布

weixin_30832351

最新推荐文章于 2023-11-22 21:50:08 发布

阅读量1.7k

点赞数 4

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/sics/p/7710788.html

版权

一、豆瓣页面、html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>豆瓣页面</title>
    <link rel="stylesheet" href="../css/home.css">
</head>
<body>
    <!--顶部导航栏-->
    <header>
        <!--顶部左侧导航-->
        <ul class="left-ul">
            <li><a href="#">豆瓣</a></li>
            <li><a href="#">读书</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">音乐</a></li>
            <li><a href="#">同城</a></li>
            <li><a href="#">小组</a></li>
            <li><a href="#">阅读</a></li>
            <li><a href="#">F44</a></li>
            <li><a href="#">东西</a></li>
            <li><a href="#">集市</a></li>
            <li><a href="#">更多</a></li>
        </ul>
        <!--右侧导航-->
        <ul class="right-ul">
            <li><a href="#">下载豆瓣客户端</a></li>
            <li><a href="#">提醒</a></li>
            <li><a href="#">豆邮</a></li>
        </ul>
    </header>
    <!--顶部下-->
    <div class="banner">
        <div class="huamg">
            <img src="../img/banner.png" alt="豆瓣网"/>
            <ul class="hang">
                <li><a href="#">首页</a></li>
                <li><a href="#">我的豆瓣</a></li>
                <li><a href="#">浏览发现</a></li>
                <li><a href="#">移动应用</a></li>
                <!--<li><a href="#">游戏</a></li>-->
                <li><a href="#">线上活动</a></li>
            </ul>
            <form action="">
                <input type="text" placeholder="搜索你感兴趣内容和人"/>
                <button>
                    <img src="../img/mirror.png" alt=""/>
                </button>
            </form>
        </div>
    </div>
    <!--内容区-->
    <div class="container">
        <!--左半边-->
        <div class="left">
            <ul class="leftul">
                <li><a href="#"><b></b>说句话</a></li>
                <li><a href="#"><b></b>发照片</a></li>
                <li><a href="#"><b></b>推荐网页</a></li>
                <li><a href="#"><b></b>写日记</a></li>
                <li><a href="#"><b></b>发布东西</a></li>
            </ul>
            <p class="set"><a href="#">首页</a></p>
            <form action="">
                <input type="text" placeholder="分享生活的点点滴"/>
                <button class="camera">
                    <img src="../img/icon2.png" alt=""/>
                </button>
                </form>
            <!--评论区-->
                 <div class="pinglun">
                <img src="../img/cat.jpg" alt="头像"/>
                <div class="neirong">
                    <h1>Violet日记</h1>
                    <div class="gray">
                        <div class="article">
                            <p><a href="#">怪力八面体-胡夫金子塔</a></p>
                            <p> 前几天看见有人在广播里发了这个，搜了一下似乎
                                也没人针对这个写文章。今天咱们就来讨
                                论这个。几天看见有人在广播里发了这个，这几天
                                看见有人在这儿说这个。今天咱们就来讨论这个。
                            </p>
                            <div class="like"><i></i>喜欢</div>
                            </div>
                              <div class="picture">
                            <img src="../img/p35801459.jpg" alt="文章"/>
                              </div>
                    </div>
                          <p class="time">来自热门精选</p>
                </div>
                </div>
            <!--评论区-->
            <div class="pinglun">
                <img src="../img/cat.jpg" alt="头像"/>
                <div class="neirong">
                    <h4>李青菜的日记：</h4>
                    <div class="gray">
                        <div class="article">
                            <p><a href="#">金字塔</a></p>
                            <p>前几天看见有人在广播里发了这个，搜了一下似乎
                                也没人针对这个写文章。今天咱们就来讨
                                论这个。几天看见有人在广播里发了这个，这几天
                                看见有人在这儿说这个。今天咱们就来讨
                                论这个。
                            </p>
                            <div class="like"><i></i>喜欢</div>
                            </div>
                              <div class="picture">
                            <img src="../img/p35801459.jpg" alt="文章的配图"/>
                              </div>
                             </div>
                                  <p class="time">1小时前，来自热门精选</p>
                                      </div>
                                         </div>
                                               <div class="pinglun">
                        <img src="../img/cat.jpg" alt="头像"/>
                             <div class="neirong">
                                      <h4>wand</h4>
                             <div class="gray">
                             <div class="article">
                                  <p><a href="#">怪力八面体-胡夫金字塔</a></p>
                                  <p>前几天看见有人在广播里发了这个，搜了一下似乎
                                      也没人针对这个写文章。今天咱们就来讨
                                     论这个。几天看见有人在广播里发了这个，这几天
                                     看见有人在这儿说这个。今天咱们就来讨
                                      论这个。
                                 </p>
                                 <div class="like"><i></i>喜欢</div>
                        </div>
                        <div class="picture">
                            <img src="../img/p35801459.jpg" alt="文章配图"/>
                        </div>
                    </div>
                    <p class="time">1小时前，来自热门精选</p>
                </div>
            </div>
            <div class="pinglun">
                <img src="../img/cat.jpg" alt="头像"/>
                <div class="neirong">
                    <h4>赵志名的日志</h4>
                    <div class="gray">
                        <div class="article">
                            <p><a href="#">怪力八面体-胡夫金字塔</a></p>
                            <p>前几天看见有人在广播里发了这个，搜了一下似乎
                                也没人针对这个写文章。今天咱们就来讨
                                论这个。几天看见有人在广播里发了这个，这几天
                                看见有人在这儿说这个。今天咱们就来讨
                                论这个。
                            </p>
                            <div class="like"><i></i>喜欢</div>
                        </div>
                        <div class="picture">
                            <img src="../img/p35801459.jpg" alt="文章配图"/>
                        </div>
                    </div>
                    <p class="time">1小时前，来自热门精选</p>
                </div>
            </div>
            <div class="pinglun">
                <img src="../img/cat.jpg" alt="头像"/>
                <div class="neirong">
                    <h4>wand</h4>
                    <div class="gray">
                        <div class="article">
                            <p><a href="#">怪力八面体-胡夫金字塔</a></p>
                            <p>前几天看见有人在广播里发了这个，搜了一下似乎
                                也没人针对这个写文章。今天咱们就来讨
                                论这个。几天看见有人在广播里发了这个，这几天
                                看见有人在这儿说这个。今天咱们就来讨
                                论这个。
                            </p>
                            <div class="like"><i></i>喜欢</div>
                        </div>
                        <div class="pinglun">
                            <img src="../img/p35801459.jpg" alt="文章配图"/>
                        </div>
                    </div>
                    <p class="time">1小时前，来自热门精选</p>
                </div>
            </div>
            <div class="pinglun">
                <img src="../img/cat.jpg" alt="头像"/>
                <div class="neirong">
                    <h4>Violet的日记：</h4>
                    <div class="gray">
                        <div class="article">
                            <p><a href="#">怪力八面体-胡夫金字塔</a></p>
                            <p>前几天看见有人在广播里发了这个，搜了一下似乎
                                也没人针对这个写文章。今天咱们就来讨
                                论这个。几天看见有人在广播里发了这个，这几天
                                看见有人在这儿说这个。今天咱们就来讨
                                论这个。
                            </p>
                            <div class="like"><i></i>喜欢</div>
                        </div>
                        <div class="picture">
                            <img src="../img/p35801459.jpg" alt="文章配图"/>
                        </div>
                    </div>
                    <p class="time">1小时前，来自热门精选</p>
                </div>
            </div>
        </div>
        <!--右半边-->
        <div class="right">
            <div class="happen">
                <h2>豆瓣正在发生······</h2>
                <p><a href="#">哈利·波特第八部全球同步上架</a></p>
                <p><a href="#">China Joy优秀游戏鉴赏</a></p>
            </div>
            <div class="adver">
                <a href="#"><img src="../img/adver.jpg" alt="广告图片"/></a>
            </div>
            <p class="shenqing"><a href="#">>申请创建小站</a></p>
            <div class="erweima">
                <img src="../img/index_douban_ad_4.png" alt="二维码"/>
            </div>
            <div class="hot">
                <h2>热门活动······<a href="#">（换一个）</a></h2>
                <img src="../img/IMG_1870.JPG" alt="图片"/>
                <p><a href="#">给我看看你们的美好工作台吧~</a></p>
                <p>时间：6月27日-8月26日</p>
                <p>参加：226人参加</p>
                <p><a href="#">>更多线上活动</a></p>
            </div>
            <!--区块6（一拍一）-->
            <div class="city">
                <h2>豆瓣一拍一······<a href="#">（更多）</a></h2>
                <div class="xiamen">
                    <a href="#">
                        <img src="../img/xiamen.jpg" alt="图片"/>
                    </a>
                    <p><a href="#">很高兴遇见你</a></p>
                    <p>城市：厦门</p>
                    <p>价格：2400</p>
                </div>
                <div class="beijing">
                    <a href="#">
                        <img src="../img/beijing.jpg" alt="图片"/>
                    </a>
                    <p><a href="#">微套系|至真系列</a></p>
                    <p>城市：北京</p>
                    <p>价格：1480</p>
                </div>
                <p class="open"><a href="#">>已开放17个城市</a></p>
            </div>
            <!--<!-（灾区儿童）&ndash;&gt;-->
            <a href="#">
                <img src="../img/unicf.jpg" alt="献爱心" class="unicef"/>
            </a>
        </div>
    </div>
    <!--下面的底部-->
    <footer>
        <ul>
            <li><a href="#">关于豆瓣·</a></li>
            <li><a href="#">在豆瓣的工作</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">免责声明</a></li>
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">移动应用</a></li>
            <li><a href="#">豆瓣广告</a></li>
        </ul>
        <p>&copy2005-2016 douban.com,all rights reserved 北京豆网科技有限公司</p>
    </footer>
</body>
</html>
二、豆瓣页面、CSS ：

*{
    padding: 0;
    margin: 0;
    /*font-size: 0;*/
}
header{
    width:100%;
    height: 30px;
    background-color: #555753;
}
/*顶部导航栏*/
header li{
    list-style: none;
    line-height: 30px;
}
.left-ul li{
    float: left;
}
.hang{
    width:100%;
}
.hang li{
    width:20%;
    float:left;
}

.right-ul{
    float: right;
    margin-right: 164px;
}
.right-ul li{
    float: left;
}
header a{
    text-decoration: none;
    font-size: 12px;
    padding: 0 12px;
}
header a:link{
    color: #ffffff;
}
header a:visited{
    color: #ffffff;
}
header a:hover{
    font-size: 14px;
    color: #565854;
    background: 48px 30px #ffffff;
}
/*banner区域*/
.banner{
    width:100%;
    height: 75px;
    background-color: #edf4ed;
}
.banner01{
    width: 960px;
    height: 75px;
    background-color: #edf4ed;
    margin: auto;
}
.banner01 img{
    clear: both;
    display: inline-block;
    float: left;
    margin: 22px 20px ;
}
.banner01 li{
    float: left;
    list-style: none;
    padding: 0 11px;
}
.banner01 a{
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 75px;
}
.banner01 a:link{
    color: #2b963b;
}
.banner01 a:visited{
    color: #2b963b;
}
.banner01 a:hover{
    font-size: 18px;
    color: #b53e27;
}

.banner01 input{
    display: inline-block;
    float: right;
    width: 260px;
    height: 28px;
    margin: 22.5px 0px;
}
.banner01 button img{
    padding-left: 264px;
    margin: 0 0;
}
button{
    float: right;
    width: 30px;
    height: 30px;
    margin: 22.5px 0;
    border: none;
    background: none;
}
/*内容区*/
.container{
    clear: both;
    width: 960px;
    margin: auto;
    overflow: hidden;
    /*height: 1000px;*/
    background-color: rgba(255, 169, 40, 0.7);
}
/*左半边*/
.left{
    width:600px;
    background-color: #ffffff;
    height: 100%;
    float: left;
    padding-top: 50px;
}
/*搜索框上导航*/
.leftul li{
    list-style: none;
    float: left;
    padding-right: 18px;
}
.leftul a{
    text-decoration: none;
    font-size: 14px;
}
.leftul b{
    display: inline-block;
    width: 19px;
    height: 15px;
    background-image: url("../img/icon.png");
}
.leftul li:nth-child(2) b{
    background-position: 0 -16px;
}
.leftul li:nth-child(3) b{
    background-position: 0 -33px;
}
.leftul li:nth-child(4) b{
    background-position: 0 -50px;
}
.leftul li:nth-child(5) b{
    background-position: 0 -67px;
}
.leftul a:link{
    color: #1b96ff;
}
.leftul a:visited{
    color: #1b96ff;
}
.leftul a:hover{
    color: #000000;
}
.left p{
    float: right;
    font-size: 12px;
    color: #888888;
}
.set a{
    text-decoration: none;
    font-size: 12px;
    color: #888888;
}
.left .set a:link{
     color: #888888;
}
.left .sett a:visited{
    color: #888888;
}
.left .set a:hover{
    text-decoration: underline;
}
.left input{
    display: inline-block;
    clear: both;
    width: 596px;
    height: 28px;
}
/*相机图标*/
.camera{
    display: inline-block;
    width: 17px;
    height: 13px;
    border: none;
    margin: -20px 0 0 0;
    background-image: url("../img/icon2.png");
}
.camera img{
    padding: 0px;
    margin: 0 0;
}
/*评论区*/
.pinglun{
    width: auto;
    overflow: hidden;
    padding-top: 24px;
    /*background-color: #1b96ff;*/
}
.pinglun a{
    text-decoration: none;
    font-size: 14px;
}
.pinglun a:link{
    color: #1b96ff;
}
.pinglun a:visited{
    color: #1b96ff;
}
.pinglun a:hover{
    color: #000000;
}
.pinglun img{
    float: left;
}
/*评论区内容*/
.neirong{
    width: 537px;
    float: right;
    /*background-color: #2b963b;*/
}
h1{
    height: 15px;
    font-size: 12px;
    margin-bottom: 12px;
}
.gray{
    width: 515px;
    height: 140px;
    padding: 17px 0 17px 20px;
    float: right;
    background-color: #f9f9f9;
}
.article{
    width: 338px;
    float: left;
}
.article p{
    float: none;
}
.article p:nth-child(1){
    margin-bottom: 12px;
}
.picture img{
    width: 107px;
    height: 60px;
    float: right;
    padding-top: 10px;
    padding-right: 24px;
}
.like{
    display: inline-block;
    width: 52px;
    height: 20px;
    border: 1px solid #aaaaaa;
    margin: 16px 0;
    text-align: center;
    line-height: 20px;
}
.like i{
    display:inline-block;
    width: 12px;
    height: 11px;
    background-image: url("../img/ic_actions.png");
}
.like:hover i{
    background-position: 0 -13px;
}
.like:hover{
    color: #e03636;
}
.neirong .time{
    clear: both;
    float: none;
    text-align: left;
    padding: 10px 0 28px 20px;
    font-size: 10px;
    border-bottom: 1px solid #aaaaaa;
}
/*右半边*/
.right{
    width:260px;
    /*background-color: red;*/
    height: 100%;
    float:right;
}
.happen{
    width: 224px;
    height: 78px;
    background-color: #f2f7f6;
    padding: 18px;
    margin-top: 50px;

}
/*区块一*/
.happen{
    margin-bottom: 20px;
}
.happen h2{
    font-size: 16px;
    color: #007722;
    margin-bottom: 16px;
}
.happen p{
    font-size: 12px;
    color: #3377aa;
    margin-bottom: 14px;
}
.happen p a:hover{
    color: #ff5522;
}
/*区块二*/
.adver img{
    width: 260px;
    margin-bottom: 48px;
}
/*区块三*/
.shenqing{
    margin-bottom: 34px;
}
.right p a{
    text-decoration: none;
    color: #33a0da;
}
.right p a:hover{
    color: #ff5522;
}
/*区块四（二维码）*/
.erweima img{
    width: 260px;
    margin-bottom: 32px;
}
/*区块五（热门活动）*/
.hot{
    height: 120px;
    margin-bottom: 38px;
    /*background-color: #ffffff;*/
}
.hot h2{
    font-size: 16px;
    color: #007722;
    margin-bottom: 16px;
}
.hot h2 a{
    text-decoration: none;
    font-size: 12px;
    color: #33a0da;
}
.hot p{
    font-size: 12px;
    color: #3377aa;
}
.hot p:nth-child(4){
    color: #888;
}
.hot p:nth-child(5){
    color: #888;
}
.hot p:nth-child(6){
    margin-top: 20px;
}
.hot img{
    width: 48px;
    float: right;
}
/*区块六*/
.city{
    margin-bottom: 20px;
}
.xiamen{
    height: 120px;
    margin-bottom: 15px;
}
.city h2{
    font-size: 16px;
    color: #007722;
    margin-bottom: 16px;
}
.city h2 a{
    text-decoration: none;
    font-size: 12px;
    color: #33a0da;
}
.city div img{
    float: left;
    width: 120px;
    margin-right: 10px;
}
.beijing{
    height: 120px;
    margin-bottom: 17px;
}
.xiamen p,.beijing p{
    float: left;
    color: #888;
    font-size: 14px;
}
.city p{
    float: left;
}
.open{
    margin-bottom: 20px;
}
/*区块七（灾区儿童）*/
.unicef{
    clear: both;
    width: 260px;
}
/*底部*/
footer{
    width: 960px;
    height: 45px;
    margin: auto;
    margin-top: 60px;
    border-top: 1px dashed #888888;
}
footer p{
    font-size: 12px;
    color: #888888;
    line-height: 45px;
}
footer ul{
    float: right;
}
footer ul li{
    float: left;
    padding: 0 5px;
}
footer ul li:nth-child(1){
    list-style: none;
}
footer a{
    text-decoration: none;
    line-height: 45px;
    font-size: 12px;
    color: #33a0da;
}

转载于:https://www.cnblogs.com/sics/p/7710788.html

weixin_30832351

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
豆瓣页面 (html 和css)

一、豆瓣页面、html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>豆瓣页面</title> <link rel="stylesheet" href="../css/home.css"></hea...
复制链接

扫一扫