小兔鲜首页制作css

一、项目目录

项目名-客户端

xtx-pc

1.images:存放固定使用的图片,例如:logo、样式修饰图

2.uploads:存放非固定图片,例如:商品图、宣传图等需要上传的图片

3.iconfont:字体图标素材

4.css文件:

4.1base.css:基础的公共样式

4.2common.css:各个网页相同模块的重复样式,例如头部、底部

4.3index.css:首页css样式

5.index.html:首页html文件

二、 SEO搜索引擎优化

2.1提升SEO的三大方法

1.竞价排名

2.将网页制作成html标签

3.标签语义化(在合适的地方使用合适的标签)

2.2网页头部SEO标签 

title:网页标题标签

description:网页描述

keywords:网页关键词

三、Favicon图标

网页图标,出现在浏览器标题栏,增加网页辨识度

favicon.ico:一般存放在网站的根目录

使用link自动生成 

四、版心

公共样式存放到common.css文件

哪个元素需要就调用

设置上下边距为0,后续有需要再修改

/* 版心 */.wrapper{margin: 0 auto;width: 1240px;}

 五、快捷导航

5.1标签结构

通栏>版心>ul

5.2布局

flex-end  调整主轴对齐方式,右对齐

5.3常规样式

1.a靠内容撑开

2.右边块线,最后一个a不需要边块线(给a加的原因,a是行内元素靠内容撑开,边框线和文字一样高)

3.图标使用span标签引入,在文字前面

4.图标和文字取消基线对齐

.shortcut li .iconfont{margin-right: 4px;vertical-align: middle;
}

 5.4单独的样式

设置单独的类,对该样式单独设置

六、头部

6.1布局

.headder>logo>导航(nav)>搜索(search)>购物车(cart)

.header需要flex使内容在同一行

6.2logo

为了提升搜索排名,使用h1嵌套a的做法设置logo,把logo设置为a的背景图,a转为块级元素宽高和logo区域一样大

<div class="logo"><h1><a href="">小兔鲜</a></h1></div>

6.3导航

1.设置上边距和右边距拉开距离

2.ul>li>a结构

3.设置a的悬停转状态

6.4搜索

1.上右调整间距,上边的间距要减去整个头部区域的上间距

2.span放图标,input放入搜一搜文字

3.input有默认宽度优先生效,可能会超出父级范围

解决

1.重置宽度

2.width为0

4.设置搜一搜的文字需要选中input::placeholder属性

6.5购物车

1.先填内容,在调整位置

2.span放图标,i放数字

3.数字定位使用左对齐,如果文字多了向右撑开,可能盖住其他内容

七、底部

7.1布局

通栏>版心>服务>帮助中心>版权

7.2服务

1.嵌套h5和p,放图标和文字,使用css精灵做图标

2.调整上下间距,左右使用主轴对齐方式

3.文字使用行高使它垂直居中

4.选择不同的li设置背景图位置

.service li:nth-child(4) h5{

  background-position: 0 -174px;

}

7.3帮助中心

1.左右flex布局,左文字,右图片

2.左边的文字使用dl>dt+dd>a的结构

3.给文字放间距,最后一个dl不需要放,在调整主轴对齐方式自动拉开

4.右边

7.4版权

布局:

1.两行文字,第一行为超链接,第二行是文字

2.底部不需要考虑搜索引擎优化,不需要做ul嵌套li

1.文字居中对齐,修改颜色,a要选中才能修改

2.p>a*7   后面之间加|线

八、banner区域

 8.1布局

标签结构:通栏>版心>轮播图(ul.pic)>侧导航(subnav>ul)>圆点指示器

8.2图

使用ul嵌套li嵌套a的结构

父级宽度不够,子级被挤小,不想被挤小就放大父级宽度再隐藏图片

8.4侧导航

1.ul>li>div>a+span  (每一格为li,设置高度)

2.带头的字体较大单独设置类控制

3.箭头使用图标,flex布局调整主轴对齐方式

