【计算机专栏-前端-项目】1、小兔生鲜

ch333915

已于 2023-01-25 20:08:42 修改

阅读量77

点赞数

文章标签：前端 javascript html

于 2023-01-21 16:55:29 首次发布

本文链接：https://blog.csdn.net/ch333915/article/details/128746185

版权

基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

【计算机专栏-前端-项目】1、小兔生鲜

1、标题头
2、顶端菜单栏
3、底部告示栏

1、标题头

<head>
	<meta charset="utf-8" />
	<title>小兔生鲜</title>
   	<meta name="description" content="小兔生鲜，致力于打造全球最大的食品、生鲜电商购物平台。" />
   	<meta name="keywords" content="小兔生鲜,食品,生鲜,服装,家电,电商,购物" />
   	//<!--  标签栏图标  -->
   	//<!--  type="image/x-icon" 表示icon类型  -->
   	<link rel="icon" href="favicon.ico" type="image/x-icon">
   	//<!--  引用CSS文件  -->
   	<link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
</head>

2、顶端菜单栏

在这里插入图片描述

序号	区域	CSS
1	container	宽度、左右外边框
2	xtx-shortcut	高度、背景颜色
3	1+2+li	左浮动（不然会换行显示）、文字高度居中、颜色
4	1+2+a	左右外边框、颜色、文字大小
5	2+a鼠标经过	颜色
6	2+li最后一个+a	左右外边框=0
7	2+mobile::before	块元素转化（行内非替换元素，比如span、a等标签，正常情况下不能设置宽高，加上该属性之后，就可以触发让这类标签表现得如块级元素一样，可以设置宽高）、宽、高、右外边框、背景图片截取、垂直居中

8	xtx-main-nav	高度、上方内边距
9	8+logo	宽度、高度、右边外边距
10	8+logo+a	块元素转化、宽高背景图片大小100%、背景地址、隐藏文字
11	8+li	左浮动、右边外边框、文字居中
12	8+li最后一个	右边外边框
13	8+li+鼠标经过	下方内边框颜色宽度、颜色
14	8+search	相对定位、宽高、上方外边距
15	8+search::before	绝对定位（与14配合使用）+左上距离、宽高、背景图片截取
16	8+search+input	宽、高、下边框宽度颜色、左内边距
17	8+cart	相对定位、宽高、左上外边距、背景图片截取
18	8+cart+span	绝对定位、顶部、右、宽高、背景颜色、文字大小、垂直居中、文字高度、颜色

<header>
    //<!-- 快捷菜单模块 -->
    <div class="xtx-shortcut">
      	<nav class="container">
	        <ul class="fr">
	          	<li><a href="#">登录</a>|</li>
				...
	          	<li><a href="#" class="mobile">手机版</a></li>
    //<!-- 主导航模块 -->
    <div class="xtx-main-nav container">
      	//<!-- 左侧的logo -->
      	<h1 class="logo fl">
        	<a href="#">小兔鲜</a>
      	</h1>	
      	//<!-- 中间的导航 -->
      	<nav class="fl">
        	<ul>
	          	<li><a href="#">首页</a></li>
				...
      	//<!-- 右侧的搜索 -->
     	<div class="search fl">
        	<input type="search" placeholder="搜一搜">
      	//<!-- 右侧的购物车 -->
      	<div class="cart fl">
        	<span>3</span>

3、底部告示栏

在这里插入图片描述

序号	区域	CSS
1	xtx-contact	高度
2	xtx-contact+container	顶部内边距、
3	xtx-contact+container+dl	左浮动（不然会换行显示）、宽度（1/4）、高度、文本居中、内减、行高
4	xtx-contact+container+dt	高度、顶部外边距、颜色
5	xtx-contact+container+dd	设置为行内块元素、垂直方向靠上

6	xtx-contact+customer+dd	宽高、颜色、字体大小、边框宽度颜色、
7	xtx-contact+customer+chat	右外边框
8	xtx-contact+chat::before	设置为行内块元素、宽高、外边距、背景图片