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" />

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> &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>

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

div+css网页设计例子相关推荐

html颜色代码大全word,DIV+CSS网页设计之网页配色方案
DIV+CSS网页设计之网页配色方案合集包含了目前常用的网页设计配色方案及其分析,网站的色彩就像是人的外表一样,如果打扮得美观大方,就会给人一种魅力四射的感受,而不修边幅则让人感到粗糙毛草,因此,网页 ...
div css网页设计源代码_HTML+CSS网页设计，企业网站服务项目布局样式
大家好,本篇文章分享企业网站服务项目的布局样式,这种布局样式通常用于企业网站首页,企业可以向客户提供的服务内容,不同类型的企业服务项目样式也不同,这只是其中一种. 效果图: 服务项目 HTML代码: ...
div css网页设计源代码_HTML+CSS网页设计，企业网站资讯文章布局样式
大家好,本篇文章分享企业网站资讯文章的布局样式,这种布局样式通常用于企业网站首页. 效果图: 资讯文章 HTML代码: 最新资讯 Newest information 高效简洁但稳定实用的网站程序20 ...
DIV+CSS网页设计常用布局代码
单行一列 body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;wid ...
Div+CSS网页设计（HTML5）
1.将图片添加到div中间位置 <div style="color:#0000FF" id="top"> <div class="f ...
div+css网页设计-心得
整体布局: 由外到内,从上到下,从左到右,层次分明选用标签: div用的最多(***),整体布局用div,打包多个元素用div,文字段落用p(p_***),a常转为块级标签,一行字多个样式用span ...
div+css动漫网页制作,dw个人网页设计,静态html+css网页设计
简单个人网页制作大学生网页设计作业静态HTML个人博客主页 DW个人网站模板下载大学生简单个人网页作品代码一.作品介绍 1.作品简介 :学生个人网页制作,dw网页设计,静态div+css网页设 ...
Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
HTML文本错位,DIV+CSS网页错位诊断和解决方法
你地DIV+CSS网页错位的概念是否了解,这里和大家分享一下常见DIV+CSS网页错位问题及解决方法,希望对你的学习有所帮助. DIV+CSS网页错位诊断随着WEB2.0标准化设计理念的普及,国内很 ...

div+css网页设计例子

div+css网页设计例子相关推荐

最新文章

热门文章