samatic-ui(三) 博客详情页

最新推荐文章于 2024-04-02 09:38:46 发布
最新推荐文章于 2024-04-02 09:38:46 发布
阅读量207 收藏
点赞数
分类专栏： samatic-ui 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48102099/article/details/115024145
版权

1.使图标缩小的样式在class中添加mini

<i class="mini home icon "></i>首页</a>

2.背景图片的添加在css中自定义body

/* ------------背景图片---------------- */
body{
	background: url(../images/背景.jpg);
}

3,多行列表的两种表示方式

1.第一种：

<!-- 第一种 -->
		<div class="ui segments">
			<!-- secondary和message都为容器的背景色 -->
			<div class="ui secondary segment">
			</div>
			<div class="ui message segment">
			</div>
			<div class="ui secondary segment">
			</div>
		</div>

2.第二种

<div class="ui top attached message segment">
		</div>
		<div class="ui  attached secondary segment">
		</div>
		<div class="ui bottom attached message segment">
		</div>

**效果图（头脚为圆角，中间无缝连接）

在这里插入图片描述
4.由于详情页面有文章，文章的宽度不能太宽，否则不美观。 所以用首页面的container的宽度，需要自定义容器的宽度

/* -------------自定义容器的宽度-------------- */
.m-container{
	/* 默认容器为72em */
	max-width: 60em !important;
	margin: auto !important;
}

5.图片的填充和图片的圆角

<div class="ui segment">
						<!-- 使用fluid可将图片充满整个容器 -->
						<!-- 使用rounded可将图片的四个角变圆 -->
						<img src="static/images/主图.jpg" class="ui fluid rounded image">
					</div>

6.如何在一个segment中打一个按钮或标签放在中间活着左右对齐：

其做法是再添加一个<div class="ui center aligned basic segment">

7，大弧形的按钮的样式：<div class="ui orange circular button">

<div class="ui center aligned basic segment">
						<div class="ui orange circular button">
					    	打赏
					    </div>
					    </div>

**6和7的效果图
在这里插入图片描述

