div+css网页设计例子_div加css网页布局实例

作者：从前慢现在也慢 | 2024-03-27 16:38:52

踩

div加css网页布局实例

最终效果图：
在这里插入图片描述

1.将所需图片所在的文件夹添加到创建的项目文件夹中
图片资源
在这里插入图片描述
2.新建default.aspx窗体，在CSS文件夹中建立index.css文档.

3.导入外联样式
在default.aspx的head区加入代码

<link href="./css/index.css" rel="stylesheet" type="text/css" media="screen" />
1

在这里插入图片描述

4.利用div将窗体划分为8部分
在这里插入图片描述
在default.aspx的body区加入以下代码

	<!-- ********顶部DIV******** -->
    <div id="logo"></div>
    <div id="navigation"></div>
    <!-- ********中部DIV******** -->
    <div id="main">
            <div id="left_top">
            </div>
            <div id="right_top" >
            </div>    
            <div id="right_bottom">
            </div>  
            <div id="left_bottom" >
            </div>     
    </div>
    <!-- ********底部DIV******** -->
    <div id="bottom_line"></div>
    <div id="footer"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

5.利用css将布局大体划分出来
在css文件中加入以下代码

body {
    margin: 0px; /*设置logo区和网页顶端没有空隙*/
}
#logo {
    margin: 0px auto; /*设置logo区水平居中，且和navigation区域没有缝隙*/
    width: 918px; /*设置logo区宽高*/
    height: 100px;
    background-color: red; /*设置背景颜色*/
}
#navigation {
    margin: 0px auto;
    width: 918px;
    height: 30px;
    background-color:yellow;

}

#main {
    margin: 0px auto;
    width: 918px;
    background-color: #F5F5F5;
    height: 400px;
}

#left_top {
    width: 30%; /*left_top区的宽为main区的宽的30%*/
    background-color: green;
    float: left; /*设置浮动*/
    height: 50%;
}


#right_top {
    width: 70%;
    background-color:blue;
    float: right ;
    height: 20%;
}

#right_bottom {
    background-color: black;
    width: 70%;
    float: right;
    height: 80%;
}
#left_bottom {
    background-color: mediumpurple;
    width: 30%;
    float: left;
    height: 50%;
}
#bottom_line {
    margin: 0px auto;
    width: 918px;
    height: 20px;
    background-color: purple;
    clear: both; /*清除浮动*/
}
#footer {
    margin: 0px auto;
    width: 918px;
    height: 30px;
    background-color: cornflowerblue;
    clear: both;
}

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

float：
❄设置浮动，类似于对齐
❄如果上个元素没有设置浮动，会自动跑到下一行
如果设置了，会跟在上一个元素后面，这个时候如果不希望继续跟在上一个元素后面，可以用
clear：清除浮动
⭐详细可以参考这篇博客
经验分享：CSS浮动(float,clear)通俗讲解
在这里插入图片描述
6.添加背景图片，背景颜色统一采用灰色调。
❄需要一张图片完全填充整个区域

    background: url(../img/bg_header.jpg); /*设置背景图片路径和大小*/
    background-size: 918px 100px; /*这里的大小为该区域的大小*/
1
2

❄通过图片不断重复来填充整个空间

	background: url(../img/bg_menu.jpg); /*设置背景图片路径*/
    background-size: contain; /*让背景图片能够完全显示在图中*/
    background-repeat: repeat; /*剩余的部分通过不断重复图片填充*/
1
2
3

全部css代码：

body {
    margin: 0px; /*设置logo区和网页顶端没有空隙*/
}
#logo {
    margin: 0px auto; /*设置logo区水平居中，且和navigation区域没有缝隙*/
    width: 918px; /*设置logo区宽高*/
    height: 100px;
    background: url(../img/bg_header.jpg); /*设置背景图片路径和大小*/
    background-size: 918px 100px; /*这里的大小为该区域的大小*/
}
#navigation {
    margin: 0px auto;
    width: 918px;
    height: 30px;
    background: url(../img/bg_menu.jpg); /*设置背景图片路径*/
    background-size: contain; /*让背景图片能够完全显示在图中*/
    background-repeat: repeat; /*剩余的部分通过不断重复图片填充*/
}

#main {
    margin: 0px auto;
    width: 918px;
    background-color: #F5F5F5;
    height: 400px;
}

