美文网首页
10MINs首页

10MINs首页

作者: Co_zy | 来源:发表于2017-10-29 10:13 被阅读0次

这篇文章先讲几个重要的点,然后文末有效果图和具体代码

  • css优先级

<div class="column">
            <div class="ui inverted segment card-view" style="background: url('img/card.png');background-size: cover;background-repeat: no-repeat;">
            <h3 class="ui header">Title's here</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>

这里再介绍一种选择器,之前我们在修改时,为了防止修改一个标签而造成其他标签样式的改变,我们会给标签加一个别名,此外,我们也可以使用子孙选择器

.ui.vertical.basic.segment.recommended > .ui.center.aligned.header{
    
}

今天发现一个问题,就是css选择器不要留空格,比如以下这种方式是不对的

.ui .vertical .basic .segment .recommended{

}

需要改成无空格:

.ui.vertical.basic.segment.recommended{

}

  • 栅格布局

1.定距

<div class="ui three column grid">
        <div class="column">
                </div>
        <div class="column">
                </div>
        <div class="column">
                </div>

</div>

2.定宽

<div class="ui grid">
        <div class="four wide column">
                </div>
        <div class="four wide column">
                </div>
        <div class="four wide column">
                </div>
        <div class="four wide column">
                </div>
</div>

效果图

完整HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/semantic.css">
    <link rel="stylesheet" href="10Mins.css">
</head>
<body>
    <div class="ui vertical basic segment master">
        <div class="ui  text menu">
            <div class="ui image logo">
                ![](img/word.png)
            </div>
            <div class="right menu">
                <div class="item">
                    <button type="button" name="button" class="ui inverted circular blue button">Login</button>
            </div>
        </div>
    </div>
    <h1 class="ui center inverted aligned header slogan">
            这里是大标题应该出现的位置
        <p class="sub header">
        这里是子标题出现的位置
        </p>
        <button type="button" name="button" class="ui  circular red button">注册一个</button>
    </h1>
        
    </div>

    
<div class="ui vertical basic segment recommended">
            <h1 class="ui center aligned header">10mins学会一门技能</h1>
    <div class="ui three column grid container">
        <div class="column">
            <!-- style="background: url('img/card.png');background-size: cover;background-repeat: no-repeat;" -->
            <div class="ui inverted segment card-view" >
            <h3 class="ui header">Title's here</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">
            <h3 class="ui header">Title's here</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">
            <h3 class="ui header">Title's here</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">
            <h3 class="ui header">Title's here</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">
            <h3 class="ui header">Title's here</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">
            <h3 class="ui header">Title's here</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 pink inverted basic segment people-say">
    <h3 class="ui center aligned header">呈现给您最简洁有趣的知识是我们认为最有趣的事情</h3>
    <div class="ui grid">

        <div class="four wide column">
            <div class="ui circular segment">
                <i class="icon red inverted circular star "></i>
                <h4 class="ui inverted header">首席执行官
                <p class="sub header">CEO</p></h4>
            </div>
        </div>
        <div class="four wide column">
            <div class="ui circular segment">
                <i class="icon red inverted circular star "></i>
                <h4 class="ui inverted header">首席执行官
                <p class="sub header">CEO</p></h4>
            </div>
        </div>
        <div class="four wide column">
            <div class="ui circular segment">
                <i class="icon red inverted circular star "></i>
                <h4 class="ui inverted header">首席执行官
                <p class="sub header">CEO</p></h4>
            </div>
        </div>
        <div class="four wide column">
            <div class="ui circular segment">
                <i class="icon red inverted circular star "></i>
                <h4 class="ui inverted header">首席执行官
                <p class="sub header">CEO</p></h4>
            </div>
        </div>

    </div>
    <button name="button" type="button" class="ui red inverted circular button">Be our coach</button>
</div>

<div class="ui inverted vertical padded segment">
    <div class="ui grid">
        <div class=" four wide column">
            <div class="ui inverted vertical padded text menu">
                <div class="ui image">
                    ![](img/panda.png)
                </div>
            </div>  
        </div>
        <div class=" four wide column">
            <div class="ui inverted vertical padded text menu">
                <div class="item">Adress:CN</div>
                <div class="item">Tel:10000000</div>
                <div class="item">E-mail:1231231</div>
            </div>  
        </div>
        <div class=" four wide column">
            <div class="ui inverted vertical padded text menu">
                <div class="item">Adress:CN</div>
                <div class="item">Tel:10000000</div>
                <div class="item">E-mail:1231231</div>
            </div>  
        </div>
        <div class=" four wide column">
            <div class="ui inverted vertical padded text menu">
                <div class="item">Designed by</div>
                <div class="item">
                <h1 class="ui inverted header bottom-logo">zmy</h1>
                </div>
            </div>  
        </div>
    </div>
