新浪导航（html+css）

一.

主要应用padding内边距可以撑开盒子,对于字数不同的文字不需要设置不同宽度的盒子。

二.代码实现

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>.nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;line-height: 41px;}.nav a {display: inline-block;height: 40px;font-size: 12px;color: #4c4c4c;text-decoration: none;padding: 0 20px;}.nav a:hover{background-color: #eee;}</style>
</head><body><div class="nav"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="">三个字</a></div>
</body></html>

三.页面展示

新浪导航（html+css）相关推荐

新浪导航栏(CSS)
效果: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
新浪导航案例-padding影响盒子好处
新浪导航案例-padding影响盒子好处效果如下: 代码如下: <!DOCTYPE html> <html lang="zh-CN"><head&g ...
前端菜鸟模仿新浪导航
大家可以去新浪网看看导航,前几天突然有这样的一个想法,所以就来撸一番代码.详细看代码. index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
pxcook使用（量尺寸）+盒子模型+残缺新浪导航栏
png用设计左侧尺子量尺寸,查颜色用吸管 psd用开发模式盒子模型盒子由内容区域content+内边距padding+边框border+外边距margin. 3.1边框(快捷键bd+tab) bo ...
CSS解构系列之-新浪页面解构-01
文章背景:这是一次内部交流会的PPT,通过文字的方式记录下来,分享给更多的同学,同时也由于个人能力水平还有很大的成长空间,也想借此机会再深化学习一下,所以这事利人利已,千秋万代.由于个人知识范围有限, ...
HTML/CSS 新浪注册框
HTML/CSS 新浪登录框代码: <!DOCTYPE html> <html lang="en"> <head><meta chars ...
CSS_腾讯QQ官网，新浪官网，网易官网，淘宝官网之css初始化代码
CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...
豪情-CSS解构系列之-新浪页面解构-01
目录: 一. 新浪的布局特点二. 内容细节的特点三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

新浪导航（html+css）

一.

二.代码实现

三.页面展示

新浪导航（html+css）相关推荐

最新文章

热门文章