【HTML＋CSS网页设计与布局 从入门到精通】第13章-块元素<div>和内联元素<span>格式布局

最新推荐文章于 2023-07-04 20:08:50 发布
最新推荐文章于 2023-07-04 20:08:50 发布
阅读量420 收藏
点赞数
分类专栏： 【人机交互】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rong_toa/article/details/86031098
版权

目录

块元素背景，边框，颜色等布局

块元素ID选择器

另一个例子

块元素中的图片

盒子模型的演示

块级元素中的文本格式

块级元素div与内联元素span的对比

两个行内元素的margin

两个块级元素的margin

子div

span的margin设置为负数

盒子模型的演示

块元素背景，边框，颜色等布局


<html>
<head>
<title>border-style</title>
<style type="text/css">
div{
	border-width:6px;
	border-color:#000000;
	margin:20px; padding:5px;
	background-color:#FFFFCC;
}
</style>
</head>

<body>
	<div style="border-style:dashed">The border-style of dashed.</div>	
	<div style="border-style:dotted">The border-style of dotted.</div>
	<div style="border-style:double">The border-style of double.</div>
	<div style="border-style:groove">The border-style of groove.</div>
	<div style="border-style:inset">The border-style of inset.</div>
	<div style="border-style:outset">The border-style of outset.</div>
	<div style="border-style:ridge">The border-style of ridge.</div>
	<div style="border-style:solid">The border-style of solid.</div>
</body>
</html>

块元素ID选择器


<html>
<head>
<style type="text/css">
#outerBox{
	width:200px;
	height:100px;
	border:2px black solid;
	border-left:4px green dashed;
	border-color:red gray orange blue;  /*上  右  下  左*/
	border-right-color:purple; 
}
</style>
</head>
<body>
	<div id="outerBox">
	</div>
</body>

另一个例子


<html>
<head>
<style type="text/css">
#outerBox{
	width:128px;
	height:128px;
	border:10px black dashed;
	background:silver;
}
</style>
</head>
<body>
	<div id="outerBox">
	</div>
</body>

块元素中的图片


<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>演示</title>
<style type="text/css">
#box{
	width:128px;
	height:128px;
	padding:0 20px 10px;    /*上     左右     下*/
	padding-left:10px;
	border:10px gray dashed;
}

#box img{
border:1px blue solid;
} 

</style>
</head>

<body>
	<div id="box"><img src="cup.gif"></img></div>
</body>

</html>

盒子模型的演示


<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>盒子模型的演示</title>
    <style type="text/css">
	body{
	margin:0 0 0 0;
	font-family:宋体;
	font-size:12px;
	
	}
      ul { 
        background: #ddd; 
        margin: 15px 15px 15px 15px;
        padding: 5px 5px 5px 5px;
                                     /* 没有设置边框 */
      }
      li { 
        color: black;                /* 黑色文本 */ 
        background: #aaa;            /* 浅灰色背景 */
        margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/
        padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */
        list-style: none             /* 取消项目符号 */
                                     /* 未设置边框 */
      }
      li.withborder {
        border-style: dashed;
        border-width: 5px;       	/* 设置边框为2像素 */
        border-color: black;
        margin-top:20px； 
      }
    </style>
  </head>
  <body>
    <ul>
      <li>第1个列表的第1个项目内容</li>      
      <li class="withborder">第1个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li>
    </ul>
    <ul>
      <li>第2个列表的第1个项目内容</li>
      <li class="withborder">第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li>
    </ul>

  </body>
</html>

块级元素中的文本格式


<html>
<head>
<title>div 标记范例</title>
<style type="text/css">
div{
	font-size:18px;						/* 字号大小 */
	font-weight:bold;					/* 字体粗细 */
	font-family:Arial;					/* 字体 */
	color:#FFFF00;						/* 颜色 */
	background-color:#0000FF;			/* 背景颜色 */
	text-align:center;					/* 对齐方式 */
	width:300px;						/* 块宽度 */
	height:100px;						/* 块高度 */
}
</style>
</head>
<body>
	<div>
	这是一个div标记
	</div>
</body>
</html>

块级元素div与内联元素span的对比


<html>
<head>
<title>div与span的区别</title>
</head>
<body>
	<p>div标记不同行：</p>
	<div><img src="cup.gif" border="0"></div>
	<div><img src="cup.gif" border="0"></div>
	<div><img src="cup.gif" border="0"></div>
	<p>span标记同一行：</p>
	<span><img src="cup.gif" border="0"></span>
	<span><img src="cup.gif" border="0"></span>
	<span><img src="cup.gif" border="0"></span>
</body>
</html>

两个行内元素的margin