4.添加鼠标悬停状态

8.5小圆点

ol嵌套li

选中时圆点一大一小,书写时默认都是一大一小,选中状态单独设置

设置间距时,要减掉隐藏的大圆点距离

九、新鲜好物区域

9.1布局

1.标题+内容

2.标题一左一右公用

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/408935.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言 | Leetcode C语言题解之第371题两整数之和

题目&#xff1a; 题解&#xff1a; int getSum(int a, int b){ int c; while(b) {c(unsigned int)(a&b)<<1;a^b;bc; }return a; }

资产架构端口应用CDNWAF站库分离负载均衡

知识点&#xff1a; 1、资产架构-端口&目录&插件接口&多站点&多应用 2、番外安全-域名&服务器本身&服务厂商&管理人员 3、考虑阻碍-站库分离&CDN&WAF&负载均衡&主机防护 详细点&#xff1a; 1、前置条件-购买使用-云服务器&a…

第135天:内网安全-横向移动非约束委派约束委派数据库攻防

案例一: 横向移动-原理利用-非约束委派 该案例建立了解即可&#xff0c;真实环境应该不可能有人这样配置 非约束委派的原理和利用场景 原理&#xff1a; 机器 A &#xff08;域控&#xff09;访问具有非约束委派权限的机器 B 的服务&#xff0c;会把当前认证用户&#x…

Admin.NET源码学习(4:基于Furion的后台服务启动方式浅析)

Admin.NET为前后端分离架构&#xff0c;后台服务的入口项目为Admin.NET.Web.Entry&#xff0c;其与其它项目的依赖关系如下图所示。   由于项目采用Furion框架&#xff0c;后台服务启动方式、注册方式、配置方式等方面与常规的asp.net core项目差异明显&#xff0c;初步接触…

初识C语言指针(5)

目录 1. 回调函数 2. qsort函数 2.1 qsort函数的基本参数 2.2 qsort函数的使用 2.3 qsort排序结构体类型数据 结语 1. 回调函数 什么是回调函数呢&#xff1f;回调函数就是⼀个通过函数指针调⽤的函数。 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另…

如何使用ssm实现铁岭河医院医患管理系统+vue

TOC ssm077铁岭河医院医患管理系统vue 系统概述 进过系统的分析后&#xff0c;就开始记性系统的设计&#xff0c;系统设计包含总体设计和详细设计。总体设计只是一个大体的设计&#xff0c;经过了总体设计&#xff0c;我们能够划分出系统的一些东西&#xff0c;例如文件、文…

《黑神话:悟空》中的实景三维建模

这几天&#xff0c;国产游戏《黑神话:悟空》终于面世&#xff0c;迅速引爆了全球游戏市场。作为一款以《西游记》为背景的3A级动作角色扮演游戏&#xff0c;《黑神话:悟空》不仅在文化表达上极具吸引力&#xff0c;其背后的技术实力更是令人瞩目。本文将深入探讨&#xff0c;3A…

UEditor百度富文本后端上传文件接口

UEditor百度富文本后端上传文件接口 直接上代码 接口&#xff1a; RequestMapping("/UEditorConfig")public String list(HttpServletRequest request, HttpServletResponse response) throws IOException {String config environment.getProperty("ueditor.c…

C/C++逆向:寻找main函数(Debug-x86)

在程序的逆向分析中&#xff0c;寻找main函数在逆向分析中是非常重要的&#xff0c;它是程序的核心执行点&#xff0c;从这里开始&#xff0c;程序的主要逻辑开始展开&#xff1b;在这边我们需要明确两个概念&#xff1a;用户入口&#xff08;User Entry Point&#xff09; 和 …

【HarmonyOS】鸿蒙应用蓝牙功能实现 (三)

【HarmonyOS】鸿蒙应用蓝牙功能实现 &#xff08;三&#xff09; 前言 今天整理蓝牙Demo代码&#xff0c;查看官网时发现自己帐号没有登录&#xff0c;竟然也可以访问最新的API文档&#xff0c;真是喜大奔普。看来华为已经开始对外开放最新的API文档&#xff0c;不再有白名单…

