返回小米商城Ind......登陆

小米商城Index布局

枫2019-05-04 21:08:48471

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>小米商城</title>

    <link rel="shorcut icon" type="image/x-icon" href="static/images/footlogo.png">

    <link rel="stylesheet" href="static/css/style.css">

    <link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">

</head>

<body>

<!--头部-->

<div class="header">

    <div class="menu">头部</div>

</div>

<!--主体-->

<div class="contents">

    <div class="content">

        <div class="contentMenu"></div>

        <div class="contentPic">

            <div class="contentPic_l"></div>

            <div class="contentPic_r"></div>

        </div>

        <div class="contentPic_ul">

            <div class="contentPic_ul_0"></div>

            <div class="contentPic_ul_1" style="background: url(static/images/midAD1.jpg )"></div>

            <div class="contentPic_ul_1" style="background: url(static/images/midAD2.jpg )"></div>

            <div class="contentPic_ul_1" style="background: url(static/images/midAD3.jpg );margin-right: 0px"></div>

        </div>

<!--        小米闪购-->

        <div class="contentShop">

            <h1>小米闪购</h1>

            <div class="contentShop_1" style="border-top:1px solid red"></div>

            <div class="contentShop_1" style=";border-top:1px solid #ff6700;"></div>

            <div class="contentShop_1" style="border-top:1px solid green"></div>

            <div class="contentShop_1" style="border-top:1px solid blue"></div>

            <div class="contentShop_1" style="margin-right: 0;border-top:1px solid red"></div>

        </div>

        <div class="contentImg" style="background: url(static/images/longAD1.jpg )"></div>

 

        <div class="contentUL">手机</div>

        <div class="contentPhone">

            <div class="contentPhone_l"></div>

            <div class="contentPhone_r">

                <div class="contentPhone_r_t">

                    <div></div>

                    <div></div>

                    <div></div>

                    <div style="margin-right: 0"></div>

                </div>

                <div class="contentPhone_r_b">

                    <div></div>

                    <div></div>

                    <div></div>

                    <div style="margin-right: 0"></div>

                </div>

            </div>

        </div>

        <div class="contentImg" style="background: url(static/images/longAD2.jpg )"></div>

        <div class="contentUL">家电</div>

        <div class="contentPhone">

            <div class="contentPhone_r_t">

                <div></div>

                <div></div>

                <div></div>

                <div></div>

                <div style="margin-right: 0"></div>

            </div>

            <div class="contentPhone_r_b">

                <div></div>

                <div></div>

                <div></div>

                <div></div>

                <div class="contentPhone_r_b_2">

                    <div class="contentPhone_r_b_2_top"></div>

                    <div class="contentPhone_r_b_2_bot"></div>

                </div>

            </div>

        </div>

        <div class="contentImg" style="background: url(static/images/longAD3.jpg )"></div>

        <div class="contentUL">智能</div>

        <div class="contentPhone">

            <div class="contentPhone_r_t">

                <div></div>

                <div></div>

                <div></div>

                <div></div>

                <div style="margin-right: 0"></div>

            </div>

            <div class="contentPhone_r_b">

                <div></div>

                <div></div>

                <div></div>

                <div></div>

                <div class="contentPhone_r_b_2" >

                    <div class="contentPhone_r_b_2_top"></div>

                    <div class="contentPhone_r_b_2_bot"></div>

                </div>

            </div>

        </div>

        <div class="contentImg" style="background: url(static/images/longAD4.jpg )"></div>

    </div>

</div>

<!--底部-->

