首页
学习
活动
专区
圈层
工具
发布

【CSS】CSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )

文章目录 一、背景附着 1、HTML 标签结构 2、设置 div 盒子内容水平居中显示 3、设置链接标签默认显示样式 4、设置鼠标经过样式 二、完整代码示例 1、代码示例 2、效果展示 一、背景附着...设置默认的显示样式 */ a { /* 转为行内块样式 */ display: inline-block; width: 120px; height: 50px; /* 设置背景颜色...- 简写 */ background: url(images/bg_bt_orange.png) no-repeat; } 4、设置鼠标经过样式 鼠标经过时 , 文本颜色变为白色 , 背景图片变为其它背景...DOCTYPE html> 横向导航栏 <base...设置默认的显示样式 */ a { /* 转为行内块样式 */ display: inline-block; width: 120px; height: 50px; /* 设置背景颜色

5.9K20

怎么修改锦鲤主题导航栏的颜色背景

其实一直有人问,怎么修改导航栏的黑色背景,因为这个涉及div框架和class样式表,不是一段代码就能搞定的,今天有时间就把教程整理以下,当然不是一步一步教,因为我并不适合做老师,我只是把成品拿出来,然后把对应的颜色空余出来...,至于要什么颜色,自己添加就行了。...首页,导航栏被分成了两个DIV,一个是顶端悬浮(黑色)一个是跟随悬浮(白色+透明) #header{   background: rgba(255,255,255,0.9); } .header-nav...里面,保存之后前台刷新,就变成了白色背景,有一点点透明效果,其中第一段:“#header”是div框架的ID值,我们采用rgba的颜色代码,因为这个这个设置一个小小透明效果,如果不需要透明可以设成“#fff...”全白背景,下面的两个文本超链接,原样式是黑色,所以字体都是白色,修改之后背景是白色,那么就得在修改以下字体颜色,这么设置的是黑色,如果想修改的话把“#333”修改为别的颜色代码即可。

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

    css颜色介绍和背景设置

    现在美丽网页的设计图中颜色五花八门的,网页模块中漂亮背景图也很多,网页中颜色和背景设置必不可少,接下来我们就先学颜色是如何表达的,要知其然,知其所以然。...颜色表达形式 1.RGB:rgb( red, green, blue ):每个参数定义了0-255之间的颜色强度。...举例: hsla(0, 100%, 50%,0 )//完全透明,没有颜色的红色 hsla(0, 100%, 50%,1)//红色 5.HEX:hex是使用十六进制值来指定颜色,格式为:#rrggbb...举例: #ff0000 红色 #ffff00 黄色 #ffffff 白色,也可以将两个相同值合并,如#fff白色 #000黑色 6.颜色名称:tomato,orange, gray 如何设置背景颜色...fixed固定背景图;scroll跟随页面滚动*/ body{ background-color:red;/*背景颜色设置为红色,背景图覆盖不完全的时候,剩余的有背景颜色填充*/ background-image

    2.4K40

    设置导航栏的背景色和标签栏的背景色

    https://blog.csdn.net/u010105969/article/details/51282200 在开发中我们有时的需求是设置导航栏和标签栏的颜色,而实际我们如果直接设置背景颜色并不会达到我们预期的效果...,设置的颜色只是浅浅的一层颜色,这是因为我们设置的背景色被覆盖了,并没有直接显示给我们。...方法如下: 1.设置导航栏(navigationBar)的背景色:  [self.navigationBarsetBackgroundImage:[UIImageimageNamed:@"daohanglan_beijingditu..."]forBarMetrics:UIBarMetricsDefault]; 还有一设置导航栏背景色的方法: [self.navigationController.navigationBar setBarTintColor...:[UIColor whiteColor]]; 2.设置标签栏(tabBar)的背景色: self.tabBar.backgroundImage = [UIImageimageNamed:@"biaoqianlan_beijingtu

    3.5K20

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

    文章目录 一、 导航栏测量 1、 左侧边界 2、 文本测量 3、 底部边框测量 二、 导航栏代码编写 1、 HTML 标签结构 2、 CSS 样式 3、最终显示效果 三、 完整代码 1、 HTML...标签结构 2、 CSS 样式 一、 导航栏测量 ---- 1、 左侧边界 导航栏 最左侧位置 , 距离 logo 盒子 有 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子 与 导航栏之间的距离设置成...3、 底部边框测量 底部边框 2 像素 , 使用吸管工具吸取颜色 , 可得到颜色值 #00a4ff ; 二、 导航栏代码编写 ---- 1、 HTML 标签结构 导航栏使用 无序列表 实现 ,...#">课程 职业规划 2、 CSS 样式 导航栏使用了 无序列表 , 无序列表的默认样式是...鼠标经过导航链接时 , 还要设置一个下边框 : /* 鼠标经过链接时的样式 */ .nav ul li a:hover { /* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线

    5.8K20
    领券