8，添加图片边线使用`class=“ui rounded bordered image”

<div class="ui image" style="width: 150px;">
									<img src="static/images/二维码.png" class="ui rounded bordered image"  >
								</div>

**效果图
在这里插入图片描述

9,图片区域使用以下结构

<div class="ui images">
			<div class="ui image">
			</div>
			<div class="ui image">
			</div>
		</div>

10，在上述<div class="ui image">中不能添加文字，因为<div class="ui images">把文字的展现尺寸变成了0.

解决办法:需要在<div class="ui images">添加内联样式，style="font-size: inherit;"

<!---------二维码------- -->
						<div class="ui orange basic label">
							<div class="ui images" style="font-size: inherit;">
								<div class="ui image" style="width: 150px;">
									<img src="static/images/二维码.png" class="ui rounded bordered image"  >
									支付宝
								</div>
								<div class="ui image" style="width: 150px;">
									<img src="static/images/二维码.png" class="ui rounded bordered image"  >
									微信
								</div>
							</div>
						</div>

**此时的效果（有橘黄色的边线框是因为有<div class="ui orange basic label">包裹着）
在这里插入图片描述

11.当点击一个按钮弹出一个图片的效果具体用法见：
https://zijieke.com/semantic-ui/modules/popup.php
要达到点击或光标停在“赞赏”按钮时出现支付二维码，根据samatic-ui的用法，需要把整个<div class="ui orange basic label">放在一个“隐藏的div中”，然后在设置js，这样当点击或光标停在“赞赏”按钮上时“隐藏的div”就会出现，进而出现二维码图片。

：具体步骤
1.将整个<div class="ui orange basic label">放在<div class="ui flowing popup bottom ">中
2.设置jQuery的识别标志，对“隐藏div”添加payQ标志；对“赞赏”按钮添加payButton标志
3.设置jQuery

$('.payButton').popup({
				popup : $('.popup'),
				// click表示“点击时”才会出现，
				// 当没有“on”或者设置为on:'hover',时
				// 鼠标光标停留在按钮上时就会自动弹出图片
				on:'hover',
				position :'bottom center'
			});

完整代码

<!---------二维码------- -->
				    <div class="ui payQ flowing popup">
						<div class="ui orange basic label">
							<div class="ui images" style="font-size: inherit;">
								<div class="ui image" style="width: 150px;">
									<img src="static/images/二维码.png" class="ui rounded bordered image"  >
									支付宝
								</div>
								<div class="ui image" style="width: 150px;">
									<img src="static/images/二维码.png" class="ui rounded bordered image"  >
									微信
								</div>
							</div>
						</div>
					</div>

**效果图片
在这里插入图片描述

12，不需要容器就能让图片右对齐的方式：添加right floated属性

<img src="static/images/二维码.png" class="ui right floated orange rounded bordered image" style="width: 150px;">

13，垂直方向的居中使用middle aligned属性

需要注意的时一般添加在grid container 等容器中

<div class="ui middle aligned grid">
							<div class="eleven wide column">
								<div class="ui  list">
									<div class="item">
										最新博客最新博客最新博客
									</div>
									<div class="item">
										最新博客最新博客最新博客
									</div>
								</div>
							</div>
							<div class="five wide column">
								<img src="static/images/二维码.png" class="ui right floated orange rounded bordered image" style="width: 150px;">
							</div>
						</div>

**12和13效果图
在这里插入图片描述
14，详细的“留言组件”见https://zijieke.com/semantic-ui/views/comment.php

15.本例子中用的评论样式

<div class="ui comments">
										<div class="ui comment">
											<a href="#" class="avatar">
												<img src="static/images/斯科特.jpg" >
											</a>
											<div class="content">
												<div class="metadata">
													<div class="author">
														颜鹏荣
													</div>
													<div class="date">
														2天前
													</div>
													<div class="ui icon rating">
														<i class="star icon"></i>
														6666个
													</div>
												</div>
												<div class="text">
													你好牛啊!你好牛啊!你好牛啊!
												</div>
											</div>
										</div>
									</div>

**效果图
在这里插入图片描述

16，输入框加图标的方式 和调整图标的左右中的位置

	<!-- 图标左对齐 -->
									<div class="ui left icon input">
									<input type="text" placeholder="姓名"/>
									<i class="user icon"></i>

**需要注意的是：在调整图标的水平位置时只加left right 或 center
不要加aligned

17，留言提交区使用<div class="ui form">

<!-- 留言提交区 -->
						<div class="ui form">
							<!-- 留言区域 -->
							<div class="field">
								<!-- textarea多行文本输入框 -->
								<!-- 注意必须加 name="text"-->
							<textarea name="text"></textarea>
							</div>
							<div class="fields">
								<div class="field">
									<div class="ui left icon input">
									<input type="text" placeholder="姓名"/>
									<i class="user icon"></i>
									</div>
								</div>
								<div class="field">
									<div class="ui left icon input">
									<input type="text" placeholder="邮箱"/>
									<i class="mail icon"></i>
									</div>
								</div>
								
								<div class="field">
								<button class="ui teal button">提交</button>
								</div>
							</div>
						</div>

**效果图
在这里插入图片描述

18，关于多行文本输入框的问题

<textarea name="text" placeholder="请输入你的看法!"></textarea>

注意：
1.注意必须加 name=“text”
2.<textarea> </textarea>必须在同一条直线上，否则不显示文字

**效果图
在这里插入图片描述

19， 当响应移动端时，图1会出现图2的情况，所以需要自定义输入框和按钮的宽度，

图1
在这里插入图片描述
图2
在这里插入图片描述

自定义样式如下：

@media screen and (max-width : 768px){
	/* 菜单导航展示消失 */
	.m-mobile-hide{
		display: none !important;
	}
	.m-mobile-show{
		display: block !important;
	}
	/* 当屏幕小于768px时输入框充满容器 */
	.m-mobile-wide{
		width: 100% !important;
	}
}

将此样式添加在field中

<div class="fields">
								<div class="field m-mobile-wide m-margin-mini ">
									<div class="ui left icon input">
									<input type="text" placeholder="姓名"/>
									<i class="user icon"></i>
									</div>
								</div>
								<div class="field m-mobile-wide m-margin-mini ">
									<div class="ui left icon input">
									<input type="text" placeholder="邮箱"/>
									<i class="mail icon"></i>
									</div>
								</div>
								<div class="field m-mobile-wide m-margin-mini ">
								<button class="ui teal button m-mobile-wide">提交</button>
								</div>
							</div>

需要注意的是
1.关于按钮的区域，不仅field要加，而且button class=""里面也要加
2.加完后会发现两个输入框和一个按钮无缝对接，需要加自定义样式拉开

**效果图
在这里插入图片描述

weixin_48102099
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Samatic-ui（一） 博客首页的导航、内容和底部
weixin_48102099的博客
03-20 480
引入依赖 samatic ui官网引入CDN <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>首页</title> <!-- 头部cdn --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css"&.
samatic-ui(四)分类、标签、归档、关于我页面
weixin_48102099的博客
03-21 173
一、分类页面 1， 分类标签组合样式的具体的用法见：https://zijieke.com/semantic-ui/elements/button.php <div class="ui labeled button m-margin"> <a href="#" class="ui basic teal button">思维认知</a> <div class="ui teal basic left pointing
samatic-ui(二)响应式页面（移动端）
weixin_48102099的博客
03-20 119
1.使用stackable属性可将页面设置为响应移动端的页面 <div class="ui stackable inverted secondary menu"> stackable属性可添加在<div class="ui menu"> <div class="ui grid"> <div class="ui list"> 等组件中 2.添加“列表菜单图标”按钮 <!-- black使按钮区域变黑以便凸显列表菜单按钮 -->
探索未来UI设计：Sandi UI，一个现代化的Vue组件库
最新发布
gitblog_00038的博客
04-02 877
探索未来UI设计：Sandi UI，一个现代化的Vue组件库 项目地址:https://gitcode.com/MILIFIRE/sandi-ui 项目简介 Sandi UI 是一款由MILIFIRE团队打造的基于Vue.js的前端组件库。它的设计理念是提供简洁、优雅且易于定制化的UI解决方案，以帮助开发者快速构建现代化Web应用。无论你是正在为下一个大型企业级项目寻找合适的前端框架，还是只是想...
springboot个人博客的构建（6） 分类管理(标签管理)
qq_40979622的博客
11-02 2618
标签管理和分类管理一样。 分类管理页面： 首先：建立HTML文件types.html 这个是分类列表的页面。  这个页面是由blog.html页面由来的，进行修改得到。 看源代码:这里用的模板引用，在admin/下面建立新的模板引擎。 先看模板引擎： &lt;!DOCTYPE html&gt; &lt;html lang="en" xmlns:th="http://www...
EASY-UI示例；EASY-UI示例
09-13
EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例EASY-UI示例
element-ui.rar element-ui核心库压缩包
12-20
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面组件，用于构建优雅的前端应用。这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要...
element-ui 2.15.14版本
10-09
Element UI 是一个基于 Vue.js 的开源前端组件库，版本号 2.15.14 表示这是它的一个特定更新版本。这个版本可能包含了错误修复、性能优化、新功能添加或者对现有组件的改进。Element UI 提供了一系列美观、易用且...
jquery-ui.min.js
11-07
《jQuery UI：深入理解与应用》 jQuery UI是基于JavaScript库jQuery的一款强大的用户界面插件集，它提供了丰富的交互效果、可自定义的主题以及多种可重用的UI小部件。在本文中，我们将深入探讨jQuery UI的核心功能...
element-ui@2.13.1.zip
05-17
这个是unpkg.com的全部内容，其实只需要lib目录即可，使用方法参看官方文档，或者：https://blog.csdn.net/shengshuai/article/details/106171725
【Semantic框架学习日志】（7）segment的使用
weixin_50765519的博客
10-29 926
文章目录一、组件的简单介绍二、组件的一些用法（1）标准输入框（2）交互性（焦点式）输入框（3）加载中输入框（4）禁用输入框（5）错误提示型输入框（6）带图标型输入框（7）标签型输入框（7）动作型输入框 一、组件的简单介绍     通过输入框，实现用户与界面之间的交互。 优点：组件可以根据它们出现的屏幕大小响应性地调整其最大宽度，方便了响应式页面的开发 二、组件的一些用法 （1）标准输入框 <div class="ui input"> <input type="text" pla
Semantic UI 之 分段 segment
哈
08-09 1623
第一步：创建项目 添加JQuery和Semantic UI包、创建segment.html页面： 第二步：segment.html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分段</title> <link rel="stylesheet" href="semantic-u
给iOS开发新手送点福利,简述UISegment的属性和用法
weixin_30808253的博客
12-19 116
UISegment属性 1.segmentedControlStyle 设置segment的显示样式。 typedef NS_ENUM(NSInteger, UISegmentedControlStyle) { UISegmentedControlStylePlain, // large plain 系统默认平板样式 segmentedControl.segmentedContr...
42.前端开发框架Semantic UI（一）
Mars Loo的博客
09-10 3万+
简单介绍前端开发框架Semantic UI的安装及使用方法，详细介绍了其button组件的用法。
UISegment的详细使用
pupin9的专栏
05-21 763
      分段控件（UISegmentedControl）。分段控件提供一栏按钮（有时称为按钮栏），但只能激活其中一个按钮。分段控件会导致用户在屏幕上看到的内容发生变化。它们常用于在不同类别的信息之间选择，或在不同的应用屏幕之间切换。     基本使用情况参考http://blog.csdn.net/iukey      其中的重点：      初始化默认片段 默认情况下，除非你指定，...
Vue3用18行代码实现三弟跳舞
小陈的博客
06-21 221
渲染器 务必设置设置宽高 效果 使用 SDFBXLoader 加载 FBX 模型，我们使用 SDMeshBasicMaterial 指定 身体的材质 和模型基础的颜色为红，此时我们还看不到，我们需要将摄像机向后移动显示出我们的三弟 效果使用 SDTextureLoader 给材质 加载上贴图，三弟模型有两部分组成我们，用两个材质来分别去指定，使用meshName 属性让材质分别对应不同的模型。tip 我们去除了 SDMeshBasicMaterial color 属性 因为有贴图了 效果这里 需要使用 SD
jQuery Mobile中图标icon样式大全ui-icon-*
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-31 5122
全栈工程师开发手册 （作者：栾鹏） jQuery Mobile 所有class选项jQuery Mobile中图标icon样式大全 //ui-icon-action 动作 (一般用于页面跳转切换) action //ui-icon-alert 三角形内的感叹号 alert //ui-icon-audio
Element-Ui组件（二）Icon 图标
热门推荐
究极死胖兽的博客
06-03 24万+
Element-Ui组件（二）图标应用 本文参考Element官方文档： http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标库，主要有以下2种用法： 设置类名el-icon-xxx，通常使用i元素 在Element部分组件中设置icon属性 页面效果 以下是通过上述两种用法制作的简单导航工具条： 示例代码 &l...
semantic ui中文文档_好看又好用的前端UI框架
weixin_39574869的博客
12-01 5152
前端是一个系统与用户打交道的部分，它的好坏直接影响用户对于产品的印象分，在这个看颜值的时代，更是马虎不得。当前网络上有着众多的UI框架供开发者们使用，推荐几款个人喜欢的好看又好用的UI框架。1. Bootstrap这个不用多说了，大家都知道。除了框架本身外，还拥有大量的免费主题供大家套用，用起来真的香。官网：https://getbootstrap.com/Bootstrap2. Element饿...
element-plus UI动漫详情页
11-17
请您提供更多关于element-plus UI动漫详情页的信息，我将尽力为您解答。同时，您可以提供以下信息以帮助我更好地回答您的问题： 1. 您想要实现什么样的UI动漫详情页？ 2. 您是否已经使用了element-plus UI组件库？ 3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值