<div class="footers">

    <div class="footer">

        <div class="footer-top_li">

            <div class="footer-top_li_1">

                <a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>

                <a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span>

                <a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>

                <a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>

                <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>

            </div>

            <div class="footer-top_li_2">

                <div class="footer-top_li_a">

                    <dl>

                        <dt>帮助中心</dt>

                        <dd><a href="">账户管理</a></dd>

                        <dd><a href="">购物指南</a></dd>

                        <dd><a href="">订单操作</a></dd>

                    </dl>

                    <dl>

                        <dt>服务支持</dt>

                        <dd><a href="">售后政策</a></dd>

                        <dd><a href="">自助服务</a></dd>

                        <dd><a href="">相关下载</a></dd>

                    </dl>

                    <dl>

                        <dt>线下门店</dt>

                        <dd><a href="">小米之家</a></dd>

                        <dd><a href="">服务网点</a></dd>

                        <dd><a href="">授权体验店</a></dd>

                    </dl>

                    <dl>

                        <dt>关于小米</dt>

                        <dd><a href="">了解小米</a></dd>

                        <dd><a href="">加入小米</a></dd>

                        <dd><a href="">投资者关系</a></dd>

                    </dl>

                    <dl>

                        <dt>关注我们</dt>

                        <dd><a href="">新浪微博</a></dd>

                        <dd><a href="">官网微博</a></dd>

                        <dd><a href="">联系我们</a></dd>

                    </dl>

                    <dl>

                        <dt>特色服务</dt>

                        <dd><a href="">F码通道</a></dd>

                        <dd><a href="">礼物码</a></dd>

                        <dd><a href="">防伪查询</a></dd>

                    </dl>

                    <div class="connect">

                        <p class="telephone">Feir-520-1314</p>

                        <p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p>

                        <button><span class="fa fa-commenting "></span> 联系客服</button>

                    </div>

                </div>

            </div>

        </div>

        <div class="footer-bottom_li">

            <div class="footer-bottom_li_1" style="margin-right: 15px;">

                <img src="static/images/footlogo.png" alt="" class="logoBottom">

            </div>

            <div class="footer-bottom_li_2" style="margin-right: 40px">

                <div class="footer-bottom_li_a">

                    <ul>

                        <li>小米商城<span></span></li>

                        <li>MIUI<span></span></li>

                        <li>米家<span></span></li>

                        <li>米聊<span></span></li>

                        <li>多看<span></span></li>

                        <li>游戏<span></span></li>

                        <li>路由器<span></span></li>

                        <li>米粉卡<span></span></li>

                        <li>政企服务<span></span></li>

                        <li>小米天猫店<span></span></li>

                        <li>隐私政策<span></span></li>

                        <li>问题反馈<span></span></li>

                        <li>Select Region</li>

                    </ul>

                </div>

                <div class="footer-bottom_li_b">

                    <a href="">©mi.com</a>

                    京ICP证110507号

                    <a href="">京ICP备10046444号</a>

                    <a href="">京公网安备11010802020134号</a>

                    <a href="">京网文[2014]0059-0009号</a>

                    <br>

                    违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

                </div>

            </div>

            <div class="footer-bottom_li_3">

                <img src="static/images/footericon1.png" alt="" class="icon" style="margin-right: 10px;">

                <img src="static/images/footericon2.png" alt="" class="icon" style="margin-right: 10px;">

                <img src="static/images/footericon3.png" alt="" class="icon" style="margin-right: 10px;">

                <img src="static/images/footericon4.png" alt="" class="icon" style="margin-right: 10px;">

                <img src="static/images/footericon5.png" alt="" class="icon">

            </div>

            <div class="footer-bottom_li_4">

                探索黑科技，小米为发烧而生！

            </div>

        </div>

    </div>

</div>

</body>

</html>

css样式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

*{margin: 0;padding: 0}

li{list-style: none}