#left_top {
    width: 30%; /*left_top区的宽为main区的宽的30%*/
    float: left; /*设置浮动*/
    height: 50%;
    background: url(../img/bg_left_top.jpg);
    background-size: 272px 200px;
}


#right_top {
    width: 70%;
    background-color: #F5F5F5;
    float: right;
    height: 20%;
}

#right_bottom {
    background-color: #F5F5F5;
    width: 70%;
    float: right;
    height: 80%;
}
#left_bottom {
    background-color: #F5F5F5;
    width: 30%;
    float: left;
    height: 50%;
}
#bottom_line {
    margin: 0px auto;
    width: 918px;
    height: 20px;
    clear: both; /*清除浮动*/
    background: url(../img/bg_footer.gif);
    background-size: cover;
}
#footer {
    margin: 0px auto;
    width: 918px;
    height: 30px;
    background-color: #F5F5F5;
    clear: both;
}

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

效果图：
在这里插入图片描述
7.添加一系列组件（按钮、文本框等）
❄工具箱可以按ctrl+alt+x调出

❄如果想让按钮没有缝隙，可以参考这个链接
HTML去除2个相邻input、button标签之间的空隙
❄插入表格

⭐整体控件

8.全部css代码

body {
    margin: 0px; /*设置logo区和网页顶端没有空隙*/

}
#logo {
    margin: 0px auto; /*设置logo区水平居中，且和navigation区域没有缝隙*/
    width: 918px; /*设置logo区宽高*/
    height: 100px;
    background: url(../img/bg_header.jpg); /*设置背景图片路径和大小*/
    background-size: 918px 100px; /*这里的大小为该区域的大小*/
}
#navigation {
    margin: 0px auto;
    width: 918px;
    height: 30px;
    background: url(../img/bg_menu.jpg); /*设置背景图片路径*/
    background-size: contain; /*让背景图片能够完全显示在图中*/
    background-repeat: repeat; /*剩余的部分通过不断重复图片填充*/
}

#main {
    margin: 0px auto;
    width: 918px;
    background-color: #F5F5F5;
    height: 400px;
}

#left_top {
    width: 30%; /*left_top区的宽为main区的宽的30%*/
    float: left; /*设置浮动*/
    height: 50%;
    background: url(../img/bg_left_top.jpg);
    background-size: 282px 200px;
}


#right_top {
    width: 70%;
    background-color: #F5F5F5;
    float: right;
    height: 20%-10px;
}

#right_bottom {
    background-color: #F5F5F5;
    width: 70%;
    float: right;
    height: 80%;
}
#left_bottom {
    background-color: #F5F5F5;
    width: 30%;
    float: left;
    height: 50%;
}
#bottom_line {
    margin: 0px auto;
    width: 918px;
    height: 20px;
    clear: both; /*清除浮动*/
    background: url(../img/bg_footer.gif);
    background-size: cover;
}
#footer {
    margin: 0px auto;
    width: 918px;
    height: 30px;
    background-color: #F5F5F5;
    clear: both;
    text-align: center;
}

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

9.全部defalut.aspx的代码

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="WebApplication1._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="./css/index.css" rel="stylesheet" type="text/css" media="screen" />
    <style type="text/css">
        .auto-style1 {
        }
        .auto-style2 {
            text-align: right;
        }
        .auto-style3 {
            text-align: left;
        }
        .auto-style4 {
            width: 100%;
        }
        .auto-style5 {
            text-align: center;
        }
        </style>
    </head>