<html>
<head>
<title>两个行内元素的margin</title>
<style type="text/css">

span{
	background-color:#a2d2ff;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:10px;
}
span.left{
	margin-right:30px;
	background-color:#a9d6ff;
}
span.right{
	margin-left:40px;
	background-color:#eeb0b0;
}

</style>
</head>
<body>
	<span class="left">行内元素1</span><span class="right">行内元素2</span>
</body>
</html>

两个块级元素的margin


<html>
<head>
<title>两个块级元素的margin</title>
<style type="text/css">
<!--
div{
	background-color:#a2d2ff;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:10px;
}
-->
</style>
</head>
<body>
	<div style="margin-bottom:50px;">块元素1</div>
	<div style="margin-top:30px;">块元素2</div>
</body>
</html>

子div


<head>
<title>父子块的margin</title>
<style type="text/css">
<!--
div.father{						/* 父div */
	background-color:#fffebb;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:10px;
	border:1px solid #000000;
	height:40px;				/* 设置父div的高度 */
}
div.son{						/* 子div */
	background-color:#a2d2ff;
	margin-top:30px;
	margin-bottom:0px;
	padding:15px;
	border:1px dashed #004993;
}
-->
</style>
</head>
<body>
	<div class="father">
		<div class="son">子div</div>
	</div>
</body>

span的margin设置为负数


<head>
<title>margin设置为负数</title>
<style type="text/css">
span{
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:10px;
	border:1px dashed #000000;
}
span.left{
	margin-right:30px;
	background-color:#a9d6ff;
}
span.right{
	margin-left:-53px;			/* 设置为负数 */
	background-color:#eeb0b0;
}
</style>
</head>
<body>
	<span class="left">行内元素1</span><span class="right">行内元素2</span>
</body>

盒子模型的演示


<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>盒子模型的演示</title>
<style type="text/css">
body{
	margin:0 0 0 0;
	font-family:宋体;
}
ul { 
    background: #ddd; 
    margin: 15px;
    padding: 10px;
	font-size:12px;
	line-height:14px;
}
h1 { 
    background: #ddd; 
    margin: 15px;
    padding: 10px;
    height:30px;
    font-size:25px;
}
p,li { 
    color: black;                /* 黑色文本 */ 
    background: #aaa;            /* 浅灰色背景 */
    margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/
    padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */
    list-style: none             /* 取消项目符号 */
}
.withborder {
    border-style: dashed;
    border-width: 5px;       	/* 设置边框为2像素 */
    border-color: black;
    margin-top:20px; 
}
</style>
</head>
  <body>
   <h1>标准流中的盒子模型演示</h1>
    <ul>
      <li>第1个项目内容</li>      
      <li class="withborder">第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容。</li>
    </ul>
  </body>
</html>

 