</div>


</body>
</html>

完整CSS代码

.ui.vertical.basic.segment.master{
    height: 500px;
    background: url('img/hugue.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 40px;
}
.ui .text.menu{
    margin-top: -10px;

}
.ui.image.logo{
    margin-left: 15px;
    /* margin-top: 5px; */
    height: 50px;
    width: 50px;
}
.ui.image.footer{
    margin-left: 30px;
    margin-top: 20px;
}

.ui.inverted.circular.blue.button{
    margin-right: 20px;
    /* margin-top: -10px; */
}
.ui.center.inverted.aligned.header.slogan{
    font-size: 40px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}
h1.ui.header .sub.header{
    margin: 20px;
}
.ui .circular.red.button{
    width: 200px;
}
.ui.inverted.header.bottom-logo{
    margin: 0px;
}
.ui.inverted.segment.card-view{
    height: 220px;
    /* background: :url('img/card.png');background-size: cover;background-repeat: no-repeat; */
}
.ui.vertical.basic.segment.recommended > .ui.center.aligned.header{
    font-size: 40px;
    margin-top: 50px;
    margin-bottom: 50px;
}
.ui.inverted.segment.card-view > .ui.header{
    margin-bottom: 50px;
}
.ui.pink.inverted.basic.segment.people-say{
    height: 450px;
    /* background: url('image/people1.jpg');
    background-size: cover;
    background-repeat: no-repeat; */
}
.ui.pink.inverted.basic.segment.people-say > .ui.center.aligned.header{
    margin-top: 30px;
}
.ui.circular.segment{
    background: url('img/people2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 120px;
    height: 120px;
    position: absolute;
    left: 50%;
    top: 200px;
    transform: translate(-50%, -50%);
}
.ui.circular.segment > .ui.header{
    position: absolute;
    left: 50%;
    top: 110%;
    transform: translate(-50%, -50%);
    width: 200px;
}
.icon.red.inverted.circular.star{
    position: absolute;
    left: 100%;
    top: 100%;
    transform: translate(-100%, -100%)
}
.ui.pink.inverted.basic.segment.people-say > .ui.red.inverted.circular.button{
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%);
    background: white;
}
.ui.inverted.vertical.padded.segment{
    margin-top: 100px;
}

相关文章

  • 10MINs首页

    这篇文章先讲几个重要的点,然后文末有效果图和具体代码 css优先级 这里再介绍一种选择器,之前我们在修改时,为了防...

  • 2018-03-23

    10mins like 10days, also like 10seconds.

  • 火箭瑶的每日复盘​ 10/100

    “真不想做还是没时间做？我看是不够想做。” 一、行动 2021.01.05 写作10mins 36/100 单词2...

  • 雅思备考

    口语部分 雅思答题时间：30mins,写答案：10mins 分成四部分section 1（谈话），2（独白）（日常...

  • 为什么做一件事一段时间就没有能量了？

    /2020-05-13/ 0513践行清单：健身1.5h,英文朗读30mins.阅读10mins,立体营销课程1h...

  • 下班干什么？10分钟学会一道简单菜 —“ 滑蛋牛肉”，适合海外留

    下班干什么？10mins学会一道简单菜 —“ 滑蛋牛肉”，适合海外留学党（工作党）做的中国菜哦～ “滑蛋牛肉” 辛...

  • 每日运动计划

    1.郑多燕健身操10mins 2.头部运动（上下左右点头；顺逆画圈；拉伸） 3.肩部运动（上下移动；前后画圈；战斗...

  • html+css导航栏制作——20160313

    水平导航栏（一） HTML部分： 个人首页 个人首页 个人首页 个人首页 个人首页 个人首页 CSS部分： *{ ...

  • 2018-10-17测试

    搜狐博客首页-搜狐 搜狐博客首页-搜狐 搜狐博客首页-搜狐 搜狐博客首页-搜狐 搜狐博客首页-搜狐 搜狐博客首页-...

  • 病案首页功能

    首页管理 首页信息录入 首页信息查询 首页信息浏览 首页信息保存 首页字典管理 诊断信息字典 手术信息字典 病理信...

网友评论

      本文标题：10MINs首页

      本文链接：https://www.haomeiwen.com/subject/eftdpxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|10MINs首页|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！