<body>
    <form id="form1" runat="server">
    <!-- ********顶部DIV******** -->
    <div id="logo"></div>
    <div id="navigation" class="auto-style2"> 
        
        <asp:Button ID="Button1" runat="server" Text="商城首页" style="font-weight: 700" Height="20px"/><asp:Button ID="Button2" runat="server" Text="个人资料" Height="20px" /><asp:Button ID="Button3" runat="server" Text="购物车" Height="20px" /><asp:Button ID="Button4" runat="server" Text="订单信息" Height="20px" /><asp:Button ID="Button5" runat="server" Text="使用帮助" Height="20px"/><asp:Button ID="Button6" runat="server" Text="注销" Height="20px"/>
        
        <br />
        
        </div>
    <!-- ********中部DIV******** -->
    <div id="main">
            <div id="left_top">

                <br />
                <br />
                <br />
                <br />
                <table class="auto-style4">
                    <tr>
                        <td> &nbsp&nbsp用户名：</td>
                        <td>
                            <asp:TextBox ID="TextBox2" runat="server" style="width: 158px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp&nbsp密码：</td>
                        <td>
                            <asp:TextBox ID="TextBox3" runat="server" style="width: 158px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style5">
                            <asp:Button ID="Button8" runat="server" Text="登录" />
                        </td>
                        <td class="auto-style5">
                            <asp:Button ID="Button9" runat="server" Text="注册" />
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>
                            <asp:HyperLink ID="HyperLink1" runat="server">&nbsp忘记密码>></asp:HyperLink>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                </table>

                <br />
                <br />
                <br />

            </div>
            <div id="right_top" class="auto-style5">

                    <asp:Image ID="Image1" runat="server" Height="64px" ImageUrl="~/img/search.gif" Width="93px" ImageAlign="Middle" />
                    <asp:Label ID="Label1" runat="server" Text="商品名称"></asp:Label>
                    <asp:TextBox ID="TextBox1" runat="server" Width="106px"></asp:TextBox>
                    <asp:Label ID="Label2" runat="server" Text="商品种类"></asp:Label>
                    <asp:DropDownList ID="DropDownList1" runat="server" Height="23px" Width="157px">
                    </asp:DropDownList>
                    <asp:Button ID="Button7" runat="server" Text="搜索" />
            </div>
                
            <div id="right_bottom">
           
                <table  style="width:100%; height: 50%;">
                    <tr>
                        <td rowspan="3"><img src="../img/product.jpg" style="height: 120px; width: 185px"/></td>
                        <td colspan="2" style="text-align: center">Dell笔记本</td>
                    </tr>
                    <tr>
                        <td>所属类别：数码产品&nbsp; </td>
                        <td style="text-align: right">价格：100000元</td>
                    </tr>
                    <tr>
                        <td colspan="2" class="auto-style1">戴尔笔记本电脑使用优质材料打造，机身轻薄，携带方便，还配有背光键盘，让按键一目了然，出众品质，邀您畅享。</td>
                    </tr>
                    </table>
           
                <table  style="width:100%; height: 50%;">
                    <tr>
                        <td rowspan="3"><img src="../img/product.jpg" style="height: 120px; width: 185px"/></td>
                        <td colspan="2" style="text-align: center">联想笔记本</td>
                    </tr>
                    <tr>
                        <td>所属类别：数码产品</td>
                        <td style="text-align: right">价格：100000元</td>
                    </tr>
                    <tr>
                        <td colspan="2" class="auto-style1">联想笔记本电脑使用优质材料打造，机身轻薄，携带方便，还配有背光键盘，让按键一目了然，出众品质，邀您畅享。</td>
                    </tr>
                    </table>
           
            </div>  
            <div id="left_bottom" class="auto-style3">
                <asp:Image ID="Image3" runat="server" Height="47px" ImageUrl="~/img/bg_left_bottom.jpg" Width="274px" />
                <asp:Image ID="Image4" runat="server" Height="27px" Width="30px" ImageUrl="~/img/list_item.gif" />
                <asp:Label ID="Label3" runat="server" Text="Dell笔记本"></asp:Label>
                <br />
                <asp:Image ID="Image5" runat="server" Height="27px" Width="30px" ImageUrl="~/img/list_item.gif" />
                <asp:Label ID="Label4" runat="server" Text="联想笔记本"></asp:Label>
                <br />
                <asp:Image ID="Image6" runat="server" Height="27px" Width="30px" ImageUrl="~/img/list_item.gif" />
                <asp:Label ID="Label5" runat="server" Text="联想台式机"></asp:Label>
                <br />
                <asp:Image ID="Image7" runat="server" Height="27px" Width="30px" ImageUrl="~/img/list_item.gif" />
                <asp:Label ID="Label6" runat="server" Text="HP台式机"></asp:Label>
                <br />
            </div>
            
    </div>
    <!-- ********底部DIV******** -->
    <div id="bottom_line"></div>
    <div id="footer">xxx@2001-2021 版权所有</div>
    </form>
</body>
</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
138
139
140
141
142
143
144
145
146
147
148
149

10.项目工程
div+css网页设计例子项目工程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】