部分效果图
部分代码
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
border: 0;
outline: none;
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #f8f9fb;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
* zoom: 1;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?tomleg');
src: url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?tomleg') format('truetype'), url('fonts/icomoon.woff?tomleg') format('woff'), url('fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
/*版心*/
.w {
width: 1200px;
margin: 0 auto;
}
/*顶部模块*/
.hs_top {
position: relative;
height: 90px;
width: 1920px;
background: url(../images1/hs_top.jpg);
}
.hs_top span {
position: absolute;
color: #f7d89b;
font-size: 12px;
height: 34px;
line-height: 34px;
text-align: center;
top: 40px;
left: 20px;
padding: 0px 8px;
background-color: #323332;
}
.hs_top span::after {
position: absolute;
content: "\e901";
font-family: "icomoon";
font-size: 55px;
top: -20px;
color: #4b4040;
}
/*快捷导航栏板块 */
.shortcut {
height: 31px;
background-color: #dae7ef;
line-height: 31px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.shortcut ul li {
float: left;
}
.shortcut .fl ul li {
margin-right: 8px;
}
.red {
color: #c81623;
}
.shortcut .fr ul li:nth-child(even) {
width: 1px;
height: 12px;
background-color: #666;
margin: 9px 15px 0;
}
.arrow-icon::after {
content: '\e91e';
font-family: 'icomoon';
margin-left: 6px;
}
/*header头部制作*/
.header {
position: relative;
height: 105px;
margin-top: 30px;
}
.logo {
position: absolute;
top: 25px;
width: 171px;
height: 61px;
}
.logo a {
display: block;
width: 171px;
height: 61px;
background: url(../images1/txhua.png) no-repeat;
font-size: 0px;
}
.search {
position: absolute;
left: 346px;
top: 35px;
height: 36px;
border: 2px solid #439fda;
}
.search input {
float: left;
width: 300px;
height: 32px;
padding-left: 10px;
}
.search button {
float: right;
width: 80px;
height: 32px;
background-color: #439fda;
color: #f1f1f1;
}
.hotword {
position: absolute;
top: 76px;
left: 346px;
}
.hotword a {
margin-left: 20px;
}
.phone {
position: absolute;
top: 36px;
right: 36px;
color: #666666;
font-size: 17px;
}
.phone a {
float: left;
margin-left: 20px;
}
/*nav制作板块*/
.nav {
margin-top: 10px;
border-bottom: 4px solid #a2cad6;
height: 45px;
}
.nav .dropdown {
float: left;
width: 210px;
height: 45px;
color: #f1eded;
background-color: #439fda;
}
.nav .dropdown .dt {
line-height: 45px;
font-size: 16px;
text-align: center;
}
.nav .dropdown h4 {
display: block;
font-size: 14px;
}
.nav .dropdown .dd {
background-color: #5aace0;
height: 310px;
}
.nav .dropdown .dd div {
border-bottom: 1px solid #72b3dc;
}
.nav .dd .dropdown-A {
height: 90px;
background-color: #5aace0;
margin: 0px 0 4px 5px;
padding-top: 2px;
}
.nav .dd .dropdown-A a {
display: block;
float: left;
color: #f1eded;
font-size: 14px;
margin-right: 10px;
}
.nav .dropdown-B {
height: 86px;
padding: 0 0 5px 4px;
}
.nav .dropdown-B a {
float: left;
color: #f1eded;
font-size: 14px;
margin-right: 7px;
}
.nav .dropdown-C {
height: 65px;
margin: 0 0 5px 4px;
}
.dropdown-C a {
float: left;
color: #fff;
font-size: 14px;
margin-right: 7px;
}
.dropdown-D, .dropdown-E {
height: 20px;
line-height: 20px;
margin: 0 0 6px 4px;
}
.dropdown-D a, .dropdown-E a {
display: inline-block;
height: 20px;
width: 210px;
color: #f1eded;
margin-right: 7px;
}
.dropdown-D h4::after, .dropdown-E h4::after {
content: "\e920";
font-family: 'icomoon';
float: right;
font-size: 16px;
line-height: 20px;
margin-right: 10px;
}
.dropdown-A a:hover, .dropdown-B a:hover, .dropdown-C a:hover {
background-color: #ff700e;
}
.dropdown-D:hover, .dropdown-E:hover {
background-color: #ff700e;
}
/*首页专有制作板块*/
.focus {
position: relative;
height: 310px;
left: 225px;
width: 1020px;
height: 310px;
font-size: 22px;
font-weight: 600;
color: #aba6a6;
background-color: red;
}
.focus li {
position: absolute;
width: 100%;
height: 100%;
background: url(../images1/m2.jpg) no-repeat;
}
.focus li::before {
content: "\e91f";
font-family: 'icomoon';
left: 20px;
}
.focus li::after {
content: "\e920";
font-family: 'icomoon';
right: 20px;
}
.focus li::after, .focus li::before {
position: absolute;
width: 40px;
height: 40px;
top: 150px;
color: #dae7ef;
line-height: 40px;
text-align: center;
border-radius: 50% 50% 50% 50%;
background-color: #439fda;
background: rgba(0,0,0,.2);
}
.focus li::after:hover {
color: #ff700e;
}
.focus .circle {
position: absolute;
width: 56px;
height: 14px;
background-color: transparent;
left: 50%;
margin-left: -28px;
bottom: 4px;
}
.focus .circle i {
float: left;
width: 14px;
height: 14px;
margin-left: 4px;
background: rgba(0,0,0,.2);
border-radius: 50% 50% 50% 50%;
}
.focus ul li .circle i:hover {
background-color: #ff700e;
}
/*热销单品板块*/
.son_sn1 {
position: relative;
margin-top: 50px;
}
.tit {
height: 50px;
line-height: 50px;
}
.son_sn1 .tit h4 {
display: inline-block;
color: #333333;
font-size: 28px;
font-weight: bold;
}
.son_sn1 .tit span {
color: #333333;
font-size: 14px;
margin-left: 30px;
}
.son_sn1 .sons {
margin-top: 10px;
width: 100%;
}
.firsttwo {
display: block;
float: left;
height: 350px;
width: 393px;
margin-right: 10px;
}
.lasttwo {
display: block;
float: right;
height: 350px;
width: 393px;
}
.lasttwo a {
display: block;
height: 170px;
margin-bottom: 10px;
}
/*爱情鲜花版块*/
.son_sn2 {
background-color: #f2f4fa;
}
.son_sn2 .tit {
padding-top: 25px;
}
.hd1 video {
float: left;
width: 210px;
height: 200px;
}
.hd1 img {
width: 1200px;
height: 250px;
margin-top: 39px;
}
.bd1 {
position: relative;
width: 100%;
margin-top: 10px;
}
/*左*/
.bd1_dl {
float: left;
width: 212px;
/* height: 530px;*/
height: 600px;
background: url(../images1/left_3.jpg) no-repeat;
margin-top: 10px;
}
/*右*/
.bd1_dr {
float: right;
/* position: absolute;*/
width: 988px;
/*right: 0px;*/
}
.bd1_dr a {
display: block;
float: right;
height: 300px;
width: 222px;
margin-left: 25px;
margin-top: 10px;
border: 1px solid #d9d5d5;
}
.bd1_dr a img {
display: block;
width: 220px;
height: 220px;
}
.fl-products-item {
width: 100px;
margin: 8px auto;
}
.fl-products-item h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
width: 100px;
color: #232628;
font-size: 16px;
line-height: 20px;
}
.fl-products-item i {
display: inline-block;
width: 100px;
height: 20px;
text-align: center;
}
.fl-products-item i:first-of-type {
background-color: #FFF0EC;
border-radius: 20px;
color: #FF734C;
border: 1px solid #ff734c;
margin-top: 5px;
}
.bd1_dr i:last-of-type {
margin-top: 5px;
color: #232628;
font-weight: bold;
line-height: 10px;
}
链接:https://pan.baidu.com/s/1I3R20cE5B7j2F2vD2stBww
提取码:8jqa