程序员经验分享-hwhale

实验二 使用CSS样式美化购物列表页面中的菜单导航以及商品展示

2023-05-16

一、实验目的

掌握CSS定义文字、背景图片、超链接控制、列表等常用属性的设置

二、实验要求

  1. 在购物列表页面中，通过<ul>标签来实现菜单导航栏，然后使用css样式控制菜单栏的位置和样式，效果如下：

 

  1. 使用CSS样式美化购物列表页面中的商品展示区，商品展示区分为“最新上架”和“品牌活动”两部份，两模块采用div-ul-li方式排版，效果如下：

最新上架部分：

 

品牌活动部分：

 

具体代码如下（仅供参考）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.daohang{
	background-color:#F00;}
.daohang ul{
	width:700px;
	height:30px;
	margin:2px auto;
	list-style:none;
	padding:0px;
	}
.daohang ul li{
	width:100px;
	height:30px;
	line-height:30px;
	text-align:center;
	float:left;
	margin:0px;}
.daohang ul li a {
	text-decoration:none;
	color:white;}
.daohang ul li:hover{
	background-color:red;}
.daohang ul li a:hover{
	color:yellow;}
.new{
	margin:2px auto;
	width:660px;
	height:620px;
	border:1px solid white;}
.new h2{
	background-color:#F93;
	color:white;
	padding:10px;
	height:30px;}
.new ul{
	width:660px;
	height:520px;
	border:1px;
	list-style:none;
	padding:0px;}
.new ul li{
	width:150px;
	float:left;
	margin-left:10px;
	text-align:left;}
.f1{
	color:red;
	margin-right:20px;
	font-size:12px;
	font-weight:bolder;}
.f2{
	color:grey;
	font-size:12px;}
.f3{
	color:black;
	font-size:13px}
.active{
	margin:2px auto;
	width:700px;
	height:400px;
	border:1px solid white;}
.active h2{
	background-color:#F93;
	color:white;
	padding:8px;
	height:30px;}
.active ul{
	width:700px;
	height:400px;
	border:1px;
	list-style:none;
	padding:0px;}
.active ul li{
	width:160px;
	float:left;
	margin-left:12px;
	text-align:left;
	font-size:13px}
</style>
</head>

<body>
<div class="daohang">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">最新上架</a></li>
<li><a href="#">品牌活动</a></li>
<li><a href="#">原厂直供</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">限时抢购</a></li>
<li><a href="#">促销打折</a></li>
</ul>
</div>

<div class="new">
<h2>最新上架</h2>
<ul>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu1.jpg" width="150" height="180" />
<p><span class="f1">&yen;198.00元</span><span class="f2">324人购买</span><br />
<span class="f3">冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu2.jpg" width="150" height="180" />
<p><span class="f1">&yen;68.00元</span><span class="f2">534人购买</span><br />
<span class="f3">2015夏新款韩版 透气舒适简约半截袖T恤衫</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu3.jpg" width="150" height="180" />
<p><span class="f1">&yen;160.00元</span><span class="f2">643人购买</span><br />
<span class="f3">韩版甜美气质亮片热气球字母中长款圆领短袖T恤</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu4.jpg" width="150" height="180" />
<p><span class="f1">&yen;210.00元</span><span class="f2">678人购买</span><br />
<span class="f3">2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu5.jpg" width="150" height="180" />
<p><span class="f1">&yen;70.00元</span><span class="f2">567人购买</span><br />
<span class="f3">2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu6.jpg" width="150" height="180" />
<p><span class="f1">&yen;146.00元</span><span class="f2">4567人购买</span><br />
<span class="f3">大码女装胖mm2015夏装新款韩版显瘦露肩镂空连衣裙</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu7.jpg" width="150" height="180" />
<p><span class="f1">&yen;69.00元</span><span class="f2">1345人购买</span><br />
<span class="f3">v领雪纺背心女夏外穿双层吊带打底衫百搭显瘦无袖上衣</span></p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/yifu8.jpg" width="150" height="180" />
<p><span class="f1">&yen;239.00元</span><span class="f2">789人购买</span><br />
<span class="f3">韩版印花无袖短裙背心裙女高腰连衣裙A字裙秋季</span></p></li>
</ul>
</div>

<div class="active">
<h2>品牌活动</h2>
<ul>
<li><img src="我爱计科/web作业/实验2/images/shopshow/dress1.jpg" width="160" height="280" />
<p>独家定制V双层欧根纱里衬色织时装料大牌范蓬蓬长裙</p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/dress2.jpg" width="160" height="280" />
<p>夏季新款 子域D5656E 简约通勤腰带修身大摆短袖连衣裙</p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/dress3.jpg" width="160" height="280" />
<p>艾美斯 2015夏季优雅显瘦大摆长裙 中长款复古印花淑女裙</p></li>
<li><img src="我爱计科/web作业/实验2/images/shopshow/dress4.jpg" width="160" height="280" />
<p>亿婷2015夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙</p></li>
</ul>
</div>

</body>
</html>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

实验二 使用CSS样式美化购物列表页面中的菜单导航以及商品展示 的相关文章

  • Ubuntu常见问题及解决办法

    在刚开始使用Ubuntu系统时 xff0c 总会遇到各种各样的小问题 xff0c 这里整理了一些遇到的问题及解决办法 xff0c 不断更新中 xff01 xff01 xff01 目录 一 创建文件夹权限不够 1 1 问题描述 1 2 解决办

  • 计算机网络考试题库

    第1章 计算机网络概论 1 xff0e 在20世纪50年代 xff0c 和 xff08 xff09 技术的互相结合 xff0c 为计算机网络的产生奠定了理论基础 2 xff0e 从传输范围的角度来划分计算机网络 xff0c 计算机网络可以分

  • Spring，搭建Spring环境

    控制反转 xff1a 控制了对象的创建 xff0c 反转 xff1a 反转的是获取对象的方式 xff0c 从自己创建对象变为由Spring工厂推送 1 搭建Spring环境 xff0c 导入依赖 spring aop xff1a 开发AOP

  • 【Vxworks操作系统】系统介绍与系统组成-NO.1

    目录 1 VxWorks系统介绍 2 VxWorks特点 3 vxWorks操作系统的组成 1 xff09 实时操作系统核心Wind 2 xff09 I O系统 3 xff09 文件系统 4 xff09 板级支持包 xff08 BSP xf

  • 【Vxworks操作系统】实时多任务介绍-NO.2

    目录 实时多任务 1 1 任务生命周期管理 1 2 任务状态控制 1 3 任务调度 1 4 用户接口 结语 xff1a 实时操作系统是基于多任务和任务间通信的概念的操作系统 xff0c 多任务环境允许一个实时应用由一组各自独立的任务组成 x

  • HDU 6298(数学)

    题意是给出一个数 xff0c 找出这个数的三个因子且这三个因子的和等于这个数 xff0c 输出满足条件的乘积最大的一组因子的乘积 xff0c 如果不存在这样的因子 xff0c 就输出 1 第一次 wa 了 xff0c 因为把题目中的 x n

  • libevent的http服务详解

    libevent的http服务详解 即远程调用 xff0c 得到一个call ID然后验证外部远程参数 span class token function evrpc request cb span span class token pun

  • 创建物理卷报错Can‘t open /dev/sdb1 exclusively. Mounted filesystem?以及对应的解决方法

    创建物理卷报错Can 39 t open dev sdb1 exclusively Mounted filesystem 以及对应的解决方法 一 xff1a 报错二 xff1a 解决方法 一 xff1a 报错 1 添加一块硬盘 2 对硬盘分

  • windows server 2012r2 开启远程桌面

    电脑 右键 属性 远程设置 允许远程连接此计算机 勾选 选择用户 添加administrator 开始 运行 gpedit msc 计算机配置 管理模板 Windows组件 远程桌面服务 连接 允许用户通过使用远程桌面服务进行远程连接 打开

  • Obsidian 多端同步实现

    原文地址 1 前言 如何将 windows 和 android 端的 obsidian 同步 xff1f 可以选择官方的 Obsidian Sync 服务 xff0c 或者使用 FolderSync 等同步工具 本文介绍一种基于 Git 的

  • Github Page 个人主页——项目部署

    本人博客 一 前言 想搭建自己的网站吗 xff1f 通常需要买一台服务器 xff0c 购买一个域名进行备案后 xff0c 解析到自己的服务器 xff0c 还要搭建环境 xff0c 后期运维等等 本文提供一种基于 Github Page 服务

  • Github Page 个人主页——CDN加速

    原文地址 1 前言 前两篇文章介绍了 如何部署静态网站 以及 给网站自定义域名 xff0c 到目前为止 xff0c 您已经拥有一个使用自己的域名的网站了 在访问个人网页时 xff0c 实质上是去Github的服务器上取资源的 xff0c 但

  • Github Page 个人主页——Hexo博客

    原文地址 一 前言 在前三篇文章介绍了如何部署一个属于自己的站点网页 xff0c 但是只有个人主页有些单调 xff0c Github Page 的本质是部署web站点 xff0c 所以不仅可以部署个人主页 xff0c 还可以将自己的博客部署

  • Android 开发——环境搭建

    原文地址 一 前言 1 1 Android Studio 简介 Android Studio 是谷歌推出的一个Android集成开发工具 xff0c 基于IntelliJ IDEA 类似 Eclipse ADT xff0c Android

  • 【Matlab】音频信号谱分析及椭圆滤波处理

    前言 一个使用matlab对音频信号进行频谱分析及滤波处理的学习笔记 xff0c 本文使用的是椭圆滤波器 音频下载 demo mp3 频谱分析 读取音频信号进行傅里叶变换 x fs 61 audioread 39 D demo mp3 39

  • 【Matlab】BPSK二进制相移键控波形生成

    前言 一个通信原理课程中使用Matlab生成BPSK波形的实验笔记 内容 设发送二进制信息为10011101 xff0c 码元速率为1波特 xff0c 载波 sin wt xff0c 幅值为1 xff0c 初始相位为0 当载波频率为2Hz

  • 【转】【面试】如果你这样回答“什么是线程安全”，面试官都会对你刮目相看...

    有读者跟我说 xff0c 喜欢看我的文章 xff0c 说很容易读 xff0c 我确实在易读性上花费的心思不亚于在内容上 因为我不喜欢一上来就堆很多东西 xff0c 而且把简单的东西搞得复杂人人都会 xff0c 但是把复杂的东西讲的简单 xf

  • 【Matlab】2FSK二进制频移键控波形生成

    前言 一个通信原理课程中使用Matlab生成2FSK波形的实验笔记 内容 设发送二进制信息为10011101 xff0c 码元速率为1波特 xff0c 载波 cos wt xff0c 幅值为1 xff0c 初始相位为0 当载波频率分别为3H

  • 【Matlab】QPSK四进制绝对相移调制波形生成

    前言 一个通信原理课程中使用Matlab生成QPSK波形的实验笔记 内容 设发送二进制信息为10011101 xff0c 码元速率为1波特 xff0c 载波 sin wt xff0c 幅值为1 xff0c 初始相位为0 当载波频率为2Hz

  • 【Matlab】DQPSK四进制相对相移调制波形生成

    前言 一个通信原理课程中使用Matlab生成DQPSK波形的实验笔记 内容 设发送二进制信息为10011101 xff0c 码元速率为1波特 xff0c 载波 sin wt xff0c 幅值为1 xff0c 初始相位为0 当载波频率为2Hz

随机推荐

  • archlinuxmanjaro安装中文输入法（fcitx5）

    archlinux manjaro安装中文输入法 xff08 fcitx5 xff09 装好了manjaro xff0c 但是他并没有我们的母语中文的输入法 xff0c 这要怎么办呢 xff1f 当然是自己装了 xff08 又水了好几句 x

  • vm安装centos7系统后，使用ifconfig命令 ens33 没有IP地址

    这个问题目前发现俩种情况 1 没有配置ens33文件 2 配置了 ens33文件 xff0c 重启后又没有ip地址了 问题一解决 xff1a 安装好centos7后 xff0c 使用ifconfig命令 xff0c 发现 ens33 没有i

  • 操作系统：用c++模拟生产者消费者问题

    操作系统 xff1a 用c 43 43 模拟生产者消费者问题 一 实验目的 xff1a 通过实验模拟生产者与消费者之间的关系 xff0c 了解并掌握他们之间的关系及其原理 由此增加对进程同步的问题的了解 二 实验要求 xff1a 每个进程有

  • Java实现快排(图文讲解)

    文章目录 Java实现快速排序快速排序原理快速排序一次划分图文演示过程整个快速排序的过程具体Java代码实现简结快速排序的性能 Java实现快速排序 冲鸭 xff0c 装上涡轮增鸭 xff0c 开始学习快速排序算法吧 xff01 xff08

  • Repository ‘base‘: Error parsing config: Error parsing “gpgkey = ‘file“///etc/pki/rpm-gpg/RPM-GPG-KE

    Repository base Error parsing config Error parsing gpgkey 61 39 file etc pki rpm gpg RPM GPG KEY CentOS 7 34 No closing

  • Ranger之对资源策略配置的导入导出（五）

    导入和导出基于资源的策略 您可以在恢复操作期间或将策略从测试集群移动到生产集群时 xff0c 从Ranger Admin UI 用于集群弹性 备份 导出和导入策略 您可以导出 导入特定的策略子集 例如那些属于特定资源或用户 组的策略 xff

  • gcc编译时报错 fatal error: stdio.h: 没有那个文件 解决方法

    在linxu系统中 xff0c 编写c语言程序我们需要使用到GCC编译器 但是当我们成功安装后使用的时候 xff0c 编译程序 xff0c 例如执行编译命令 xff1a gcc hello c o hello out 结果报错了 xff0c

  • Aug.2019_Memory

    转眼间这半个月的时光已经过去了 xff0c 现在就像妈说的 xff0c 生活又要回归正常了 尽管我一直不愿意去承认说前半个月的时光是一种不正常的生活 xff0c 但有一点是我无法否认的 xff0c 那就是那些人和那些事所带给我的 想想最初自

  • 浅析大数据与经济学

    浅析大数据与经济学 摘 要 文章从大数据的发展现状分析入手 讨论了大数据对传统经济学带来的机遇与挑战 运用大数据经济学的概念 xff0c 分析了大数据经济学与信息经济学 信息技术等相关学科的关系 并将理论研究与实践应用实时地统一在一起 最后

  • 数据结构_队列应用-医院挂号看病(C语言）

    通过简单的实现医院挂号看病功能 xff0c 实现对数据结构队列的简单应用 本设计中医院挂号看病主要有病人挂号 查看就诊队列 就诊 下班等功能 span class token macro property span class token

  • Win10系统安装教程

    Win10安装教程 准备 xff1a 一个不小于8G的U盘 xff0c 一台可以上网的电脑 第一步 xff0c 打开浏览器 xff0c 搜索 Win10下载 找到微软官方的下载网址 xff0c 我这里有两个 xff0c 一个中文页面一个英文

  • 本地连接服务器mysql非常慢

    出现问题 经常使用navicat等软件连接服务器的mysql数据库很长时间 xff0c 才能连接上 xff0c 在项目中 xff0c 进行数据库操作 xff0c 也会很慢 原因分析 默认情况下 xff0c mysql会自动开启DNS反向解析

  • uniapp实现微信登录

    项目描述 使用uniapp框架编写微信小程序 xff0c 使用自己的后端 xff0c 实现微信登陆功能 登录流程 此处参考微信官网提供的 小程序登录流程时序 如下图 xff1a 图片来源 xff1a 微信官方API文档 所以登录的流程即 x

  • 程序设计大赛试题及答案

    Problem A 比赛须知 Description 小邯来参加邯郸学院大学生程序设计竞赛 由于这场比赛在线上举行 xff0c 有很多需要遵守的规则 有一条规则是 xff0c 为了避免对题目内容相关的提问被无关的提问淹没 xff0c 所有和

  • 使用uni-app框架中uni.chooseAddress()接口，获取不到用户收货地址

    错误描述 在我们使用uni app框架或微信原生开发微信小程序时 使用到uni chooseAddress OBJECT 接口获取用户收货地址时 无法跳转到收货地址页面获取 打印接口返回信息 显示 chooseAddress fail th

  • 软件工程-部分测试概念

    1 黑盒测试法 黑盒测试法也称功能测试 xff0c 这种方法将被测程序看成一个黑盒子 xff0c 测试人员完全不考虑程序的内部结构和处理过程 也就是说 xff0c 黑盒测试是在程序接口进行的测试 xff0c 它只检查程序功能是否按照需求规格

  • linux下安装libpcap

    1 安装GCC xff1a yum y install gcc c 43 43 2 安装flex xff1a yum y install flex 没有flex xff0c 直接安装libpcap会提示 34 Your operating

  • Spring练习题

    作业 简答题 Spring 是什么 xff1f 谈谈你对IOC的理解简述Spring IOC的启动过程说出bean工厂创建bean的三种方式 xff1f 在Spring中 xff0c bean的注入有几种方式 xff0c 各是什么 xff1

  • CentOS 7 安装XAMPP

    以下步骤如果包含Linux命令 xff0c 没有特别说明均在root下运行 1 首先安装CentOS xff0c 下载ISO的网址如下 xff0c 挑选最快的镜像站点下载 xff1a http isoredirect centos org

  • 实验二 使用CSS样式美化购物列表页面中的菜单导航以及商品展示

    一 实验目的 掌握CSS定义文字 背景图片 超链接控制 列表等常用属性的设置 二 实验要求 在购物列表页面中 xff0c 通过 lt ul gt 标签来实现菜单导航栏 xff0c 然后使用css样式控制菜单栏的位置和样式 xff0c 效果如

热门标签