首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS】课程网站头部制作 ② ( 导航栏测量 | 导航栏编写 | 代码示例 )

文章目录 一、 导航栏测量 1、 左侧边界 2、 文本测量 3、 底部边框测量 二、 导航栏代码编写 1、 HTML 标签结构 2、 CSS 样式 3、最终显示效果 三、 完整代码 1、 HTML...60 像素即可 ; 该可以设置为 logo 盒子 右外边为 60 像素 , 也可以设置为 导航栏盒子 做外边为 60 像素 ; 这里设置为 logo 盒子 右外边为 60 像素 :....logo { /* 靠左侧浮动 */ float: left; /* 设置与 导航栏盒子 外边 */ margin-right: 60px; } 2、 文本测量 选择 " 横排文字 "...工具 , 点击文字内容 ; 在文字工具 , 会显示文字大小 18 像素 , 点击右侧颜色 , 还会弹出 " 拾色器 ( 文本颜色 ) " 对话框 , 其中显示了文本颜色 #050505 ;...盒子放在一行 ; /* 导航栏设置 左浮动 */ .nav { float: left; } 导航栏无序列表 , 需要设置左浮动 , 才能将 块级元素 左右到进行排列 ; /* 导航栏内部

3.8K20
您找到你想要的搜索结果了吗?
是的
没有找到

【CSS】课程网站头部制作 ⑤ ( 用户栏测量 | 用户栏代码编写 | 代码示例 )

文章目录 一、用户栏测量 1、头像文字测量 2、头像切图 二、用户栏代码编写 1、HTML 结构 2、CSS 样式 3、展示效果 一、用户栏测量 ---- 1、头像文字测量 用户与左侧搜索栏 , 间隔...30 像素 , 这里设置 用户栏 左外边 30 像素 ; 头像 宽高 30 x 30 像素 ; 使用横排文字工具 , 选中文字 , 文字大小 14 像素 , 文字颜色 #666666 ; 用户头像..., 需要使用 padding 内边方式设置 ; 文字垂直居中对齐 , 需要使用 内容高度 = 行高 方式设置 ; 核心代码 : <!...用户栏 头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素 容器高 42 上下各 6 像素 图像垂直居中 */ padding: 6px...用户栏 头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素 容器高 42 上下各 6 像素 图像垂直居中 */ padding: 6px

2.4K30

【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )

栏版心盒子测量 ---- 1、测量版心元素尺寸 拉四条辅助线 , 将版心包起来 , 可以测量 Banner 条版心尺寸为 1200 x 420 像素 ; 根据上一篇博客 【CSS】课程网站 Banner...制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 ) 测量尺寸 , 版心尺寸为 1200 x 420 像素 ; 版心左侧 侧导航栏 尺寸为 190 x 420 像素...像素 左内边 ; 右侧文字 , 距离测导航栏右侧有 20 像素右内边 ; 测量 测导航栏 文本间隔 , 也就是行高 , 从上一行开始到下一行开始位置 , 行高 44 像素 ;...左侧 侧导航栏 背景是 黑色半透明 背景 ; 使用吸管工具 , 吸取 鼠标移动到 侧导航栏 上颜色值 为 #00b4ff ; 侧导航栏 , 默认状态下 , 文字默认颜色为白色 ; 二、...用户栏 头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素 容器高 42 上下各 6 像素 图像垂直居中 */ padding: 6px

3.3K50

【CSS】课程网站 网格商品展示 模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )

