Apple for semantic-ui

来源：互联网发布：少儿编程培训达内编辑：程序博客网时间：2024/06/05 20:32
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Apple（中国）-非官方网站</title>    <link rel="stylesheet" href="css/semantic.css" charset="UTF-8" title="no title">    <!--rel:REL属性用于定义链接的文件和HTML文档之间的关系。StyleSheet，的意思就是样式调用，REL=StyleSheet指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。-->    <!--href="css/semantic.css"引用的css样式-->    <!--charset="UTF-8"字符编码为UTF-8-->    <!--title="no title"链接题目为没有题目--></head><body>    <!--- 菜单部分开始 -->    <div class="ui inverted fixed fitted borderless fluid nine item menu">    <!-- inverted反色 fixed固定 fitted适应：移除文字与菜单项的边框的水平或垂直边距 borderless无边框：菜单项无边框    fluid流式：菜单栏占满整行 nine item menu有九个菜单项的导航栏-->        <a href="#" class="item">            <div class="ui image">                <img src="images/appleicon.png" alt=""/>            </div>        </a>        <a href="#" class="item">Mac</a>        <a href="#" class="item">iPad</a>        <a href="#" class="item">iPhone</a>        <a href="#" class="item">Watch</a>        <a href="#" class="item">Music</a>        <a href="#" class="item">技术支持</a>        <a href="#" class="item">            <div class="ui image">                <img src="images\searchicon.png" alt="" />            </div>        </a>        <a href="#" class="item">            <div class="ui image">                <img src="images/buyicon.png" alt="" />            </div>        </a>    </div>    <!-- 菜单部分结束-->    <!--导航图部分开始-->    <div class="ui secondary vertical basic segment">    <!--secondary 二级菜单：无背景颜色和菜单边框 vertical：垂直方向 basic：基本的 segment：块-->        <div class="ui banner image">            <img src="images/banner.png" alt="" />        </div>    </div>    <!--导航图部分结束-->    <!--四张小图部分开始-->    <div class="ui secondary vertical basic segement">        <div class="ui fitted text menu">            <div class="item">                <div class="ui image">                    <img src="images/img1.png" alt=""/>                </div>            </div>            <div class="item">                <div class="ui image">                    <img src="images/img2.png" alt=""/>                </div>            </div>            <div class="item">                <div class="ui image">                    <img src="images/img3.png" alt=""/>                </div>            </div>            <div class="item">                <div class="ui image">                    <img src="images/img4.png" alt=""/>                </div>            </div>        </div>    </div>    <!--四张小图部分结束-->    <!--页尾部分开始-->    <div class="ui vertical secondary very padded segment">        <div class="ui container">        <!--容器包裹-->            <div class="sub header">            <!--头部标题-->                双镜头摄像头仅于 iPhone 7 Plus 提供。亮黑色外观仅于 128GB 及以上存储容量的机型提供。            </div>            <div class="ui divider"></div>            <!--分割线-->            <div class="ui five column grid">            <!--五个栏目的网格-->                <div class="column">                <!--其中一栏-->                    <div class="ui vertical text menu">                    <!--垂直文字菜单-->                        <div class="item">                            <h4>Apple Store商店</h4>                        </div>                        <a class="item">查找零售店</a>                        <a class="item">iPad</a>                        <a class="item">iPhone</a>                        <a class="item">Watch</a>                        <a class="item">iPod</a>                    </div>                </div>                <div class="column">                    <div class="ui vertical text menu">                        <div class="item">                            <h4>Apple Store商店</h4>                        </div>                        <a class="item">查找零售店</a>                        <a class="item">iPad</a>                        <a class="item">iPhone</a>                        <a class="item">Watch</a>                        <a class="item">iPod</a>                    </div>                </div>                <div class="column">                    <div class="ui vertical text menu">                        <div class="item">                            <h4>Apple Store商店</h4>                        </div>                        <a class="item">查找零售店</a>                        <div class="item"></div>                        <!--一项不写即为空白-->                        <div class="item">                            <h4>Apple与商务</h4>                        </div>                        <a class="item">商务选购</a>                    </div>                </div>                <div class="column">                    <div class="ui vertical text menu">                        <div class="item">                            <h4>Apple Store商店</h4>                        </div>                        <a class="item">查找零售店</a>                        <div class="item"></div>                        <div class="item">                            <h4>Apple与商务</h4>                        </div>                        <a class="item">商务选购</a>                    </div>                </div>                <div class="column">                    <div class="ui vertical text menu">                        <div class="item">                            <h4>Apple Store商店</h4>                        </div>                        <a class="item">查找零售店</a>                        <a class="item">iPad</a>                        <a class="item">iPhone</a>                        <a class="item">Watch</a>                        <a class="item">iPod</a>                    </div>                </div>            </div>        </div>    </div>    <!--页尾部分结束--></body></html>
阅读全文
1 0