rtoax
关注
专栏目录
【前端学习整理】HTML（4）：块级、内联元素与网页的布局
qq_43944712的博客
02-28 306
网页布局直接影响到网站的外观，所以一个好的网站，页面布局的设计非常重要。 div元素是一个块级元素 span元素是一个内联元素 块级元素和内联元素还有很多，一个完整的网站由这些元素合理组成，才不会杂乱无章。 &amp;lt;h2&amp;gt;什么是块级、内联&amp;lt;/h2&amp;gt; &amp;lt;div&amp;gt;这是一个块级元素&amp;lt;/div&amp;gt; &amp;lt;div&amp;
网页设计与制作（HTML+CSS）
T_personality的博客
12-12 2929
2.3 图像标记 1.图像的标记分为 2.相对路径和绝对路径 相对路径分为三种：图像文件和HTML文件在同一文件夹，只输入文件名字就可以。 图像文件在HTML文件下一级文件夹，输入文件夹名和文件名。 图像文件在HTML文件上一级文件夹，在文件名前面加入“…/”如果是上两级的话就要加“…/…/”。 3.1CSS核心基础 1.css的样式规则： 选择器样式：{属性1：属性1；属性2：属性2；…；} 2...
css网页设计
shaily读书学习
04-16 1397
第一章 概述一、CSS简介1、CSS是Cascading Style Sheets(层叠样式表单)的简称。通常所称的CSS是指CSS1,即层叠样式表单1级。2、编辑CSS文档：与编辑HTML的方法一样。有如下3种： 用常见的超文本编辑器来实现，如Frontpage,Dreamweaver； 用任何不带格式的文本编辑器来编写，后缀名为.htm或.html，如记事本、
HTML+css网页设计
最新发布
2301_76192170的博客
07-04 5137
<a href="#">关于我们</a></li><li><a href="#">联系方式</a></li><li><a href="#">首页</a>版权所有 © 2023 我的网页我的网页
HTML和CSS网页设计
weixin_45728236的博客
12-12 1862
css书写位置 ：行内式 外链式 内嵌式 行内式 ：直接输写在标签内部的一个style属性里,前端人员一般不使用 外链式 ：通过link标签在html 外部引入一个css文件 link标签 书写在head标签内部 rel=“stylesheet” rel表示html和css的关系，stylesheet样式表 type=“text/css” type表示css文件类型,text/css纯...
【精华】HTML.CSS网页设计与布局从入门到精通pdf高清
06-24
综上所述，"HTML.CSS网页设计与布局从入门到精通"这本书应该涵盖了这些核心知识点，并以高清PDF格式提供详细教程，对初学者及进阶者都极具价值。通过深入学习和实践，你将能够自如地构建美观、功能丰富的网页。
web前端网页设计与制作：HTML+CSS旅游网页设计——桂林旅游(3页) web前端旅游风景网页设计与制作 div静态网页设计
08-10
- **基本标签**: 学习使用`<p>`、`<div>`、`<span>`、`<img>`、`<a>`等基础标签，以及了解它们的作用和属性。 - **表格与列表**: 掌握`<table>`、`<tr>`、`<td>`等表格标签以及`<ul>`、`<ol>`、`<li>`等列表标签的...
HTML5+CSS3网页设计-第七章 浮动.pptx
12-21
HTML5和CSS3是现代网页设计的两大核心技术，它们提供了丰富的功能和强大的样式控制能力，使得网页设计更加灵活和多样化。在本章“浮动”中，我们将深入理解浮动（float）这一概念及其在网页布局中的应用。 首先，...
SPAN元素和DIV元素有的区别
10-31
其中，`<div>` 和 `<span>` 是两种非常基础且常用的元素。本文将详细介绍这两种元素的区别，并通过实际案例帮助读者更好地理解和运用它们。 #### 一、基本概念 **1. DIV元素** - **定义**: `div` 元素是一种通用的...
DIV+CSS网页布局基础-常用HTML标签介绍.rar
12-23
2. **文本内容标签**：像`<p>`用于段落，`<h1>`到`<h6>`表示不同级别的标题，`<strong>`强调文本，``表示强调或着重的文本，`<a>`创建超链接，`<br>`用于换行，`<<em>span>`用于对部分文本进行样式操作。 3. **图像...
html+css网页设计源码(简洁)
12-25
html+css网页设计源码(简洁)，前端基础代码，拿来就用 评分: ⭐⭐⭐⭐⭐
html css设计网页初步
bbtking的博客
12-30 741
首先是html的基本格式 <html> <head> <meta charset="utf-8"> <title>个人网</title> </head> <body> </body> </html> 此博客主要以复习为主，内容不会太细，主要在操作中回忆或者学习相关知识点 首先构建一个网页基本框架 框架代码： <html> <head> <title>个人网&l
【html+css网站设计】
qq_26930625的博客
06-30 1293
HTML：超文本标记语言作用：写网页结构内容 例如：图片、文字、视频等文件后缀：.html 或者 .htm。
htmlcss网页设计_【网页设计与制作】资料汇总
weixin_39634884的博客
01-07 82
导读 本课程主要讲解网页设计与制作相关的内容：HTML和CSS，为初级入门教程，旨在带领初学者了解网页制作，了解标记语言，掌握编程思想。本课程主要讲解的内容分为HTML和CSS，然后是表格和表单，最后是布局。在HTML一章节介绍的主要内容有：网页和网站的基本了解，HTML是什么，如何设计？CSS作为网页设计的核心内容，对样式排版来说至关重要，这一章节介绍的主...
html+css设计页面
m0_53881899的博客
10-23 1249
html+css设计页面
HTML，CSS样式一个简单网页设计
qq_59384581的博客
05-10 1065
html网页简单制作，和样式总结归纳。
html+css网页制作
qxpapt的博客
07-05 3240
简易美食网页制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>美食页面</title> <link rel="shortcut icon" href="images/xlogo.png"> <link rel="stylesheet" href="css1.css"> </head> <bod
HTML CSS 网页设计作业「动漫小站」
qq_38514921的博客
03-31 179
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
精通W3C标准：DIV+CSS网页布局与盒子模型
在W3C提倡的Web结构中，XHTML用于组织内容，通过使用像`<div>`、`<span>`、`<p>`、`<h1>`到`<h6>`、`<ol>`、`<ul>`、`<dl>`-`<dt>`-`<dd>`等标签来构建页面的结构。这样的结构化内容使得网页更易于理解，也便于搜索...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值