HTML:CSS+DIV示例

最新推荐文章于 2023-11-29 09:59:12 发布
最新推荐文章于 2023-11-29 09:59:12 发布
阅读量934 收藏
点赞数
分类专栏： 其他 文章标签： div html css class float border

CSS+DIV是新的标准，取代Table布局，具有结构清洗解析数度快等优点。下面是我做的一个示例，适合绝大多数网站的布局。效果如下：

代码如下：

 

<html>

    <head>

        <title>CSS + DIV 测试</title>

        <style type="text/css">

            .header

            { 

                MARGIN: 0px; 

                BORDER: 0px; 

                BACKGROUND:#ccd2de; 

                WIDTH: 100%; 

                HEIGHT: 60px;

            }

            .mainbox {

                MARGIN: 0px; 

                WIDTH: 100%;

                BACKGROUND:#FFF; 

            }



            .sidebar{ 

                FLOAT: left; 

                MARGIN: 2px 2px 0px 0px; 

                PADDING: 0px; 

                WIDTH: 25%; 

                BACKGROUND: #F2F3F7; 

            }

            .menu{ 

                FLOAT: right; 

                MARGIN: 2px 0px 2px 0px; 

                PADDING:0px 0px 0px 0px; 

                WIDTH:74%;

                BACKGROUND:#ccd2de; 

            }

            .content{ 

                FLOAT: right; 

                MARGIN: 1px 0px 2px 0px; 

                PADDING:0px; 

                WIDTH:74%; 

                BACKGROUND: #E0EFDE;

                



            }

            .footer{ 

                CLEAR: both; 

                MARGIN: 0px 0px 0px 0px; 

                PADDING: 5px 0px 5px 0px; 

                BACKGROUND: #ccd2de; 

                HEIGHT: 40px; 

                WIDTH: 100%;

            }

        </style>

    </head>

    <body>

        <div class="header">header</div> 

        <div class="mainbox"> 

            <div class="menu">menu<br/></div> 

            <div class="sidebar">sidebar<br/><br/><br/></div> 

            <div class="content">content<br/><br/><br/><br/></div> 

        </div> 

        <div class="footer">footer</div>

    </body>

</html>
hefeixue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
30个html+CSS和html5动画经典案例
qq_53863770的博客
06-13 2963
素材依赖https://www.icodingedu.com/goods/show/82?targetId=91&preview=0
CSS+DIV 20个经典实例（上）
11-01
CSS+DIV 20个经典实例（上）CSS+DIV 20个经典实例（上）CSS+DIV 20个经典实例（上）CSS+DIV 20个经典实例（上）CSS+DIV 20个经典实例（上）CSS+DIV 20个经典实例（上）CSS+DIV 20个经典实例（上）
html 布局小例子(div)
hjjdebug的专栏
07-17 703
div 区块布局, 由html及css 共同确定布局,其中html 确定了包含关系,css中定义了寬高. 小例子,我们直接上代码, 还可以慢慢把玩,供入门用. <!DOCTYPE html> <html> <head> <meta charset=utf-8> <style> /* 由html和css 共同设置布局 */ #container {width:600px;} /* 父级区块 */ ...
JavaWeb8——利用 CSS 和 DIV 网页布局
NoBug
03-21 2640
文章目录1. DIV + CSS 布局2. 网页布局框架示例 1. DIV + CSS 布局 在开始设计一个网站时，首先要对网页进行布局，一个好的布局，可以加快开发进度。 DIV + CSS 布局是网页 HTML 通过div 标签以及 css 样式代码开发制作的网页的统称。 DIV + CSS 布局的网页更易维护，网页打开更快。 DIV + CSS 布局相对于表格，框架有以下优势： 1. 使用页面加载更快速。 2. 使修改设计时更有效率且费用更低。 3. 更有利于搜索引擎的搜索。 4. 节约成本，降低宽
前端html+css（基础+案例）
weixin_43366437的博客
07-25 1097
html基础入门
【带给你不一样的思路】纯 CSS + HTML 实现几个好看的案例
qq_56352725的博客
11-29 608
一些简单的前端案例，适合刚入门 HMTL + CSS 的学者进行练习哦！！！练习重点：定位！！！
30个HTML+CSS前端开发案例（完结篇）
终成大师的博客
02-14 1万+
30个HTML+CSS前端开发案例（完结篇）
HTML+CSS项目案例
qq_52108058的博客
11-30 3316
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
(前端)HTML之CSS(div+css布局)
weixin_65479202的博客
04-23 1万+
前端HTML的基础知识内容的更新已经更新完毕！！！打好基础，才能学好HTML的相关知识！！！
HTML+CSS基础综合案例
qq_53847322的博客
07-04 2948
1.尚合 效果图​​​​​​HTML代码如下： css代码如下： 成果图： 2.腾讯云 效果图html代码如下： css代码如下： 成果图如下：
css+div实现大括号.zip
03-10
css+div实现大括号 1、完整的代码示例；2、清晰的效果图
css+div实现各种常见边框.zip
03-10
css+div实现各种常见边框（大括号、小括号、圆形括号等） 1、完整的代码示例，清晰简单； 2、效果示例图，轻松可见
Css+Html仿ChatGpt聊天页面Demo
08-04
我们将使用HTML和CSS来实现一个仿ChatGPT聊天对话官方页面。我们的目标是创建一个与chat.openai.com相似的界面，展示一种用于展示聊天机器人对话的布局和样式。 为了实现我们的目标，我们需要遵循以下步骤： 1. ...
Div+Css画圆示例代码
09-25
画圆想必在很多的文章中都有介绍过，在本文将为大家介绍下如何使用Css+Div画圆，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助
CSS+DIV-盒子模型示例.zip
11-03
CSS+DIV-盒子模型示例.zip
div+css实例布局（一）
热门推荐
佳小凡的博客
07-27 5万+
导航是前端开发中避免不了的一个区域，今天就来写写导航栏。 导航栏（一） &lt;div id='menu'&gt; &lt;a href="#"&gt;链接&lt;/a&gt;| &lt;a href="#"&gt;链接&lt;/a&gt;| &lt;a href="#"&gt;链接&lt;/a&gt;| &lt
HTML DIV布局实例
qq_40596594的博客
05-05 7367
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Div首页布局</title> <style type="text/css"> *{ margin: 0; padding: 0;...
html div详解,CSS+DIV网页布局技术详解
weixin_32027491的博客
06-29 422
CSS+DIV网页布局技术详解语音编辑锁定讨论上传视频要学网页布局，这一本书就够了！CSS布局是目前最流行的网页制作技术。通过实例讲解了CSS各个属性的使用方法和怎样使用CSS进行页面的制作。书名CSS+DIV网页布局技术详解作者邢太北许瑞建出版社清华大学出版社出版时间2014年3月定价58.8 元ISBN9787302345732光盘有CSS+DIV网页布局技术详...
HTML 第六章 CSS + DIV实现整体布局
Java软件工程师之路
04-18 2702
HTML 第七章 CSS + DIV实现局部布局 HTML 第六章 CSS + DIV实现整体布局 1、技术目标： 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2、什么是W3C标准？     W3C：World Wide Web Consortium，万维网联盟 ...
员工应聘登记表html+css+div
最新发布
03-08
员工应聘登记表是一种用于收集员工应聘信息的表单，通常由HTML、CSS和DIV等前端技术来实现。下面是一个简单的员工应聘登记表的HTML+CSS+DIV示例： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>员工应聘登记表</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h1>员工应聘登记表</h1> <form> <div class="form-group"> <label for="name">姓名：</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="email">邮箱：</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="phone">电话：</label> <input type="tel" id="phone" name="phone" required> </div> <div class="form-group"> <label for="resume">简历：</label> <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required> </div> <div class="form-group"> <label for="cover-letter">求职信：</label> <textarea id="cover-letter" name="cover-letter" required></textarea> </div> <button type="submit">提交</button> </form> </div> </body> </html> ``` CSS代码（style.css）： ```css .container { max-width: 500px; margin: 0 auto; padding: 20px; } h1 { text-align: center; } .form-group { margin-bottom: 10px; } label { display: block; } input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; padding: 5px; } button[type="submit"] { display: block; margin: 10px auto; } ``` 以上代码实现了一个简单的员工应聘登记表，包括姓名、邮箱、电话、简历和求职信等字段，并添加了一些基本的样式。你可以根据需要进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值