div+css网页设计例子

最新推荐文章于 2024-06-17 10:13:21 发布
最新推荐文章于 2024-06-17 10:13:21 发布
阅读量4.9k 收藏 90
点赞数 7
文章标签： 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
关注
  • 7
    点赞
  • 踩
  • 90
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Html+CSS网页设计
我佛很悲
03-22 1188
Html CSS网页设计 样例+注释笔记
div+css静态网页设计web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTML网页制作代码
01-06 962
web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTML网页制作代码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 文章目录web网页设计实例作业 ——中国
一个简单的网页布局案例(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
HTML5期末大作业：用DIV+CSS技术设计的网页与实现（剪纸传统文化网页设计主题） (1)
最新发布
HTML网页设计
06-17 516
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
01 DIV+CSS 固定页面布局
weixin_30443895的博客
03-23 548
本文讲解使用DIV+CSS布局最基本的内容，读完本文你讲会使用DIV+CSS进行简单的页面布局。 DIV+CSS布局中主要CSS属性介绍： Float: Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列...
css+div布局案例
weixin_33831673的博客
11-26 117
给最外层的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 979
看到、遇到过很多的企业网站或其它小型的展示类网站，有一些共同的特点，即顶部放一个大的导航或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布局1
初学者
07-11 1万+
前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿，有关HTML+CSS框架的编程，比较基础。当时为了给入门的同学更多感性认识，提供了很多小实例，这里也都给出来了。 DIV+CSS布局 DIV+CSS布局概念 DIV+CSS布局方式并不是一种新的语言或者体系，它就是html语言中的一部分。 简单来说就是把标签中的样式...
学习DIV+CSS网页布局之一列布局
09-24
【描述】: "本文旨在探讨CSS布局中的一列布局技术，通过实例解析如何利用DIV+CSS实现单列网页设计，适合初学者及需要进阶理解网页布局的开发者参考。" 在网页设计中，布局是构建网页结构的关键部分，它决定了网页...
div+css 页面设计新样式
毒王的博客
09-06 912
这个效果是我研究了好多项目后,结合我的客户的类型和要求,设计了一套简介明了,大方又不落俗套的鼠标样式. css代码: .mouseToLittleHand { cursor: pointer; } .clickToBeBlue { color: #4482E0; border-bottom: solid; } 不同的div恒排成一排
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值