(前端)html与css,8、div和span标签

1、div和span的认识

通常称为"盒子"
div是大的范围,span是小的范围
div:division,范围、区域、分割,并没有什么特殊语义,经常用来布局。
div里经常放置一些具有某些特殊功能、相似类型的标签,这就是布局过程。
div是一个典型的容器级标签,可放置任何的标签。
span:小区域、小跨度、常用于小范围调整布局。
span在p标签内:一般认为p>span>p

2、简单的div+css布局

最开始使用表格布局,结构和样式不分离。
div+css:结构和样式分离,初学者必须会。

代码↓

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 1000px;
            height: 100px;
            margin: 0 auto;
            background: pink;
        }
        .logo{
            width: 150px;
            height: 100px;
            float: left;
            background: skyblue;
        }
        .nav{
            width: 750px;
            height: 100px;
            float: right;
            background: red;
        }
        .content{
            width: 1000px;
            height: 400px;
            margin: 30px auto;
            background: orange;
        }
        .slide{
            width: 150px;
            height: 300px;
            float: left;
            background: green;
        }
        .main{
            width: 750px;
            height: 400px;
            float: right;
            background: pink;
        }
        .footer{
            width: 1000px;
            height: 100px;
            margin: 0 auto;
            background: pink;
        }
        .content p span{
            color: green;
        }
    </style>
<body>
    <!--header部分-->
    <div class="header">
        <div class="logo">logo</div>
        <div class="nav">导航</div>
    </div>
    <!--主体部分-->
    <div class="content">
        <div class="slide">侧边栏</div>
        <div class="main">
            <h2>这是主体</h2>
                <p>
                    <span>&nbsp&nbsp绿色(green)是自然界中常见的颜色,是一种比刚长的嫩草的颜色深些的颜色或呈艳绿,和在光谱中介青与黄之间的那种颜色。绿色是电磁波的可视光部分中的中波长部分,波长为492~577纳米。绿色是大自然界中常见的颜色,代表意义为清新、希望、安全、平静、舒适、生命、和平、宁静、自然、环保、成长、生机、青春、放松。</span><a href="http://www.baidu.com">点我跳转到百度</a>
                </p>
        </div>
    </div>
    <!--footer部分-->
    <div class="footer">footer部分</div>
</body>
</html>

div一般分为三大部分

(1)、header部分

(2)、主体部分

(3)、footer部分

效果图↓

原文地址:https://www.cnblogs.com/StevenSunYiwen/p/10961653.html

时间: 2024-11-06 16:55:17

(前端)html与css,8、div和span标签的相关文章

CSS之div和span标签

div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒子". 1                <div> 2                         <h3>中国主要城市</h3> 3                         <ul> 4                         

Div和Span标签显示与隐藏

本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuery的函数与语法,在网页中放置一个铵钮,用户点一点隐藏或显示.还放置了一个div标签和一个span标签. 在asp.net mvc环境中进行,在控制中创建一个Action: 接下来创建一个视图(标记1): 标记2,在网页添加一个铵钮,value为“hide”,说明铵钮当前状态是show.标记3,添加d

web前端入门到实战:HTML-div和span标签

一.div标签 1.作用:一般用于配合CSS完成网页的基本布局 2.例子: <style> .head{ width: 980px; height: 100px; background: red; margin: auto; } .content{ width: 980px; height: 300px; background: green; margin: auto; } .footer{ width: 980px; height: 100px; background: blue; marg

CSS中如何把Span标签设置为固定宽度

一.形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:block; } 实际验证结果:IE6 OK, FIREFOX 3 OK. 一.形如<span>ABC</span>DEF格式行设置SPAN为固定宽度的方法如下: span {width:60px; text-align:center;  display:block; float:left;

CSS 中如何把 Span 标签设置为固定宽度

一.形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:block; } 实际验证结果:IE6 OK, FIREFOX 3 OK. 一.形如<span>ABC</span>DEF格式行设置SPAN为固定宽度的方法如下: span {width:60px; text-align:center;  display:block; float:left;

web前端篇:CSS使用,样式表特征,选择器

目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 CSS :Cascading Style Sheet 层叠样式表 作用 :修饰和美化页面元素,实现网页排版布局 2.CSS使用 1行内样式/内联样式 特点 :在具体的标签中使用style属性,引入CSS样式代码 语法: CSS 样式声明 / 语句: 对当前元素添加样式 语法:CSS 属

前端开发之CSS篇三

一.CSS布局之浮动 二.清除浮动带来的问题 三.margin塌陷问题和水平居中 四.善用父级的的padding取代子级的margin 五.文本属性和字体属性 六.超链接美化 七.背景属性(颜色.图片.位置)   1??  CSS布局之浮动 float:即浮动,CSS布局用得最多的一个属性. 效果:元素并排,并且两个元素都能够设置宽度和高度. 要想学好必须要知道的四个特性: (1)浮动的元素脱标: (2)浮动的元素互相贴靠: (3)浮动的元素有“字围“效果: (4)紧凑的效果 1.元素脱标 脱离

div、span绑定内容改变事件

内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法,代码如下: 1 <meta charset="UTF-8"> 2 <script src="jquery.min.js"></script> 3 <span id="s"> 4 <span id=

CSS文字超出div或者span时显示省略号

我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all; } Html代码就不用写了,一个div 或者span class = "title"即可.