文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

; 导出的切片如下 : 二、用户栏代码编写 ---- 1、HTML 结构 头像 与 名称 单独放在一个 div 盒子中 , 这两个元素都要垂直居中对齐 , 分别需要单独设置 ; 头像垂直居中对齐..., 需要使用 padding 内边距的方式设置 ; 文字垂直居中对齐 , 需要使用 内容高度 = 行高 的方式设置 ; 核心代码 : 一行 ; 然后 , 设置用户栏头像 盒子样式 , 为其设置 6 像素 上下内边距 , 使得头像图片垂直居中 ; 整体 用户栏盒子 高度 42 像素 ; 头像图片宽高均为 30 像素 ; 头像...; } /* 导航栏设置 左浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置左浮动 */ .nav ul li { /* 设置 无序列表项 从左到右排列...: skyblue;*/ } /* 鼠标经过链接时的样式 */ .nav ul li a:hover { /* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */ border-bottom

2.5K30

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

标签结构 2、 CSS 样式 一、 导航栏测量 ---- 1、 左侧边界 导航栏 最左侧位置 , 距离 logo 盒子 有 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子 与 导航栏之间的距离设置成...工具 , 点击文字内容 ; 在文字工具中 , 会显示文字大小 18 像素 , 点击右侧的颜色 , 还会弹出 " 拾色器 ( 文本颜色 ) " 对话框 , 其中显示了文本颜色 #050505 ;...盒子放在一行中 ; /* 导航栏设置 左浮动 */ .nav { float: left; } 导航栏中的无序列表 , 需要设置左浮动 , 才能将 块级元素 从左右到进行排列 ; /* 导航栏内部...*/ body { background-color: #f3f5f7; } /* 插入图片自适应 */ img { width: 100%; } /* 版心宽度 1200 像素 , 在浏览器中居中对齐...20 像素 */ margin-right: 20px; /* 行高 = 内容高度 垂直居中 */ line-height: 40px; /* 字体大小 */ font-size: 18px

3.9K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

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

    10 个盒子 , 放在 ul 列表中 , 每个盒子都占用一个 li 列表项 ; 每个列表项盒子 , 必须精准测量 , 一个像素都不能差 , 否则每一行最后一个元素会由于宽度计算不准确导致意外换行 ;...像素 正好放 5 盒子 + 5 间隙*/ width: 1215px; } /* 网格中 ul 列表中每个列表项样式 */ .box-bd li { /* 设置左浮动 让列表项在一行中从左到右排列...; } /* 导航栏设置 左浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置左浮动 */ .nav ul li { /* 设置 无序列表项 从左到右排列...中 无序列表 列表项 高度 45 像素 */ .subnav li { /* 高度 = 行高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航栏...; color: #fff; } /* 下面是横向导航栏模块 */ /* 横向导航栏模块 总体盒子模型 样式 */ .goods { /* 内容高度 60 像素 */ height: 60px

    2.4K20

    用AI快速生成一个网页（名侦探柯南~灰原哀主题网页），适合大学生web期末大作业

    导航区域在导航栏最右侧不超出导航栏，高60px，宽度500px，里面是5个导航菜单项横向排列，每个宽度100px，高60px。...导航栏的背景颜色为#D7719B，字体大小为24px，链接颜色为白色，鼠标悬停时菜单项背景色变为橙色。以下是使用 HTML 和 CSS 实现上述要求的导航栏的示例代码：HTML:内容放在图片下方好的，下面是使用 HTML 和 CSS 实现上述要求的示例代码：HTML: 的下方30px额外创建一个页脚，和上面的区域无关，页脚宽1300px，高100px，内容是版权所有，背景色#D7719B，字体白色且上下左右居中好的，以下是使用 HTML 和 CSS 实现上述要求的示例代码...footer 元素设置了宽度、高度、背景颜色和文本颜色，并使用绝对定位将其放置在主要内容下方 30px 处，且水平居中。请确保将 "image-url.jpg" 替换为你实际的背景图片路径。

    17910

    【建议收藏】用AI快速生成一个网页（名侦探柯南~灰原哀主题网页），适合大学生web期末大作业

    导航区域在导航栏最右侧不超出导航栏，高60px，宽度500px，里面是5个导航菜单项横向排列，每个宽度100px，高60px。...导航栏的背景颜色为#D7719B，字体大小为24px，链接颜色为白色，鼠标悬停时菜单项背景色变为橙色。 以下是使用 HTML 和 CSS 实现上述要求的导航栏的示例代码： HTML: 内容放在图片下方 好的，下面是使用 HTML 和 CSS 实现上述要求的示例代码： HTML: ...然后在这块区域外的下方30px额外创建一个页脚，和上面的区域无关，页脚宽1300px，高100px，内容是版权所有，背景色#D7719B，字体白色且上下左右居中 好的，以下是使用 HTML 和 CSS....footer 元素设置了宽度、高度、背景颜色和文本颜色，并使用绝对定位将其放置在主要内容下方 30px 处，且水平居中。 请确保将 "image-url.jpg" 替换为你实际的背景图片路径。

    14910

    前端成神之路-CSS（选择器、背景、特性）

    第01阶段.前端基础 CSS 第二天 今天我们围绕一个 导航栏案例进行学习知识点。...记忆技巧： 并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。...-- 侧导航栏 --> 左侧侧导航栏 登录 在不修改以上结构代码的前提下，完成以下任务： 链接 登录 的颜色为红色 主导航栏里面的所有的链接改为橙色 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑...3.2 单行文本垂直居中 行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。 文字的行高等于盒子的高度。 这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。

    1.9K20

    html布局_css三栏布局

    h1标签居中显示 */ } .nav{ width: 80%; /* 导航栏宽度为整个网页80% */ height: 36px; /* 导航栏高度为36像素 */ background-color:...#e4beed; /* 导航栏底色为#e4beed */ line-height: 36px; } .nav ul{ margin-left: 30%; /* 导航栏下的ul标签与左侧距离为导航栏宽度的...: 100px; /*导航栏下的li标签与其左侧标签的距离为100像素 */ } .nav >ul >li >ul{ display: none; /* 隐藏所有li标签*/ position: absolute...{ width: 20%; /* 左侧菜单栏宽度为主体内容宽度的20%*/ height: 600px; /* 左侧菜单栏高度为600像素*/ float:left; /* 左侧菜单栏整体向左浮动，达到使右边内容栏与左侧菜单栏同在一行的目的.../* 右侧内容栏高度为600像素 */ float:right; /* 右侧菜单栏整体向右浮动，达到使右边内容栏与左侧菜单栏同在一行的目的*/ background-color: #d5aedf; /*

    3.5K30

    css布局 - 工作中常见的两栏布局案例及分析

    目录： 一、大结构上的导航栏和内容区域两栏布局     1、博客园为例     2、腾讯课堂个人中心页     3、慕课网个人中心页     4、github个人中心页 二、mini版的nav...一、大结构上的导航栏和内容区域两栏布局 首先我们从 大结构上 说起，因为我发现很多网站从整个首屏的大结构上都是这种两栏布局： 旁边是侧边栏导航，中间是大块内容区域。...右边nav栏固定宽度，并用margin/padding-left隔开和左边内容区域的距离 值的注意的是左边内容区域宽度设置为百分百，并使用margin-left负值使得自身向左位移，以给右边的nav...看来平时多看看别人的代码还是很能开拓思路的。 二、mini版的nav+cont结构 像不像上边大结构缩放0.5倍后的样式。左边内容区域（content），右边导航栏（nav）。 ?...2、左图，右固定行数的文字，右侧文字和左边图片垂直居中。这种实现方式就有限了。 ? 同上，左图右多行文字垂直居中，（截图这里限制了两行）但实际开发中，我遇到过有的设计稿不限制行数还要有垂直居中的。

    2.9K11

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

    制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 ) 测量的尺寸 , 版心的尺寸为 1200 x 420 像素 ; 版心左侧的 侧导航栏 尺寸为 190 x 420 像素...像素的 左内边距 ; 右侧的文字 , 距离测导航栏的右侧有 20 像素的右内边距 ; 测量 测导航栏 文本间隔 , 也就是行高 , 从上一行开始到下一行开始位置 , 行高 44 像素 ;...左侧的 侧导航栏 的 背景是 黑色半透明 背景 ; 使用吸管工具 , 吸取 鼠标移动到 侧导航栏 上的颜色值 为 #00b4ff ; 侧导航栏中 , 默认状态下 , 文字默认颜色为白色 ; 二、...20 像素 */ margin-right: 20px; /* 行高 = 内容高度 垂直居中 */ line-height: 40px; /* 字体大小 */ font-size: 18px...中 无序列表 列表项 高度 45 像素 */ .subnav li { /* 高度 = 行高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航栏

    3.3K50

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

    像素 , 该大盒子 , 可以分为如下三个小盒子 , 小盒子中的元素都是垂直居中的 , 可以在大盒子中设置一个行高 , 小盒子自动继承 ; font-xxx , line-xxx , text-xxx..., color 等样式可以被子元素继承 ; 该盒子有 2 像素的阴影 ; 最终的盒子样式如下 : /* 横向导航栏模块 总体盒子模型 样式 */ .goods { /* 内容高度 60 像素...-- 横向导航栏 模块 - 结束 --> 2、CSS 样式 核心代码 : /* 横向导航栏模块 总体盒子模型 样式 */ .goods { /* 内容高度 60 像素...中 无序列表 列表项 高度 45 像素 */ .subnav li { /* 高度 = 行高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航栏...; color: #fff; } /* 下面是横向导航栏模块 */ /* 横向导航栏模块 总体盒子模型 样式 */ .goods { /* 内容高度 60 像素 */ height: 60px

    5.2K30

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

    , 与 顶部的导航栏有 15 像素间隔 , 这里使用 上外边距 设置 ; /* 网格商品展示模块大盒子 距离上面的 导航栏 15 像素 */ .box { margin-top: 15px; }...3、左侧文本盒子尺寸测量和样式 标题盒子判定 , 上面的标题 , 可以将其设置为 垂直居中 的样式 , 垂直居中 , 需要行高 = 内容高度 , 这里精确的测量 " 精品推荐 " 文本的行高与内容高度...; 该文本盒子如下图所示 , 文本内容 20 像素 , 文本上面和下面各有 20 像素的空白 ; 行高直接设置为 60 像素 , 文本内容页设置成 60 像素 ; /* 文本部分 设置垂直居中 */ ....中 无序列表 列表项 高度 45 像素 */ .subnav li { /* 高度 = 行高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航栏...; color: #fff; } /* 下面是横向导航栏模块 */ /* 横向导航栏模块 总体盒子模型 样式 */ .goods { /* 内容高度 60 像素 */ height: 60px

    4.3K40

    【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )

    一、案例效果 ---- 实现下面的案例效果 : 二、核心要点说明 ---- 1、网页默认样式 所有的网页 , 基本都需要设置如下默认样式 , 清除默认的内外边距 清除列表默认样式 : 主要是列表项前面的圆点...盒子模型居中显示 : 此处涉及到了 顶部的 Banner 图片 , 和 下方的 导航栏 需要居中显示 , 设置 margin: auto; 和 margin: 0 auto; 都可以实现该效果 ;...background: url(images/nav_bg.jpg) repeat-x; } 4、设置列表浮动 列表项 默认 垂直方向排列 : 设置了 列表 项浮动 , 就可以变为行内块元素 , 在一行中水平排列...DOCTYPE html> 浮动示例 - 导航栏示例...-- 导航栏 --> 最近 文章

    2.4K20

    一、首页第一个首页栏制作【仿淘票票系统前后端完全制作（除支付外）】

    50%使其元素能够占据一行，并且还需要更改他们的背景色为透明，否则自身的背景色将会盖住标题栏的背景色： 接着在左侧创建一个行，用于存放logo，在此没有 logo 可以暂时给予一个背景色，这个行的高宽为...当前影片内容分为一个大框为主题，其内部首先分为左侧的封面图以及右侧的内容；右侧的内容又分为左边饮品内容和右侧的购票内容，那么此时我们可以首先先创建一个大框，这个框为一个行，包裹所有影片信息，并且命名为内容...，包裹其他所有的影片内容： 这个内容行还需要去掉对应的背景色、高度（设置为包裹），否则将会自带高度。...： 最后我们在右侧添加一个按钮，设置对应的文本和颜色： 三、添加导航容器 我们还发现，这个首页的导航栏是在下部： 那么此时就需要用到一个导航容器，点击扩展组件，找到导航容器添加到当前页面...： 此时将刚刚所编写的所有内容赋值到导航页1中： 重命名导航页1为首页： 接着点击首页导航栏，在属性中更改选中的图标以及文本： 接着预览： 最后把其它导航页的名称和图片进行修改即可

    8.6K20

    css多浏览常见问题

    .) 2).水平居中. margin: 0 auto;(当然不是万能) 3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签) 4, FF 和 IE...,如p[id]中,所有p标签中有id的都是同样式的. 10 IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。...如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。 补充：对于一个ID，不能这样写......如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS： #navigation { background: blue; width: 150px } 较短的导航条是不会直通到底部的...不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。

    1.1K30

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

    搜索栏盒子 中 , 与 Input 表单放置在一行 , 并且二者之间没有缝隙 , 默认的行内块元素之间会有一条无法控制的缝隙 ; 最后 , 设置按钮图片 , 按钮图片无法填充满 , 使用平铺样式 ,...*/ body { background-color: #f3f5f7; } /* 插入图片自适应 */ img { width: 100%; } /* 版心宽度 1200 像素 , 在浏览器中居中对齐...; } /* 导航栏设置 左浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置左浮动 */ .nav ul li { /* 设置 无序列表项 从左到右排列...20 像素 */ margin-right: 20px; /* 行高 = 内容高度 垂直居中 */ line-height: 40px; /* 字体大小 */ font-size: 18px...skyblue; } /* 鼠标经过链接时的样式 */ .nav ul li a:hover { /* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */ border-bottom

    2.3K70

    【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

    一、多排按钮导航栏样式及核心要点 1、实现效果 要实现下面的导航栏效果 ; 2、总体布局设计 该导航栏可使用 10 个 标签盒子 进行制作 ; 该导航栏的宽度自动充满整个屏幕 , 宽度为..., 水平排成两排 , 每排 5 个 , 为其设置左浮动即可实现 , 同事设置其宽度为 20 像素 ; 除了图片外 , 每个链接中还有一行文字 , 设置文字水平对对齐 nav { /* 整个导航布局距离顶部...: 40px; /* 上下 10 像素外边距 */ margin: 10px 0; } 5、设置文本 在链接中的文本 , 放在 标签中 , 该标签宽度默认充满父容器 , 高度自适应...; 将其设置为 block 块级元素 , 就可以放置在图片下方 ; 文本 span 样式为 : nav a span { /* 导航栏中的文本 设置为 块级元素 */ display...垂直居中 */ line-height: 44px; } .search { /* 中间部位搜索栏盒子内容 */ /* 子绝父相 该容器的子容器需要绝对定位 因此父容器设置为相对定位

    3.3K40

    Axure实战06:创建一个AppleSymbol图标库网站

    基础样式-侧边导航栏 我们先分析下AppleSymbol图标库网站的结构，它由一个侧边导航栏和内容展示区组成，当我们点击侧边导航栏的菜单时，右侧内容区域将展示不同的内容。...首先是侧边导航栏，我们拖入一个动态面板放在左侧，在样式工具栏中，设置它的位置为0,0，尺寸是256*955，并填充动态面板的背景颜色为#001529。...为了让侧边导航栏放在左边，我们需要固定侧边导航栏的动态面板。 我们在样式工具栏中设置“固定到浏览器”，设置水平固定为“左侧”，垂直固定为“顶部”。 接下来完成里面的内容。...我们为每一个菜单都设置选中的时候加背景颜色，只需要把所有的导航菜单结合在一个选项组中，即可实现单选互斥选中的效果。 选中全部导航菜单，右键选择“选项组”。 给选项组命名为“导航菜单”。...然后还是在AppleSymbol页面中，拖入一个“内联框架”组件，把它放在侧边导航栏右边，尺寸设置为1350*955。 顺便设置它的样式，勾选“隐藏边框”，设置滚动模式为“从不滚动”。

    2.6K20

    【Web前端】项目实训：CSS基本布局理解

    题 1：基于栅格布局的现代博客首页设计 题目要求： 创建一个博客首页布局，包含一个顶部导航栏、一个主要的内容区域（左侧为博客文章列表，右侧为一个侧边栏显示推荐内容），以及一个底部的页脚。...要求使用 栅格布局 来分割页面，顶部导航栏固定在顶部，内容区域左右分栏。 代码示例： 一行是顶部导航栏，第二行分为左右两栏，第三行是页脚。通过 ​​grid-template-areas​​ 确定每个区域的布局位置。...顶部导航栏：​​header​​ 元素被设置在第一行，占据整个页面宽度，居中显示导航文字。...页脚：​​footer​​ 固定在页面底部，跨越整个页面宽度，并居中显示内容。 响应式设计：通过 ​​grid​​​ 的灵活性，你可以轻松扩展布局，适应不同屏幕大小。

    12210
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券