文章目录 一、网格商品展示模块盒子模型测量及样式 1、盒子尺寸测量 2、标题盒子尺寸测量和样式 3、左侧文本盒子尺寸测量和样式 4、右侧文本盒子尺寸测量和样式 二、顶部文本标题盒子代码示例 1、HTML...标签结构 2、CSS 样式 3、展示效果 绘制矩形框部分 : 一、网格商品展示模块盒子模型测量及样式 ---- 1、盒子尺寸测量 下面的 网格商品展示模块盒子模型 , 可以分为三个盒子 ,...1 行 , 2 行 或 3 行 ; 2、标题盒子尺寸测量和样式 文本所在盒子 , 与 顶部导航栏有 15 像素间隔 , 这里使用 上外边 设置 ; /* 网格商品展示模块大盒子 距离上面的 导航栏...= 内容高度 , 这里精确测量 " 精品推荐 " 文本行高与内容高度 ; 该文本盒子如下图所示 , 文本内容 20 像素 , 文本上面和下面各有 20 像素空白 ; 行高直接设置为 60 像素...*/ font-size: 20px; color: #494949; /* 取消标题加粗样式, 也可以使用 normal 值 */ font-weight: 400; } 4、右侧文本盒子尺寸测量和样式

4.3K40

【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

绘制矩形框部分 : 一、盒子测量及样式 ---- 盒子样式如下 : 1、总体盒子测量及样式 该盒子是处于版心位置 , 先为其设置版心样式 , 版心宽度 1200 像素 , 水平居中 ,...先将版心样式设置给盒子 ; /* 版心宽度 1200 像素 , 在浏览器居中对齐 */ .w { width: 1200px; margin: auto; } 该盒子大小为 1200x60..., 0, 0, .2); } 2、左侧盒子测量及样式 左侧盒子区域如下 , 盒子高度充满父容器 , 继承父容器高度为 60 像素 , 行高继承父容器也是 60 像素 , 左右两侧各有 30 像素 外边..., 竖线中间文字都是链接标签 , 每个链接标签左右两侧各有 30 像素间隔 , 这里使用外边实现 ; 文本高度和行高继承父元素样式 , 都为 60 , 会自动垂直居中 , 文本大小为...ul { /* 10 像素内边 - 使用外边会出现塌陷问题 */ padding-top: 10px; } /* Banner 条右侧 课程表 无序列表 列表项样式 */ .course-bd

5.1K30

【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )

, 黄色矩形框是 版心盒子 , 洋红色矩形框为左侧导航栏盒子 , 右侧绿色矩形框为 课程表 盒子 ; 2、背景测量切图 使用吸管工具 , 点击背景 , 吸取颜色值 , 然后点击 " 前景色 " 拾色器... , 点击 " 导出选中图层 " , 切图后效果 : 二、Banner 盒子模型代码 ---- 1、HTML 标签结构 <!.../* 右外边 20 像素 */ margin-right: 20px; /* 行高 = 内容高度 垂直居中 */ line-height: 40px; /* 字体大小 */ font-size...20 像素内边 */ padding-left: 20px; /* 设置文本颜色 */ color: #bfbfbf; } /* 搜索框按钮 */ .search button { /*...用户栏 头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素 容器高 42 上下各 6 像素 图像垂直居中 */ padding: 6px

3.9K20

【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )

绘制矩形框部分 : 一、网格展示盒子模型测量及样式 ---- 1、盒子尺寸测量 绘制如下样式排列盒子 , 该盒子建议不要设置高度 , 这样盒子可以放若干行 , 由盒子列表元素个数 , 自动决定放几行..., 会导致最后一个元素掉到第二行 , 这里需要将最后一个元素右边去掉 ; 解决上述问题有 2 个方案 : 将最后一个元素右边去掉 ; 将盒子宽度 1200 像素修改为 1215 像素 ; CSS...像素外边 */ margin: 0 20px; /* 设置字体大小和颜色 */ font-size: 12px; color: #999; } /* 第二行文本样式 - 前面的橙色文本...{ /* 左右设置 20 像素外边 */ margin: 0 20px; /* 设置字体大小和颜色 */ font-size: 12px; color: #999; } /* 第二行文本样式...{ /* 左右设置 20 像素外边 */ margin: 0 20px; /* 设置字体大小和颜色 */ font-size: 12px; color: #999; } /* 第二行文本样式

2.3K20

【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )

