静态页面复习--用semantic UI仿写豆瓣主页

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>豆瓣</title>
    <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
    <style type="text/css">
    .ui.basic.segment.container.top{
      background-color: rgb(200, 228, 221);
      margin: 0;
      width:100%;
    }
    .ui.borderless.text.menu{
      width: 1000px;
      margin:0 auto;

    }
    .ui.borderless.text.menu > .item{
      color: rgb(50, 148, 122)
    }
    .ui.icon.input{
      width: 300px;
      height: 40px;
    }
    .ui.basic.segment.left{

      padding-left: 45px;
    }
    .ui.basic.segment.leftcontent{
      height: 150px;
      margin-top: 0;
      padding-top: 0;
    }
    .like{
      float: left;
      width: 50px;
      height:50px;
      background-color: rgb(226, 161, 86);
      padding-top:5px;
    }
    .like > p{
      margin: 0;
    }
    .articlecard{
      height:200px;
      padding-left: 70px;
    }
    .articlecard > p{
      color: rgb(193, 192, 192);
      margin-top: 10px;
      padding: 8px;
      width: 530px;
      background-color: rgb(237, 242, 244);
      font-size:12px;
    }
    .page{
      padding-left: 82px;
      padding-right: 55px;
    }
    .ui.basic.segment.group{
      padding: 0;
    }
    .ui.image{
      width: 50px;
      height: 50px;
      float:left;
    }
    .bottom{
      border-top:grey 1px dashed;
    }
    </style>
  </head>
  <body>
    <div class="ui basic borderless inverted grey menu" style="border-radius:0px;height:10px;margin:0;">
      <div class="item">
        豆瓣
      </div>
      <div class="item">
        读书
      </div>
      <div class="item">
        电影
      </div>
      <div class="item">
        音乐
      </div>
      <div class="item">
        同城
      </div>
      <div class="item">
        小组
      </div>
      <div class="item">
        阅读
      </div>
      <div class="item">
        FM
      </div>
      <div class="item">
        东西
      </div>
      <div class="item">
        市集
      </div>
      <div class="item">
        更多
      </div>
      <div class="ui right text menu" style="height:10px;margin-top:0px;margin-right:5px;">
        <div class="item">
          下载豆瓣客户端
        </div>
        <div class="item">
          登录
        </div>
        <div class="item">
          注册
        </div>
      </div>
    </div>
    <div class="ui basic segment container top" >
      <div class="ui  borderless text menu ">
          <div class="item">
            <h1>豆瓣小组</h1>
          </div>
          <div class="item">
            精选
          </div>
          <div class="item">
            文化
          </div>
          <div class="item">
            行摄
          </div>
          <div class="item">
            娱乐
          </div>
          <div class="item">
            时尚
          </div>
          <div class="item">
            生活
          </div>
          <div class="item">
            科技
          </div>
        <div class="right menu">
          <div class="ui icon input">
            <input type="text" placeholder="小组、话题">
            <i class="search icon"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="ui basic segment container nav">
      <div class="ui  borderless text menu">
          <div class="item" style="color:black;">
            <h2>话题精选</h2>
          </div>
      </div>
      <div class="ui horizontal segments" style="border-radius:0;border:none;box-shadow:none;">
        <div class="ui basic segment left">
          <div class="ui basic segment leftcontent">
            <div class="like">
             <p align=center>
               14
             </p>
             <p align=center>
               喜欢
             </p>
            </div>
            <div class="articlecard">
               <a href="#" style="font-size:15px;">关于贤者时间自我gc的糗事~</a>
               <p>
                 一晃眼又是好几个月贤者模式了。 记得那天去美容院做精油开背的时候，和美容师妹纸聊天聊得尺度有点大，在听到lz已闲置几个月后，她问，你这样长期闲置容易引起内分泌失调，还会让si处萎缩 ，要不要尝试下她们院里的小仪器...
               </p>
               <span>来自凭什么光鲜的时候没有美好性生活小组</span>
               <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span>
               <div class="ui divider" style="width:530px;"></div>
            </div>
          </div>
          <div class="ui basic segment leftcontent">
            <div class="like">
             <p align=center>
               27
             </p>
             <p align=center>
               喜欢
             </p>
            </div>
            <div class="articlecard">
               <a href="#" style="font-size:15px;">提名你觉得特别难用的化妆品</a>
               <p>
                 天天看各种博主夸，生怕得罪金主爸爸，就没加过说大实话的！ 今天大家来吐槽一下，用过的特别难用的产品都有啥？以免大家受骗踩雷白花钱！ 我来说几个：fresh的玫瑰保湿精华（完全没保湿力，还贵）、kose雪肌精的防晒霜（...
               </p>
               <span>来自我爱化妆品|化妆护肤微信号: d10036小组</span>
               <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span>
               <div class="ui divider" style="width:530px;"></div>
            </div>
          </div>
          <div class="ui basic segment leftcontent">
            <div class="like">
             <p align=center>
               155
             </p>
             <p align=center>
               喜欢
             </p>
            </div>
            <div class="articlecard">
               <a href="#" style="font-size:15px;">【脸型与发型最佳搭配】原来我几十年都看错了自己的脸型！</a>
               <p>
                 不知道有没有妹子和我一样，一直在研究自己的脸型，去网上翻翻对比图，再对着镜子照自己，一会感觉像圆，一会感觉像椭圆，圆中带点方，方中又带点尖，MD智障！ 然后，我把谷歌翻了个遍，...
               </p>
               <span>来自形象组|搭配减肥化妆+v：xingxiang365小组</span>
               <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span>
               <div class="ui divider" style="width:530px;"></div>
            </div>
          </div>
          <div class="ui basic segment leftcontent">
            <div class="like">
             <p align=center>
               21
             </p>
             <p align=center>
               喜欢
             </p>
            </div>
            <div class="articlecard">
               <a href="#" style="font-size:15px;">【清流贴】聊聊择天记还原书中的那些神器</a>
               <p>
                 单纯聊聊择天记中的百器榜神器，拒绝撕x，只撩道具本身还原和神器排名，不聊演员和剧情，防止粉黑毁贴 书粉进 冷兵器迷进 欢迎各路讨论 1、黄纸伞 主人：陈长生（目前），苏离（以前）...
               </p>
               <span>来自择天记电视剧小组</span>
               <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span>
               <div class="ui divider" style="width:530px;"></div>
            </div>
          </div>
          <div class="ui basic segment leftcontent">
            <div class="like">
             <p align=center>
               98
             </p>
             <p align=center>
               喜欢
             </p>
            </div>
            <div class="articlecard">
               <a href="#" style="font-size:15px;">我的女友最近有点不对劲（完）</a>
               <p>
                 犹豫了一番，还是没有发到灵异小组，因为感觉那里全是小说....但是我这件事情就在这两天发生，真实的不能再真实。不知道该怎么办，希望大家能够给我些建议，我实在是有点神经衰弱了。 是这...
               </p>
               <span>来自我总觉得自己就是一个傻逼小组</span>
               <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span>
               <div class="ui divider" style="width:530px;"></div>
            </div>
          </div>
          <div class="ui basic segment leftcontent">
            <div class="like">
             <p align=center>
               27
             </p>
             <p align=center>
               喜欢
             </p>
            </div>
            <div class="articlecard">
               <a href="#" style="font-size:15px;">提名你觉得特别难用的化妆品</a>
               <p>
                 天天看各种博主夸，生怕得罪金主爸爸，就没加过说大实话的！ 今天大家来吐槽一下，用过的特别难用的产品都有啥？以免大家受骗踩雷白花钱！ 我来说几个：fresh的玫瑰保湿精华（完全没保湿力，还贵）、kose雪肌精的防晒霜（...
               </p>
               <span>来自我爱化妆品|化妆护肤微信号: d10036小组</span>
               <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span>
               <div class="ui divider" style="width:530px;"></div>
            </div>
          </div>
          <div class="ui basic segment leftcontent">
            <div class="like">
             <p align=center>
               155
             </p>
             <p align=center>
               喜欢
             </p>
            </div>
            <div class="articlecard">
               <a href="#" style="font-size:15px;">【脸型与发型最佳搭配】原来我几十年都看错了自己的脸型！</a>
               <p>
                 不知道有没有妹子和我一样，一直在研究自己的脸型，去网上翻翻对比图，再对着镜子照自己，一会感觉像圆，一会感觉像椭圆，圆中带点方，方中又带点尖，MD智障！ 然后，我把谷歌翻了个遍，...
               </p>
               <span>来自形象组|搭配减肥化妆+v：xingxiang365小组</span>
               <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span>
               <div class="ui divider" style="width:530px;"></div>
            </div>
          </div>
          <div class="ui basic segment leftcontent">
            <div class="like">
             <p align=center>
               21
             </p>
             <p align=center>
               喜欢
             </p>
            </div>
            <div class="articlecard">
               <a href="#" style="font-size:15px;">【清流贴】聊聊择天记还原书中的那些神器</a>
               <p>
                 单纯聊聊择天记中的百器榜神器，拒绝撕x，只撩道具本身还原和神器排名，不聊演员和剧情，防止粉黑毁贴 书粉进 冷兵器迷进 欢迎各路讨论 1、黄纸伞 主人：陈长生（目前），苏离（以前）...
               </p>
               <span>来自择天记电视剧小组</span>
               <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span>
               <div class="ui divider" style="width:530px;"></div>
            </div>
          </div>
          <div class="ui basic segment leftcontent">
            <div class="like">
             <p align=center>
               98
             </p>
             <p align=center>
               喜欢
             </p>
            </div>
            <div class="articlecard">
               <a href="#" style="font-size:15px;">我的女友最近有点不对劲（完）</a>
               <p>
                 犹豫了一番，还是没有发到灵异小组，因为感觉那里全是小说....但是我这件事情就在这两天发生，真实的不能再真实。不知道该怎么办，希望大家能够给我些建议，我实在是有点神经衰弱了。 是这...
               </p>
               <span>来自我总觉得自己就是一个傻逼小组</span>
               <span style="color:rgb(212, 212, 212);margin-left:25px;">04-07</span>
               <div class="ui divider" style="width:530px;"></div>
            </div>
          </div>
          <p class="page">
            <前页
            <span style="margin-left:45px;">1 <a href="#" style="margin-left:20px;">2</a><a href="#" style="margin-left:20px;">3</a><a href="#" style="margin-left:20px;">4</a><a href="#" style="margin-left:20px;">5</a><a href="#" style="margin-left:20px;">6</a><a href="#" style="margin-left:20px;">7</a><a href="#" style="margin-left:20px;">8</a><a href="#" style="margin-left:20px;">9</a><a href="#" style="margin-left:20px;">...</a><a href="#" style="margin-left:20px;">272</a><a href="#" style="margin-left:20px;">273</a></span>
            <a style="float:right;">后页></a>
          </p>
        </div>
        <div class="ui basic segment right" style="border:none;box-shadow:none;">
            <p style="font-size:14px;">
              值得加入的小组
            </p>
            <div class="ui divider"></div>
            <div class="ui basic segment group">
              <div class="ui image">
                <img src="https://img3.doubanio.com/icon/g296240-5.jpg"  />
              </div>
              <a href="#" style="margin-left:10px;">四川旅行攻略/四川青旅义工旅行</a>
              <p style="margin-left:58px;margin-top:10px;font-size:13px;">12399个宅员<a href="#" style="font-size:13px;margin-left:10px;">+加入小组</a></p>
              <div class="ui divider"></div>
            </div>
            <div class="ui basic segment group">
              <div class="ui image">
                <img src="https://img1.doubanio.com/icon/g558815-8.jpg"  />
              </div>
              <a href="#" style="margin-left:10px;">上海租房@女生合租 QQ小窝31836...</a>
              <p style="margin-left:58px;margin-top:10px;font-size:13px;">12054个成员<a href="#" style="font-size:13px;margin-left:10px;">+加入小组</a></p>
              <div class="ui divider"></div>
            </div>
            <div class="ui basic segment group">
              <div class="ui image">
                <img src="https://img3.doubanio.com/icon/g58423-4.jpg"  />
              </div>
              <a href="#" style="margin-left:10px;">我能遇见你，已经很不可思议</a>
              <p style="margin-left:58px;margin-top:10px;font-size:13px;">119459个遇见<a href="#" style="font-size:13px;margin-left:10px;">+加入小组</a></p>
              <div class="ui divider"></div>
            </div>
            <div class="ui basic segment group">
              <div class="ui image">
                <img src="https://img5.doubanio.com/icon/g498618-6.jpg"  />
              </div>
              <a href="#" style="margin-left:10px;">广州白云租房（推荐度★★★★★）</a>
              <p style="margin-left:58px;margin-top:10px;font-size:13px;">15029个【五星级用户】★★★★★<a href="#" style="font-size:13px;margin-left:10px;">+加入小组</a></p>
              <div class="ui divider"></div>
            </div>
            <div class="ui basic segment group">
              <div class="ui image">
                <img src="https://img1.doubanio.com/icon/g558815-8.jpg"  />
              </div>
              <a href="#" style="margin-left:10px;">上海租房@女生合租 QQ小窝31836...</a>
              <p style="margin-left:58px;margin-top:10px;font-size:13px;">12054个成员<a href="#" style="font-size:13px;margin-left:10px;">+加入小组</a></p>
              <div class="ui divider"></div>
            </div>
            <div class="ui basic segment group">
              <div class="ui image">
                <img src="https://img3.doubanio.com/icon/g58423-4.jpg"  />
              </div>
              <a href="#" style="margin-left:10px;">我能遇见你，已经很不可思议</a>
              <p style="margin-left:58px;margin-top:10px;font-size:13px;">119459个遇见<a href="#" style="font-size:13px;margin-left:10px;">+加入小组</a></p>
              <div class="ui divider"></div>
            </div>
            <div class="ui basic segment group">
              <div class="ui image">
                <img src="https://img5.doubanio.com/icon/g498618-6.jpg"  />
              </div>
              <a href="#" style="margin-left:10px;">广州白云租房（推荐度★★★★★）</a>
              <p style="margin-left:58px;margin-top:10px;font-size:13px;">15029个【五星级用户】★★★★★<a href="#" style="font-size:13px;margin-left:10px;">+加入小组</a></p>
              <div class="ui divider"></div>
            </div>
            <div class="ui basic segment group">
              <div class="ui image">
                <img src="https://img3.doubanio.com/icon/g58423-4.jpg"  />
              </div>
              <a href="#" style="margin-left:10px;">我能遇见你，已经很不可思议</a>
              <p style="margin-left:58px;margin-top:10px;font-size:13px;">119459个遇见<a href="#" style="font-size:13px;margin-left:10px;">+加入小组</a></p>
              <div class="ui divider"></div>
            </div>
            <div class="ui basic segment group">
              <div class="ui image">
                <img src="https://img5.doubanio.com/icon/g498618-6.jpg"  />
              </div>
              <a href="#" style="margin-left:10px;">广州白云租房（推荐度★★★★★）</a>
              <p style="margin-left:58px;margin-top:10px;font-size:13px;">15029个【五星级用户】★★★★★<a href="#" style="font-size:13px;margin-left:10px;">+加入小组</a></p>
              <div class="ui divider"></div>
            </div>
            <div class=" ad">
              <img src="https://img3.doubanio.com/view/dale-online/dale_ad/public/8dbb98b853dfa6a.jpg" width="100%" height="100%;"  />
            </div>
        </div>
      </div>
      <div class="bottom">
       <span style="color:grey;">? 2005－2017 douban.com, all rights reserved 北京豆网科技有限公司</span>
       <span style="float:right;"><a href="#" >关于豆瓣 · </a><a href="#" >在豆瓣工作 · </a><a href="#" >联系我们 · </a><a href="#" >免责声明 · </a><a href="#" >帮助中心 · </a><a href="#" >移动应用 · </a><a href="#" >豆瓣广告 · </a></span>
      </div>
    </div>
  </body>
