静态页面复习--用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-8">
    <style type="text/css">
      .ui.vertical.basic.segment.top{
        height:700px;
        background:url(‘index-images/banner.png‘);
        background-size:cover;
        background-repeat: no-repeat;
        padding-left: 40px;
        padding-right: 40px;
      }
      .ui.inverted.center.aligned.header.bigtitle{
        font-size: 50px;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      .ui.red.circular.button{
        width: 220px;
      }
      .ui.header.logo{
        font-size: 30px;
        color: rgb(196,196,196);
      }
      .ui.inverted.segment.card-view{
        height: 220px;

      }
      .ui.basic.vertical.segment.mid > .ui.center.aligned.header{
        font-size: 40px;
        color: rgb(58, 74, 67);
        margin-top: 50px;
        margin-bottom: 50px;
      }

      .ui.header.title{
        margin-bottom: 100px;
      }
      .ui.inverted.red.basic.segment.people{
        height: 450px;
        background: url(‘index-images/people-say.png‘);
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        margin-bottom: 200px;
      }
      .four.wide.column{
        position: relative;
      }
      .ui.circular.inverted.segment{
        background: url(‘index-images/profile.png‘);
        background-size: cover;
        background-repeat: no-repeat;
        width: 120px;
        height: 120px;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      .ui.inverted.red.basic.segment.people > .ui.center.aligned.header{
        position: absolute;;
        top:100px;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      .ui.inverted.red.basic.segment.people > .ui.grid{
        position: relative;
        top:50%;
        transform: translate(0%,-50%);
      }
      .ui.circular.inverted.segment > .ui.inverted.header{
        position: absolute;
        top:110%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 200px;
      }
      .icon.inverted.red.circular.star{
        position: absolute;
        top:100%;
        left:100%;
        transform: translate(-100%,-100%);
      }
    .ui.inverted.red.basic.segment.people > .ui.inverted.red.circular.button{
        position: absolute;;
        top:100%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: white;
      }
    </style>
  </head>
  <body>

     <div class="ui vertical basic segment top" style="">
       <div class="ui inverted text menu">
         <div class="ui image">
           <img src="index-images/tenlogo.png"  />
         </div>

         <div class="right menu">
           <div class="item">
             <button type="button" class="ui inverted circular button" name="button">log in</button>
           </div>
         </div>
       </div>

       <h1 class="ui inverted center aligned header bigtitle">大标题
         <p class="sub  header">
            次级标题
         </p>
         <button type="button"class="ui red circular button" name="button">注册一下</button>
       </h1>
     </div>

     <div class="ui vertical basic segment mid">
       <h1 class="ui center aligned header">10分钟学会一门技能</h1>
       <div class="ui three column grid container">
         <div class="column">
           <div class="ui inverted segment card-view" style="background: url(‘index-images/1.jpg‘);background-size: cover;background-repeat: no-repeat;">
             <h3 class="ui header title">title</h3>
             <h4 class="ui header">username</h4>
             <div class="ui divider"></div>
             <div class="ui red circular label">
               40%get√
             </div>
             <span>10k
             <i class="icon unhide"></i>
             </span>
           </div>
         </div>

         <div class="column">
           <div class="ui inverted segment card-view" style="background: url(‘index-images/2.jpg‘);background-size: cover;background-repeat: no-repeat;">
             <h3 class="ui header title">title</h3>
             <h4 class="ui header">username</h4>
             <div class="ui divider"></div>
             <div class="ui red circular label">
               40%get√
             </div>
             <span>10k
             <i class="icon unhide"></i>
             </span>
           </div>
         </div>

         <div class="column">
           <div class="ui inverted segment card-view" style="background: url(‘index-images/3.jpg‘);background-size: cover;background-repeat: no-repeat;">
             <h3 class="ui header title">title</h3>
             <h4 class="ui header">username</h4>
             <div class="ui divider"></div>
             <div class="ui red circular label">
               40%get√
             </div>
             <span>10k
             <i class="icon unhide"></i>
             </span>
           </div>
         </div>

         <div class="column">
           <div class="ui inverted segment card-view" style="background: url(‘index-images/4.jpg‘);background-size: cover;background-repeat: no-repeat;">
             <h3 class="ui header title">title</h3>
             <h4 class="ui header">username</h4>
             <div class="ui divider"></div>
             <div class="ui red circular label">
               40%get√
             </div>
             <span>10k
             <i class="icon unhide"></i>
             </span>
           </div>
         </div>

         <div class="column">
           <div class="ui inverted segment card-view" style="background: url(‘index-images/5.jpg‘);background-size: cover;background-repeat: no-repeat;">
             <h3 class="ui header title">title</h3>
             <h4 class="ui header">username</h4>
             <div class="ui divider"></div>
             <div class="ui red circular label">
               40%get√
             </div>
             <span>10k
             <i class="icon unhide"></i>
             </span>
           </div>
         </div>

         <div class="column">
           <div class="ui inverted segment card-view" style="background: url(‘index-images/6.jpg‘);background-size: cover;background-repeat: no-repeat;">
             <h3 class="ui header title">title</h3>
             <h4 class="ui header">username</h4>
             <div class="ui divider"></div>
             <div class="ui red circular label">
               40%get√
             </div>
             <span>10k
             <i class="icon unhide"></i>
             </span>
           </div>
         </div>
       </div>
     </div>

    <div class="ui inverted red basic segment people">
      <h3 class="ui center aligned header">呈现给您最简洁有趣的知识是我们的目标</h3>
      <div class="ui grid">
        <div class="four wide column">
          <div class="ui circular inverted segment">
            <i class="icon inverted red circular star"></i>
            <h4 class="ui inverted header">首席提刀官
            <p class="sub header">
              李大刀
            </p>
            </h4>
          </div>
        </div>

        <div class="four wide column">
          <div class="ui circular inverted segment">
            <i class="icon inverted red circular star"></i>
            <h4 class="ui inverted header">首席提刀官
            <p class="sub header">
              李大刀
            </p>
            </h4>
          </div>
        </div>

        <div class="four wide column">
          <div class="ui circular inverted segment">
            <i class="icon inverted red circular star"></i>
            <h4 class="ui inverted header">首席提刀官
            <p class="sub header">
              李大刀
            </p>
            </h4>
          </div>
        </div>

        <div class="four wide column">
          <div class="ui circular inverted segment">
            <i class="icon inverted red circular star"></i>
            <h4 class="ui inverted header">首席提刀官
            <p class="sub header">
              李大刀
            </p>
            </h4>
          </div>
        </div>
      </div>

    <button type="button" name="button" class="ui inverted red circular button">成为讲师</button>
    </div>

     <div class="ui vertical very padded  segment">
       <div class="ui grid">
         <div class="ui four wide column">
           <div class="ui image">
             <img src="index-images/ten_red_logo.png"  />
           </div>
         </div>

         <div class="ui four wide column">
           <div class="ui vertical  text menu">
             <div class="item">
               <h4 class="ui  header">Company</h4>
             </div>
             <div class="item">
               address:cn
             </div>
             <div class="item">
               tel:00000000
             </div>
             <div class="item">
               fax:11111111
             </div>
           </div>
         </div>

         <div class="ui four wide column">
           <div class="ui vertical  text menu">
             <div class="item">
               <h4 class="ui  header">Company</h4>
             </div>
             <div class="item">
               address:cn
             </div>
             <div class="item">
               tel:00000000
             </div>
             <div class="item">
               fax:11111111
             </div>
           </div>
         </div>

         <div class="ui four wide column">
           <div class="ui vertical  text menu">
             <div class="item">
               Designed by
             </div>
             <div class="item">
               <h3 class="ui header logo">Xyxcoding</h3>
             </div>
           </div>
         </div>
       </div>
     </div>
  </body>
</html>

　　新学到的样式：card-view 卡片视图

时间： 2024-10-10 05:53:30

静态页面复习--用semantic UI写一个10min首页的相关文章

静态页面复习--用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="ut

使用类的静态字段和构造函数，请写一个类，在任何时候都可以向它查询“你已经创建了多少个对象？”。

1.程序设计思想 定义一个静态字段,在构造函数中写一个这个静态字段自加的语句,这样,因为静态字段不会因为再次调用而改变数值所以可以计算建立对象的个数. 2.程序源代码 //使用类的静态字段和构造函数跟踪对象 class sum{  public static int a=0;   int c;   public sum(int cc)  {   c=cc;   a++;  }  public int get()  {   return a;  } } public class WyText_LL

用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-

静态页面复习--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

自学semantic UI个人博客首页模板

以下是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!--cdn方式引入--> <link href="https://cdn.bootcss.com

使用类的静态字段和构造函数，我们可以跟踪某个类所创建对象的个数。请写一个类，在任何时候都可以向它查询“你已经创建了多少个对象？”。

设计思想 定义一个静态字段,在构造函数中写一个静态字段自家的语句,这样,因为静态字段不会因为在此调用而改变数值所以可以计算建立对象的个数. 源代码 //使用静态字段和构造函数跟踪对象 package bao; public class sum { public static int a=0; int c; public sum(int cc) { c=cc; a++; } public int get() { return a; } } package bao; public class D_X

写个厦门市健身徒步爬山线路的web静态页面

今年12月底,这个产品应该能进入一个差不多相对于初次开发阶段相对低需求的时间.所以明年1月份开始要复习下前端的基本知识,写一个静态web页面.尽可能详细记录下自己周末爬过的.观赏过的厦门景点,尽量详细的写下多个通往目的地的路线.当然,会附上某些图,不过我的内心是抗拒自己附图的(顶多门口的图片.上山前的图片),所以大概率情况下只会标出具体到达目的地路线,然后介绍下一些历史,及注意事项.后续一些想法等初次页面出来再写吧.

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

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

只用table模仿一个静态页面

尝试只用table标签来模仿一个静态页面,这样做可以很好的增加对网页结构理解. 要尝试模仿的页面如下: 附上我自己写的代码,因为只是用了HTML,没有用到CSS和js,所以有些样式写出来和原图有些出入 <!DOCTYPE html> <html> <head> <title>只用table来模仿一个网页</title> <meta charset="utf-8"> </head> <body>