Semantic UI实现一个landing page

来源：互联网发布：c语言谭浩强视频百度云编辑：程序博客网时间：2024/06/07 22:09
完整代码

注意正确引入css文件
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="css/semantic.css"></head><body>    <div class="ui fixed inverted menu">        <a href="#" class="item">Home</a>        <a href="#" class="item">About</a>        <a href="#" class="item">Other</a>    </div>    <div class="ui image">        ![](img/girl.jpg)    </div>    <div class="ui basic segment">        <div class="ui grid">            <div class="ten wide column">                <div class="ui image">                    ![](img/0.jpg)                </div>            </div>            <div class="six wide column">                <h2 class="ui header"><i class="icon star"></i>This is a title</h2>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium tempora architecto eligendi laboriosam pariatur in, minus autem veritatis, quis dolore necessitatibus dolorem. Quisquam, porro, suscipit mollitia deserunt nulla repudiandae!</p>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium tempora architecto eligendi laboriosam pariatur in, minus autem veritatis, quis dolore necessitatibus dolorem. Quisquam, porro, suscipit mollitia deserunt nulla repudiandae!</p>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium tempora architecto eligendi laboriosam pariatur in, minus autem veritatis, quis dolore necessitatibus dolorem. Quisquam, porro, suscipit mollitia deserunt nulla repudiandae!</p>            </div>        </div>    </div><div class="ui inverted vertical very padded segment">    <div class="ui grid">        <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">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></div></body></html>
效果

阅读全文
0 0