HTML .CSS实现商品详情（detail） |
您所在的位置：网站首页 › 详情页逻辑怎么写好看 › HTML .CSS实现商品详情（detail） |
HTML .CSS实现商品详情（detail）
|
一、知识点 1、无序列表 2、float浮动 (1)why浮动的作用:排版布局 (2)原理:两个盒子，默认上下排列，给第二个盒子就会浮上去（跟第一个盒子同一水平线） (3)how怎么用: （4）clear:清除浮动 3、CSS精灵图 4、详情页面用到的CSS属性： （1）、border-radius：边框圆角半径 （2）、text-decoration：line-through：文本划线（a标签去掉下划线、none） 5、table标签 (1)、包含字标签： caption表的标签 tr表的行 td表的列 th表头（黑体） （2）、常用属性：border-spacing、colspan、rowspan （3）、作用：布局 二·、商品详情 html .css 商品详情
提拉米苏(约2磅)
售价
￥198
市场价￥338
已售6264件
材料
鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪
包装
一次性蛋糕用具一套
备注
品牌:悦轩饼家
配送说明
北京、上海、广州、深圳、天津、重庆、南京、长沙 配送至郑州 说明深圳大鹏新区暂不配送 选择 2磅 3磅 4磅 加入购物车 加入购物车.css样式 iframe{ width: 1200px; margin: auto; } .all{ width: 100%; height: 810px; padding-bottom: 50px; margin-top: -80px; margin-bottom: 1px; } .all .content{ margin-top: 0px; float: left; } .all iframe{ /* border: 2px solid red; */ } #content{ /* border: 1px solid red; */ width: 1200px; margin-top: -80px; margin: auto; } #content .a1{ float: left; margin-left: 10px; } #content .a1 .big{ /* float: left; */ width: 450px; height: 400px; } #content .a11 ul li{ list-style: none; float: left; margin: 20px 15px; } .a11 ul li img{ border: 3px white solid; width: 80px; height: 80px; } .a11 ul li img:hover{ border: 3px #FF4F0D solid; } .a2{ float: left; margin-left: 90px; } .a21 .color{ color: #758188; } .a21 .a211{ background-color: #F2F5F8; color: #758188; } .a21 .a211 .prices,.shic{ margin-left: 40px; } .a21 .a211 .prices{ color: #FF4F0D; font-size: 35px; font-weight: bold; } .a21 .a211 .prices2{ text-decoration: line-through; } .a21 .a211 .yis{ margin-left: 230px; } .a22{ background-color: #F6F9FB; } .a22 span,p{ margin-top: 10px; } .a22 .neir{ margin-left: 50px; } .a23{ margin-top: 10px; } .a24{ margin-top: 10px; } .a24 .bang{ display: inline-block; border: 3px #EDF0F5 solid; width: 50px; line-height: 40px; margin-left: 30px; text-align: center; } .a24 .bang:hover{ border: 3px #FF4F0D solid; } .a25{ margin-top: 30px; } .a25 button{ display: inline-block; width: 200px; height: 60px; border-radius: 30px; margin-left: 30px; } .a25 .a25color1{ background-color: #FFEEE8; color: #FF4F0D; font-size: 20px; font-weight: bolder; border: 1px #FF4F0D solid; } .a25 .a25color2{ background-color: #FF4F0D; color: white; font-size: 20px; font-weight: bolder; border: 1px #FF4F0D solid; } /* .all .iheader{ margin: auto; } */实现样式
|
【本文地址】
今日新闻 |
推荐新闻 |