新浪导航栏(CSS)

效果：

代码：

<!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>.nav{height: 41px;border-top: 3px solid chocolate;border-bottom: black 1px solid;}.nav a {/* a是行内元素没有大小需要转换 */display: inline-block;height: 41px;/* 行高等于高，使文字垂直居中 */line-height: 41px;text-decoration: none;padding: 0px 20px;color: black;font-size: 12px;}.nav a:hover{background-color: ghostwhite;color: goldenrod;}</style>
</head>
<body><div class="nav"><a href="#">设为首页</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">博客</a><a href="#">微博</a><a href="#">关注我</a></div></body>
</html>

复习盒子模型

新浪导航栏(CSS)相关推荐

CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
pxcook使用（量尺寸）+盒子模型+残缺新浪导航栏
png用设计左侧尺子量尺寸,查颜色用吸管 psd用开发模式盒子模型盒子由内容区域content+内边距padding+边框border+外边距margin. 3.1边框(快捷键bd+tab) bo ...
新浪导航（html+css）
一. 主要应用padding内边距可以撑开盒子,对于字数不同的文字不需要设置不同宽度的盒子. 二.代码实现 <!DOCTYPE html> <html lang="en&q ...
新浪导航案例-padding影响盒子好处
新浪导航案例-padding影响盒子好处效果如下: 代码如下: <!DOCTYPE html> <html lang="zh-CN"><head&g ...
前端菜鸟模仿新浪导航
大家可以去新浪网看看导航,前几天突然有这样的一个想法,所以就来撸一番代码.详细看代码. index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
页面顶部导航栏css样式布局
项目场景: css样式布局例如:项目场景:页面顶部导航栏,左侧logo.右侧退出登录固定在页面,不随滚动条滚动:中间有菜单,添加滚动条. 问题描述顶部导航栏出现滚动条,滚动条位置在页面底部解决方 ...
JAVA竖向导航栏,css实现横向导航和竖向导航栏的方法（代码）
本篇文章给大家带来的内容是关于css实现横向导航和竖向导航栏的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.竖向导航 ul{ list-style-type:non ...
html怎么把图片当作导航栏,css利用一张背景图制作导航菜单实现思路及代码
今天介绍的这款简单非常简单,利用一张背景图片来实现菜单的悬停状态.我们看下面的图片: 仅这一张图片,我们实现一个横行CSS菜单.并设置它们的悬停效果.我们该如何做呢?看下面的图片: 这是一个示意图.最 ...
简约好看导航栏(HTML、CSS)
简约好看导航栏(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charset ...

新浪导航栏(CSS)

新浪导航栏(CSS)相关推荐

最新文章

热门文章