最终效果图:
1.将所需图片所在的文件夹添加到创建的项目文件夹中
图片资源
2.新建default.aspx窗体,在CSS文件夹中建立index.css文档.
3.导入外联样式
在default.aspx的head区加入代码
<link href="./css/index.css" rel="stylesheet" type="text/css" media="screen" />
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>
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;
}
float:
❄设置浮动,类似于对齐
❄如果上个元素没有设置浮动,会自动跑到下一行
如果设置了,会跟在上一个元素后面,这个时候如果不希望继续跟在上一个元素后面,可以用
clear:清除浮动
⭐详细可以参考这篇博客
经验分享:CSS浮动(float,clear)通俗讲解
6.添加背景图片,背景颜色统一采用灰色调。
❄需要一张图片完全填充整个区域
background: url(../img/bg_header.jpg); /*设置背景图片路径和大小*/
background-size: 918px 100px; /*这里的大小为该区域的大小*/
❄通过图片不断重复来填充整个空间
background: url(../img/bg_menu.jpg); /*设置背景图片路径*/
background-size: contain; /*让背景图片能够完全显示在图中*/
background-repeat: repeat; /*剩余的部分通过不断重复图片填充*/
全部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;
}
效果图:
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;
}
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>   用户名:</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" style="width: 158px"></asp:TextBox>
</td>
</tr>
<tr>
<td>  密码:</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> </td>
<td> </td>
</tr>
<tr>
<td>
<asp:HyperLink ID="HyperLink1" runat="server"> 忘记密码>></asp:HyperLink>
</td>
<td> </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>所属类别:数码产品 </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>
10.项目工程
div+css网页设计例子项目工程