【免费】html3-position资源-CSDN文库

共16个文件

jpg：7个

css：2个

html：2个

需积分: 0 94 浏览量 2023-02-14 23:08:28 上传评论收藏 172KB ZIP 举报

HTML3-position是一个可能的误解，因为实际上HTML并没有一个专门针对“position”的第三版。然而，我们可以将这个主题理解为HTML中的定位技术，这在Web开发中是至关重要的。HTML（超文本标记语言）是用于创建网页的标准标记语言，而CSS（层叠样式表）则负责页面的布局和样式，包括元素的位置。在HTML中，元素的位置通常是通过CSS来控制的。以下是一些关于HTML元素定位的关键知识点： 1. **静态定位（Static Positioning）**：这是默认的定位方式，元素根据正常的文档流进行布局。`position: static;` 不会改变元素的原始位置。 2. **相对定位（Relative Positioning）**：元素相对于其原本在正常流中的位置进行偏移。使用`position: relative;`并配合`top`, `bottom`, `left`, `right`属性来指定偏移量。 3. **绝对定位（Absolute Positioning）**：元素相对于最近的非静态定位祖先元素（如果存在）进行定位。如果找不到这样的祖先，则相对于初始包含块（通常是浏览器窗口）。`position: absolute;` 会将元素从文档流中移除，其他元素不会受到它的影响。 4. **固定定位（Fixed Positioning）**：元素的位置相对于浏览器窗口。即使滚动页面，元素也会保持在屏幕的某个固定位置。使用`position: fixed;`适用于创建固定的头部或侧边栏。 5. **粘性定位（Sticky Positioning）**：这是一种介于相对和固定定位之间的特性。当元素在视口内的特定位置时，它会保持相对定位，一旦超出该位置，它将变为固定定位。使用`position: sticky;`并配合`top`, `bottom`, `left`, `right`属性。 6. **层级和z-index**：在定位元素中，`z-index`属性用于控制元素的堆叠顺序。具有更高`z-index`的元素会覆盖具有较低`z-index`的元素，前提是它们有相同的定位类型。 7. **盒模型**：理解CSS盒模型对于准确地定位和布局元素至关重要。盒模型包括元素的内容、内边距（padding）、边框（border）和外边距（margin），这些都影响元素的实际尺寸和位置。 8. **响应式设计**：现代Web开发强调响应式设计，使网站能在不同设备和屏幕尺寸上适配。定位技术与媒体查询（Media Queries）结合使用，可以根据设备特性调整元素的位置和布局。在`html3-position.html`文件中，可能包含了上述概念的示例代码，而`font`和`img`可能是用于演示如何定位字体和图像元素的资源文件。学习这些定位技术对于创建交互性强、布局灵活的网页至关重要。熟练掌握这些技巧，可以帮助开发者创建出符合用户需求的现代网页。

资源推荐

资源详情

资源评论

收起资源包目录

html3-position.zip （16个子文件）

font

demo.css 8KB

demo_index.html 23KB

iconfont.ttf 9KB

iconfont.css 1KB

iconfont.json 3KB

iconfont.woff2 5KB

iconfont.js 40KB

iconfont.woff 6KB

img

projPic1.jpg 14KB

title.jpg 3KB

bannerTREVISO.jpg 68KB

projPic3.jpg 13KB

projPic2.jpg 14KB

projPic4.jpg 12KB

horse.jpg 8KB

html3-position.html 12KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>iconfont Demo</title> <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/> <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/> <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> <link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="iconfont.css"> <script src="iconfont.js"></script>  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> <style> .main .logo { margin-top: 0; height: auto; } .main .logo a { display: flex; align-items: center; } .main .logo .sub-title { margin-left: 0.5em; font-size: 22px; color: #fff; background: linear-gradient(-45deg, #3967FF, #B500FE); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style> </head> <body> <div class="main"> <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> </a></h1> <div class="nav-tabs"> <ul id="tabs" class="dib-box"> <li class="dib active"><span>Unicode</span></li> <li class="dib"><span>Font class</span></li> <li class="dib"><span>Symbol</span></li> </ul> <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3890131" target="_blank" class="nav-more">查看项目</a> </div> <div class="tab-container"> <div class="content unicode" style="display: block;"> <ul class="icon_lists dib-box"> <li class="dib"> <span class="icon iconfont"></span> <div class="name">豆瓣</div> <div class="code-name">&#xe601;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">放大镜</div> <div class="code-name">&#xe63d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">人人网</div> <div class="code-name">&#xe784;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">添加</div> <div class="code-name">&#xe657;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">web_腾讯微博</div> <div class="code-name">&#xe631;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">qq轻聊</div> <div class="code-name">&#xe634;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">微博</div> <div class="code-name">&#xe666;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">百度</div> <div class="code-name">&#xe612;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">群聊</div> <div class="code-name">&#xe605;</div> </li> <li class="dib"> <span class="icon iconfont">𐂾</span> <div class="name">qq轻聊-copy</div> <div class="code-name">&#x100be;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">圆点</div> <div class="code-name">&#xe683;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">笔记本</div> <div class="code-name">&#xe600;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">扳手_Line</div> <div class="code-name">&#xe64e;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">购物车</div> <div class="code-name">&#xe606;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">手机电脑</div> <div class="code-name">&#xe62d;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">43target</div> <div class="code-name">&#xe630;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">编程</div> <div class="code-name">&#xe676;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">电话</div> <div class="code-name">&#xe603;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">QQ</div> <div class="code-name">&#xe882;</div> </li> <li class="dib"> <span class="icon iconfont"></span> <div class="name">微博</div> <div class="code-name">&#xe608;</div> </li> </ul> <div class="article markdown"> <h2 id="unicode-">Unicode 引用</h2> <hr> <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> <ul> <li>支持按字体的方式去动态调整图标大小，颜色等等。</li> <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> </ul> <blockquote> <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p> </blockquote> <p>Unicode 使用步骤如下：</p> <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> <pre><code class="language-css" >@font-face { font-family: 'iconfont'; src: url('iconfont.woff2?t=1676293908009') format('woff2'), url('iconfont.woff?t=1676293908009') format('woff'), url('iconfont.ttf?t=1676293908009') format('truetype'); } </code></pre> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <pre><code class="language-css" >.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </code></pre

评论收藏

内容反馈