html编写购物网站页面练习（一）

html制作购物页面(一)

-主页面index.html

<!DOCTYPE html>
<html>
<head><title>Document</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="index.css">
</head>
<body><!-- 页面结构划分 --><div id="container"><!-- 1.导航 --><div id="nav"><!-- 1.1右侧导航 --><ul class="rightNav"><li><a href="#">[登录]</a>，<a href="#">[注册，有惊喜]</a></li><li><b></b><a href="#">果园公告</a></li><li><b></b><a href="#">券卡兑换</a></li><li><b></b><a href="#">手机果园</a></li></ul><!-- 1.2左侧导航 --><ol class="leftNav"><li class="address"><span>上海</span>     <!-- 用于修改显示地区信息 --><!-- 左侧导航的三角标 --><u></u><!-- 地区下拉列表 --><ul class="select"><li>北京</li><li>广州</li><li>深圳</li></ul></li><li>满百包邮</li><li>星夜达</li></ol></div><!-- 2.横幅 --><div id="banner"><!-- 图片轮番播放 --><img src="1-270x270-430-9RBRWTU9.jpg"></div><!-- 3.今日推荐 --><div id="adv"><a href=""><img src="25af37592bf484fbeaef1cc4ff1e09c7.jpg"></a><a href=""><img src="2ba20598135dbba5e97d241ebfa167d9.jpg"></a><a href=""><img src="904419aa2e364412b3c07c3cbda24ef9.jpg"></a><a href=""><img src="2ba20598135dbba5e97d241ebfa167d9.jpg" class="lastImg"></a></div><!-- 4.主体信息 --><div id="main"><!-- 上方  生活卡券部分 --><div class="item"><p class="goodsClass"><img src="t4.png"><a href="#">更多</a></p><!-- 下方 商品信息展示 --><ul><li><p><img src="1-270x270-3877-BXDY6KCU.jpg"></p><div class="content"><a href="#"><img src="cart.png"></a><p>欢乐时光果篮</p><span>&yen;188.00/份</span></div></li><li><p><img src="1-270x270-3877-BXDY6KCU.jpg"></p><div class="content"><a href="#"><img src="cart.png"></a><p>欢乐时光果篮</p><span>&yen;188.00/份</span></div></li><li><p><img src="1-270x270-3877-BXDY6KCU.jpg"></p><div class="content"><a href="#"><img src="cart.png"></a><p>欢乐时光果篮</p><span>&yen;188.00/份</span></div></li><li><p><img src="1-270x270-3877-BXDY6KCU.jpg"></p><div class="content"><a href="#"><img src="cart.png"></a><p>欢乐时光果篮</p><span>&yen;188.00/份</span></div></li><li class="no-margin"><p><img src="1-270x270-3877-BXDY6KCU.jpg"></p><div class="content"><a href="#"><img src="cart.png"></a><p>欢乐时光果篮</p><span>&yen;188.00/份</span></div></li></ul></div></div><!-- 5.底部信息 --><div id="footer"></div></div>
</body>
</html>

index.css主要调整页面布局


