HTML+CSS简单应用实例——购物网站的制作（五）
2024-06-05 18:32:32
HTML+CSS简单应用实例——购物网站的制作（五）
本页面是第三个商品页面。
下面是效果图：
分析：上方淘淘超市是一个DIV，下面超值套装每个商品是一个DIV，美容护肤是一个大表格。下面是脚本。
具体代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>淘淘超市</title><style>.Bar{width: 100%; background-color:#FFFFFF;height:100px;position: absolute;top:0px;left:0px;}.fi{color:black;margin-top: 120px;font-size: 32px;}.fi2{color:black;margin-top: 700px;font-size: 32px;}.ta{position: absolute;top:180px;left:255px;width: 1200px;}.ma{background-color: white;float: left;margin: 5px;}.table1{position: absolute;top:900px;left:245px;}.footer{ position:absolute;top:1200px;left:220px;width:1100px;margin:0 auto;border-top:#dddddd 1px solid;margin-top:600px; height: 210px; background: rgb(245,245,245);text-align: center;}.footer p{ margin-top:20px;}.footer a{color:#666;}.footer a:hover{ color:rgb(228, 121, 89);}.footer .fp{color:#666;margin-top:10px;}.footimg{width="120px";height: "10px";}</style></head><body bgcolor="plum"><div class="Bar"><p align="center" style="font-family: 宋体; font-size: 40px; color: #FF4500;"><b>淘淘超市</b></p></div><p class="fi" align="center" >-超值套装-</p><div class="ta"> <div class="ma"><img src="img/超市1.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 进口咔咔脆饼干</p><p style="font-size: 18px;color: red;font-family: '微软雅黑';"> ￥12.9</p></div><div class="ma"><img src="img/超市2.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 俄罗斯进口紫皮糖</p><p style="font-size: 18px; color: red;font-family: '微软雅黑';"> ￥17.8</p></div><div class="ma"><img src="img/超市3.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 韩国三养火鸡面</p><p style="font-size: 18px;color: red;font-family: '微软雅黑';"> ￥28.9</p></div><div class="ma"><img src="img/超市4.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 印尼奶酪饼干</p><p style="font-size: 18px;color: red;font-family: '微软雅黑';"> ￥18.5</p></div><div class="ma"><img src="img/超市5.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 蒙牛纯甄常温酸奶</p><p style="font-size: 18px;color: red;font-family: '微软雅黑';"> ￥92.9</p></div><div class="ma"><img src="img/超市6.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 统一汤达人拉面</p><p style="font-size: 18px; color: red;font-family: '微软雅黑';"> ￥21.5</p></div><div class="ma"><img src="img/超市7.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 三只松鼠猪肉铺</p><p style="font-size: 18px;color: red;font-family: '微软雅黑';"> ￥36.9</p></div><div class="ma"><img src="img/超市8.jpg" width="250px" height="200px"><p style="font-size: 18px;font-family: '微软雅黑';"> 蒙牛成人牛奶粉</p><p style="font-size: 18px;color: red;font-family: '微软雅黑';"> ￥26.8</p></div></div><p class="fi2" align="center" >-美容护肤-</p><table cellspacing="10" class="table1"><tr><td rowspan="2"><img src="img/美容1.jpg" width="250px" height="500px"></td><td ><img src="img/美容11.jpg" width="250px" height="250px"></td><td><img src="img/美容12.jpg" width="250px" height="250px"></td> <td><img src="img/美容13.jpg" width="250px" height="250px"></td> </tr> <tr> <td><img src="img/美容21.jpg" width="250px" height="250px"></td><td><img src="img/美容22.jpg" width="250px" height="250px"></td><td><img src="img/美容23.jpg" width="250px" height="250px"></td> </tr> <tr> <td><img src="img/美容31.jpg" width="250px" height="250px"></td><td><img src="img/美容32.jpg" width="250px" height="250px"></td><td><img src="img/美容33.jpg" width="250px" height="250px"></td> <td><img src="img/润唇膏.jpg" width="250px" height="250px"></td></tr> </table> <div class="footer"><p><a href="#">联系我们</a> | <a href="#">诚聘英才</a> | <a href="#">合作招商</a> | <a href="#">广告平台</a></p><p class="fp">本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）</p><div class="footimg"><img src="img/冠名商标2.jpg" width="70px";height="60px";><img src="img/冠名商标.jpg" width="60px";height="40px"><img src="img/商标.jpg" width="70px";height="60px"><img src="img/商标2.jpg" width="60px";height="30px"></div></div></body>
</html>
HTML+CSS简单应用实例——购物网站的制作（五）相关推荐
- HTML+CSS简单应用实例——购物网站的制作（二）注册页面
HTML+CSS简单应用实例--购物网站的制作(二)注册页面 接上一篇文章,本片文章是注册页面. 下面是效果图: 分析:上方欢迎注册是DIV,下面是表单,点击登录按钮会出现注册成功提示.下方为脚本,同 ...
- HTML+CSS简单应用实例——购物网站的制作（四）
HTML+CSS简单应用实例--购物网站的制作(四) 本页面是第二个商品页面,做了个限时抢购的页面. 下面是效果图: 分析:上方限时抢购和12点准时开抢是两个DIV,下面每个商品是一个单独的DIV,总 ...
- HTML+CSS简单应用实例——购物网站的制作（七）
HTML+CSS简单应用实例--购物网站的制作(七) 本页面是客服页面. 效果图: 分析:上方是一个DIV,下面是两个表格,表格里有列表. 具体代码: <!DOCTYPE html> &l ...
- HTML+CSS 简单的顶部导航栏菜单制作
导航栏的制作: 技术要求: CSS HTML各类标签 实现目的: 制作导航栏菜单 代码分析: 基本样式清除 无序列原点删除 下划线删除 文字默认居中 a标签设置块级元素 伪类选择器对a状态修饰 分步实 ...
- HTML+CSS+JavaScript仿京东购物网站制作 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- 个人简介 - HTML/CSS简单页面实例
用 div + css 控制页面 1.position属性: absolute(绝对定位):参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位. 在没有设定 ...
- web前端期末大作业(我的家乡广安网页设计与制作)HTML+CSS网页设计实例 企业网站制作
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- javabean+servlet+JSP页面做购物网站 （附效果图+源码）
一个简单的jsp购物网站 概要 需求 用到的技术 效果图 登录页 登陆结果 购物页 消费记录页 管理用户信息和商品信息 数据库格式 踩过的坑 jdbc进行数据库操作 java动作指令结合jsp脚本 j ...
- div+css静态网页设计 电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 文章目录 HTML5期末大作业:电商购物网站设计- ...
最新文章
- 浅谈边缘计算对企业安全建设的影响及趋势
- Linux及文件系统基本介绍
- Python3空字符串和len()函数
- 计算机展望未来网络形态,在学习中展望未来
- mysql大批量数据写入_存储过程写入大批量数据，用于测试mysql查询优化
- 蓝屏分析_电脑突发蓝屏现象？教你如何快速修复
- 漫画：唐玄奘教你横扫 AVL 树面试题无敌手！
- 官方钦定TensorFlow2.0要改这个API，用户吐槽：全世界都是keras
- Python 文件处理命令
- c语言循环重新输入Y,大佬们帮帮忙 帮我改改 怎样能在输入Y后 再次进行for循环...
- c语言中的三角函数公式,tan三角函数公式有哪些
- map文件介绍及使用
- h3c虚拟服务器设置方法,h3c 设置虚拟服务器
- 360 os3.0 android7.1,【360 N6】360OS安卓7.1系统V3.0.070付费纯净版ROOT刷机包
- 一个生成Rockwell RSLogix5000 .csv 文件和.L5X文件的Excel插件
- 《Reading Wikipedia to Answer Open-Domain Questions》浅析
- 嵌入式linux与windows之间的tftp文件传输(保姆级)
- linux进程间通信有kindle版的,计算机网络6寸pdf适合kindle-1.pdf
- 基于Linux_ARM板的驱动烧写及连接、挂载详细过程(附带驱动程序)
- Lambda表达式和SteamAPI