【前端开发】HTML+CSS网页，可以拿来当作业（免费开源）
HTML代码
小兔鲜儿-新鲜、惠民、快捷
新鲜好物
新鲜出炉 品牌靠谱
查看更多>
睿米无线吸尘器 F8
￥899
智能环绕 3D 空调
￥1299
广东软软襦米煲仔饭
￥129
罗西机械智能手表
￥3399
生鲜
水果
蔬菜
肉食蛋
裤装
衬衫
T恤
内衣
查看更多
美膛 智利原味三文鱼排 240g卷4片婆海鲜年皮
￥59
找相似
——————
发现更多宝贝>
——————
发现更多宝贝>
红功尖 麻辣小龙虾 1.5kg 4.6楼J25.32只 火铜食材
￥79
找相似
——————
发现更多宝贝>
——————
发现更多宝贝>
三都港 冷冻无公害黄 花鱼 700g 2条 美 淘鲜水产
￥49
找相似
——————
发现更多宝贝>
——————
发现更多宝贝>
渔公码头 大连鲜食入 味 即龠湃卷 辽整刺曲 调味海
￥899
找相似
——————
发现更多宝贝>
——————
发现更多宝贝>
陆南白心火龙果4个装 标重里400-5509 期鲜水果
￥20
找相似
——————
发现更多宝贝>
——————
发现更多宝贝>
广西沃柑 新鲜水果 相 播1.54g 新鲜水栗
￥10
找相似
——————
发现更多宝贝>
——————
发现更多宝贝>
进口 牛油果 6个英 单 果重约130-180g 新鮮水用
￥50
找相似
——————
发现更多宝贝>
——————
发现更多宝贝>
泰国进口山竹5A股 5000 新鲜水果
￥60
找相似
——————
发现更多宝贝>
——————
发现更多宝贝>
最新专题
查看全部
吃这些美食才不会辜负自己
餐厨起居洗护好物
￥29.9起
1220
1800
246
吃这些美食才不会辜负自己
餐厨起居洗护好物
￥29.9起
1220
1800
246
吃这些美食才不会辜负自己
餐厨起居洗护好物
￥29.9起
1220
1800
246
贴心客服
在线咨询
问题处理
公司详情
官方账号
公司微博
获取 APP
扫码下载
轻松获取 APP
下载入口
服务电话
500-1111-2222
周一至周六 9:00-17:00
价格实惠
配送迅速
品质优良
CSS代码
/* 黑色导航栏样式 */
.one_black-bar_zhengboming{
width: 1240px;
height: 52px;
background-color: #333;
position: relative;
margin: 5px auto;
}
/* 黑色导航栏内容样式 */
.one_black-bar_zhengboming .content_zhengboming {
position: absolute;
right: 10%;
line-height: 52px;
display: flex;
align-items: center;
height: 52px;
}
/* 黑色导航栏文本样式 */
.one_black-bar_zhengboming .content_zhengboming .text_zhengboming {
color: #dcdcdc;
margin: 0 10px;
cursor: pointer;
}
/* 黑色导航栏字体移入样式 */
.one_black-bar_zhengboming .content_zhengboming .text_zhengboming:hover {
color: #27BA9B;
}
/* 黑色导航栏线条颜色 */
.one_black-bar_zhengboming .content_zhengboming .line_zhengboming {
color: #666;
}
/* 白色导航栏样式 */
.two_white-bar_zhengboming {
width: 1240px;
height: 100px;
display: flex;
margin: 5px auto;
align-items: center;
}
/* 白色导航栏logo样式 */
.two_white-bar_zhengboming .logo_zhengboming {
width: 207px;
height: 70px;
background-image: url('/images/logo.png');
background-size: 100% 100%;
}
/* 白色导航栏中间布局 */
.two_white-bar_zhengboming .center_zhengboming {
width: 756px;
height: 70px;
display: flex;
justify-content: space-around;
}
.two_white-bar_zhengboming .center_zhengboming .item_zhengboming {
line-height: 70px;
font-size: 18px;
}
/* 搜索部分样式 */
.two_white-bar_zhengboming .search_zhengboming {
width: 172px;
height: 70px;
display: flex;
align-items: center;
position: relative;
}
.two_white-bar_zhengboming .search_zhengboming .icon_zhengboming {
background-image: url('/images/search.png');
width: 30px;
height: 30px;
position: absolute;
}
.two_white-bar_zhengboming .search_zhengboming input {
padding-left: 30px;
width: 80%;
height: 31px;
border: none;
outline: none;
border-bottom: 3px solid #eee;
}
.two_white-bar_zhengboming .card_zhengboming {
background-image: url('/images/car.png');
width: 23px;
height: 23px;
position: relative;
}
/* 购物车样式 */
.two_white-bar_zhengboming .card_zhengboming .tip_zhengboming {
width: 15px;
height: 12px;
background-color: #e2643a;
font-size: 10px;
color: white;
border-radius: 3px;
text-align: center;
line-height: 10px;
position: absolute;
right: -8px;
}
/* banner布局 */
.three_banner_zhengboming {
width: 1240px;
height: 500px;
margin: 5px auto;
background-image: url('/images/banner_1.png');
background-size: 100% 100%;
display: flex;
justify-content: space-around;
}
/* banner左侧样式 */
.three_banner_zhengboming .left_zhengboming {
width: 252px;
height: 500px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
/* banner左侧每一项 */
.three_banner_zhengboming .left_zhengboming .item_zhengboming {
height: 50px;
position: relative;
padding-left: 25px;
cursor: pointer;
line-height: 50px;
}
.three_banner_zhengboming .left_zhengboming .item_zhengboming .category_zhengboming {
font-size: 15px;
margin-right: 10px;
}
.three_banner_zhengboming .left_zhengboming .item_zhengboming .description_zhengboming {
font-size: 13px;
}
.three_banner_zhengboming .left_zhengboming .item_zhengboming .arrow_zhengboming {
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
text-align: center;
}
/* banner左侧每项鼠标移入样式 */
.three_banner_zhengboming .left_zhengboming .item_zhengboming:hover {
background-color: #27ba9b;
}
/* banner右侧样式 */
.three_banner_zhengboming .right_zhengboming {
display: flex;
width: 988px;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
/* banner右侧箭头按钮样式 */
.three_banner_zhengboming .right_zhengboming .prev_btn_zhengboming,.next_btn_zhengboming {
width: 45px;
height: 45px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
line-height: 45px;
color: white;
}
/* 新鲜好物布局 */
.four_xinxianhaowu_zhengboming {
width: 1240px;
height: 520px;
margin: 5px auto;
}
/* 新鲜好物上方布局 */
.four_xinxianhaowu_zhengboming .top_zhengboming {
height: 114px;
display: flex;
justify-content: space-between;
padding: 0 50px;
align-items: center;
}
.four_xinxianhaowu_zhengboming .top_zhengboming .left_zhengboming {
display: flex;
align-items: center;
}
.four_xinxianhaowu_zhengboming .top_zhengboming .left_zhengboming .title_zhengboming {
font-size: 30px;
margin-right: 30px;
}
.four_xinxianhaowu_zhengboming .top_zhengboming .left_zhengboming .tip_zhengboming {
color: darkgray;
}
/* 新鲜好物内容样式 */
.four_xinxianhaowu_zhengboming .content_zhengboming {
display: flex;
}
.four_xinxianhaowu_zhengboming .content_zhengboming .item_zhengboming {
height: 405px;
text-align: center;
margin-right: 10px;
}
.four_xinxianhaowu_zhengboming .content_zhengboming .item_zhengboming img {
width: 304px;
height: 304px;
}
.four_xinxianhaowu_zhengboming .content_zhengboming .item_zhengboming .price {
color: red;
}
.four_xinxianhaowu_zhengboming .content_zhengboming .item_zhengboming .price .num {
font-size: 20px;
}
/* 生鲜布局 */
.five_shengxian_zhengboming {
width: 1240px;
height: 706px;
margin: 5px auto 40px;
}
/* 生鲜顶部样式 */
.five_shengxian_zhengboming .top_zhengboming {
height: 96px;
display: flex;
justify-content: space-between;
padding: 0 50px;
align-items: center;
}
.five_shengxian_zhengboming .top_zhengboming .title_zhengboming {
font-size: 25px;
}
.five_shengxian_zhengboming .top_zhengboming .right_zhengboming {
display: flex;
}
.five_shengxian_zhengboming .top_zhengboming .right_zhengboming .left_zhengboming {
display: flex;
margin-right: 40px;
}
.five_shengxian_zhengboming .top_zhengboming .right_zhengboming .left_zhengboming .item_zhengboming {
margin: 0 10px;
padding: 0 8px;
height: 30px;
}
/* 生鲜顶部选中样式 */
.five_shengxian_zhengboming .top_zhengboming .right_zhengboming .left_zhengboming .active_zhengboming {
background-color: #27ba9b;
color: white;
border-radius: 5px;
}
.five_shengxian_zhengboming .top_zhengboming .right_zhengboming .right_zhengboming {
color: darkgray;
}
/* 生鲜内容样式 */
.five_shengxian_zhengboming .content_zhengboming {
display: flex;
}
.five_shengxian_zhengboming .content_zhengboming .left_zhengboming {
width: 240px;
height: 610px;
background-image: url('/images/fresh_goods_cover.png');
background-size: 100% 100%;
}
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming {
width: 1000px;
display: flex;
flex-wrap: wrap;
}
/* 生鲜内容中每一项样式 */
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming {
width: 225px;
height: 304px;
margin: 10px;
cursor: pointer;
position: relative;
overflow: hidden;
}
/* 生鲜内容中每一项鼠标移入样式 */
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming:hover {
border: 1px solid #27ba9b;
}
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming:hover .hidden_zhengboming {
bottom: 0;
}
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming img {
width: 184px;
height: 184px;
}
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming p:nth-child(3) {
color: red;
}
/* 生鲜内容中隐藏部分 */
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming .hidden_zhengboming {
position: absolute;
bottom: -80px;
width: 225px;
height: 80px;
background-color: #27ba9b;
color: white;
text-align: center;
}
.five_shengxian_zhengboming .content_zhengboming .right_zhengboming .item_zhengboming .hidden_zhengboming p {
margin: 0;
}
/* 专题部分样式 */
.fix_zhuanti_zhengboming {
width: 1240px;
height: 512px;
margin: 20px auto;
background-color: #f5f5f5;
}
/* 专题顶部样式 */
.fix_zhuanti_zhengboming .top_zhengboming {
height: 115px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}
.fix_zhuanti_zhengboming .top_zhengboming .left_zhengboming {
font-size: 30px;
}
.fix_zhuanti_zhengboming .top_zhengboming .right_zhengboming {
color: darkgray;
}
/* 专题内容样式 */
.fix_zhuanti_zhengboming .content_zhengboming {
display: flex;
justify-content: center;
}
/* 专题内容每项样式 */
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming {
width: 350px;
height: 356px;
margin-right: 10px;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .img_zhengboming {
height: 288px;
background-size: 100% 100%;
background-image: url('/images/topic_goods_1.jpg');
display: flex;
align-items: flex-end;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .img_zhengboming .info_zhengboming {
width: 404px;
height: 67px;
display: flex;
justify-content: space-around;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .img_zhengboming .info_zhengboming .left_zhengboming p {
margin: 0;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .img_zhengboming .info_zhengboming .left_zhengboming p:nth-child(1) {
color: white;
margin-bottom: 10px;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .img_zhengboming .info_zhengboming .left_zhengboming p:nth-child(2) {
color: darkgray;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .img_zhengboming .info_zhengboming .right_zhengboming {
background-color: white;
color: red;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 5px;
}
/* 专题内容底部样式 */
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .bottom_zhengboming {
height: 67px;
background-color: white;
display: flex;
justify-content: space-between;
padding: 0 15px;
align-items: center;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .bottom_zhengboming .left_zhengboming {
display: flex;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .bottom_zhengboming .left_zhengboming div {
margin-right: 20px;
}
.fix_zhuanti_zhengboming .content_zhengboming .item_zhengboming .bottom_zhengboming .right_zhengboming {
display: flex;
}
/* 底部样式 */
.seven_bottom_zhengboming {
height: 643px;
}
/* 底部上方布局 */
.seven_bottom_zhengboming .top_zhengboming {
height: 302px;
display: flex;
justify-content: center;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming {
text-align: center;
margin: 0 10px;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming p {
color: darkgray;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .icon_zhengboming {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
/* 左右两侧样式 */
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .icon_zhengboming .left_zhengboming,
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .icon_zhengboming .right_zhengboming {
width: 70px;
height: 70px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
margin-right: 10px;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .icon_zhengboming .tip_zhengboming {
font-size: 15px;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .icon_zhengboming .tip_zhengboming p {
margin: 0;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .icon_zhengboming .tip_zhengboming .btn_zhengboming {
margin-top: 10px;
border-radius: 5px;
padding: 5px 10px;
color: white;
background-color: #26b99a;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .info_zhengboming {
margin-top: 30px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .info_zhengboming p {
margin: 0;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .info_zhengboming p:nth-child(1) {
font-size: 20px;
color: #8d8c86;
}
.seven_bottom_zhengboming .top_zhengboming .item_zhengboming .info_zhengboming p:nth-child(2) {
font-size: 13px;
}
/* 底部中间部分样式 */
.seven_bottom_zhengboming .center_zhengboming {
height: 172px;
background-color: #333333;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid white;
}
.seven_bottom_zhengboming .center_zhengboming .item_zhengboming {
display: flex;
align-items: center;
margin: 0 10px;
}
.seven_bottom_zhengboming .center_zhengboming .item_zhengboming span {
color: white;
font-size: 20px;
}
/* 底部下方样式 */
.seven_bottom_zhengboming .footer_zhengboming {
color: white;
height: 169px;
background-color: #333333;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
效果图