</html>

时间： 2024-10-07 07:36:35

静态页面复习--用semantic UI仿写豆瓣主页的相关文章

静态页面复习--用semantic UI写一个10min首页

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-

静态页面复习--CSS定位练习2

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .bg{ height: 384px; background: url('images/brick.jpg'); background-size: 50px 50px; } .fireplace{ h

很多网站的静态页面

原文:很多网站的静态页面 源代码下载地址:http://www.zuidaima.com/share/1550463748590592.htm 很多网站的类似的静态页面 解压就可以用 仿126风格 ext风格 绿色管理后台风格 很多分享.

基础复习（京东静态页面的实现）第一天

一.前言 作为一个技术小白决定记录下自己前端学习过程的点点滴滴,欢迎各为大神轻喷! 二.引入 前端最为基础的就是Html.css.js,为了巩固并且加强自己的基础所以挑选出了京东的静态页面作为这三天的复习内容!在第一天中我首先完成的是页面的快速导航.头部广告.搜索栏三个基础页面! 三.重点内容 ㈠ 开发前的准备工作: 在开始一个完整的项目之前首先要做的并不是着急的去写代码,完成项目前的准备工作.项目的准备工作可以分为以下几个部分 ① 配置开发环境     ② 建立项目文件夹     ③css文件

仿写网易云-排行榜页面

第一次仿写页面(内心还是很鸡冻啊~~~) 还有很多地方没有完善 暂时就先这样吧 以后有机会在加效果 多练习 熟能生巧~ 好喜欢网易云音乐啊~音乐的天堂~希望以后自己也能去网易云工作就好了了~~~~~ 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Comp

HTML: 仿写一个财经类静态的网页

要求:仿写一个静态的网页,主要采用HTML+CSS+DIV的布局方式, 新建两个文件:demo.html.demo.css 图片素材:image.zip demo.html代码如下: <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content="t

仿新浪首页、主题、详情页，纯html静态页面

仿新浪首页.主题.详情页,纯html静态页面,下载地址: http://download.csdn.net/detail/sweetsuzyhyf/8085535

Semantic UI 记忆

CSS框架 What:简单地说,就是一些事先写好的css集合,你只需要给你的html元素加上一些特定的类,就可以快速的得到一些想要的效果. Why:简单.快速.方便.避免CSS中的各种坑. Which:Semantic UI是一款语义化的前端开发框架,Semantic是围绕自然交流语言而架构的,这使得开发更加直观.易于理解. Semantic UI 框架特色 Semantic UI把词语和类看成一个个可以任意组合的概念,使用如:名词/修饰语,文字序列以及诸多的自然语法来定义类名. 常见用法 ?

怎么样仿写已知网址的网页？

今天上午在实验室里学习,无意中看到湖北老乡群里爆出了一则外包的消息. 是问有没有回搭建网站.我接了这单活儿.需求很简单,仿照这一个已知的网站做一个静态页面. 工作量不大.他说了,做一个静态网站.因为之前,我曾做过类似的工作,所以我就答应了. 遇到的第一个问题就是评价.他让我开个价.说实话,我当时也蒙了.这个外包估价这个事情,我之前也没做过.在网上搜了下,每个人说法都不一样.看到一个我觉得可以参考的回答.按照做的页面收费. 每个30~50.于是我给他报价是500,理由就是 大概做10个左右的页面,