div+css网页设计例子

最新推荐文章于 2024-10-24 15:13:05 发布
最新推荐文章于 2024-10-24 15:13:05 发布
阅读量5k 收藏 90
点赞数 8
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51286763/article/details/120461992
版权

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

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网页设计例子项目工程

苏格666
关注
网页设计（二）——DIV+CSS布局1
初学者
07-11 1万+
前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿，有关HTML+CSS框架的编程，比较基础。当时为了给入门的同学更多感性认识，提供了很多小实例，这里也都给出来了。 DIV+CSS布局 DIV+CSS布局概念 DIV+CSS布局方式并不是一种新的语言或者体系，它就是html语言中的一部分。 简单来说就是把标签中的样式...
学习DIV+CSS网页布局之一列布局
09-24
【描述】: "本文旨在探讨CSS布局中的一列布局技术，通过实例解析如何利用DIV+CSS实现单列网页设计，适合初学者及需要进阶理解网页布局的开发者参考。" 在网页设计中，布局是构建网页结构的关键部分，它决定了网页...
一个简单的网页布局案例(DIV+CSS)
04-26
网页布局简单案例 通过简单的更改几行样式实现通篇布局的调整
DIV+CSS网页布局实例
热门推荐
技术无止境，人生仍探索。
03-16 2万+
一、效果预览 说明：非常基础的IDV+CSS，实现了一般网站布局。CSS样式也比较基础，一些像定位等属性都没有使用。 二、代码实现 1、主体结构 （1）标签结构 （2）容器样式 2、头部 （1）头部标签 （2）头部样式、 3、导航 （1）标签结构 （2）CSS样式 4、主体 （1）主体标签 &amp;amp;lt;!-- 主体 --&amp;amp;gt; &amp;amp;lt;div class=&amp;qu
用DIV+CSS技术设计的个人网页（web前端期末网页制作课作业）HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
最新发布
HTML网页设计 专注大学生网页设计
10-24 761
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
01 DIV+CSS 固定页面布局
weixin_30443895的博客
03-23 583
本文讲解使用DIV+CSS布局最基本的内容，读完本文你讲会使用DIV+CSS进行简单的页面布局。 DIV+CSS布局中主要CSS属性介绍： Float: Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列...
css+div布局案例
weixin_33831673的博客
11-26 130
给最外层的div命名一个class 有针对性的进行css布局。 &lt;div class="joinus-info"&gt; &lt;div class="form-title"&gt;填写表格&lt;/div&gt; &lt;form action="{sh::U('Index/joinus')}" class="smart-green
CSS布局教程模板：用DIV+CSS实现经典式三行两列布局
weixin_30279315的博客
05-04 1001
看到、遇到过很多的企业网站或其它小型的展示类网站，有一些共同的特点，即顶部放一个大的导航或BANNER，右侧是链接或图片，左侧放置内容，页面底部放置版权信息等。这样的形式是国内经典式的布局，我们这里不对它的视觉效果作过多的讨论，我们今天说说如何用DIV+CSS实现三行两列的布局。 　　我们看下面的图片： 　　这样的结构大家再熟悉不过了，我们该如何用DIV+CSS实现它呢。我...
适合初学者的39个div+css网页布局例子
11-05
在网页设计领域，Div+CSS是一种常见的网页布局技术，它将结构（HTML）与样式（CSS）分离，使页面设计更加灵活、可维护性更强。本资源“适合初学者的39个div+css网页布局例子”是为那些刚开始接触网页布局的朋友们...
div+css网页设计案例图片资源
09-25
总的来说，这个资源包可能是为了让学习者看到Div+CSS实际应用的例子，从而加深对这两种技术的理解，并通过模仿和实践，提升网页设计能力。通过分析和使用这些图片，设计师能够更好地掌握网页布局、样式设计以及响应...
css+div网页布局实例40例
11-24
css+div网页布局实例40例,有图形,有html源文件.学习div+css布局经典.各位朋友给个评论啊,我都无赏奉献了,让我增加点积分吧...
51套网页设计模板（div+css）
11-18
51套网页设计模板（div+css）,实用。适合学习网页开发的用户
100个网页设计模板(div+css)
04-24
100个网页设计模板(div+css),方便学习
DIV+CSS网页设计实例教程
10-30
实例构建网站 第一步：规划网站； 第二步：创建html模板及文件目录等； 第三步：将网站分为五个div，网页基本布局的基础； 第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第九步：导航条的制作
网页设计div+css
11-29
网页设计大作业之表格布局品味咖啡主题，网页由5个页面组成。
div+css 页面设计新样式
毒王的博客
09-06 923
这个效果是我研究了好多项目后,结合我的客户的类型和要求,设计了一套简介明了,大方又不落俗套的鼠标样式. css代码: .mouseToLittleHand { cursor: pointer; } .clickToBeBlue { color: #4482E0; border-bottom: solid; } 不同的div恒排成一排
div+css网页标准布局实例
离开实践的理论是空洞的理论,没有理论指导的实践是盲目的实践
09-03 1379
效果图 html文件 主页 搜索产品 首页 企业新闻 企业简介 产品展厅 企业历史 招商加盟
DIV+CSS网页设计常用布局代码
南三方---网站设计开发录
07-10 1847
单行一列body{margin:0px;padding:0px;text-align:center;}#content{margin-left:auto;margin-right:auto;width:400px;width:370px;}两行一列body{margin:0px;padding:0px;text-align:center;}#content-top{margin
掌握DIV+CSS设计：实战案例剖析
资源摘要信息:"div+css网页设计例子" 1. 网页布局技术的发展历程 网页设计从最开始的表格布局(table-based layout)发展至今，已经经历了一系列的变革。表格布局因其复杂的嵌套结构和难以维护的特点逐渐被淘汰。随后...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值