《机器学习》—— 使用过采样方法实现逻辑回归分类问题

文章目录 一、什么是过采样方法&#xff1f;二、使用过采样方法实现逻辑回归分类问题三、过采样的优缺点 本篇内容是 基于Python的scikit-learn库中sklearn.linear_model 类中的 LogisticRegression&#xff08;&#xff09;逻辑回归方法实现的&#xff0c;其内容中只是在处理…

使用Java进行中小学违规教育培训数据采集实践-以某城市为例

目录 前言 一、违规教育信息 1、内容管理 2、转换后的内容 二、数据库设计 1、空间数据库 三、字符地址位置转换空间信息 1、实现时序图 2、后台实体类的设计与实现 3、数据持久化操作 四、总结 前言 时间来到2024年8月24日&#xff0c;时间过得很快&#xff0c;2024…

芯片后端之 PT 使用 report_timing 产生报告 之 -include_hierarchical_pins 选项

今天,我们再学习一点点 后仿真相关技能。 那就是,了解 report_timing 中的 -include_hierarchical_pins 选项。 如果我们仅仅使用如下命令,执行后会发现: pt_shell> report_timing -from FF1/CK -to FF2/d -delay_type max 我们使用命令 report_timing 报出的如上路…

C++篇:C向C++迈进(上)

引言 C语言作为编程基石&#xff0c;其高效与直接性深受开发者喜爱。然而&#xff0c;随着软件复杂度的增加&#xff0c;C以其面向对象及高级特性成为了新的选择。我们接下来将学习C&#xff0c;从C语言迈向C。 什么是C C 是一种高级语言&#xff0c;由 Bjarne Stroustrup 于…

python测试框架之Pytest

初识Pytest Pytest1.Pytest的特点&#xff1a;2.Pytest的基本使用规则3.pytest安装1&#xff09;使用编译器安装2&#xff09;使用命令安装 4.pytest规则 Pytest Pytest是python的一个第三方单元测试库&#xff0c;它的目的是让单元测试变得容易&#xff0c;并且也能扩展到支持…

VSCode插件 live Server

普通打开 安装live Server 包含端口 说明内置了服务器

视频插帧—— RIFE 和 IFNet 的机制和应用

介绍 最近&#xff0c;数字和模拟技术开始加速融合。我们生活在一个人工智能技术能够显著提高质量的时代&#xff0c;只要模拟材料能够数字化。 例如&#xff0c;讨论中涉及到的纸艺软件&#xff0c;纸龙的移动模型被时间锁定&#xff0c;以大约 3 fps&#xff08;每秒帧数&a…

一元四次方程求解-【附MATLAB代码】

目录 前言 求解方法 MATLAB验证 附&#xff1a;一元四次方程的故事 前言 最近在研究机器人的干涉&#xff08;碰撞&#xff09;检测&#xff0c;遇到了一个问题&#xff0c;就是在求椭圆到原点的最短距离时&#xff0c;构建的方程是一个一元四次方程。无论是高中的初等数学…

Flink1.18 同步 MySQL 到 Doris

一、前言 使用Apache Flink实现数据同步的ETL&#xff08;抽取、转换、加载&#xff09;过程通常涉及从源系统&#xff08;如数据库、消息队列或文件&#xff09;中抽取数据&#xff0c;进行必要的转换&#xff0c;然后将数据加载到目标系统&#xff08;如另一个数据库…

【Node】【1】node和nvm安装

安装nvm、node、npm 安装node 18 &#xff0c;最简单的办法是使用nvm&#xff0c;就不用手动安装了&#xff0c;那么就得先安装nvm。 NVM 是Node Version Manager&#xff0c;用于管理 Node.js 版本。你设备上的不同项目可能使用不同版本的 Node.js。通过 nvm&#xff0c;用户…