commit
cef700b3a2
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,2 @@
|
||||
<marquee>阿米诺斯</marquee>
|
||||
<marquee>666</marquee>
|
||||
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML标签属性学习</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>HTML标签属性学习</h1>
|
||||
<marquee loop="10" bgcolor="green" id="m1">
|
||||
阿米诺斯
|
||||
<input type="password" placeholder="请输入">
|
||||
</marquee>
|
||||
<br><br>
|
||||
<input/>
|
||||
<input disabled>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,15 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML基本结构学习</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>HTML基本结构</h1>
|
||||
<marquee>
|
||||
阿米诺斯
|
||||
<input type="password" placeholder="请输入">
|
||||
<button>提交</button>
|
||||
</marquee>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML注释学习</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>HTML注释学习</h1>
|
||||
<!-- 这是一个注释 -->
|
||||
<p>这是一个段落</p>
|
||||
<marquee>
|
||||
阿米诺斯
|
||||
<input type="password" placeholder="请输入">
|
||||
</marquee>
|
||||
<input type="text" placeholder="请输入">
|
||||
<!--
|
||||
这是一段注释，
|
||||
用于描述代码的功能或作用。
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML文档声明学习</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>HTML文档声明学习</h1>
|
||||
<p>这是一个段落</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML字符编码学习</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>HTML字符编码学习</h1>
|
||||
<p>这是一个段落</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML设置语言学习</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>HTML设置语言学习</h1>
|
||||
<p>这是一个段落</p>
|
||||
<marquee>
|
||||
我爱你
|
||||
</marquee>
|
||||
<marquee>
|
||||
I love you
|
||||
</marquee>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML标准结构学习</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML排版标签学习</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>我是一级标题</h1>
|
||||
<h2>我是二级标题</h2>
|
||||
<h3>我是三级标题</h3>
|
||||
<h4>我是四级标题</h4>
|
||||
<h5>我是五级标题</h5>
|
||||
<h6>我是六级标题</h6>
|
||||
<p>我是一个段落</p>
|
||||
<div>
|
||||
我是一个div
|
||||
</div>
|
||||
<div>
|
||||
<p>我是一个段落</p>
|
||||
<p>我是另一个段落</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML图片标签学习</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- img标签是行内元素-->
|
||||
<img width="300px" height="300px" src="微信图片_20250718204812.jpg" alt="微信图片">
|
||||
<!-- 总结： -->
|
||||
<ul>
|
||||
<li>img标签是行内元素</li>
|
||||
<li>img标签有width和height属性</li>
|
||||
<li>img标签有src属性</li>
|
||||
<li>img标签有alt属性</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML超链接跳转锚点</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a href="#卡比兽1">看卡比兽1</a>
|
||||
<br>
|
||||
<a href="#卡比兽2">看卡比兽2</a>
|
||||
<br>
|
||||
<a href="#设计图标">看设计图标</a>
|
||||
|
||||
<a name="卡比兽1"></a>
|
||||
<p>我是卡比兽1</p>
|
||||
<img src="./微信图片_20250718204812.jpg" alt="微信图片_20250718204812" width="300px" height="300px">
|
||||
|
||||
<p id="卡比兽2">我是卡比兽2</p>
|
||||
<img src="../1_HTML/path_test/卡比兽2.jpeg" alt="卡比兽2" width="300px" height="300px">
|
||||
|
||||
<a name="设计图标"></a>
|
||||
<p>我是设计图标</p>
|
||||
<img src="../设计图标.png" alt="设计图标" width="300px" height="300px">
|
||||
|
||||
<p>介绍完毕</p>
|
||||
<a href="#">回到顶部</a>
|
||||
<br>
|
||||
<a href="">刷新页面</a>
|
||||
<br>
|
||||
<a href="javascript:alert('刷新页面');">刷新页面</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML超链接_唤起指定应用</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="tel:16697064833">电话联系</a>
|
||||
<br>
|
||||
<a href="mailto:2950457847@qq.com">邮件联系</a>
|
||||
<br>
|
||||
<a href="sms:16697064833">短信联系</a>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML列表学习</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>HTML列表学习</h1>
|
||||
|
||||
<h2>有序列表</h2>
|
||||
<ol>
|
||||
<li>有序列表1</li>
|
||||
<li>有序列表2</li>
|
||||
<li>有序列表3</li>
|
||||
</ol>
|
||||
|
||||
<h2>无序列表</h2>
|
||||
<ul>
|
||||
<li>无序列表1</li>
|
||||
<li>无序列表2</li>
|
||||
<li>无序列表3</li>
|
||||
</ul>
|
||||
|
||||
<h2>自定义列表</h2>
|
||||
<dl>
|
||||
<dt>自定义列表1</dt>
|
||||
<dd>自定义列表1的描述</dd>
|
||||
<dt>自定义列表2</dt>
|
||||
<dd>自定义列表2的描述</dd>
|
||||
</dl>
|
||||
|
||||
<h2>列表嵌套</h2>
|
||||
<ol>
|
||||
<li>有序列表1</li>
|
||||
<li>有序列表2
|
||||
<ul>
|
||||
<li>无序列表1</li>
|
||||
<li>无序列表2</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>有序列表3</li>
|
||||
</ol>
|
||||
|
||||
<h2>有序列表项的属性</h2>
|
||||
<ol>
|
||||
<li value="5">有序列表1</li>
|
||||
<li>有序列表2</li>
|
||||
<li>有序列表3</li>
|
||||
</ol>
|
||||
<ol reversed>
|
||||
<li>有序列表1</li>
|
||||
<li>有序列表2</li>
|
||||
<li>有序列表3</li>
|
||||
</ol>
|
||||
|
||||
<h2>无序列表的属性</h2>
|
||||
<ul type="disc">
|
||||
<li>无序列表1</li>
|
||||
<li>无序列表2</li>
|
||||
<li>无序列表3</li>
|
||||
</ul>
|
||||
<ul type="circle">
|
||||
<li>无序列表1</li>
|
||||
<li>无序列表2</li>
|
||||
<li>无序列表3</li>
|
||||
</ul>
|
||||
<ul type="square">
|
||||
<li>无序列表1</li>
|
||||
<li>无序列表2</li>
|
||||
<li>无序列表3</li>
|
||||
</ul>
|
||||
|
||||
<h2>自定义列表的属性</h2>
|
||||
<dl>
|
||||
<dt>自定义列表1</dt>
|
||||
<dd>自定义列表1的描述</dd>
|
||||
<dt>自定义列表2</dt>
|
||||
<dd>自定义列表2的描述</dd>
|
||||
</dl>
|
||||
|
||||
<h2>总结</h2>
|
||||
<ul>
|
||||
<li>有序列表使用数字或字母作为项目的标记</li>
|
||||
<li>无序列表使用圆点、方点或其他符号作为项目的标记</li>
|
||||
<li>自定义列表允许用户自定义项目的标记和描述</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML列表_注意事项</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>有序列表</h2>
|
||||
<ol>
|
||||
<li>有序列表1</li>
|
||||
<li>有序列表2</li>
|
||||
<li>有序列表3</li>
|
||||
<li>
|
||||
<a href="https://www.baidu.com" target="_blank">去百度</a>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h2>列表嵌套</h2>
|
||||
<ol>
|
||||
<li>有序列表1</li>
|
||||
<li>
|
||||
<span>有序列表2</span>
|
||||
<ul>
|
||||
<li>
|
||||
<span>无序列表1</span>
|
||||
<ul>
|
||||
<li>无序列表2-1</li>
|
||||
<li>无序列表2-2</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span>无序列表2</span>
|
||||
<ul>
|
||||
<li>无序列表2-1</li>
|
||||
<li>无序列表2-2</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>有序列表3</li>
|
||||
</ol>
|
||||
|
||||
<h2>自定义列表</h2>
|
||||
<dl>
|
||||
<dt>自定义列表1</dt>
|
||||
<dd>自定义列表1的描述1</dd>
|
||||
<dd>自定义列表1的描述2</dd>
|
||||
<dt>自定义列表2</dt>
|
||||
<dd>自定义列表2的描述</dd>
|
||||
</dl>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML表格_常用属性</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>标准表格</h2>
|
||||
<table border="1" width="500" height="200" cellspacing="0">
|
||||
<caption>学生信息</caption>
|
||||
<thead bgcolor="lightgray" align="center" valign="middle" height="30">
|
||||
<tr>
|
||||
<th width="70" height="30">姓名</th>
|
||||
<th width="50" height="30">性别</th>
|
||||
<th width="50" height="30">年龄</th>
|
||||
<th width="70" height="30">民族</th>
|
||||
<th width="100" height="30">政治面貌</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody height="150" valign="middle" align="center">
|
||||
<tr>
|
||||
<td>张三</td>
|
||||
<td>男</td>
|
||||
<td>18</td>
|
||||
<td>汉族</td>
|
||||
<td>团员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>李四</td>
|
||||
<td>女</td>
|
||||
<td>20</td>
|
||||
<td>满族</td>
|
||||
<td>群众</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>王五</td>
|
||||
<td>男</td>
|
||||
<td>19</td>
|
||||
<td>回族</td>
|
||||
<td>党员</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>赵六</td>
|
||||
<td>女</td>
|
||||
<td>21</td>
|
||||
<td>壮族</td>
|
||||
<td>团员</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot align="right" valign="middle" height="30">
|
||||
<tr>
|
||||
<td colspan="5">共4人</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML表格_跨行与跨列</title>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1" cellspacing="0">
|
||||
<caption>课程表</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>项目</th>
|
||||
<th colspan="5" align="center">上课</th>
|
||||
<th colspan="2" align="center">活动与休息</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>星期</td>
|
||||
<td>星期一</td>
|
||||
<td>星期二</td>
|
||||
<td>星期三</td>
|
||||
<td>星期四</td>
|
||||
<td>星期五</td>
|
||||
<td>星期六</td>
|
||||
<td>星期日</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4">上午</td>
|
||||
<td>语文</td>
|
||||
<td>数学</td>
|
||||
<td>英语</td>
|
||||
<td>英语</td>
|
||||
<td>物理</td>
|
||||
<td>数学竞赛</td>
|
||||
<td rowspan="4">休息</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数学</td>
|
||||
<td>语文</td>
|
||||
<td>化学</td>
|
||||
<td>物理</td>
|
||||
<td>英语</td>
|
||||
<td>篮球比赛</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>化学</td>
|
||||
<td>语文</td>
|
||||
<td>体育</td>
|
||||
<td>历史</td>
|
||||
<td>地理</td>
|
||||
<td>每周一考</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>体育</td>
|
||||
<td>化学</td>
|
||||
<td>语文</td>
|
||||
<td>数学</td>
|
||||
<td>英语</td>
|
||||
<td>社会实践</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">下午</td>
|
||||
<td>语文</td>
|
||||
<td>英语</td>
|
||||
<td>数学</td>
|
||||
<td>物理</td>
|
||||
<td>数学</td>
|
||||
<td>英语角</td>
|
||||
<td rowspan="2">休息</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>化学</td>
|
||||
<td>物理</td>
|
||||
<td>地理</td>
|
||||
<td>生物</td>
|
||||
<td>体育</td>
|
||||
<td>自由活动</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML表单_基本结构</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="https://www.baidu.com/s" target="_blank">
|
||||
<input type="text" name="wd" placeholder="请输入搜索内容">
|
||||
<button>去百度搜索</button>
|
||||
</form>
|
||||
<hr>
|
||||
<form action="https://s.taobao.com/search" target="_blank">
|
||||
<input type="text" name="q" placeholder="请输入搜索内容">
|
||||
<button>去淘宝搜索</button>
|
||||
</form>
|
||||
<hr>
|
||||
<form action="https://search.jd.com/search" target="_blank">
|
||||
<input type="text" name="keyword" placeholder="请输入搜索内容">
|
||||
<button>去京东搜索</button>
|
||||
</form>
|
||||
<hr>
|
||||
<a href="https://search.jd.com/search?keyword=手机" target="_blank">点击跳转至京东并搜索手机</a>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML表单_常用控件</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="https://search.jd.com/search" target="_blank">
|
||||
账户：<input type="text" name="account" placeholder="请输入" value="admin" maxLength="10">
|
||||
<br>
|
||||
密码：<input type="password" name="pwd" placeholder="请输入">
|
||||
<br>
|
||||
性别：<input type="radio" name="gender" value="male">男
|
||||
<input type="radio" name="gender" value="female" checked>女
|
||||
<br>
|
||||
爱好：<input type="checkbox" name="hobby" value="smoke" checked>抽烟
|
||||
<input type="checkbox" name="hobby" value="drink">喝酒
|
||||
<input type="checkbox" name="hobby" value="perm">烫头
|
||||
<br>
|
||||
其他：<textarea name="other" cols="30" rows="10"></textarea>
|
||||
<br>
|
||||
籍贯：
|
||||
<select name="place">
|
||||
<option value="beijing">北京</option>
|
||||
<option value="shanghai" selected>上海</option>
|
||||
<option value="guangzhou">广州</option>
|
||||
<option value="shenzhen">深圳</option>
|
||||
</select>
|
||||
<br>
|
||||
<!-- 隐藏域，用于存储一些额外的信息 -->
|
||||
<input type="hidden" name="extra" value="123456">
|
||||
<br>
|
||||
<input type="submit" value="确认">
|
||||
<input type="reset" value="重置">
|
||||
<input type="button" value="检测账户是否被注册 ">
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML表单_禁用控件</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="https://search.jd.com/search" target="_blank">
|
||||
账户：<input type="text" name="account" placeholder="请输入" value="admin" maxLength="10">
|
||||
<br>
|
||||
密码：<input disabled type="password" name="pwd" placeholder="请输入">
|
||||
<br>
|
||||
性别：<input disabled type="radio" name="gender" value="male">男
|
||||
<input type="radio" name="gender" value="female" checked>女
|
||||
<br>
|
||||
爱好：<input type="checkbox" name="hobby" value="smoke" checked>抽烟
|
||||
<input disabled type="checkbox" name="hobby" value="drink">喝酒
|
||||
<input type="checkbox" name="hobby" value="perm">烫头
|
||||
<br>
|
||||
其他：<textarea disabled name="other" cols="30" rows="10"></textarea>
|
||||
<br>
|
||||
籍贯：
|
||||
<select name="place">
|
||||
<option value="beijing">北京</option>
|
||||
<option value="shanghai" selected>上海</option>
|
||||
<option disabled value="guangzhou">广州</option>
|
||||
<option value="shenzhen">深圳</option>
|
||||
</select>
|
||||
<br>
|
||||
<!-- 隐藏域，用于存储一些额外的信息 -->
|
||||
<input type="hidden" name="extra" value="123456">
|
||||
<br>
|
||||
<input type="submit" value="确认">
|
||||
<input type="reset" value="重置">
|
||||
<input disabled type="button" value="检测账户是否被注册 ">
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML表单_label控件</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="https://search.jd.com/search" target="_blank">
|
||||
<label for="zhanghu">账户：</label>
|
||||
<input id="zhanghu" type="text" name="account" placeholder="请输入">
|
||||
<br>
|
||||
<label>
|
||||
密码：
|
||||
<input id="mima" type="password" name="pwd" placeholder="请输入">
|
||||
</label>
|
||||
<br>
|
||||
性别：
|
||||
<label>
|
||||
<input type="radio" name="gender" value="male">男
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="gender" value="female">女
|
||||
</label>
|
||||
<br>
|
||||
爱好：
|
||||
<label>
|
||||
<input type="checkbox" name="hobby" value="smoke">抽烟
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="hobby" value="drink">喝酒
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="hobby" value="perm">烫头
|
||||
</label>
|
||||
<br>
|
||||
<label for="qita">其他：</label>
|
||||
<textarea id="qita" name="other" cols="30" rows="10"></textarea>
|
||||
<br>
|
||||
籍贯：
|
||||
<select name="place">
|
||||
<option value="beijing">北京</option>
|
||||
<option value="shanghai">上海</option>
|
||||
<option value="guangzhou">广州</option>
|
||||
<option value="shenzhen">深圳</option>
|
||||
</select>
|
||||
<br>
|
||||
<!-- 隐藏域，用于存储一些额外的信息 -->
|
||||
<input type="hidden" name="extra" value="123456">
|
||||
<br>
|
||||
<input type="submit" value="确认">
|
||||
<input type="reset" value="重置">
|
||||
<input type="button" value="检测账户是否被注册 ">
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML表单_fieldset与legend控件</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="https://search.jd.com/search" target="_blank">
|
||||
<fieldset>
|
||||
<legend>用户信息</legend>
|
||||
<label for="zhanghu">账户：</label>
|
||||
<input id="zhanghu" type="text" name="account" placeholder="请输入">
|
||||
<br>
|
||||
<label>
|
||||
密码：
|
||||
<input id="mima" type="password" name="pwd" placeholder="请输入">
|
||||
</label>
|
||||
<br>
|
||||
性别：
|
||||
<label>
|
||||
<input type="radio" name="gender" value="male">男
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="gender" value="female">女
|
||||
</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>其他信息</legend>
|
||||
爱好：
|
||||
<label>
|
||||
<input type="checkbox" name="hobby" value="smoke">抽烟
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="hobby" value="drink">喝酒
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="hobby" value="perm">烫头
|
||||
</label>
|
||||
<br>
|
||||
<label for="qita">其他：</label>
|
||||
<textarea id="qita" name="other" cols="30" rows="10"></textarea>
|
||||
<br>
|
||||
籍贯：
|
||||
<select name="place">
|
||||
<option value="beijing">北京</option>
|
||||
<option value="shanghai">上海</option>
|
||||
<option value="guangzhou">广州</option>
|
||||
<option value="shenzhen">深圳</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
<br>
|
||||
<!-- 隐藏域，用于存储一些额外的信息 -->
|
||||
<input type="hidden" name="extra" value="123456">
|
||||
<br>
|
||||
<input type="submit" value="确认">
|
||||
<input type="reset" value="重置">
|
||||
<input type="button" value="检测账户是否被注册 ">
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML框架标签学习</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--利用iframe嵌入外部网页-->
|
||||
<!--<iframe src="https://www.baidu.com/" width="900" height="500" frameborder="0"></iframe>-->
|
||||
<!--利用iframe嵌入广告网页-->
|
||||
<!--利用iframe嵌入其他文件-->
|
||||
<!--<iframe src="./微信图片_20250718204812.jpg" frameborder="0"></iframe>-->
|
||||
<!--<a href="https://www.baidu.com/" target="baidu">点击看百度</a>-->
|
||||
<!--<iframe name="baidu" width="900" height="500" frameborder="0"></iframe>-->
|
||||
<form action="https://so.toutiao.com/search" target="bd">
|
||||
<input type="text" name="keyword" placeholder="请输入搜索内容">
|
||||
<button>去头条搜索</button>
|
||||
</form>
|
||||
<iframe name="bd" frameborder="0" width="900" height="500"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML全局属性学习</title>
|
||||
<style>
|
||||
.student
|
||||
{
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hello1">你好啊1</div>
|
||||
<div id="hello2">你好啊2</div>
|
||||
<h2>不能使用id的标签有</h2>
|
||||
<ol>
|
||||
<li>head</li>
|
||||
<li>body</li>
|
||||
<li>html等</li>
|
||||
</ol>
|
||||
<hr>
|
||||
<div class="student">张三</div>
|
||||
<div class="student">李四</div>
|
||||
<h2>不能使用class的标签有</h2>
|
||||
<ol>
|
||||
<li>head</li>
|
||||
<li>body</li>
|
||||
<li>html等</li>
|
||||
</ol>
|
||||
<div style="color: green;">诗人</div>
|
||||
<div style="color: blue;">步诗人</div>
|
||||
<bdo dir="rtl">你是年少的欢喜</bdo>
|
||||
<bdo dir="ltr">你是年少的欢喜</bdo>
|
||||
<div dir="rtl">你是年少的欢喜</div>
|
||||
<h2>不能使用dir的标签有</h2>
|
||||
<ol>
|
||||
<li>head</li>
|
||||
<li>body</li>
|
||||
<li>html等</li>
|
||||
</ol>
|
||||
<div title="英雄联盟">LOL</div>
|
||||
<a href="https://www.baidu.com" title="百度">去百度</a>
|
||||
<div lang="en">hello</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<!--配置字符编码为UTF-8-->
|
||||
<meta charset="UTF-8">
|
||||
<!--配置移动端适配-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!--配置网页关键字-->
|
||||
<meta name="keywords" content="HTML, meta, 元信息">
|
||||
<!--配置网页描述-->
|
||||
<meta name="description" content="HTMLmeta元信息学习">
|
||||
<!--配置网页作者-->
|
||||
<meta name="author" content="SUANCAIfish">
|
||||
<!--配置网页刷新时间-->
|
||||
<meta http-equiv="refresh" content="5;url=https://www.baidu.com">
|
||||
<title>HTMLmeta元信息学习</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>诗人握持</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 230 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 618 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
@ -0,0 +1,15 @@
|
||||
h1{
|
||||
color: rgb(100, 207, 145);
|
||||
font-size: 40px;
|
||||
}
|
||||
h2{
|
||||
color: rgb(207, 145, 100);
|
||||
font-size: 60px;
|
||||
}
|
||||
p{
|
||||
color: rgb(145, 100, 207);
|
||||
font-size: 20px;
|
||||
}
|
||||
img{
|
||||
width: 200px;
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>位置2_内部样式</title>
|
||||
<style>
|
||||
h1{
|
||||
color: rgb(100, 207, 145);
|
||||
font-size: 40px;
|
||||
}
|
||||
h2{
|
||||
color: rgb(207, 145, 100);
|
||||
font-size: 60px;
|
||||
}
|
||||
p{
|
||||
color: rgb(145, 100, 207);
|
||||
font-size: 20px;
|
||||
}
|
||||
img{
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>梅宜阁诗人</h1>
|
||||
<h2>诗人啊</h2>
|
||||
<h2 style="color: rgb(100, 207, 145);font-size: 40px;">诗人吗</h2>
|
||||
<h2>诗人吧</h2>
|
||||
<p>
|
||||
我是梅宜阁的诗人，我写的诗都很有意义，我很幸运，我可以和你分享我的诗。
|
||||
</p>
|
||||
<img src="../../设计图标.png" alt="设计图标">
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>位置3_外部样式</title>
|
||||
<link rel="stylesheet" href="./position3.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>梅宜阁诗人</h1>
|
||||
<h2>诗人啊</h2>
|
||||
<h2>诗人吗</h2>
|
||||
<h2>诗人吧</h2>
|
||||
<p>
|
||||
我是梅宜阁的诗人，我写的诗都很有意义，我很幸运，我可以和你分享我的诗。
|
||||
</p>
|
||||
<img src="../../设计图标.png" alt="设计图标">
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,4 @@
|
||||
h1{
|
||||
color: rgb(39, 182, 238);
|
||||
font-size: 100px;
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>优先级</title>
|
||||
<link rel="stylesheet" href="./index.css">
|
||||
<style>
|
||||
h1{
|
||||
color: rgb(207, 145, 100);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 行内样式 > 内部样式 = 外部样式 -->
|
||||
<!-- 内部样式和外部样式的优先级是相等的，但是后写的会覆盖先写的 -->
|
||||
<h1 style="color: rgb(100, 207, 145);">梅宜阁诗人</h1>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>语法规范</title>
|
||||
<style>
|
||||
h1{
|
||||
/* 选择器{属性:属性值;} */
|
||||
color: blue;
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 注释内容 -->
|
||||
<h1>梅宜阁诗人</h1>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>代码风格</title>
|
||||
<style>
|
||||
/* 展开风格 */
|
||||
h1{
|
||||
color: rgb(100, 207, 145);
|
||||
font-size: 30px;
|
||||
}
|
||||
/* 紧凑风格 */
|
||||
h2{color:blue;font-size:20px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>梅宜阁诗人</h1>
|
||||
<h2>诗人啊</h2>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>通配选择器</title>
|
||||
<style>
|
||||
/* 通配选择器，可以选中所有元素 */
|
||||
*{
|
||||
font-size: 30px;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>梅宜阁诗集</h1>
|
||||
<br>
|
||||
<h2>梅宜阁诗人</h2>
|
||||
<h3>作者：糖包</h3>
|
||||
<p>阁倚寒梅砚底香，</p>
|
||||
<p>笔底诗心绕曲廊。</p>
|
||||
<p>雪夜灯前裁好句，</p>
|
||||
<p>不负清名作锦章。</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>元素选择器</title>
|
||||
<style>
|
||||
h1{
|
||||
color: rgb(100, 207, 145);
|
||||
font-size: 50px;
|
||||
}
|
||||
h2{
|
||||
color: blue;
|
||||
font-size: 30px;
|
||||
}
|
||||
h3{
|
||||
color: rgb(255, 166, 0);
|
||||
font-size: 20px;
|
||||
}
|
||||
p{
|
||||
font-size: 20px;
|
||||
color: blueviolet;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>梅宜阁诗集</h1>
|
||||
<br>
|
||||
<h2>梅宜阁诗人</h2>
|
||||
<h3>作者：糖包</h3>
|
||||
<p>阁倚寒梅砚底香，</p>
|
||||
<p>笔底诗心绕曲廊。</p>
|
||||
<p>雪夜灯前裁好句，</p>
|
||||
<p>不负清名作锦章。</p>
|
||||
<br>
|
||||
<h2>人诗阁宜梅</h2>
|
||||
<h3>作者：糖包</h3>
|
||||
<p>人逐黄金意不宁，</p>
|
||||
<p>诗赋虚名掩浊行。</p>
|
||||
<p>阁内笙歌迷醉眼，</p>
|
||||
<p>宜弃寒梅媚势倾。</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ID选择器</title>
|
||||
<style>
|
||||
#poet{
|
||||
color: blue;
|
||||
font-size: 30px;
|
||||
}
|
||||
#poem{
|
||||
color: red;
|
||||
}
|
||||
.poem{
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>梅宜阁诗集</h1>
|
||||
<br>
|
||||
<h2 id="poet">梅宜阁诗人</h2>
|
||||
<h3>作者：糖包</h3>
|
||||
<p>阁倚寒梅砚底香，</p>
|
||||
<p>笔底诗心绕曲廊。</p>
|
||||
<p>雪夜灯前裁好句，</p>
|
||||
<p>不负清名作锦章。</p>
|
||||
<br>
|
||||
<h2 id="poem" class="poem">人诗阁宜梅</h2>
|
||||
<h3>作者：糖包</h3>
|
||||
<p>人逐黄金意不宁，</p>
|
||||
<p>诗赋虚名掩浊行。</p>
|
||||
<p>阁内笙歌迷醉眼，</p>
|
||||
<p>宜弃寒梅媚势倾。</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>交集选择器</title>
|
||||
<style>
|
||||
.rich{
|
||||
color: gold;
|
||||
}
|
||||
.beauty{
|
||||
color: red;
|
||||
}
|
||||
<!-- 交集选择器：同时满足多个条件的元素 ，用的多-->
|
||||
p.beauty{
|
||||
color: blue;
|
||||
}
|
||||
.rich.beauty{
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2 class="rich">土豪张三</h2>
|
||||
<h2 class="beauty">明星李四</h2>
|
||||
<h2 class="rich beauty">土豪明星王五</h2>
|
||||
<hr>
|
||||
<p class="beauty">小狗旺财</p>
|
||||
<p class="beauty">小猪佩奇</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>并集选择器</title>
|
||||
<style>
|
||||
.rich{
|
||||
color: gold;
|
||||
}
|
||||
.beauty{
|
||||
color: red;
|
||||
}
|
||||
.dog{
|
||||
color: blue;
|
||||
}
|
||||
.pet{
|
||||
color: pink;
|
||||
}
|
||||
h2.rich,
|
||||
h2.beauty,
|
||||
p.dog,
|
||||
p.pet{
|
||||
font-size: 30px;
|
||||
background-color: rgb(255, 255, 200);
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2 class="rich">土豪张三</h2>
|
||||
<h2 class="beauty">明星李四</h2>
|
||||
<h2>破产王五</h2>
|
||||
<hr>
|
||||
<p class="dog">小狗旺财</p>
|
||||
<p class="pet">小猪佩奇</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>后代选择器</title>
|
||||
<style>
|
||||
ul li{
|
||||
color: red;
|
||||
}
|
||||
ul li a{
|
||||
color: green;
|
||||
}
|
||||
ol li{
|
||||
color: blue;
|
||||
}
|
||||
ol.subject li{
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>抽烟</li>
|
||||
<li>喝酒</li>
|
||||
<li>
|
||||
<a href="https://www.baidu.com" target="_blank">烫头</a>
|
||||
</li>
|
||||
<div>
|
||||
<li>学习</li>
|
||||
</div>
|
||||
</ul>
|
||||
<hr>
|
||||
<ol>
|
||||
<li>张三</li>
|
||||
<li>李四</li>
|
||||
<li>王五</li>
|
||||
</ol>
|
||||
<ol class="subject">
|
||||
<li>
|
||||
语文
|
||||
</li>
|
||||
<li>
|
||||
数学
|
||||
</li>
|
||||
<li>
|
||||
英语
|
||||
</li>
|
||||
</ol>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>子代选择器</title>
|
||||
<style>
|
||||
div > a{
|
||||
color: red;
|
||||
}
|
||||
div > p > a{
|
||||
color: skyblue;
|
||||
}
|
||||
div.child > a{
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<a href="#">张三</a>
|
||||
<a href="#">李四</a>
|
||||
<a href="#">王五</a>
|
||||
<p>
|
||||
<a href="#">赵六</a>
|
||||
<div class="child">
|
||||
<a href="#">孙七</a>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>兄弟选择器</title>
|
||||
<style>
|
||||
/* 选择div元素后面紧接着的第一个p元素——相邻兄弟选择器 */
|
||||
div + p{
|
||||
color: red;
|
||||
}
|
||||
/* 选择div元素后面所有的p元素——通用兄弟选择器 */
|
||||
div ~ p{
|
||||
color: skyblue;
|
||||
}
|
||||
li + li{
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
前端
|
||||
</p>
|
||||
<div>
|
||||
尚硅谷
|
||||
</div>
|
||||
<p>
|
||||
Java
|
||||
</p>
|
||||
<p>
|
||||
大数据
|
||||
</p>
|
||||
<p>
|
||||
UI
|
||||
</p>
|
||||
<ul>
|
||||
<li>主页</li>
|
||||
<li>秒杀</li>
|
||||
<li>订单</li>
|
||||
<li>我的</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 314 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 637 B |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 61 KiB |
@ -0,0 +1,276 @@
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid silver;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
background: #202123;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 1px solid rgba(255,255,255,.16);
|
||||
background-color: rgba(0,0,0,.64);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner,
|
||||
::-webkit-resizer {
|
||||
background: #202123;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #989A9C;
|
||||
background: #191919;
|
||||
}
|
||||
|
||||
.open .header-left{
|
||||
background: #0F0F0F;
|
||||
}
|
||||
|
||||
header .header-center {
|
||||
background: #000;
|
||||
}
|
||||
.zoom-widget button {
|
||||
background: #0079fa;
|
||||
}
|
||||
|
||||
.zoom-widget button:after,.zoom-widget button:before {
|
||||
|
||||
background: #FFF;
|
||||
}
|
||||
.zoom-widget button:disabled {
|
||||
background: #222;
|
||||
}
|
||||
.zoom-widget button:disabled:after,.zoom-widget button:disabled:before {
|
||||
background: #606264;
|
||||
}
|
||||
.unit-box .overlay {
|
||||
background: rgba(0,0,0,.56);
|
||||
}
|
||||
.unit-box ul {
|
||||
background: #0F0F0F;
|
||||
}
|
||||
|
||||
.unit-box:focus h3 {
|
||||
color: #3A3A3A;
|
||||
}
|
||||
.unit-box li:hover label {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.unit-box .sub-title {
|
||||
background: #000;
|
||||
color: #3A3A3A;
|
||||
}
|
||||
.inspector,.navbar {
|
||||
background: #232527;
|
||||
|
||||
}
|
||||
.back{
|
||||
background-color: #0079fa;
|
||||
color: #fff;
|
||||
}
|
||||
.navbarBack{
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
color: #eeeeee;
|
||||
}
|
||||
.navbar nav {
|
||||
background: #000204;
|
||||
}
|
||||
|
||||
.tab li.current {
|
||||
background-color: #0079fa;
|
||||
}
|
||||
#inspector .tab li.select {
|
||||
background-color: rgba(255,255,255,.05);
|
||||
}
|
||||
.inspector h3 {
|
||||
background-image: linear-gradient(90deg,rgba(0,4,9,.32) 0,rgba(0,2,4,0) 100%);
|
||||
}
|
||||
|
||||
.screen {
|
||||
background: #FFF;
|
||||
box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
|
||||
}
|
||||
.hover,.selected {
|
||||
border: 1px solid #EE6723;
|
||||
}
|
||||
|
||||
.has-slice {
|
||||
border: 1px dashed #EE6723;
|
||||
background: rgba(255,85,0,.32);
|
||||
}
|
||||
|
||||
.layer b,.layer i {
|
||||
background: #FFF;
|
||||
border: 1px solid #EE6723;
|
||||
}
|
||||
.layer b {
|
||||
background: #EE6723;
|
||||
}
|
||||
.distance.h div[data-width]:before,.distance.v div[data-height]:before,.selected:after,.selected:before {
|
||||
color: #FFF;
|
||||
background: #EE6723;
|
||||
}
|
||||
.hover {
|
||||
border: 1px solid #0079fa;
|
||||
}
|
||||
|
||||
.selected {
|
||||
border: 1px solid #EE6723;
|
||||
}
|
||||
|
||||
.ruler {
|
||||
border: 1px dashed #0079fa;
|
||||
}
|
||||
.distance.v div {
|
||||
background: #EE6723;
|
||||
}
|
||||
|
||||
.distance.h div {
|
||||
background: #EE6723;
|
||||
}
|
||||
|
||||
.distance.v:after,.distance.v:before {
|
||||
background: #EE6723;
|
||||
}
|
||||
|
||||
.distance.h:after,.distance.h:before {
|
||||
background: #EE6723;
|
||||
}
|
||||
.note {
|
||||
background: linear-gradient(180deg, #ff8181 0%, #ef1010 100%);
|
||||
border: 2px solid #FFF;
|
||||
box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.note:before {
|
||||
color: #FFF;
|
||||
}
|
||||
.note:hover {
|
||||
background: #F5A623;
|
||||
}
|
||||
.note div {
|
||||
background: #FFF;
|
||||
box-shadow: 0 0 3px rgba(0,0,0,.5);
|
||||
color: #222;
|
||||
}
|
||||
.slidebox label {
|
||||
background: #898989;
|
||||
box-shadow: inset 0 1px 3px 0 rgba(0,0,0,.3);
|
||||
}
|
||||
.slidebox label:after {
|
||||
background-image: linear-gradient(-180deg,#F8F9F6 0,#F5F5F5 100%);
|
||||
box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
|
||||
}
|
||||
.slidebox input[type=checkbox]:checked+label {
|
||||
background: #0079fa;
|
||||
}
|
||||
.header-right {
|
||||
background-image: linear-gradient(90deg,rgba(0,4,9,.32) 0,rgba(0,2,4,0) 100%)
|
||||
}
|
||||
.inspector input,.inspector textarea {
|
||||
background: rgba(255,255,255,.05);
|
||||
}
|
||||
#opacity,#letter-spacing,#line-height,#position-x,#position-y,#size-width,#size-height,#font-family,.dataColor,#radius,#offset-x,#offset-y,#styleName{
|
||||
background: rgba(255,255,255,.05);
|
||||
color: #eee;
|
||||
|
||||
}
|
||||
.inspector textarea {
|
||||
min-width: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.context h4 {
|
||||
color: #FFF;
|
||||
}
|
||||
.context h4:before {
|
||||
background: #0079fa;
|
||||
}
|
||||
.inspector .color label em {
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg,#dddadc 25%,transparent 25%,transparent 75%,#dddadc 75%,#dddadc),linear-gradient(45deg,#dddadc 25%,transparent 25%,transparent 75%,#dddadc 75%,#dddadc);
|
||||
}
|
||||
.gradient .color label:before {
|
||||
background: #FFF;
|
||||
box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
|
||||
}
|
||||
.gradient .color label:after {
|
||||
background: #FFF;
|
||||
box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
|
||||
}
|
||||
.artboard-list li:hover,.asset-list li:hover,.color-list li:hover {
|
||||
background: rgb(5 121 250 / 6%);
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
transition: all 0.35s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.artboard-list li.active {
|
||||
background: #0079fa;
|
||||
color: #fff;
|
||||
}
|
||||
.pages-select h3 {
|
||||
color: #FFF;
|
||||
}
|
||||
.pages-select {
|
||||
background-image: linear-gradient(90deg,rgba(0,4,9,.32) 0,rgba(0,2,4,0) 100%);
|
||||
}
|
||||
#css,#content,#dataColor{
|
||||
color: #fff;
|
||||
}
|
||||
.pages-select h3:after {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMAgMAAAAFXpXmAAAACVBMVEUAAABiZGZgYmThY1mHAAAAAnRSTlMAgJsrThgAAAA1SURBVAjXFckxAQAgDMTAZ6kI1KAHNYjoAipJsmS47Ec303XKnQy3AkIRm5UUUAIhERIhEfoqmRfpcqcFcAAAAABJRU5ErkJggg==) no-repeat;
|
||||
background-size: 12px 6px;
|
||||
}
|
||||
.page-list {
|
||||
background: rgba(10, 10, 10,1);
|
||||
}
|
||||
|
||||
|
||||
.page-list li:hover {
|
||||
color: #fff;
|
||||
background: #0079fa;
|
||||
}
|
||||
|
||||
.exportable li {
|
||||
color:#eee;
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
.exportable li:hover{
|
||||
color: #fff;
|
||||
background: #0079fa;
|
||||
}
|
||||
.asset-list li picture,.color-list li em {
|
||||
background-color: #4A4A4A;
|
||||
background-image: linear-gradient(45deg,#000 25%,transparent 25%,transparent 75%,#000 75%,#000),linear-gradient(45deg,#000 25%,transparent 25%,transparent 75%,#000 75%,#000);
|
||||
}
|
||||
|
||||
.color-list li em {
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg,#dddadc 25%,transparent 25%,transparent 75%,#dddadc 75%,#dddadc),linear-gradient(45deg,#dddadc 25%,transparent 25%,transparent 75%,#dddadc 75%,#dddadc);
|
||||
}
|
||||
|
||||
.artboard-list h3, .asset-list h3,.color-list h3 {
|
||||
color: #FFF;
|
||||
}
|
||||
.artboard-list li.active small {
|
||||
color: #FFF;
|
||||
}
|
||||
.swkgBj{
|
||||
left: 4px;
|
||||
}
|
||||
.open .artboard-list .artboard{
|
||||
background-color: #181818;
|
||||
}
|
||||
.open .artboard-list .active {
|
||||
background: #0079fa;
|
||||
color: #fff;
|
||||
}
|
||||
.open .artboard-list li:hover{
|
||||
background: rgb(5 121 250 / 6%);
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
transition: all 0.35s;
|
||||
cursor: pointer;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,299 @@
|
||||
/* body{
|
||||
padding-top: 5rem;
|
||||
} */
|
||||
.col-md-10{
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 2rem;
|
||||
moz-user-select: -moz-none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select:none;
|
||||
-khtml-user-select:none;
|
||||
-webkit-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.mdLeft{
|
||||
width: 16.66666667%;
|
||||
border-right: #eee 0.1rem solid;
|
||||
position: relative;
|
||||
padding-top: 5rem;
|
||||
padding-right: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
margin: 0 auto;
|
||||
float: left;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
.navTop{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#logo{
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
moz-user-select: -moz-none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select:none;
|
||||
-khtml-user-select:none;
|
||||
-webkit-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none;
|
||||
}
|
||||
.navMind{
|
||||
width: 65%;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 4rem;
|
||||
|
||||
|
||||
}
|
||||
.navMind >ul>li{
|
||||
margin-top: 2rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
.linkC,
|
||||
.nav > li > a{
|
||||
color: #999;
|
||||
cursor: pointer; /*变手指*/
|
||||
-webkit-transition:padding 0.3s;
|
||||
}
|
||||
.nav > li > a:hover,
|
||||
.nav > li > a:focus {
|
||||
text-decoration: none;
|
||||
color: #205eec;
|
||||
background-color: rgba(0, 95, 231, 0.1);
|
||||
padding-left: 35px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.glyphicon{
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
.nav > .actives > a:hover,
|
||||
.nav > .actives > a:focus {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.nav > .actives >a{
|
||||
color:#fff;
|
||||
}
|
||||
.nav > .actives {
|
||||
background-color: rgba(0, 95, 231, 1);
|
||||
border-radius: 6px;
|
||||
|
||||
}
|
||||
.user{
|
||||
width: 100%;
|
||||
margin-top: 6rem;
|
||||
position: absolute;
|
||||
left: 0rem;
|
||||
top: 15rem;
|
||||
-webkit-transition:left 0.2s;
|
||||
display: block;
|
||||
}
|
||||
.userCen{
|
||||
margin: 0 auto;
|
||||
width: 16rem;
|
||||
display: flex;
|
||||
}
|
||||
.userRight{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.userNameSm{
|
||||
font-size: 1.5rem;
|
||||
color: #999;
|
||||
display: block;
|
||||
height: 1.5rem;
|
||||
}
|
||||
.userName{
|
||||
font-size: 2rem;
|
||||
color: #333;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
}
|
||||
.img-circle{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background-color: #eee;
|
||||
border: none;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.logo-img{
|
||||
height: 4rem;
|
||||
display: inline-block;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
.logo-text{
|
||||
height: 3rem;
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
|
||||
}
|
||||
.navbar-header{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.navbar{
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
border-bottom: #eeeeee solid 1px;
|
||||
}
|
||||
|
||||
.leftTab{
|
||||
height: 300px;
|
||||
width: 280px;
|
||||
margin-left: 5px;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
.disBottom{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#addHeight{
|
||||
width: inherit;
|
||||
height: 180px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
background-size: 100% auto;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #eee;
|
||||
color: #999;
|
||||
display: flex;
|
||||
font-family: 字体圈欣意冠黑体;
|
||||
align-items: center;/*垂直*/
|
||||
justify-content: center;/*水平*/
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
font-size: 5rem;
|
||||
line-height: 6rem;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
letter-spacing: 0.2rem;
|
||||
-webkit-transition:background-size 0.3s;
|
||||
}
|
||||
#addHeight:hover{
|
||||
|
||||
background-size: 120% auto;
|
||||
}
|
||||
.caption > p{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.title{
|
||||
/* font-family: 字体圈欣意冠黑体; */
|
||||
font-size: 16px;
|
||||
}
|
||||
.timeTitle{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.thumbnail{
|
||||
border: none;
|
||||
}
|
||||
.move{
|
||||
border: 1px #eee solid;
|
||||
-webkit-transition:box-shadow 0.3s;
|
||||
|
||||
box-shadow:0px 8px 20px 0px rgba(136, 160, 202, 0.2);
|
||||
|
||||
}
|
||||
.move:hover{
|
||||
box-shadow:0px 8px 20px 0px rgba(136, 160, 202, 0.5);
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
.bntClass{
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
top: 125px;
|
||||
left: 260px;
|
||||
display: none;
|
||||
/* font-family: 字体圈欣意冠黑体; */
|
||||
outline:none;
|
||||
}
|
||||
#input{
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
#switch{
|
||||
display: none;
|
||||
padding: 1rem 1.5rem;
|
||||
cursor: pointer; /*变手指*/
|
||||
-webkit-transition:transform 0.2s;
|
||||
|
||||
}
|
||||
#switch:hover{
|
||||
color: #205eec;
|
||||
transform: scale(1.1);
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.user{
|
||||
width: 100vw;
|
||||
/* height: 100vh; */
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
-webkit-transition:left 0.2s;
|
||||
}
|
||||
.mdLeft{
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
float: none;
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
border: none;
|
||||
border-bottom: #eee 0.1rem solid;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
background-color: #fff;
|
||||
}
|
||||
.navTop{
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
font-size: 1.8rem;
|
||||
justify-content:space-between;
|
||||
/* margin-left: 3rem; */
|
||||
}
|
||||
#switch{
|
||||
display: inline-block;
|
||||
}
|
||||
#logo{
|
||||
width: 10rem;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
.logo-img{
|
||||
height: 3rem;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
.logo-text{
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.userCen{
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.col-md-10{
|
||||
width: inherit;
|
||||
padding-top: 8rem;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,68 @@
|
||||
.upWindews{
|
||||
width: 30%;
|
||||
height: 400px;
|
||||
position: fixed;
|
||||
top:50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
z-index: 99;
|
||||
background-color: #fff;
|
||||
display: none;
|
||||
box-shadow: 1px 1px 50px rgba(0,0,0,.3);
|
||||
}
|
||||
.WinTitle{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
color: #666;
|
||||
background-color: #f7f7f7;
|
||||
font-weight: 600;
|
||||
}
|
||||
.WinClos{
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
#upload-view {
|
||||
overflow-x: hidden;
|
||||
/* max-height: 400px; */
|
||||
height: 325px;
|
||||
width: 100%;
|
||||
moz-user-select: -moz-none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select:none;
|
||||
-khtml-user-select:none;
|
||||
-webkit-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
.fl { width: 100%; }
|
||||
.fr { display: flex; align-items: center;justify-content: space-between;}
|
||||
.gray { color: gray; }
|
||||
|
||||
.upload-input{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.u-loaded { color: green; }
|
||||
.u-total { color: #FC5900; }
|
||||
|
||||
.ui-file .u-item { background-color: #f5f5f5; height: 75px; line-height: 36px; font-size: 13px; margin: 10px; padding: 0 10px; position: relative; }
|
||||
|
||||
.ui-file .u-name {color: #205eec; height: 30px; overflow: hidden; text-overflow:ellipsis;white-space:nowrap;font-weight: 500;font-size: 14px;}
|
||||
.ui-file .u-progress-bar, .ui-file .u-progress { background-color:#205eec;}
|
||||
.ui-file .u-progress-bar { width: 150px; height: 7px; overflow: hidden; padding: 1px 0; }
|
||||
.ui-file .u-progress { width: 1px; height: 7px; background-position: 0 -9px; }
|
||||
|
||||
.ui-file .u-state { min-width: 45px; color: green;}
|
||||
.ui-file .u-op a { cursor: pointer; margin-left: 5px; color: #FC5900; text-decoration: none; }
|
||||
.ui-file .u-op a:hover { text-decoration: underline; }
|
||||
|
||||
.ui-file .u-over .u-state { color: #999; }
|
||||
.ui-file .u-over .u-op .u-op-cancel { color: #999; text-decoration: none; cursor: default; }
|
||||
@ -0,0 +1,262 @@
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid silver;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
background: #e4f1fe;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 1px solid rgba(255,255,255,.16);
|
||||
background-color: #92a7cc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner,
|
||||
::-webkit-resizer {
|
||||
background: #e4f1fe;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #343b48;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.open .header-left{
|
||||
background: #ffF;
|
||||
}
|
||||
|
||||
header .header-center {
|
||||
background: #fff;
|
||||
}
|
||||
.zoom-widget button {
|
||||
background: #0079fa;
|
||||
}
|
||||
|
||||
.zoom-widget button:after,.zoom-widget button:before {
|
||||
|
||||
background: #FFF;
|
||||
}
|
||||
.zoom-widget button:disabled {
|
||||
background: #222;
|
||||
}
|
||||
.zoom-widget button:disabled:after,.zoom-widget button:disabled:before {
|
||||
background: #606264;
|
||||
}
|
||||
.unit-box .overlay {
|
||||
background: rgba(0,0,0,.56);
|
||||
}
|
||||
.unit-box ul {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.unit-box:focus h3 {
|
||||
color: #3A3A3A;
|
||||
}
|
||||
.unit-box li:hover label {
|
||||
background-color: #e4f1fe;
|
||||
}
|
||||
.page-list span:before,.unit-box span:before {
|
||||
color: #fff;
|
||||
}
|
||||
.page-list input:checked+span:before,.unit-box input:checked+span:before {
|
||||
color: #fff;
|
||||
}
|
||||
.unit-box .sub-title {
|
||||
background: #f0f2f5;
|
||||
color: #3A3A3A;
|
||||
}
|
||||
.inspector,.navbar {
|
||||
background: #fff;
|
||||
}
|
||||
.back{
|
||||
background-color: #0079fa;
|
||||
color: #fff;
|
||||
}
|
||||
.inspector {
|
||||
box-shadow: 0 4px 12px rgba(40, 120, 255, 0.11), 0 3px 14px rgba(0, 0, 0, 0.11);
|
||||
}
|
||||
.inspector h3 {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
.navbar {
|
||||
background-color: #f0f2f5;
|
||||
box-shadow: 0 4px 12px rgba(40, 120, 255, 0.11), 0 3px 14px rgba(0, 0, 0, 0.11);
|
||||
|
||||
}
|
||||
.navbarBack{
|
||||
background-color: rgba(207, 207, 207, 0.3);
|
||||
color: #eeeeee;
|
||||
}
|
||||
.navbar nav {
|
||||
background: #000204;
|
||||
}
|
||||
|
||||
.tab li.current {
|
||||
background-color: #0079fa;
|
||||
}
|
||||
#inspector .tab li.select {
|
||||
background-color: rgba(255,255,255,.05);
|
||||
}
|
||||
#inspector .tab li.select:before {
|
||||
background-position-x: -50px;
|
||||
}
|
||||
.screen {
|
||||
background: #FFF;
|
||||
box-shadow: 0 2px 4px 1px rgba(40, 120, 255, 0.08), 0 0 6px 1px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.hover,.selected {
|
||||
border: 1px solid #EE6723;
|
||||
}
|
||||
|
||||
.has-slice {
|
||||
border: 1px dashed #EE6723;
|
||||
background: rgba(255,85,0,.32);
|
||||
}
|
||||
|
||||
.layer b,.layer i {
|
||||
background: #FFF;
|
||||
border: 1px solid #EE6723;
|
||||
}
|
||||
.layer b {
|
||||
background: #EE6723;
|
||||
}
|
||||
.distance.h div[data-width]:before,.distance.v div[data-height]:before,.selected:after,.selected:before {
|
||||
color: #FFF;
|
||||
background: #EE6723;
|
||||
}
|
||||
.hover {
|
||||
border: 1px solid #0079fa;
|
||||
}
|
||||
|
||||
.selected {
|
||||
border: 1px solid #EE6723;
|
||||
}
|
||||
|
||||
.ruler {
|
||||
border: 1px dashed #0079fa;
|
||||
}
|
||||
.distance.v div {
|
||||
background: #EE6723;
|
||||
}
|
||||
|
||||
.distance.h div {
|
||||
background: #EE6723;
|
||||
}
|
||||
|
||||
.distance.v:after,.distance.v:before {
|
||||
background: #EE6723;
|
||||
}
|
||||
|
||||
.distance.h:after,.distance.h:before {
|
||||
background: #EE6723;
|
||||
}
|
||||
.note {
|
||||
background: linear-gradient(180deg, #ff8181 0%, #ef1010 100%);
|
||||
border: 2px solid #FFF;
|
||||
box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.note:before {
|
||||
color: #FFF;
|
||||
}
|
||||
.note:hover {
|
||||
background: #F5A623;
|
||||
}
|
||||
.note div {
|
||||
background: #FFF;
|
||||
box-shadow: 0 0 3px rgba(0,0,0,.5);
|
||||
color: #222;
|
||||
}
|
||||
.slidebox label {
|
||||
background: #898989;
|
||||
box-shadow: inset 0 1px 3px 0 rgba(0,0,0,.3);
|
||||
}
|
||||
.slidebox label:after {
|
||||
background-image: linear-gradient(-180deg,#F8F9F6 0,#F5F5F5 100%);
|
||||
box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
|
||||
}
|
||||
.slidebox input[type=checkbox]:checked+label {
|
||||
background: #0079fa;
|
||||
}
|
||||
.header-right{
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
.inspector input,.inspector textarea {
|
||||
background: #f4f7fd;
|
||||
|
||||
}
|
||||
#opacity,#letter-spacing,#line-height,#position-x,#position-y,#size-width,#size-height,#font-family,.dataColor,#radius{
|
||||
color: #333;
|
||||
background: #f4f7fd;
|
||||
|
||||
}
|
||||
.context h4:before {
|
||||
background: #0079fa;
|
||||
}
|
||||
.inspector .color label em {
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg,#dddadc 25%,transparent 25%,transparent 75%,#dddadc 75%,#dddadc),linear-gradient(45deg,#dddadc 25%,transparent 25%,transparent 75%,#dddadc 75%,#dddadc);
|
||||
}
|
||||
.gradient .color label:after {
|
||||
background: #FFF;
|
||||
box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
|
||||
box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
|
||||
}
|
||||
.artboard-list li:hover,.asset-list li:hover,.color-list li:hover {
|
||||
background: #e5f1ff28;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
transition: all 0.35s;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
.artboard-list li.active {
|
||||
background: #0079fa;
|
||||
color: #fff;
|
||||
}
|
||||
.preview-img img {
|
||||
background: #FFF;
|
||||
}
|
||||
.pages-select h3 {
|
||||
color: rgba(0,0,0,1);
|
||||
}
|
||||
.pages-select {
|
||||
background-image: #f0f2f5;
|
||||
}
|
||||
.page-list {
|
||||
background:rgba(255,255,255,1);
|
||||
box-shadow: 0 2px 20px 0 #c3e0ff;
|
||||
}
|
||||
.page-list li:hover {
|
||||
color: #fff;
|
||||
background: #0079fa;
|
||||
}
|
||||
.exportable li {
|
||||
color:#333;
|
||||
border-bottom: 1px solid #bbb;
|
||||
}
|
||||
|
||||
.exportable li:hover{
|
||||
color: #fff;
|
||||
background: #0079fa;
|
||||
}
|
||||
.asset-list li picture,.color-list li em {
|
||||
background-color: #4A4A4A;
|
||||
background-image: linear-gradient(45deg,#000 25%,transparent 25%,transparent 75%,#000 75%,#000),linear-gradient(45deg,#000 25%,transparent 25%,transparent 75%,#000 75%,#000);
|
||||
}
|
||||
|
||||
.color-list li em {
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg,#dddadc 25%,transparent 25%,transparent 75%,#dddadc 75%,#dddadc),linear-gradient(45deg,#dddadc 25%,transparent 25%,transparent 75%,#dddadc 75%,#dddadc);
|
||||
}
|
||||
.artboard{
|
||||
background-color: #fff;
|
||||
}
|
||||
.artboard-list li.active small {
|
||||
color: #FFF;
|
||||
}
|
||||
.swkgBj{
|
||||
left: 26px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue