位置: IT常识 - 正文

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

编辑:rootadmin
【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 ) 文章目录一、Banner 栏版心盒子测量1、测量版心元素尺寸2、课程表测量二、Banner 版心盒子模型左侧导航栏代码示例1、HTML 标签结构2、CSS 样式3、展示效果一、Banner 栏版心盒子测量1、测量版心元素尺寸

推荐整理分享【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )(cssschool),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css教程网站,css教学视频,css course,css course,css培训课程,css教学视频,css教学视频,css是什么课程,内容如对您有帮助,希望把文章链接给更多的朋友!

拉四条辅助线 , 将版心包起来 , 可以测量 Banner 条版心的尺寸为 1200 x 420 像素 ;

根据上一篇博客 【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 ) 测量的尺寸 ,

版心的尺寸为 1200 x 420 像素 ;版心左侧的 侧导航栏 尺寸为 190 x 420 像素 ;版心 右侧的 课程表 , 尺寸 228 x 300 像素 , 课程表 距离 Banner 顶部有 50 像素高度 , 距离底部 70 像素 ;

2、课程表测量

左侧的 文字 , 距离左侧有 20 像素的 左内边距 ; 右侧的文字 , 距离测导航栏的右侧有 20 像素的右内边距 ;

测量 测导航栏 文本间隔 , 也就是行高 , 从上一行开始到下一行开始位置 , 行高 44 像素 ;

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

左侧的 侧导航栏 的 背景是 黑色半透明 背景 ;

使用吸管工具 , 吸取 鼠标移动到 侧导航栏 上的颜色值 为 #00b4ff ;

侧导航栏中 , 默认状态下 , 文字默认颜色为白色 ;

二、Banner 版心盒子模型左侧导航栏代码示例1、HTML 标签结构

核心代码 :

<!-- Banner 模块 - 开始 --><div class="banner"><!-- 版心模块 --><div class="w"><!-- 左侧 侧导航栏 --><div class="subnav"><!-- 无序列表 --><ul><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">后端开发 <span>></span></a></li><li><a href="#">移动开发 <span>></span></a></li><li><a href="#">人工智能 <span>></span></a></li><li><a href="#">商业预测 <span>></span></a></li><li><a href="#">云计算&大数据 <span>></span></a></li><li><a href="#">运维&从测试 <span>></span></a></li><li><a href="#">UI设计 <span>></span></a></li><li><a href="#">产品 <span>></span></a></li></ul></div></div></div><!-- Banner 模块 - 结束 -->

完整代码 :

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>课程网站</title><link rel="stylesheet" href="style.css"></head><body><!-- 头部模块 - 开始 --><div class="header w"><!-- 1. 最左侧的 logo 标题 --><div class="logo"><!-- 图片 --><img src="images/logo.png" alt=""></div><!-- 2. 导航栏盒子 - 使用无序列表实现 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 3. 搜索栏盒子 --><div class="search"><!-- 文本输入框表单 --><input type="text" value="输入关键词"><button></button></div><!-- 4. 用户栏盒子 --><div class="user"><div class="user-img"><img src="images/head_icon.png" alt=""></div><div class="user-name">用户1</div></div></div><!-- 头部模块 - 结束 --><!-- Banner 模块 - 开始 --><div class="banner"><!-- 版心模块 --><div class="w"><!-- 左侧 侧导航栏 --><div class="subnav"><!-- 无序列表 --><ul><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">后端开发 <span>></span></a></li><li><a href="#">移动开发 <span>></span></a></li><li><a href="#">人工智能 <span>></span></a></li><li><a href="#">商业预测 <span>></span></a></li><li><a href="#">云计算&大数据 <span>></span></a></li><li><a href="#">运维&从测试 <span>></span></a></li><li><a href="#">UI设计 <span>></span></a></li><li><a href="#">产品 <span>></span></a></li></ul></div></div></div><!-- Banner 模块 - 结束 --></body></html>

2、CSS 样式

/* 侧导航栏 样式 */.subnav {/* 设置左浮动 */float: left;/* 左侧侧导航栏 190 x 420 , 左右两侧各 20 像素内边距 */width: 150px;/* 高度 420 像素 */height: 420px;/* 上下没有内边距 , 左右各 20 像素内边距 */padding: 0 20px;/* 背景半透明 黑色背景 0.3 透明度 */background: rgba(0, 0, 0, .3);}/* 测导航栏 中 无序列表 列表项 高度 45 像素 */.subnav li {/* 高度 = 行高 , 垂直居中 */height: 45px;line-height: 45px;}/* 测导航栏 中 列表项 中的链接样式 */.subnav li a {/* 默认情况下为白色 */color: #fff;/* 字体大小 14 像素 */font-size: 14px;/* 取消链接下方的下划线 */text-decoration: none;}/* 鼠标经过时 文字颜色变色 */.subnav li a:hover {color: #00b4ff;}/* 链接内部的 span 标签 , 右浮动 */.subnav span {float: right;}

完整代码 :

/* 清除标签默认的内外边距 */* { padding: 0; margin: 0;}/* 清除列表默认样式 ( 主要是前面的点 ) */li {list-style: none;}/* 清除按钮默认样式 ( 主要是按钮自带的边框 ) */button {border: none;}/* 设置总体背景 */body {background-color: #f3f5f7;}/* 版心宽度 1200 像素 , 在浏览器中居中对齐 */.w { width: 1200px; margin: auto;}/* 头部盒子样式 */.header {/* 高度 42 像素 */height: 42px;/* 设置颜色 方便调试 *//*background-color: pink;*//* 上下设置 20 像素外边距 , 左右自动居中 */margin: 30px auto;}.logo {/* 靠左侧浮动 */float: left;/* 设置与 导航栏盒子 的外边距 */margin-right: 60px;}/* 导航栏设置 左浮动 */.nav {float: left;}/* 导航栏内部 的 无序列表 设置左浮动 */.nav ul li {/* 设置 无序列表项 从左到右排列 */float: left;}/* 设置无序列表中的链接样式 */.nav ul li a {/* 显示模式 块级元素 */display: block;/* 高度 40 像素 , 总高度 42 像素 , 有 2 像素的下边框 */height: 40px;/* 上下内边距 0 像素 , 左右内边距 10 像素 */padding: 0 10px;/* 右外边距 20 像素 */margin-right: 20px;/* 行高 = 内容高度 垂直居中 */line-height: 40px;/* 字体大小 */font-size: 18px;/* 字体颜色 */color: #050505;/* 取消链接下方的横线 */text-decoration: none;/* 调试时使用的背景 *//*background: skyblue;*/}/* 鼠标经过链接时的样式 */.nav ul li a:hover {/* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */border-bottom: 2px solid #00a4ff;}/* 搜索栏盒子模型 */.search {/* 设置左浮动 排列在 导航栏后面 */float: left;/* 设置左外边距 65 像素 */margin-left: 65px;}/* 搜索栏 输入框 */.search input {/* 设置左浮动 , 方便与右侧的按钮进行排列 */float: left;/* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */width: 340px;/* 高度 38 像素 但是盒子大小 42 像素 , 设置 40 加上 2 像素边框正好充满 */height: 40px;/* 1 像素边框 */border: 1px solid #00a4ff;/* 没有右边框 */border-right: 0;/* 文本左侧有 20 像素内边距 */padding-left: 20px;/* 设置文本颜色 */color: #bfbfbf;}/* 搜索框按钮 */.search button {/* 设置左浮动 使其与表单在同一行显示 */float: left;/* 按钮宽度 50 像素 */width: 50px;/* 按钮高度 40 像素 但是为了与父容器匹配 这里拉伸到 42 像素 */height: 42px;/* 使用图片背景方式设置按钮图片 */background: url(images/search_button.png);}/* 用户栏盒子 */.user {float: left;/* 高度 = 行高 垂直居中 */height: 42px;line-height: 42px;/* 距离左侧 30 像素 左外边距 */margin-left: 30px;/* 文字大小 14 像素 */font-size: 14px;/* 字体颜色 #666666 */color: #666666;}/* 用户栏 头像样式 */.user .user-img {float: left;/* 用户头像 30 像素 容器高 42 上下各 6 像素边距 图像垂直居中 */padding: 6px 0;}/* 用户栏 名字样式 */.user .user-name {float: left;/* 名字与头像间隔 6 像素 */margin-left: 6px;}/* Banner 条样式 */.banner {/* 宽度自动填充整个浏览器, 这里只设置高度 */height: 420px;/* 背景颜色 #1c036c , 背景图片水平居中对齐 */background: #1c036c url(images/banner_bg.png) no-repeat top center;}/* 侧导航栏 样式 */.subnav {/* 设置左浮动 */float: left;/* 左侧侧导航栏 190 x 420 , 左右两侧各 20 像素内边距 */width: 150px;/* 高度 420 像素 */height: 420px;/* 上下没有内边距 , 左右各 20 像素内边距 */padding: 0 20px;/* 背景半透明 黑色背景 0.3 透明度 */background: rgba(0, 0, 0, .3);}/* 测导航栏 中 无序列表 列表项 高度 45 像素 */.subnav li {/* 高度 = 行高 , 垂直居中 */height: 45px;line-height: 45px;}/* 测导航栏 中 列表项 中的链接样式 */.subnav li a {/* 默认情况下为白色 */color: #fff;/* 字体大小 14 像素 */font-size: 14px;/* 取消链接下方的下划线 */text-decoration: none;}/* 鼠标经过时 文字颜色变色 */.subnav li a:hover {color: #00b4ff;}/* 链接内部的 span 标签 , 右浮动 */.subnav span {float: right;}

3、展示效果

本文链接地址:https://www.jiuchutong.com/zhishi/299837.html 转载请保留说明!

上一篇:华为OD机试真题 Python 实现【最大连续文件之和 /区块链文件转储系统】(华为od机试真题2023 pdf)

下一篇:GPT-4 性能炸天:10 秒做出一个网站,在考试中击败 90% 人类(gpt参数)

  • 如何让你的文章被飞速传播?(如何让文章更有吸引力)

    如何让你的文章被飞速传播?(如何让文章更有吸引力)

  • 携程网上如何订机票(携程网上如何订酒店)

    携程网上如何订机票(携程网上如何订酒店)

  • 华米是华为还是小米(华米是华为还是荣耀)

    华米是华为还是小米(华米是华为还是荣耀)

  • 京东退货上门取件会要多久(京东退货上门取件收费吗)

    京东退货上门取件会要多久(京东退货上门取件收费吗)

  • 1660和1060性能差别(1660和1060比)

    1660和1060性能差别(1660和1060比)

  • 平板电池不耐用怎么办(平板电池不耐用,显示让密码登陆怎么办)

    平板电池不耐用怎么办(平板电池不耐用,显示让密码登陆怎么办)

  • 华为主题会员有什么用(华为主题会员有哪些)

    华为主题会员有什么用(华为主题会员有哪些)

  • 手机面部识别用照片可以吗(手机面部识别用人的照片)

    手机面部识别用照片可以吗(手机面部识别用人的照片)

  • qq怎么查看别人的收藏(qq怎么查看别人的实名认证信息)

    qq怎么查看别人的收藏(qq怎么查看别人的实名认证信息)

  • 蓝牙耳机微信语音没声音(蓝牙耳机微信语音不清晰)

    蓝牙耳机微信语音没声音(蓝牙耳机微信语音不清晰)

  • 华为nova7是屏幕指纹解锁吗(华为nova7是屏幕指纹解锁吗?)

    华为nova7是屏幕指纹解锁吗(华为nova7是屏幕指纹解锁吗?)

  • 网络设置没有飞行模式(电脑网络设置里没有飞行模式)

    网络设置没有飞行模式(电脑网络设置里没有飞行模式)

  • 快手买东西不发货怎么办(快手买东西不发货查不到订单怎么办)

    快手买东西不发货怎么办(快手买东西不发货查不到订单怎么办)

  • 华为平板m5怎么分屏(华为平板M5怎么分屏一半一半)

    华为平板m5怎么分屏(华为平板M5怎么分屏一半一半)

  • 华为荣耀8a怎么分屏(华为荣耀8a怎么没有应用分身)

    华为荣耀8a怎么分屏(华为荣耀8a怎么没有应用分身)

  • 怎么下载第二个微信(怎么下载第二个抖音)

    怎么下载第二个微信(怎么下载第二个抖音)

  • 电脑一会开机一会关机怎么回事(电脑一会开机一会关机显示屏不亮)

    电脑一会开机一会关机怎么回事(电脑一会开机一会关机显示屏不亮)

  • hdmi arc 接口是什么(hdmi接口arc和mhl)

    hdmi arc 接口是什么(hdmi接口arc和mhl)

  • 开启ap隔离是不是隐藏(开启ap隔离能投屏吗)

    开启ap隔离是不是隐藏(开启ap隔离能投屏吗)

  • 抖音播放量自己看算吗(抖音播放量自己看过一遍算数吗)

    抖音播放量自己看算吗(抖音播放量自己看过一遍算数吗)

  • 苏宁易购怎样分期付款(苏宁易购怎样分期)

    苏宁易购怎样分期付款(苏宁易购怎样分期)

  • iphone所有型号上市顺序(iphone所有型号上市价格)

    iphone所有型号上市顺序(iphone所有型号上市价格)

  • 一加有没有语音助手(一加有没有语音唤醒功能啊?)

    一加有没有语音助手(一加有没有语音唤醒功能啊?)

  • QQ邮箱怎么打开(qq邮箱怎么打开别人发来的照片)

    QQ邮箱怎么打开(qq邮箱怎么打开别人发来的照片)

  • 最新2021Windows10专业版永久激活密钥/神key推荐 附激活工具(最新气象报告)

    最新2021Windows10专业版永久激活密钥/神key推荐 附激活工具(最新气象报告)

  • Linux 下使用mount命令挂载CDROM的方法(linux mount命令详解)

    Linux 下使用mount命令挂载CDROM的方法(linux mount命令详解)

  • BootStrap--selectpicker的使用

    BootStrap--selectpicker的使用

  • 分公司的企业所得税税率是多少
  • 小规模公司减免的增值税怎么算
  • 纳税检查调减进项税额主表怎么不显示缴纳税款
  • 纳税申报表申报日期
  • 两处工资薪金所得
  • 小规模转一般纳税人需要什么条件
  • 手机银行电子回单生成器
  • 商业企业的商品销售额、职工人数是( )
  • 企业购买的商业保险赔偿多少
  • 融资担保公司会计建议有哪些要求
  • 房地产公司机构
  • 小规模纳税人季报还是月报?
  • 取得抵债资产的相关税费计入
  • 1元转让股权账务实
  • 开一张增值税发票需要交哪些税
  • 企业所得税月交还是年交
  • 挂靠费如何纳税?
  • 资产类科目包括哪些内容
  • 什么人可以领购房补贴怎么领取
  • 公司给员工定任务合法吗
  • 留存收益会计科目编号
  • 什么收入不需要交税0税
  • 4S店装修改造费帐务处理?
  • 主营业务收到的现金
  • 超市发购物卡给员工会计分录
  • 如何调整文件夹内文件的顺序
  • 费用已付款跨年怎么做账
  • 若依框架登录后跳转到指定页面
  • 企业所得税的概述
  • 酒店里用了收费的东西怎么算
  • 80岁以上老年卡上的钱如何消费
  • php实现文件上传需要使用哪个全局变量
  • 其他债权投资减值可以转回吗
  • 退休返聘人员是否享受工会福利
  • Android 10.0 framework中关于Activitity的生命周期的源码讲解
  • vue初始化命令
  • 航天金税盘发票作废流程视频
  • php忘记密码
  • 公司建造厂房
  • 出口货物退货会退税吗
  • 任何单位和个人发现洗钱活动有权向什么举报
  • 销售佣金 会计分录
  • 增值税专票的开票要求
  • 应税工资和实发工资区别
  • 银行承兑到期后几天内有效
  • mysql内存使用详解
  • 企业重组的特殊性税务处理例题
  • 农民专业合作组织法律制度的类型包括哪些?
  • 企业残保金什么情况下可以减免
  • 公司支付工伤赔偿,是先签字还是先打钱
  • 谈一谈企业应如何做才能更好地、有效地激励员工
  • 土地转移是什么意思
  • 房地产公司项目经理待遇
  • 资金帐薄印花税是指什么
  • 主营业务成本账户属于什么账户
  • 工会经费滞纳金怎么算
  • 为什么生产经营许可证要第三方代办
  • 失控发票进项税转出成本调整
  • 预付账款属于哪一类账户
  • 年度纳税总额包括个税吗
  • 收到政府土地补偿款账务处理
  • 工程施工与工程成本的区别
  • 人力成本工资总额指应发工资
  • 劳务费可以白条入账吗
  • 会计分录要怎么写
  • 平行结转分步法例题
  • sqlserver数据库和mysql区别
  • win8系统自带截图
  • Win7系统设置屏保密码
  • mac进去不了系统
  • jquery地址
  • opengl extension
  • linux c语言获取当前路径
  • js自定义鼠标右键菜单
  • jQuery Ajax 加载数据时异步显示加载动画
  • 湖北耕地占用税标准
  • 水利建设基金的计提与会计处理
  • 浙江省个体工商户税收政策
  • 工会经费怎么缴付
  • 深圳市福田区行政代码是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设