html中div控件 以及float属性 以及 clear属性

最新推荐文章于 2023-11-30 08:39:27 发布
最新推荐文章于 2023-11-30 08:39:27 发布
阅读量812 收藏
点赞数
分类专栏： WEB前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuisaozhang1292/article/details/81106921
版权

输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border: 1px solid red;">
        asdfasdf
    </div>
    
    <div style="height: 48px;
	    width:80%;
	    border: 1px solid red;
	    font-size: 16px;
	    text-align: center;
	    line-height: 48px;
	    font-weight: bold;">
    	asdf
    </div>
</body>
</html>

输出：

 输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/commons.css" />
</head>
<body>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
    <div class="c1 c2" style="color: pink">asdf</div>
</body>
</html>

输出：

输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
    </style>
</head>
<body style="margin: 0">
    <div class="pg-header">
        <div style="width: 980px;margin: 0 auto;">
            <div style="float: left;">收藏本站</div>
            <div style="float: right;">
                <a>登录</a>
                <a>注册</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div>
        <div style="width: 980px;margin: 0 auto;">
            <div style="float: left">
                Logo
            </div>
            <div style="float: right">
                <div style="height: 50px;width: 100px;background-color: #dddddd"></div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div style="background-color: red;">
         <div style="width: 980px;margin: 0 auto;">
             asdfsdf
         </div>
    </div>
    <div style="width: 300px;border: 1px solid red;">
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
        <div style="clear: both;"></div>
    </div>
</body>
</html>

输出：

淮南草
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
可拖动Div控件
05-18
Javascript实现的交互式Div，Div随用户拖动而移动位置。
div控件的相关介绍
sunny19890816的专栏
05-26 1825
  第一次用Ajax技术来做一个简单的网站，登陆页面使用的是form，div，input三种元素来布局，希望的效果是一个带图片的div显示在距form元素左边框的约20%（form的width）的距离处，经过查看资料，了解到：1.html中元素可分为内联元素（inline element）和块元素（block element）；  a）块元素（block element），一般是其他元素的
html5 div属性定义,html中<div>标签的用法与定义
weixin_29333353的博客
06-10 1458
定义和用法： 可定义文档中的分区或节(division/section)。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。用法： 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。不必为...
网页CSS样式——float样式属性
CandidBoy的博客
05-21 705
一、float作用 HTML代码编写过程中需要注意代码规范，代码错落有致即是其中最基本的要求，但是浏览器会讲换行代码之间的多个空格解释为一个空格，但是这一个空格有时候会破坏整个页面布局，如何解决呢？通过子元素浮动即可解决。 二、float属性值详述 1、none none：默认值。元素不浮动，并会显示其在文本中出现的位置。 2、left left：元素向左浮动。 示例代码1： &lt...
HTML学习（二）
linlinlin45的博客
04-24 243
首先，对于自己的学习热情投入，是十分不满意的，以至于从上次更新到现在，只继续学了不到四分之一的进度。也有朋友提醒我不要花过多的时间在html上，对于这些只需要能够看懂即可，目前有很多网页模版，可以很轻松地完成框架的构造。重点还是要多学习JavaScript以及与服务器交互完成数据显示的相关技术，确实很对，但是这不能成为自己懈怠的理由！ 下面是我近期较为糟糕的学习进度： 对比HTML学习（一）中...
CSS中div的浮动float
热门推荐
李昆鹏的博客
05-11 3万+
------------------------------CSS中div的浮动float-----------------------------------HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置，由后续的...
从基础到进阶：实现div控件的拖拽和缩放功能
最新发布
Twinkle_sone的博客
11-30 1890
如果你正在寻找一个详细的教程，从基础到进阶地学习如何实现具备拖拽和缩放特性的div控件，那么本文将是你需要的！我们将从HTML、CSS和JavaScript的基本知识入手，深入讨论拖拽和缩放的核心概念，然后逐步教你如何利用这些技术实现一个强大的div控件。无论你是初学者还是有经验的开发者，都能够从本文中获得有益的指引和实用的技巧。
div实现控件隐藏跟显示
xulong5000的专栏
05-21 1048
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
拖拽div控件实战
qq_44659826的博客
08-22 212
拖拽div控件实战思路二、示意图1.代码示例2.读入数据总结 思路 1、鼠标点击，获取位置 2、鼠标拖动事件，更新位置 3、鼠标松开事件，更新位置 提示：以下是本篇文章正文内容，下面案例可供参考 二、示意图 1.代码示例 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwar
DIV流式布局（float和clear）
张亚运的专栏
11-25 5036
语法：   float : none | left |right   参数：   none : 　对象不浮动 left : 　对象浮在左边 right : 　对象浮在右边   说明：   该属性的值指出了对象是否及如何浮动。请参阅clear属性。 当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于blo
float浮动属性及position定位属性
weixin_46513229的博客
06-04 1233
float浮动属性是Div布局中经常要设置的一个属性。<div>是一个块级元素，在水平方向上会自动伸展，直到包含它的元素的边界；而在垂直方向和其它元素依次排列且能并排。但当使用了float浮动属性后，块级元素的表现就会有所不同。 float浮动属性可以设置的值为left，right，inherit及默认值none。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时元素的宽度会根据其内容伸展或收缩。 ...
如何终止DIV的float属性简单实现
01-19
终止 DIV 的 float 属性，在 css 里面定义一个样式 复制代码代码如下: .clear_float { clear: both; } 页面使用时加上一行 <div class=clear_float></div> 后面的 div 将不再 float。
用CSS的float和clear属性进行三栏网页布局
01-19
本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。 绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局...
DIVCSS布局：CSS浮动float属性详解.doc
01-08
DIVCSS布局：CSS浮动float属性详解
CSS的position属性在DIV层中的应用
09-25
定位的话，父DIV设置position:relative后，子DIV的position:absolute就会相对父DIV作绝对定位，接下来为大家介绍下CSS的position属性在DIV层中的应用
html 利用a标签实现同页面跳转至指定位置
淮南草的博客
07-18 1万+
 输入： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &l
html中span标签 和 a 标签
淮南草的博客
07-18 8574
输入： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt
使用本地BootStrap
淮南草的博客
04-09 1879
使用本地bootstrap： 第一步：下载bootstrap 第二步： 解压文件bootstrap文件夹 并将其放在新建文件内 本次新建为myHtml5，并将jquery 拷贝至js文件夹内（因为bootstrap依赖于jquery） 第三步： 复制https://v3.bootcss.com/components/#nav中的代码 <!DOCTYPE htm...
CSS内部参数
淮南草的博客
01-08 1673
  float  一定要会用 第一种： 第二种：改进的方法        加上最后一行 就可以让父标签div 的红框出现     display 将  块级标签 与 行内标签 互换    padding  margin margin：0 auto; 自动左右居中   position   应用    分层 保持头部不...
div float属性
05-11
float 属性可以设置在块级元素上，例如 div 元素。当设置 float 属性时，元素的 display 属性会自动变为 block。 float 属性常用于实现多栏布局、图文混排等效果。 例如，以下代码将 div 元素向左浮动： ```html ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值