a{text-decoration: none;color: #757575}

/*头部样式*/

.header{background: #333;width: 100%;}

.menu{background: #ccc;width: 1226px;height: 40px;margin: 0px auto;}

 

/*主体部分样式*/

.content{width: 1226px;margin: 10px auto}

.contentMenu{background: #ccc;height: 90px;margin: 10px auto}

.contentPic{margin: 10px auto;overflow: hidden}

.contentPic_l{background: #ccc;width: 246px;height: 480px;float: left}

.contentPic_r{background:lightblue;width: 980px;height: 480px;float: left}

.contentPic_ul{margin: 10px auto;overflow: hidden}

.contentPic_ul_0{width: 235px;height: 170px;background: #5F5750;float: left;margin-right: 16px}

.contentPic_ul_1{width: 316px;height: 170px;float: left;margin-right: 13px}

 

/*小米闪购*/

.contentShop{margin: 10px auto;overflow: hidden;/* width: 1226px;background: #00F7DE */}

.contentShop_1{width: 235px;height:340px;background: #ccc;float: left;margin-right: 12.7px;}

 

.contentImg{background: #ccc;height: 100px;margin: 10px auto}

.contentUL{background: #ccc;height: 80px;margin: 10px auto}

.contentPhone{background: #ccc;height:614px;margin: 10px auto;overflow: hidden}

.contentPhone_l{height: 614px;width: 234px;background: url(../images/buy/手机AD.jpg);float: left;margin-right:12px }

.contentPhone_r{height: 614px;width: 980px;background: #1E9FFF;float: left}

.contentPhone_r_t{height: 300px;background:lightcoral;overflow: hidden;}

.contentPhone_r_t>div{height: 300px;width: 235px;background:lavender;float: left;margin-right:12.7px;}

.contentPhone_r_b{height: 300px;background:lightcoral;margin-top: 13px;overflow: hidden;}

.contentPhone_r_b>div{height: 300px;width: 235px;background:lavender;float: left;margin-right:12.7px;}

.contentPhone_r_b .contentPhone_r_b_2{margin-right: 0;}

.contentPhone_r_b_2_top,.contentPhone_r_b_2_bot{height: 145px;width: inherit;background:lightblue}

.contentPhone_r_b_2_top{margin-bottom: 10px}

 

 

/*网页底部*/

.footers{width: 1226px;margin: 10px auto}

.footer-top_li_1{width:1226px;height: 80px ;line-height: 80px;text-align: center;border-bottom:1px solid #e0e0e0}

.footer-top_li_1>a{font-size: 16px;color:#616161;font-weight: 300;}

.footer-top_li_1 a:hover{color: #ff6700;}

.footer-top_li_1 a i{font-size: 20px;margin-right: 10px;}

.footer-top_li_1 span{border-left: 1px solid #e0e0e0;font-size: 20px;color:#616161;margin:0px 56px}

.footer-top_li_2{width: 1226px;height: 100px;margin:40px 0}

.footer-top_li_a dl{float: left;width: 160px}

.footer-top_li_a dl dt{font-size: 14px;color: #424242;margin-bottom: 26px;}

.footer-top_li_a dd{font-size: 12px;line-height:18px;color: #424242;margin-top: 10px;}

.footer-top_li_a dl dd a:hover{color: #ff6700}

.footer-top_li_a .connect{ width: 258px ;height: 112px;float: right;text-align: center;border-left: 1px solid #e0e0e0}

.footer-top_li_a .connect .telephone{color:#ff6700; font-size: 22px;line-height: 22px;;margin: 5px}

.footer-top_li_a .connect .time{color:#616161;font-size: 12px; }

.footer-top_li_a .connect button{width: 118px;height: 28px;line-height:28px;border: 1px solid #ff6700;color:#ff6700;background: #fff;margin-top: 20px;}

.footer-top_li_a .connect button:hover{background:#ff6700;color: #fff; }

.footer-bottom_li_1,.footer-bottom_li_2,.footer-bottom_li_3{float: left;}

.footer-bottom_li_4{clear: left;margin-top: 15px;text-align: center;font-family:"楷体";font-size: 24px;color: #ccc;}

.footer-bottom_li_a{height: 19px;width: 640px;}

.footer-bottom_li_a li{height: 19px;font-size: 12px;float: left;color: #757575;}

.footer-bottom_li_a li span{height:8px;color: #757575;border-left: 1px solid #b0b0b0;margin: 3px 3px;}

.footer-bottom_li_b a:hover{color: #ef3a3b;}

.footer-bottom_li_b{width: 640px;color: #b0b0b0;font-size: 12px;}

.footer-bottom_li_b a{color: #b0b0b0;}

.footer-bottom_li_3 img{width: 83px;float: left;}

总结：

通过写CSS外部样式，在index内部，相同布局可以重复利用，极大程度便利了布局。

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp，后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送