返回小米商城的框架......登陆

小米商城的框架布局

Viggo2019-05-26 14:58:421783

学习小米商城的框架布局，参照小米商城官方网站进行操作。


html代码部分

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

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>小米商城布局</title>

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

</head>

<body>

<!--头部-->

<div class="header">

    <div class="content">

 <!--左侧-->

 <div class="header_l">

        <ul>

            <li><a href="#">小米商城</a><span></span></li>

            <li><a href="#">MIUI</a><span></span></li>

            <li><a href="#">loT</a><span></span></li>

            <li><a href="#">云服务</a><span></span></li>

            <li><a href="#">金融</a><span></span></li>

            <li><a href="#">有品</a><span></span></li>

            <li><a href="#">小爱开放平台</a><span></span></li>

            <li><a href="#">企业团购</a><span></span></li>

            <li><a href="#">资质证照</a><span></span></li>

            <li><a href="#">协议规则</a><span></span></li>

            <li><a href="#">下载app</a><span></span></li>

            <li><a href="#">Select Region</a></li>

        </ul>

    </div>

 

 <!--右侧-->

 <div class="header_r">

        <ul>

            <li><a href="#">登录</a><span></span></li>

            <li><a href="#">注册</a><span></span></li>

            <li><a href="#">消息通知</a></li>

            <li><a href="">购物车(0)</a></li>

        </ul>

    </div>

    </div>

</div>

 

<div class="wrap">

<!--内容区-->

<div class="main">

 <!--第一排-->

 <div class="nva_1"></div>

 <!--第二排-->

 <div class="nva_2"></div>

 <!--第三排-->

 <div class="nva_3">

        <div class="nva_3_1"></div>

        <div class="nva_3_2"></div>

    </div>

 <!--第四排-->

 <div class="nva_4"></div>

 

</div>

 

<!--第五排 开始是另外一层-->

<div class="layout">

    <div class="nva_1">

 <!--第一排-->

 <div class="nva_1_1"><h2>手机</h2></div>

 <!--第二排-->

 <div class="nva_1_2"><img src="" alt=""></div>

        <div class="nva_1_3">

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

        <div class="clear"></div>

 <!--第三排-->

 <div class="nva_2"></div>

 <!--第四排-->

 <div class="nva_3">

            <div class="nva_3_1">

                <h2>家电</h2>

                 <ul>

                    <li>热门</li>

                    <li>电视影音</li>

                    <li>电脑</li>

                    <li>家具</li>

                </ul>

            </div>

 

            <div class="nva_3_2">

                <ul>

                    <li></li>

                    <li></li>

                </ul>

            </div>

 

            <div class="nva_3_3">

                <ul>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                </ul>

            </div>

        </div>

        <div class="clear"></div>

 <!--下面都是相同的重复布局-->

 </div>

</div>

</div>

<!--底部-->

<!--<div></div>-->

<div class="footer">

    <div class="footer_1">

        <div class="footer_1_1">

            <a href="">预约维修服务</a>

            <a href="">7天无理由退货</a>

            <a href="">15天免费换货</a>

            <a href="">满150元包邮</a>

            <a href="">520余家售后网点</a>

        </div>

    </div>

    <div class="footer_2"></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

62

63

64

*{margin: 0;padding: 0;list-style: none;}

a{text-decoration: none;color: #A9A9A9;font-size: 12px;}

a:hover{color: white;}

.main > div{margin-top: 5px;}

.layout > div{width: 1226px;margin: 0 auto;}

.clear{clear: both;}

/*头部*/

.header{background-color: #333;}

.header .content{width: 1226px;height: 40px;margin: 0 auto;}

.header .content span{border-right: 1px solid #424242;font-size: 12px;margin: 0 5px}

/*左侧*/

.header_l ul li{float: left;height: 40px;line-height: 40px;}

/*右侧*/

.header_r ul{float: right;}/*因为直接浮动li标签会造成顺序颠倒 所以直接把整个ul浮动到右侧 里面的li设置左浮动即可达到效果*/

.header_r ul li{float: left;height: 40px;line-height: 40px;}

/*购物车*/

.header_r ul li:last-of-type{margin-left: 10px;padding: 0 10px;background-color: #424242;}

 

/*内容区*/

.main{margin: 0 auto; width: 1226px;}

 

/*第一排*/

.main .nva_1{height: 100px;width: inherit;background-color: #A9A9A9;}

/*第二排*/

.main .nva_2{height: 460px;width: inherit;background-color: #A9A9A9;}

/*第三排*/

.main .nva_3{height: 170px;width: inherit;/*background-color: #A9A9A9;*/}

.main .nva_3 .nva_3_1{width: 234px;height: inherit;background-color: #A9A9A9;float: left;}

.main .nva_3 .nva_3_2{width: 978px;height: inherit;background-color: #A9A9A9;float: right;}

/*第四排*/

.main .nva_4{width: inherit;height: 120px;background-color: #A9A9A9;}

 

/*第五排 开始另外一层*/

.layout{background-color: #f5f5f5;width: 100%;/*高度不定义留给下面撑开*/margin-top: 10px;}

/*第一排*/

.layout .nva_1 h2{padding: 10px 0;}

/*第二排*/

.layout .nva_1_2{width: 234px;height: 614px;background-color: lightcoral;float: left;}

.layout .nva_1_3{width: 992px;height: 614px;/*background-color: lightsalmon;*/float: right;}

.layout .nva_1_3 li{width: 234px;height: 300px;background-color: lightcoral;float: left;margin-left: 14px;}

.layout .nva_1_3 li:nth-of-type(4) ~ li{margin-top: 14px;/*只把下面的4个设置top外边距*/}

/*第三排*/

.layout .nva_2{width: inherit;height: 120px;background-color: #A9A9A9;margin-top: 20px;}

/*第四排*/

.layout .nva_3 {margin-top: 20px;}

.layout .nva_3 .nva_3_1 {width: 1226px;height: 58px;}

.layout .nva_3 .nva_3_1 h2{float: left;}

.layout .nva_3 .nva_3_1 ul{float: right;}

.layout .nva_3 .nva_3_1 li{float: left;margin-left: 10px;height: 58px;line-height: 58px}

 

.layout .nva_3 .nva_3_2 ul{float: left;}

.layout .nva_3 .nva_3_2 li{width: 234px;height: 300px;background-color: #A9A9A9;}

.layout .nva_3 .nva_3_2 li:last-of-type{margin-top: 10px;}

 

.layout .nva_3 .nva_3_3{float: left;/*background-color: #AF3434;*/width: 992px;height: 610px;}

.layout .nva_3 .nva_3_3 li{width: 234px;height: 300px;background-color: #A9A9A9;float: left;margin-left: 14px}

.layout .nva_3 .nva_3_3 li:nth-of-type(4) ~ li{margin-top: 10px;/*只把下面的4个设置top外边距*/}

.layout .nva_3 .nva_3_3 li:last-of-type,.layout .nva_3 .nva_3_3 li:nth-last-of-type(2){height:145px;width: 234px; }

 

/*底部*/

.footer .footer_1{width: 100%;height: 272px;}

.footer .footer_1 .footer_1_1{width: 1226px;height: 80px;margin: 0 auto;text-align: center;border-bottom: 1px solid #e0e0e0;}

.footer .footer_1 .footer_1_1 a{font-size: 1.5rem;height: 80px;line-height: 80px;}

.footer .footer_1 .footer_1_1 a:first-of-type ~ a{margin-left: 50px;}


最新手记推荐

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

全部回复(0)我要回复

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