CSS课堂案例3-小米导航栏

最新推荐文章于 2023-06-22 18:19:53 发布

一只小白657

最新推荐文章于 2023-06-22 18:19:53 发布

阅读量261

点赞数

分类专栏：学习案例文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45139556/article/details/120811446

版权

本文介绍了如何使用CSS创建简洁版的小米侧边栏，重点在于将链接a转换为块级元素以设置高度和宽度，以及通过鼠标悬停改变背景色。同时，通过设置首行缩进和行高实现文字的页边距和居中效果。

摘要由CSDN通过智能技术生成

简洁版小米侧边栏

要求实现的效果，左侧红框部分

思路分成两步：

把链接a转换为块级元素，这样链接就可以单独占一行，并且可以设置高度和宽度
鼠标经过a链接时，设置背景颜色

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>小米</title>
    <style>
        a {
     
            /*转换为块级元素，实现每个a链接独占一行的效果*/

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一只小白657

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS（CSS3）知识点学习

于公子的博客

03-03

8281

CSS（CSS3）自我学习，知识点总结

css3仿小米官网导航下拉菜单代码

06-05

一款黑色风格的仿小米官方网站css3导航下拉菜单代码，简洁实用的css3下拉导航菜单网页特效。

参与评论您还未登录，请先登录后发表或查看评论

CSS-1

Kunjpg的博客

09-17

261

简单小米边框 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单小米边框</title> <style> /* 1. 把 a 转换成块级元素 */ a { display: bloc

案例-小米商城导航栏

qq_43632490的博客

05-17

341

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt

CSS3-浮动综合案例-小米顶部导航栏

最新发布

weixin_54021642的博客

06-22

267

浮动综合案例之小米顶部导航栏

小米导航条

weixin_46432201的博客

04-02

336

这个小米导航条第二块div为啥会溢出，有没有前辈说一下，感谢。

-CSS-笔记-

April_Aimer的博客

02-07

2172

目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程从HTML被发明开...

【前端开发基础】CSS基础知识以及CSS3

qq_43293778的博客

06-03

6764

三、CSS层叠样式表一目标能够说出什么是CSS 能够使用CSS基础选择器能够设置字体样式能够设置文本样式能够说出CSS的三种引入方式能够使用Chrome调试工具调试样式 1、CSS简介 CSS的主要使用场景就是美化网页的，布局页面的 1.1 HTML的局限性说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义，比如< h1>表名这是一个大标题，< p>表明这是一个段落，< img>表明这儿有一个图片，< a>表示此处有链接。 1.2

css学习

weixin_39111384的博客

04-16

1221

课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程从HTML被发明开...

小米官网css3导航菜单代码

04-06

小米官网css3导航菜单代码是一款黑色风格的小米官方网站css3导航下拉菜单代码。

css制作导航栏的三角形

qq_41309350的博客

03-04

759

在做网页的时候我们通常看到这样的需求（做一个三角）首先 .box{ width: 0; height: 0; border: 50px solid ; border-color: #000 #FF0000 #FFFF00 #00FFFF; } </style> </head> <body > <div class="box"></div> </body> 你

小米商城侧导航栏的实现（导航栏的制作）

weixin_65607135的博客

09-01

4092

我的想法是将下拉框写在列表里面，然后给下拉框绝对定位，给ul相对定位，因为我没有给li设置相对定位，那么下拉框的参照物就是相对定位了的ul，把下拉框的位置定好，然后实现鼠标移入下拉框出现，鼠标移出下拉框消失的问题。侧导航栏在我们写的时候很常用，很多网站上面都有侧边导航栏的应用，那么如何制作侧边导航栏呢？我们实现的思路是先制作一个列表，设置列表的样式，然后在列表里面完成我们需要的内容。下面看一看我制作的小米商城的侧导航栏。所涉及到的知识点有定位和格式化文档。css代码段如上所示。...

html+css制作静态小米商城页面（含css手动轮播图）

热门推荐

我也是全粘工程师啦

07-01

1万+

html,css制作静态小米商城网页，纯css实现轮播图，含代码注释

仿小米官网首页动态交互（HTML+css+jq）3.轮播图以及侧边栏

qq_46376859的博客

07-21

2908

今天是小米首页的轮播图与侧边栏模块，因为是个小白，轮播图有些部分自己也还有点迷，效果也不是小米官网的淡入淡出，是一个左右滑动的效果。效果图：侧边栏部分效果图： HTML ：  <div class="w lunbo">  <div class="sidebar"> <ul class="qing"> <li class="org">

前端实现小米官网导航栏的实现主要通过HTML+CSS完成效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显

小杨的博客

07-01

1706

话不多说直接上代码效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显需要图片请私信哦

HTML+Css模仿小米商城左侧菜单

异想实验室|Arduion|ESP8266|Micro Python|

03-01

1075

HTML+Css模仿小米商城左侧菜单

案例-简介小米侧边栏（HTML、CSS）

...

08-06

371

案例-简介小米侧边栏（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>综合案例---简介小米侧边栏</title> <style&gt

2021-08-04

weixin_51081867的博客

08-04

简洁小米侧边栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a { display: block; color: white; width: 200px; height: 40px; text-decoration: none

使用 HTML/CSS 实现-顶部导航栏

04-14

很高兴回答你的问题。关于使用 HTML/CSS 实现...您可以使用CSS的flexbox属性来设置导航栏的布局和位置，也可以使用CSS的hover伪类属性来增加导航栏的交互效果，使用户能更好地使用导航栏。希望这些建议对你有所帮助！