房地产集团网站模板ui设计公司排名

房地产集团网站模板,ui设计公司排名,长沙品牌设计,品牌全案设计公司前言 在前端页面开发中#xff0c;导航、侧边栏这类组件是网页的 “骨架”—— 不仅承担着页面跳转的功能#xff0c;样式与交互的质感更直接影响用户的浏览体验。而 CSS 正是塑造这些组件的核心工具#xff1a;小到元素的模式转换#xff0c;大到 hover 交互的细节#x…前言在前端页面开发中导航、侧边栏这类组件是网页的 “骨架”—— 不仅承担着页面跳转的功能样式与交互的质感更直接影响用户的浏览体验。而 CSS 正是塑造这些组件的核心工具小到元素的模式转换大到 hover 交互的细节都需要通过精准的样式规则来实现。这篇文章会围绕三个经典的 CSS 组件案例展开小米风格侧边栏、五彩交互导航、列表式菜单。这三个案例看似是不同的组件形态但核心都围绕着 CSS 的通用技能比如行内元素与块级元素的模式转换、文本的水平 / 垂直居中、hover 伪类的交互控制、背景 / 列表的默认样式重置等。通过 “知识点拆解 完整代码演示” 的方式你不仅能独立实现这三个组件更能掌握 CSS 在 “布局 样式 交互” 中的实战逻辑把这些技巧复用到更多网页组件的开发中。目录前言一、知识准备二、 小米商城侧边栏简洁版2.1 效果和完整代码2.2 开发流程和思路三、五彩导航3.1 案例素材3.2 效果和完整代码四、 列表菜单栏4.1 效果和完整代码4.2 空链接井号和void(0)的区别一、知识准备1.1 小米侧边栏你需要掌握的知识点行内元素转换为块级元素display: block;Emmet语法快速搭建html结构a[href“#”]*7a标签和基础选择器-标签选择器a{样式}设置块级元素a的宽width、高height、背景色background-color设置字体大小font-size颜色color去除a下划线text-decoration: none;首行缩进2字符text-indent: 2em;文字行高等于容器高度实现垂直居中line-height: 容器高px;伪类选择器-链接伪类选择器a:hover{鼠标悬停时的样式}鼠标悬停时改变背景色1.2 五彩导航案例-你需要知道的知识点行内元素a转换为块级元素display: block;块级元素宽度、高度、背景色的设置设置水平居中text-align:center;和垂直居中line-heigth:px;垂直居中数值大小根据盒子大小和文字上下位置决定基础选择器和复合选择器-类选择器和后代选择器背景图属性设置background: color url no-repeat position;【背景色、背景图地址、背景不重复平铺、背景图位置】1.3 列表菜单-你需要知道的知识点清除列表默认样式通过list-style-type: none去除列表项目符号同时用padding: 0 和 margin: 0清除列表的默认内外边距列表项的基础样式设置给 li 设置 width宽度、height高度、border边框、margin外边距实现列表项的布局规范列表项文字的对齐方式通过text-align: center实现文字水平居中结合 line-height: 列表项高度 实现文字垂直居中超链接样式优化给 a 标签设置text-decoration: none去除下划线搭配 color 定义文字颜色让链接融入列表样式鼠标交互效果通过li:hover伪类选择器设置鼠标悬浮时列表项的样式变化如背景色、背景图切换增强交互体验。二、 小米商城侧边栏简洁版2.1 效果和完整代码先看效果完整代码!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title简单版小米侧边栏/titlestylea{/* 把a标签转换为块级元素-行内转块级 */display:block;width:230px;height:40px;background-color:#535758;/* 行高文字高度-实现垂直居中 */line-height:40px;/* 设置字体大小和颜色去除下划线 */font-size:14px;color:#fff;text-decoration:none;/*设置首行缩进2字符*/text-indent:2em;}/* 鼠标经过a标签上面更换背景颜色 */a:hover{background-color:#FF6F00;}/style/headbody!--Emmet语法a[href#]*7--ahref#手机 电话卡/aahref#电视 盒子/aahref#笔记本 平板/aahref#出行 穿戴/aahref#智能 路由器/aahref#健康 儿童/aahref#耳机 音响/a/body/html2.2 开发流程和思路【图2-1】小米商城原版网站这个是小米商城网站的原版样式。小米商城 可以F12检查代码案例的核心思路分为两步1.把链接a 转换为块级元素,这样链接就可以单独占一行,并且有宽度和高度2.鼠标经过a给 链接设置背景颜色第一步搭建结构!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title简单版小米侧边栏/titlestylea{}/* 鼠标经过a标签上面更换背景颜色 */a:hover{}/style/headbody!-- emmet语法a[href#]*7 --ahref#手机 电话卡/aahref#电视 盒子/aahref#笔记本 平板/aahref#出行 穿戴/aahref#智能 路由器/aahref#健康 儿童/aahref#耳机 音响/a/body/html【图2-2】第一步:搭建结构第二步行内元素转换成块级元素style a{/* 把a标签转换为块级元素-行内转块级 */display:block;width:230px;height:40px;background-color:#535758;/* 行高文字高度-实现垂直居中 */line-height:40px;}/style【图2-3】第二步:转换元素、设置宽高第三步设置超链接文字的样式style a{/* 把a标签转换为块级元素-行内转块级 */display:block;width:230px;height:40px;background-color:#535758;/* 行高文字高度-实现垂直居中 */line-height:40px;/* 设置字体大小和颜色去除下划线 */font-size:14px;color:#fff;text-decoration:none;/*文字首行缩进2字符*/text-indent:2em;}/style【图2-4】第三步:设置超链接样式第四步设置鼠标悬停改背景色style/* 鼠标经过a标签上面更换背景颜色 */a:hover{background-color:#FF6F00;}/style三、五彩导航3.1 案例素材这些素材是我用PPT做的做好之后截图做得不是那么完美然后修改尺寸和代码中设置得数值一样、即为和a块元素同样大小宽 width: 120px; 高 height: 58px;【图3-1】五彩导航1【图3-2】五彩导航2【图3-3】五彩导航3【图3-4】五彩导航4【图3-5】五彩导航53.2 效果和完整代码!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title综合案例-五彩导航/titlestyle/* 后代选择器 */.nav a{/* 把a转换为行内块元素 */display:inline-block;width:120px;height:58px;/*添加背景图前查看大小加个背景色*/background-color:red;/* 设置水平、垂直居中 */text-align:center;line-height:38px;/* 文字白色、取消下划线 */color:#fff;text-decoration:none;}/* 后代选择器-给第一个链接加背景且不重复平铺 */.nav .bg1{background:url(/CSS/img/五彩导航1.png)no-repeat;}/* 设置超链接鼠标悬停换背景图 */.nav .bg1:hover{background-image:url(/CSS/img/五彩导航4.png);}/* 设置第二个链接 */.nav .bg2{background:url(/CSS/img/五彩导航2.png)no-repeat;}.nav .bg2:hover{background-image:url(/CSS/img/五彩导航3.png);}/* 第三个 */.nav .bg3{background:url(/CSS/img/五彩导航3.png)no-repeat;}.nav .bg3:hover{background-image:url(/CSS/img/五彩导航4.png);}/* 第四个 */.nav .bg4{background:url(/CSS/img/五彩导航4.png)no-repeat;}.nav .bg4:hover{background-image:url(/CSS/img/五彩导航5.png);}/* 第五个 */.nav .bg5{background:url(/CSS/img/五彩导航5.png)no-repeat;}.nav .bg5:hover{background-image:url(/CSS/img/五彩导航1.png);}/style/headbody!-- emmet语法div.nava[hrefjavascript:void(0)].bg${五彩导航}*6 --divclassnavahrefjavascript:void(0)classbg1五彩导航/aahrefjavascript:void(0)classbg2五彩导航/aahrefjavascript:void(0)classbg3五彩导航/aahrefjavascript:void(0)classbg4五彩导航/aahrefjavascript:void(0)classbg5五彩导航/a/div/body/html五彩导航-练习价值:1.链接属于行内元素,但是此时需要宽度高度,因此需要模式转换.2.里面文字需要水平居中和垂直居中.因此需要单行文字垂直居中的代码3.链接里面需要设置背景图片.因此需要用到背景的相关属性设置.4.鼠标经过变化背景图片,因此需要用到链接伪类选择器鼠标悬停后改变的背景图片可以换成页面上没有的颜色可以让导航栏色彩丰富这里我偷个懒鼠标悬停后的背景图是当前导航栏的另外一个背景图。四、 列表菜单栏列表在网站前端使用得是比较频繁的通常会使用列表来制作网站导航、新闻列表等等。4.1 效果和完整代码!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleCSS列表案例/titlestylea{/* 去除超链接下划线 */text-decoration:none;color:#ffffff;}ul{padding:0;/*清除列表外边距*/margin:0;/*清除列表内边距*/list-style-type:none;/*清除列表项目符号*/}li{width:120px;height:37px;border:1px solid #169;/*设置列表边框粗细为1*/margin:4px 2px;/*设置列表项外边距*/text-align:center;/*设置列表项文字水平居中*/line-height:37px;/*设置列表项文本行高实现垂直居中*//* 设置背景图和鼠标悬停改变背景图 */background-color:black;}/* 设置背景色和鼠标悬停改变背景色 */li:hover{background-color:rgb(75,0,226);}/style/headbody!-- Emmet语法 ulli*6a[hrefjavascript:void(0)]{菜单设计$}--ulliahrefjavascript:void(0)菜单设计1/a/liliahrefjavascript:void(0)菜单设计2/a/liliahrefjavascript:void(0)菜单设计3/a/liliahrefjavascript:void(0)菜单设计4/a/liliahrefjavascript:void(0)菜单设计5/a/liliahrefjavascript:void(0)菜单设计6/a/li/ul/body/html4.2 空链接井号和void(0)的区别一、基础概念与使用场景1. 什么是空链接空链接是点击后不跳转到新页面 / 锚点的a标签核心作用是 “保留链接外观手型光标、下划线同时仅作为交互元素”。2. 空链接的使用场景适用于 “需要可点击元素但不需要跳转” 的场景下拉菜单的触发按钮弹窗的唤起文字临时占位的可点击项后续补充实际链接。3. 井号空链接href“#”这是 HTML 原生的空锚点链接概念#代表页面 “根锚点”点击后会自动跳转到当前页面的顶部位置代码示例ahref#井号空链接点击会回顶/a4.JavaScript void 空链接hrefjavascript:void(0)这是通过 JavaScript 阻止跳转的方式概念javascript:表示执行后续代码void(0)执行 “空逻辑” 并返回undefined浏览器接收到undefined后不执行任何跳转 / 滚动代码示例ahrefjavascript:void(0)void(0)空链接点击无跳转/a两者的核心区别对比维度井号空链接href“#”JavaScript void 空链接href“javascript:void(0)”点击后行为跳转到页面顶部无任何跳转、滚动行为页面滚动影响触发页面滚动回到顶部不改变页面滚动状态适用场景需 “点击回顶” 的交互如回到顶部按钮纯交互、不需要页面变化的场景!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title空链接区别演示/titlestyle/* 让页面足够长方便观察滚动 */body{height:2000px;padding:20px;}.link-group{margin:100px 0;}a{margin-right:20px;}/style/headbodyh1先向下滚动页面再点击链接/h1divclasslink-groupp井号空链接ahref#点击我会回到页面顶部/a/ppvoid(0)空链接ahrefjavascript:void(0)点击我无任何变化/a/p/div/body/html案例效果先向下滚动页面远离顶部点击 “井号空链接”页面立即滚动回顶部点击 “void (0) 空链接”页面保持当前位置无任何变化。