文章目录 一、网页底部盒子模型测量及样式 1、盒子布局说明 2、底部大盒子测量及样式 3、版心盒子 4、版权盒子 5、链接盒子 二、代码示例 1、HTML 标签结构 2、CSS 样式 3、显示效果...绘制矩形框部分 : 一、网页底部盒子模型测量及样式 ---- 1、盒子布局说明 底部盒子主要由如下部分组成 : 红色盒子 : 最外层盒子 水平方向 充满整个 浏览器 , 背景是白色 ; 蓝色盒子...底部大盒子 高度 415 像素 , 实际内容距离顶部有 30 像素间隔 , 这里使用 30 像素 内边撑开该间隔 , ( 外边会造成塌陷 ) , 由于内边会撑大盒子 , 这里使用 385...这里需要将盒子宽度 1200 像素修改为 1215 像素 正好放 5 盒子 + 5 间隙*/ width: 1215px; } /* 网格 ul 列表每个列表项样式 */ ....{ /* 左右设置 20 像素外边 */ margin: 0 20px; /* 设置字体大小和颜色 */ font-size: 12px; color: #999; } /* 第二行文本样式

4.1K30

SwiftUI 内容

使用 UIKit 时,我们可以访问 readableContentGuide 布局指南。字面上看,它是另一个安全区域,适应屏幕大小,但仅适用于文本内容。...可运行 Demo提供一个基于提供代码片段简化版本Swift Playground示例,用于演示如何使用contentMargins视图修饰符来管理内容。...你可以在 Playground 运行此代码以查看结果。总结本文介绍了 SwiftUI 内容管理,通过对比安全区域概念,解释了内容重要性。...文章创建示例开始,展示了在列表视图中如何处理内容问题。...最后,引入了 contentMargins 视图修饰符,并详细解释了其用法和参数,以及如何使用它来管理内容。通过本文,读者可以更好地理解并掌握 SwiftUI 内容管理技巧。

2510

dotnet OpenXML 聊聊 PPT 文本行距行高计算公式

倍数行距是本文重点,指的是按照一定倍数,如 1.5 倍行距等拉升文本框里面,每一行文本距离。...而固定行距指的是固定多少尺寸高度行距 行高,一行高度值,以横排文本作为默认例子,指的是选择文本时,所看到选择范围高度值,如下图 行距 = 上边+下边 修改行距时不影响文本文字高度,只修改上边和下边值...行高也因为行距变更而变更 我根据使用 QQ 截图工具,测量不同字体和字号,对于中文文字行高影响,通过逗比算法计算出行距行高计算公式。...以下公式没有找到任何权威文档,仅仅只是我根据测量拿到值,使用以下公式计算出来值存在很小误差 在 Office PPT 文本行高计算公式是 PPTPixelLineSpacing = (a...值如下: 微软雅黑 1.31982421875 宋体 1.140625 因为在 PPT 不同字体对行高没有影响,以上都是固定微软雅黑进行测试 更多请看 Office 使用 OpenXML SDK

76150

可以提高web前端开发效率6个浏览器书签,建议你赶快用起来吧

例如,喜欢观察内容在网站设计流程如何阅读文案,或者说,想要确保文本以特定字体大小舒适地适合特定空间设计师。 JavaScript 有一个非常简单功能,可以使整个 HTML 文档可编辑。...如果你想看看它是如何工作,首先使用相关键盘快捷键进入浏览器控制台:contenteditable="true"``contentEditable="true" Chrome: Option + ⌘...开发人员可能希望在处理光学不平衡时更好地可视化边界(即,当某些东西“看起来不对”时,即使它不是)、崩溃(当某些被忽略时)、display:/ float:/各种问题position:等等。...(0 0 0 / 10%)"); 我们使用半透明背景,因为透明度堆叠,这确保每个嵌套元素都是可区分,并且可以测量它们之间距离。...切换类 您可能希望 HTML 元素添加或删除类,以触发新状态或外观更改,也称为切换类。类切换发生在大多数实时网站幕后,但它也可以在测试期间用于跳过必须满足某些面向用户条件。

1.6K10

【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )

2、CSS 样式 3、展示效果 绘制下图矩形框内容 : 一、Banner 栏右侧课程盒子测量及样式 ---- 1、盒子尺寸测量 课程表宽高 228 x 300 像素 ; 课程表距离顶部有 50...课程表头部尺寸 228x48 像素 , 背景颜色值 #9bceea ; 使用文字工具查看课程表 , 文字大小 18 像素 , 文字颜色 白色 , 文字加粗 ; 最终头部样式如下 : /*....course-bd ul { /* 10 像素内边 - 使用外边会出现塌陷问题 */ padding-top: 10px; } 列表项高度是 60 像素, 文字与顶部有 10 像素间隔 ,...下面直接紧贴写文字 以达到多行文本居中对齐效果 */ margin-top: 10px; } 列表项三种文本 , 样式如下 : /* Banner 条右侧 课程表 无序列表 列表项 继续学习...用户栏 头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素 容器高 42 上下各 6 像素 图像垂直居中 */ padding: 6px

3.5K60

自定义View二篇,如何自定义一个规范ViewGroup

前言 在自定义View开篇,必须跨过一道坎儿 ,我们介绍了自定义View几种方式,以及如何实现一个规范自定义View,上文中也说了,实现一个规范自定义ViewGroup是一件比较困难事情,因为要考虑情况包含...,务必使用getMeasureWidth不能使用getWidth,因为前者是在测量时候获取,后者在布局完成之后才能获取到。...考虑ViewGrouppadding问题 上面代码,已经实现了最简单垂直排列,我们给LinerLayoutView设置大小为40,发现并没有生效,所以我们需要在onMeasure以及onLayout...我们可以看出ViewGroup已经生效了。...view,记得在计算总高度时候 也要加上边和下边,运行结果如下图所示 ?

45010

【CSS】课程网站头部制作 ③ ( 搜索栏表单测量 | 搜索栏表单代码编写 | 代码示例 )

文章目录 一、搜索栏表单测量 1、左侧边界 2、文本输入框表单尺寸 3、文本输入框表单提示文本测量 二、搜索栏表单代码编写 1、HTML 标签结构 2、CSS 样式 3、输入表单效果 一、搜索栏表单测量...---- 1、左侧边界 搜索栏 , 大概结构如下 , 左侧是个文本框 , 右侧是个按钮 ; 导航栏文本 有 10 像素内边 , 20 像素外边 , 文本输入框 表单 , 距离 导航栏外边有...65 像素 ; 2、文本输入框表单尺寸 左侧表单 高度 38 像素 , 边框 1 像素 , 左侧表单长度为 360 像素 , 测量 361 像素 , 减去 1 像素边框 ; 使用吸管工具..., 吸取边框颜色值 , 为 #00a4ff ; 3、文本输入框表单提示文本测量 使用 横排文字工具 , 点击表单 提示 文本 , 该文本大小 14 像素 , 颜色值 #bfbfbf ;...提示文本在 Input 表单 value 属性设置 ; 提示文本左侧 距离边框 有 20 像素 , 这里可以设置 20 像素内边 ; 注意 : 设置内边会拉长盒子 , 盒子尺寸要减去内边

1.9K30

【CSS】309- 复习 CSS盒模型

2.4 实例题(根据盒模型解释重叠) 例:父元素里面嵌套了一个子元素,已知子元素高度是 100px,子元素与父元素上边是 10px,计算父元素实际高度。 ?...主要看怎么父元素盒模型如何设置。...父子元素和兄弟元素重叠,重叠原则取最大值。空元素重叠是取 margin 与 padding 最大值。...2.5.2 BFC原理(渲染规则|布局规则): (1)内部 Box 会在垂直方向,顶部开始一个接着一个地放置; (2)Box 垂直方向距离由 margin (外边)决定,属于同一个 BFC 两个相邻...都有效; (3)Box 垂直对齐方式:以它们底部、顶部对齐,或以它们里面的文本基线(baseline)对齐(默认,文本与图片对其),例:line-heigth 与 vertical-align。

1.5K30

Android开发笔记(十二)测量尺寸与下拉刷新

麻烦是方式2,因为下级控件每个尺寸都有可能不确定,比如文本控件得看文字大小、行数,图像控件得看图片大小、拉伸情况,所以大家想想,如果这时候我们自己去一个个算过去(下级控件个数也不确定),这算得头都大了...废话少说,让我们直接切入正题,看看测量模式怎么用,以及用在哪里。 下拉刷新框架尺寸测量 许多APP都有下拉刷新功能,比如下面这个图片是一种下拉刷新展示框: ?...在Android规定测量过程,主要有三个步骤: 1、获得宽与高测量模式; 2、按照测量模式进行丈量; 3、获得测量宽与高大小; 获得宽与高测量模式 首先取到目标视图宽和高取值...,布局参数获取: ViewGroup.LayoutParams params = aViewObject.getLayoutParams(); int originWidth = params.width...getChildMeasureSpec好处是可以设置,并且按常规处理无需我们再分支处理;makeMeasureSpec则更灵活,像下拉刷新会不断更新下拉区域实际高度,偏移量可能是负数统统需要重新适配

1.1K40

不同大小文字底部对齐,为什么不能使用flex-end

flex容器下,不同大小文字底部对齐,为什么应该使用 baseline 而不是 flex-end?...分析原因发现,是因为文字周围有一圈空白,这个在字体大小不同情况下是不一致,所以矩形区域虽然对齐了,但是文字底部没有对齐。...而这个其实和 line-height 有关,所以首先来看看如何 line-height 角度出发解决问题。... line-height 角度解决为什么你不应该使用 line-height: 1首先想到就是把文字周围给彻底去掉,也即设置 line-height: 1,那么为什么说不应该使用这种方式呢?...图片使用 line-height 正确方法在完全去掉周围这种方法不可用情况下,只能通过把不同字体大小透明宽度设置为一致就可以了。

65940

R|绘图及布局

简单介绍一下如何调整绘图区域及区域,如何将多个图形绘制在一张图中,并根据图形大小及特性调整一下图形分布。...一、绘图及区域设置 通过par参数,合理调整绘图区大小,内边和外边大小,能更好展示图形。...简单示例如下: #外边 margin设置 ,下左上右 ;mai(英寸) par(oma=c(3,3,3,3)) #内边 margin设置 下左上右 omi(英寸) par(...mat用矩阵设置窗口划分,矩阵0元素表示该位置不画图,非0元素必须包括1开始连续整数值,比如:1……N,按非0元素大小设置图形顺序。...综上:合理调整图形绘图及区域,设计好图形分布,更好显示自己想法。待续 。。。

2.2K10

如何精准地用打印机在贺卡或邀请函上打字

那么如何打印以便让所有文字内容都对应到贺卡或邀请函正确空位上,还是有些难度。 本文将教你如何在毫米级别将文字精准地打印到贺卡或邀请函上。...▲ 放入打印机 第二步:制作 Word 文档 在 Microsoft Word 中新建一个文档,需要进行一些设置: 纸张大小:A4 纸张方向:横向 文档:0(注意这里上下左右四个方向都要设置为 0...▲ 预期邀请函方向发生了变化 也就是说,我们 Word 文档中文字应该右上角区域移至左下角区域: ? ▲ Word 编辑区域也应相应改变 于是,我们准备工作就算结束了。...▲ 测量出每一个占位符位置 在测量过程,不断对应到 Word 文档相应位置。(注意到我们一开始打开了 Word 文档厘米标注吗?就是为了与物理尺寸对齐。) ?...▲ 不尽如人意打印效果 不过不要紧,你只需要测量实际打印位置(大小)和实际所需位置之间差异,得知你每一个文本框需要分别向上下左右移动多少毫米,然后在 Word 文档中将文本框移动那么长距离。

11.2K10
领券