Apple for semantic-ui

最新推荐文章于 2024-05-17 09:52:32 发布
最新推荐文章于 2024-05-17 09:52:32 发布
阅读量603 收藏
点赞数 1
分类专栏： -----semantic-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GeekLeee/article/details/72401765
版权 
<!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>
GeekLeee
关注
专栏目录
7 Django分页器文章分页
weixin_30270889的博客
12-24 124
1.复习 2。这节课要解决的问题？ 3。分页的原理 4.准备工作 　　（1）创建Django项目 C:\Users\Administrator\Desktop\root3>django-admin startproject tenmins 　　 　　（2）修改python3 #!/usr...
Semantic 导航条
weixin_30485291的博客
03-27 547
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/cs...
AdminLTE后台模板-设置顶部导航栏和侧边栏相对浏览器固定不动
ALaDingPro的博客
10-10 7832
前言 采用AdminLTE模板设计后台系统的时候，常常会出现页面主体内容过多，会出现垂直滚动条，滚到底部后，想点击侧边栏按钮不太方便。AdminLTE提供了相应的类设置顶部导航栏和侧边栏相对浏览器固定不动。 操作 在body标签里添加fixed类即可： &lt;body class="hold-transition skin-blue sidebar-mini fixed"&gt; ...
滚动页面，实现导航栏固定在顶部（吸顶效果）
Kris的博客
01-02 4万+
首先最简单的，是利用position的sticky属性 说明 sticky 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。 它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：0)；position:sticky这时的效果相当于fixed定位，固定在(top: 0...
jquery multiSelect 多选下拉框代码
Angelyiyi320的专栏
09-21 1449
jquery multiselect 多选下拉框代码 $（“＃号”）。多选（（oneormoreselected：'*'，选中全部：假，noneselected：'默认显示'））; 用法：$（'＃的id'）。多选（选项，回调） 选项：选中全部 - 是否显示全选选项;真/假，默认=真 selectalltext - 文本显示选择/取消选取所有选项同时 noneselected - 要显示的
semantic-ui 表单
JOKER0707的博客
05-04 571
1、定义表单 　　先看一个基础的表单，再讲解一下： <form class="ui form" method="post" action=""> <div class="field"> <input type="text" name="uname" placeholder="input name"> &lt...
探索iOS的未来美学： Semantic UI - 深色模式，动态字体与SF符号库
最新发布
gitblog_00002的博客
05-17 405
探索iOS的未来美学： Semantic UI - 深色模式，动态字体与SF符号库 SemanticUIcocoacontrols/SemanticUI: 此链接指向的是CocoaControls上的Semantic UI资源条目，但实际并无此项目。Semantic UI本身是一个CSS框架，提供了一套简洁易懂的语义化类名以构建响应式网站和应用界面。项目地址:https://gitcode.co...
静态页面复习--用semantic UI写苹果官网
weixin_30454481的博客
12-12 221
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/semantic.css" media="screen" title="no...
Bootstrap VS Semantic VS Foundation
Aric_Chen的专栏
04-20 1万+
相信多数科技公司都没有自己动手设计UI的能力！ 看到这个开头，估计很多程序猿很不服气，我们那个美工可NB了，各种切图，各种特效！ 如果你跟我讲这些，就说明你还没有明白UI具体指什么。通常我们所讲的UI包含如下几个方面 1. 页面的整体布局设计，例如左侧的菜单设计，顶部的用户信息区域 2. 通用的配色方案 3. 公用的组件，例如按钮，Tab，Dropdown
GPT-SoVITS语音合成服务器部署，可远程访问（全部代码和详细部署步骤）
qq_34717531的博客
03-18 2883
此外，项目还提供了一些集成工具，包括声音伴奏分离，自动训练集分割，中文ASR和文本标签，帮助初学者创建训练数据集和 GPT/SoVITS 模型。Zero-shot TTS 可以让用户输入5秒钟的语音样本并立即体验转换后的语音，而 Few-shot TTS 则可以通过使用仅一分钟的训练数据进行模型微调，从而提高语音相似度和真实性。WebUI 工具：集成工具包括声音伴奏分离，自动训练集分割，中文ASR和文本标签，帮助初学者创建训练数据集和GPT/SoVITS模型。
【obs-studio】 OBS CMakelist.txt 阅读1
突围
11-03 341
OBS CMakelist.txt 学习obs 先从构建看起 本文记录了主txt 和 UI 构造exe的txt obs-studio cmake list 主要是 ##### opengl 看来是全平台通用的 add_subdirectory(libobs-opengl) ####### 还有三这个主要目录 add_subdirectory(libobs) add_subdirectory(plugins) add_subdirectory(UI) - D:\Code\obs
OBS 基础6 路径配置
清流弯弯
03-23 5024
OBS全局配置，默认保存位置： C:\Users\pc\AppData\Roaming\obs-studio/global.ini 看看保存的内容 [General] Pre19Defaults=false Pre21Defaults=false LicenseAccepted=true LastUpdateCheck=0 InstallGUID=c4169257556d...
ecw2c理解元数据：使用BigQuery k-means将4,000个堆栈溢出标签聚类
热门推荐
cunehu1722的博客
07-24 6万+
您如何将超过4,000个活动的Stack Overflow标签分组为有意义的组？ 对于无监督学习和k均值聚类来说，这是一项完美的任务-现在您可以在BigQuery中完成所有这些工作。 让我们找出方法。 Visualizing a universe of clustered tags. Felipe Hoffais a Developer Advocate fo...
修改semantic ui 下拉菜单的选中样式以及鼠标移上去的样式
王建野的专栏
01-04 5288
semantic ui 默认的下拉菜单选中的样式以及鼠标一上去的样式透明度太大，不仔细看都看不清楚，所以需要修改下这个默认样式。 .ui.dropdown .menu > .item:hover { background:rgba(255, 0, 0, 0.43)none repeat scroll 0% 0% !important;
semantic-ui引入css和js(折叠菜单为例)
GeekLee的博客
05-05 4503
index.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-COMPATIBLE" content="IE-edge,chrome-1" /> <meta name="viewport" content="width=device
semantic-ui的下拉菜单效果在网页中的引入
GeekLee的博客
06-10 3230
文件结构结构： first_web_2.html{% load staticfiles %} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>first web</title> <link rel="stylesheet" href="{% static 'css/
inverted反色
GeekLee的博客
05-17 1017
<div class="ui inverted red center aligned segment"> <!--inverted反色：内白外？ inverted red：内白外红 center aligned：居中对齐 segment块--> <i class="game massive icon"></i> <!--icon正常写，图标为白色--> </div>
镶嵌必应搜索
GeekLee的博客
06-07 472
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>geek lee</title> <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
semantic-ui 点赞图标
05-18
semantic-ui 中的点赞图标可以使用以下代码实现： ```html <i class="thumbs up icon"></i> ``` 其中，`thumbs up` 是 semantic-ui 中点赞图标的名称，可以根据需要选择不同的图标名称。同时，也可以使用其他的 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值