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磅 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; } */实现样式
|
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |