html+css制作简洁版小米官网侧边栏

最新推荐文章于 2022-03-27 17:10:57 发布
最新推荐文章于 2022-03-27 17:10:57 发布
阅读量2.5k 收藏 29
点赞数 6
分类专栏： 小练习 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57921210/article/details/123384594
版权
本文档详细介绍了如何使用HTML和CSS来创建一个类似小米官网的简洁侧边栏。从插入文本内容开始，逐步设置超链接的样式，包括将其转化为块级元素，调整背景颜色和比例，修改文字格式，设置文字缩进，以及实现文字鼠标悬停效果和垂直居中对齐。最后提供完成后的源码。
摘要由CSDN通过智能技术生成

目录

（1）最终效果图：

（2）文本基础内容

2.1.插入文本内容：

（3）总体样式的设置

3.1.先把每个超链接设置为块级元素

 3.2.设置每个文本背景的长方形的比例和颜色

 3.3.设置超链接文字的格式（文字颜色&删除下划线）

 3.4.设置文字的缩进

3.5.设置鼠标划过字体的样式

 3.5.设置文字位置垂直居中

（4）完成

（1）最终效果图：

（2）文本基础内容

2.1.插入文本内容：

打开vscode，首先我们用超链接来显示出侧边栏的文字内容

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

正常显示超链接的效果。

（3）总体样式的设置

3.1.先把每个超链接设置为块级元素

因为块级元素自动换行，所以可以利用此特性让超链接文本呈现垂直显示。

<style>
      a {
        /* 转换为块级元素 */
        display: block;
        }
</style>

 

最低0.47元/天 解锁文章
枯幕
关注
  • 6
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用HTML和CSS写小米商城导航栏
cj1555640的博客
08-19 3421
Java学习第二十天开始做小米商城的首页
html_css_购物界面侧边栏
weixin_45344430的博客
01-11 969
效果图 程序代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> a {
折磨我一个周的小米官网——小米侧边栏
chnnds的博客
12-29 3014
文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 小编历时一个星期的艰苦奋斗，终于在第七天的末尾结束了小米官网的折磨。这段时间是真的难熬。当然小编也对JavaScript的用法以及理解层度，有了一定的提高。庞大的收获总是伴随着艰苦的学习过程，当你度过了艰苦的学习过程，你的收获一定大于你的付出。 一、小米官网功能介绍 1.1 首页效果 2.读入数据 代码如下（示例）： data = ...
CSS实现小米官网侧边栏
weixin_45962741的博客
05-09 1237
首先是显示模块的转换： 把行内元素转换为块儿级元素： display: block; 把块元素转换为行内元素 display: inline; 效果如下： 代码如下： <!DOCTYPE html> <html la ng="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
案例-简介小米侧边栏（HTML、CSS）
...
08-06 370
案例-简介小米侧边栏（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
小米官网轮播图侧边栏动态添加-较为简单的操作（拿json数据有点枯燥，有点多）
D_98k的博客
10-14 1001
小米官网的侧边栏里面的数据可以说是多到离谱，如果让我们自己写静态页面的话，那代码量就多到离谱，后面的购物车还没办法用到这些数据，使用动态添加数据其他页面也可以用到这些数据。 我这里是使用的json数据添加的方式，这是里面的一条数据，因为后面购物车和数据详情页也要用到这些数据，所以这里用到的只是其中两条 有了这些数据之后，唯一麻烦的事情来了，如何将他们排列进去 首先，我们来看一下我的结构，这是侧边栏其中的手机一栏（结构简单）： 类名为hidden的div盒子就是后面需要装下24个手机...
简写一个小米侧边栏（html+css）
qq_61877169的博客
03-02 347
一.主要思路 主要利用元素显示模式的转换，链接伪类选择器，单行文字垂直居中等css操作。 二.代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
CSS综合案例——简洁版小米侧边栏
weixin_45586870的博客
10-20 154
案例的核心思路分为两步: 把链接a 转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度，鼠标经过a 给 链接设置背景颜色 提示： 1.通过display设置a标签的显示模式，让其能设置宽高 2.通过text-align设置文本水平居中 3.通过设置line-height让文本垂直居中 4.通过:hover设置鼠标经过的样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
简洁版小米侧边栏
weixin_38602083的博客
12-25 2084
如何在网页中实现下图所示的效果？ 简洁版的代码看这里--> <head> <style> a { display: block; width: 230px; height: 40px; text-decoration: none; ...
JSP页面导航条的快速生成(生成源码,baidu可以搜索到)
07-23
利用本类可以快速生成导航条,并且可以被baidu 搜索到. 希望大家喜欢.总共包含三个文件.
非常简单实用的jsp实现树型菜单，不臃肿
12-07
非常简单实用的jsp实现树型菜单，实现的代码比较简洁，不臃肿。
jsp导航条 下拉菜单
11-11
jsp有下拉的导航条 自己写的，仅供参考，不好请留言
简约大气 顶部导航栏 加 子菜单
05-15
顶部导航栏、鼠标悬停 下拉出 透明色 子菜单 动画唯美、配色大气
网站侧边栏
mincraftmojang的博客
03-27 445
源代码 html文件： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="./css/indmin.css"/> <title>ui插件【minei/b】</title> </head> &...
jQuery的小米官网-----侧边导航栏
chnnds的博客
01-17 1571
目录 前言 1、原生js和jQuery优势对比 1.1、原生JavaScript优点 1.2、jQuery优点 2、侧边栏代码展示 2.1、 原生js代码 2.2、jQuery代码 总结 前言 时隔多少的日日夜夜小编我回来了，这次小编我给你们带来了重构的小米官网的侧边栏。说真的当你写完原生的JavaScript代码之后再去用jQuery再去做一遍，代码量会少的你怀疑人生。当然吐槽归吐槽，咱们还是要实战搞一手！ 1、原生js和jQuery优势对比...
前端web实训——小米商城（第三天）
masdhsi的博客
04-30 2450
1.侧边栏 (1)编辑侧边栏文字使得其平均的分布在侧边栏一侧： .category-list>ul>li>a{ padding-left: 30px; display: block; height: 42px; line-height: 42px; font-size: 12px; color: #fff; } （2）当鼠标悬停时，a块会变色： .category-list>ul>li>a:hover{ background-color: #FF6700;
android 官方侧边栏布局
xiaozhou_chen的专栏
12-02 1068
说到侧边栏，相信大家一定听过或者用过 slidingmenu ，这是目前很流行的一个开源控件。但 google 也发布了一个侧边栏的控件，而且使用起来简单方便。 下面以一个官方简单的例子说明： 布局文件如下： android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/
html及css实现侧边栏效果
qq_45429152的博客
02-10 7112
html及css实现侧边栏效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值