css练习----首页练习

悠闲的线程池

已于 2022-05-10 22:42:33 修改

阅读量1.8k

点赞数 2

文章标签： css 前端 html

于 2022-05-09 19:20:17 首次发布

本文链接：https://blog.csdn.net/weixin_44235759/article/details/124638920

版权

①HTML&css&js&jQuery 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

本文详细讲解了如何构建和样式化首页的顶部导航栏，包括布局、样式、下拉层和logo设计。涉及CSS文件结构、公共样式、导航菜单、购物车、用户信息区，以及轮播图和工具条的实现。适合前端开发者深入理解导航栏开发实践。

摘要由CSDN通过智能技术生成

在这里插入图片描述

结构搭建

① 建包，以及css文件，并在首页引入对应文件

在这里插入图片描述

base.css ：公共css文件
index.css: 首页css文件
reset.css: 浏览器初始化样式文件
fa：图标字体
img: 存储图片文件夹

②base.css

在这里插入图片描述

字体设置
清除浮动，外边距折叠问题

导航条

1、导航条结构

①定义内容宽度样式

在这里插入图片描述

②定义topbar的结构

在这里插入图片描述

<body>
    <!-- 顶部导航条 -->
    <!-- 顶部导航条外部容器 -->
    <div class="topbar-wrapper">
        <!-- 创建内部容器 -->
        <div class="topbar">
            <!-- 左侧的导航 -->
            <ul class="service">
                <li><a href="javascript:;">小米商城</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">MIUI</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">loT</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">云服务</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">金融</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">有品</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">小爱开放平台</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">企业团购</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">资质证照</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">协议规则</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">下载app</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">Select Location</a></li>
            </ul>

            <!-- 购物车 -->
            <ul class="shop-cart">
                <li><a href="javascript:;">
                        <i class="fas fa-shopping-cart"></i>
                        购物车（0）
                    </a>
                </li>
            </ul>

            <!-- 用户登录注册 -->
            <ul class="user-info">
                <li><a href="javascript:;">登录</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">注册</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">消息通知</a></li>
            </ul>
        </div>
    </div>
</body>

2、导航条样式

①布局样式添加

在这里插入图片描述

②细节样式补充

在这里插入图片描述

3、导航下拉层（二维码）

①结构搭建及布局

在这里插入图片描述

②样式书写

在这里插入图片描述

③过度效果替换hover

在这里插入图片描述

头部导航

在这里插入图片描述

LOGO

①结构

在这里插入图片描述

②定位

在这里插入图片描述

③收尾样式调整

在这里插入图片描述

导航栏

①结构

在这里插入图片描述

②弹出层

在这里插入图片描述

输入框

①结构

在这里插入图片描述

②基本样式

在这里插入图片描述

③添加hover

在这里插入图片描述

Banner

轮播图

①结构

在这里插入图片描述

②样式

在这里插入图片描述

工具条

在这里插入图片描述

广告栏

①结构分析

在这里插入图片描述

②样式

在这里插入图片描述

成果展示

代码
在这里插入图片描述

补充（css vscode 压缩插件介绍）

在这里插入图片描述

返回css主线战场

悠闲的线程池

关注

2
点赞
踩
55

收藏

觉得还不错? 一键收藏
打赏
4
评论
css练习----首页练习

结构搭建① 建包，以及css文件，并在首页引入对应文件base.css ：公共css文件index.css: 首页css文件reset.css: 浏览器初始化样式文件fa：图标字体img: 存储图片文件夹②base.css字体设置清除浮动，外边距折叠问题导航条结构①定义内容宽度样式②定义topbar的结构<body>   <div c.
复制链接

扫一扫