小米网站学习-导航栏

小米网站模仿学习-导航栏

—————————————
此笔记是跟着蝉壳学院学习的
—————————————
说是第二天，其实是好几天了，大概两周。
我本想把每个知识总结一下的，但是emmmmm…
以下是下午3个小时学习的内容，学得慢，而且还有好多不懂的，要回去复习一下。
在实践中找到自己的问题。

.css和.html不在一个文件夹
要引用上一级文件夹：第一级/第二级/**.css
导航栏顶部没有顶到最上端
因为body里自带margin和padding

body{margin:0;padding:0;}

这样就处理好了。

方便调试
为了方便调试，可以先不加背景，先加一个边框。这样容易看很多问题。
div居中

margin：0 auto；

浮动带来的边界塌陷
通过伪元素解决

/*这一块不太清楚*/
.xx::before,.xx::after{concent:"  ";
display:table;
}
.xx::after{clear:both;
}

快速包围多行
光标选中–》emmet–》输入包围个别行
去掉默认文本标签的下划线

a{text-decoration:none;
}

鼠标放在标签上颜色的改变

.xx a:hover{color:#fff;}
.xx a这是什么选择器？关于选择器的问题。

文本在div内上下居中

.xx{height:50px;
line-height:50px;/*行高与高度相同*/

行元素变块元素

.xx a{display:block;
}

小米网站学习-导航栏相关推荐

怎样做网络推广浅析怎样优化网站的导航栏？
网站导航栏是网站内部结构中一个重要的组成部分,起着指引的作用,怎样做网络推广也引导用户快速找到想要浏览的内容,那么站长在优化时应该怎样设置网站导航栏?下面就由怎样做网络推广带大家一起来了解一下. 1. ...
演练网站的导航栏 0920
演练网站的导航栏 0920 素材 https://cloud.189.cn/t/qMVJzaAbea63 数据导航图的宽度 760 150 菜单图的宽高 760 32 制作过程完成基本架构制作 ...
小米官网导航栏的实现
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
网络推广专员浅析网站优化导航栏该怎样设置？
导航栏在企业网站优化中起到非常大的作用,网络推广专员表示优质的网站导航栏不仅能够让访客知道自己的所在位置,还能提高访客的浏览效率,更好的提高用户体验,那么在做导航栏优化的时候,该如何设置才能有利于SE ...
Bootstrap CSS入门初步学习---导航栏设计、代码展示
1.基础导航栏制作步骤: 1.添加一个容器<nav>或<div>标签,使用.navbar类和.navbar-default类,并且添加role="navigation ...
html网站底部导航栏怎么做,如何设计一个页面的底部导航？
最近遇到一个需求,做一个有底部导航的页面,页面上的内容要求一屏展示(尽量不要有滚动),同时还要兼容1366768 .1440900.1920*1080这些屏幕,能不能用代码来实现呢? 首先底部的导航栏 ...
前端实现小米官网导航栏的实现主要通过HTML+CSS完成效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显
话不多说直接上代码首先看看小米商城的导航栏,如图: 通过实际测试可以知道,服务和社区不属于下拉菜单,除了这两个,剩下的全是下拉菜单,想成了一个下拉菜单组,一旦鼠标进入下拉菜单组,那么就会有下拉效果, ...
小米官网竖直导航栏html,演示：小米首页纵向导航栏特效(上)
课程目标: 本季课程引入了CSS3众多功能中的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果.整合 HTML5 & CSS3,有的是网站开发中常用的.实用的功能,有的是先进的 We ...
前端css小米导航栏设置及盒子定位居中问题
1.小米最上部导航栏设置 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...

小米网站学习-导航栏

小米网站模仿学习-导航栏

小米网站学习-导航栏相关推荐

最新文章

热门文章