/*调整页面布局*//*统一设置页面样式*/
body{/*字体样式   大小和名称*/font:12px "仿宋","黑体",sans-serif;color: #9a9a9a;
}/*清除默认样式*/
body,h1,h2,h3,h4,h5,h6,p,ol,ul{margin: 0;padding:0;list-style: none;
}
a{text-decoration: none;color: #9a9a9a;
}
a:hover{color: #64A131;
}/*设置照片的垂直对齐方式*/
img{vertical-align: bottom;
}/*宽度设置及居中效果*/
#container{width: 990px;margin: 0 auto;
}
/*导航部分样式*/
#nav{height: 30px;background: #eee;line-height: 30px;
}
/*右侧导航*/
#nav .rightNav{float: right;
}
#nav .rightNav>li{float: left;padding: 0 5px;
}
#nav .rightNav>li>b{border-left: 1px solid #9a9a9a;margin-right: 5px;
}/*左侧导航*/
#nav .leftNav>li{float: left;padding-left: 10px;
}
#nav .leftNav>li>u{/*左侧导航的三角标*/
/*  width: 0;height: 0;border-top: 7px solid #999999;border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 7px solid transparent;float: right;margin-top: 12px;margin-left: 7px;*//*或者*/display: inline-block;width: 0;height: 0;border: 7px solid transparent;border-top: 7px solid #999999;position: relative;top:4px;
}#nav .address{/*用于使下拉列表实现绝对定位*/position: relative;
}
#nav .select{/*将下拉列表隐藏*/display: none;/*使用绝对定位使下拉列表时不占位*/position: absolute;/*调整堆叠次序，使下拉菜单在上方显示*/z-index: 100;color: #272822;
}#nav .address:hover .select{/*用于显示隐藏的下拉列表*/display: block;
}/*2.横幅*/
#banner{margin: 15px 0;
}
#banner img{/*调整图片尺寸*/width: 100%;height: 207px;
}/*3.今日推荐*/
#adv{height: 112px;
}
#adv img{float: left;width: 240px;margin-right: 10px;
}
#adv .lastImg{margin-right: 0;
}/*4.主体信息*/
#main{margin-top: 25px;
}
#main .goodsClass{border-top: 1px solid #ccc;padding-top: 15px;margin-bottom: 10px;
}
#main .goodsClass>a{/*上方生活卡券部分布局*/float: right;margin-top: 15px;font: 16px "宋体";color: #333333;
}
/*商品信息部分*/
#main .item>ul>li{float: left;width: 190px;margin-right: 10px;
}
#main .item>ul>li.no-margin{margin:0;
}#main .item>ul>li>p{/*做溢出处理  使图片放大时不占其他元素*/width: 190px;height: 190px;overflow: hidden;
}
#main .item>ul>li>p>img{width: 190px;/*添加过渡属性*/transition: all 0.3s;
}
#main .item>ul>li>p>img:hover{/*设置鼠标移到对应图片上有放大效果*/transform: scale(1.1);
}#main .content>a{/*购物框位置移动*/float: right;
}/*调整购物框下方布局*/
#main .content{margin-top: 10px;
}
#main .content>p{color: #555;font:16px '宋体'; margin-bottom: 3px;margin-left: 3px;
}
#main .content>span{margin-left: 3px;font:16px '宋体';
}
``

以上代码运行效果如下：

html编写购物网站页面练习（一）相关推荐

如何制作自己的网页java_怎样制作自己的购物网站页面？
如果是自己去做一个购物网站,推荐你采用以下步骤一.项目大致分析我这个网站做来干什么,有什么用,几个人做,多长时间做完,采用什么架构,需要用到什么技术等. 二.具体分析既然是用Java做,你就不得 ...
React购物网站项目开发
说明从无到有编写购物网站,网站参考华为官网,主要是用于学习react 开发环境需要安装node.js React 开发环境 node请自行百度安装 create-react-app 是来自于 Fa ...
基于Apriori算法的购物网站商品推荐系统
基于Apriori算法的购物网站商品推荐系统目录一. 算法内容 3 Step 1 收集用户偏好 3 Step 2 对数据进行预处理 3 Step 3 计算相似度 4 Step 4 找邻居 5 S ...
javabean+servlet+JSP页面做购物网站（附效果图+源码）
一个简单的jsp购物网站概要需求用到的技术效果图登录页登陆结果购物页消费记录页管理用户信息和商品信息数据库格式踩过的坑 jdbc进行数据库操作 java动作指令结合jsp脚本 j ...
HTML+CSS简单应用实例——购物网站的制作（二）注册页面
HTML+CSS简单应用实例--购物网站的制作(二)注册页面接上一篇文章,本片文章是注册页面. 下面是效果图: 分析:上方欢迎注册是DIV,下面是表单,点击登录按钮会出现注册成功提示.下方为脚本,同 ...
建议网站购物——建立一个简易购物网站，包括登录页面、商品选择页面和结账页面。...
//login.jsp1 <%@ page language="java" contentType="text/html" pageEncoding=&q ...
商城是用jsp还是php,建设网上购物网站使用JSP系统还是ASP系统
网上购物系统是用来建设网上商城网站的体系架构,也成为电商购物系统和商城系统.网上商城系统的种类有不少,如jsp网上购物系统.asp购物系统和php网购系统等.今天小编来和大家探讨一下建设网上商城网站是 ...
购物网站HTML（首页）
HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
（附源码）spring boot校园购物网站毕业设计041037
springboot校园购物网站APP 摘要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所 ...

html编写购物网站页面练习（一）

html制作购物页面(一)

html编写购物网站页面练习（一）相关推荐

最新文章

热门文章