前言

复习CSS，让自己的项目做得更好；现在开始逐渐写一些以前写过的Demo案例，让自己的前端知识梳理更加清晰

一、新浪标题栏实现效果

最终效果图片如下：

二、新浪标题栏实现需求分析

标题栏上方有橙色的外边框
标题栏下方有白色的边框
字体居中显示
字体选项每个选项间距离一致
鼠标经过时字体变为橙色，且选项颜色变浅

三、新浪标题栏实现方法

设置border-top属性
设置border-bottom属性
让a标签高度等于盒子高度
设置每个链接的padding属性
设置a:hover的伪类选择器，设置background属性

四、最终代码参考

<!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>新浪标题栏</title><style>.nav {border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;line-height: 41px;}.nav a {height: 41px;font-size: 14px;color: #4c4c4c;padding: 0px 20px;display: inline-block;text-decoration: none;}.nav a:hover {background-color: #eee;color: #ff8500;}</style>
</head><body><div class="nav"><a href="">设为首页</a><a href="">手机新浪网</a><a href="">移动客户端</a><a href="">微博</a><a href="">博客</a></div>
</body></html>

总结

做更多的案例，给自己的开发加加速！

前端案例二：新浪首页标题栏制作相关推荐

前端菜鸟模仿新浪导航
大家可以去新浪网看看导航,前几天突然有这样的一个想法,所以就来撸一番代码.详细看代码. index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
新浪首页改版，您还去新浪看新闻吗？
新浪首页改版,您还去新浪看新闻吗? 新浪首页改版了,主要体现是"视频上升.博客下降"的思想,原有的首页第一屏中部的"博客"全部取消了,取而代之的是"视 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
Web前端案例——学成网首页制作
简易的学成网网站制作.代码均有注释,可以说十分新手向了. 相关知识:html+css,主要学习的是css的浮动布局.下一篇文章会在这个网页的基础上添加定位盒子. 运行效果图: html部分: < ...
web前端-综合应用案例-二维码名片的制作-educoder
第1关:二维码名片页面的结构设计 <!doctype html> <html lang="en"> <head> <meta charse ...
b站pink老师JavaScript的jQuery 案例代码——新浪下拉菜单
目录 jQuery中:[使用jquery,记得要引入jquery文件] 用到的重点代码/原理: 1.原案例版本(不简洁,效果较为僵硬) 2.简洁+优化1.0版部分:(中等简洁,效果较柔和) 3.简洁+ ...
Houdini学习笔记——【案例二】消散文字制作
[案例二]Houdini消散文字制作一.Overview 文字通过时间轴中frame变化而碎裂从两边开始向着中间消散并向镜头移动. 效果二.Sop(Surface OPerators or ...
CSS解构系列之-新浪页面解构-01
文章背景:这是一次内部交流会的PPT,通过文字的方式记录下来,分享给更多的同学,同时也由于个人能力水平还有很大的成长空间,也想借此机会再深化学习一下,所以这事利人利已,千秋万代.由于个人知识范围有限, ...
新浪（NASDAQ：SINA）
新浪(NASDAQ:SINA),是一家网络公司的名称,以服务大中华地区与海外华人为己任,新浪拥有多家地区性网站,通过旗下五大业务主线为用户提供网络服务,网下的北京新浪.香港新浪.台北新浪.北美新浪等覆 ...

前端案例二：新浪首页标题栏制作

文章目录

前言

一、新浪标题栏实现效果

二、新浪标题栏实现需求分析

三、新浪标题栏实现方法

四、最终代码参考

总结

前端案例二：新浪首页标题栏制作相关推荐

最新文章

热门文章