CSS 05-01 新浪导航栏 项目笔记

最新推荐文章于 2023-10-19 20:24:30 发布
最新推荐文章于 2023-10-19 20:24:30 发布
阅读量118 收藏
点赞数 1
分类专栏： # 【HTML5】 # 【CSS】 文章标签： web css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48200589/article/details/106610479
版权

一定要先分析
1.先确定结构
div nav
a
a
a
a
a
2.构建样式
a.构建边框
测量高度
测量背景色
测量上框色
测量下框色
3.

不停喝水
关注
专栏目录
新浪导航栏
qq_40687516的博客
11-20 805
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新浪导航栏</title> <style type="text/css"> *{ margin: 0; padding:0; } .top { ...
新浪导航栏(CSS)
Valentino112358的博客
09-19 1444
效果： 代码： <!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> .na
css综合案例--新浪导航栏（css第三天学习）
最新发布
qq_44803068的博客
10-19 269
凭借肌肉记忆，终于记得格式化代码为shift+alt+f。注意：a一定要转换为行内块元素！
基于CSS的新浪导航案例
weixin_45995139的博客
09-28 411
分析： 1. padding内边距可以撑开盒子，我们可以做非常巧妙的运用； 2. 因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给padding最合适。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
仿新浪头部导航栏(附带图片)
BruceWang的专栏
05-21 2487
-------------------------------aspx页面-------------------------------------                             首页         应用▼         微吧▼         游戏▼         -->搜索微博、找人
新浪微博制作的前端页面HTML与CSS代码
09-09
这包括但不限于按钮、导航栏、时间线、用户头像、消息提示等常见元素的设计和布局。 在学习过程中，你需要关注以下几点： 1. HTML语义化：合理使用语义化的标签，让网页内容对搜索引擎友好，同时便于屏幕阅读器等...
css笔记
PrimaryColor
07-30 494
css(层叠样式表) CSS的发展历程 从HTML被发明开始，样式就以各种形式存在不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制 最初的HTML只包含很少的显示属性 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能 但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿于是CSS便诞生了. CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者 让我们的网页更加丰富多彩 CSS初识 Cascading Style Sheets
前端基础笔记-CSS-03-盒子模型
mkx2723的博客
08-04 298
盒子模型边框border内边距padding外边距marginps基本操作三级目录 基本概念 1.网页布局的本质是根据设计图设计好盒子的大小以及摆放的位置，再将网页元素放进盒子里。 2.盒子由元素内容、边框、内边距、外边距组成。 3.边框为盒子的厚度； 内边距为元素内容与边框的距离； 外边距为盒子之间的距离。 边框border 基本语法border : border-width || border-style || border-color ; border-style: none：没有边框（默认值）
CSS详细笔记
nuomi_w的博客
11-15 830
1.CSS简介 CSS的主要使用场景就是美化网页，布局页面的。 1.1HTML的局限性 说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如表明这是一个大标题，表明这是一个段落，表明这儿有一个图片，表示此处有链接。 1.2 CSS-网页的美容师 CSS是层叠样式表(Cascading Style Sheets)的简称. 有时我们也会称之为CSS样式表或级联样式表。 总结: HTML主要做结构,显示元素内容. CSS美化 HTML,布局网页. CSS最大价值:由HTML专注去做结构呈现，样式交给
CSS学习笔记
怀抱清风的博客
03-22 1788
CSS学习大纲: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-cop...
HTML+CSS+JS案例展示(仿新浪导航栏)
weixin_42541725的博客
02-06 1236
js_sinanav
前端习题之简易新浪导航栏
weixin_47481936的博客
11-08 668
简易新浪导航栏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .nav{ height: 41px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; b
HTML+CSS开发心得——仿新浪导航栏（一）
weixin_43237458的博客
09-27 2745
仿新浪导航栏（一） 最近在学习CSS布局和HTML，这个部分给我的感觉是内容很多，虽然代码简单，不需要什么算法， 但是我们很难将盒子模型放在我们需要的位置上，再加上一些行高、边距、继承，让人如身在云里雾里。 在学习网页的过程中，我们也要采取模块化学习的方法，一个模块一个模块学习，一步一步来。 千万不能以为代码简单，就小瞧这门语言，其实它大有讲究。 分析 打开新浪导航栏，我们可以分析如下： 一个大盒子与浏览器同宽 一个通栏（可视区）的大盒子w 可视区的大盒子里包括左右两个部分（fl+fr） 左右两个部分的
纯css打造的仿新浪特色导航条
weixin_34262482的博客
09-08 503
在新浪博客栏目看到其导航条简洁大方又不失动感美观，甚是欣赏，打开源文件又有新发现:大公司就是不一样，从不人云亦云，其导航条结构并没有采用教科书或网页教程众口一词的ul-li-a结构，而是采用“毫无技术含量”的文本平铺结构，代码精简直观，与新浪网页风格一样遵循着简单即美的理念，体现出开发人员对css深刻的理解和把握。 但是新浪博客导航条的特效部分是用js脚本实现的...
css基础实例4-新浪导航栏的制作
qq_45353963的博客
03-02 2079
案例图： 要求： 代码如下： <!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">
HTML标签选择器
ForeverLeiYu的博客
04-23 311
<!--直接子元素选择器egdiv>p--> <!--egdivspan--> <!--属性选择器eg[type=input]--> <!--伪类选择器eg:hover--> <!--伪元素选择器eg::after-->...
伪元素 添加字体图标 案例
Write less，do more
06-24 1459
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> @font-face
CSS 03-02 字体大小 粗细样式 文本对齐 行间距 缩进 文本线 笔记
Write less，do more
06-03 1110
CSS字体样式属性调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 font-size:大小 作用： font-size属性用于设置字号 p { font-size:20px; } 单位： 可以使用相对长度单位，也可以使用绝对长度单位。 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。 注意： 我们文字大小以后，基本就
地图热点图
Write less，do more
06-29 976
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .map {
使用 HTML/CSS 实现-顶部导航栏
04-14
很高兴回答你的问题。关于使用 HTML/CSS 实现...您可以使用CSS的flexbox属性来设置导航栏的布局和位置，也可以使用CSS的hover伪类属性来增加导航栏的交互效果，使用户能更好地使用导航栏。希望这些建议对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不停喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值