div块级元素
【摘要】 前端名词名词释义WWWwww（英文Worid Wide Web的缩写）中文译为“万维网”是intertnet提供的一种网页浏览服务。URLURL<英文Uniform Resource Locator的缩写）中文译为 “统一资源定位符” URL其实就是Web地址，俗称“网址”DNSDNS（英文Domain Name System的缩写）是域名解析系统。HTTPHTR（英文Hypertext t...
| 前端名词 | 名词释义 |
|---|---|
| WWW | www（英文Worid Wide Web的缩写）中文译为“万维网”是intertnet提供的一种网页浏览服务。 |
| URL | URL<英文Uniform Resource Locator的缩写）中文译为 “统一资源定位符” URL其实就是Web地址，俗称“网址” |
| DNS | DNS（英文Domain Name System的缩写）是域名解析系统。 |
| HTTP | HTR（英文Hypertext transfer protocal的馆写）中文译为超文本传输协设，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。 |
| Web | Web通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。 |
| W3C组织 | W3C（英文Worid Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。 |
<title>无标题文档</title>
<style type="text/css">
.d {
background-color: #0F0;}
.s {
background-color: #F30;
float: right;
border: 20px dotted #033;}
p {
font-size: 32px;
background-color: #C60;}
.d p span {
color: #00C;}
.s1 {
background-color: #FF6;}
</style>
</head>
<body>
<div class="s"><p>大家好，div是块级元素</p></div>
<div class="d"><p>div是<span>网页</span>布局的标签</p></div>
<span class="s1">行内元素</span>
<p>p是块级元素</p>
</body>
今天我学习的是一个块级元素，叫——div。以 .d开头的代码块都是类标签，通过class调用这些属性。
float是定义这个块级元素的类是靠左还是靠右还是none。span是标记段落里的内容。
div里面也可以嵌套div，也可以嵌套p
这个代码的效果图如下所示：
<style type="text/css">
*{padding:0;margin:0;}
.all{width:1000px;
margin:20px auto;}
.out {
float: left;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
border-top-color: #999;
border-right-color: #999;
border-bottom-color: #999;
border-left-color: #999;
}
.s1 {
background-color: #FFF;
}
</style>
</head>
<body>
<div class="all"> <!--最外层的盒子-->
<div class="out"><!--左侧的盒子-->
<div><!--左侧的盒子放图片-->
<img src="1.png" width="322" height="338" /> </div>
<p><span class="s1">第一张图片</span></p>
</div>
<div class="out"><!--右侧的盒子-->
<div><!--右侧的盒子放图片-->
<img src="2.png" width="322" height="338" /> </div>
<p>第二张图片</p>
</div>
</div>
</body>
解释：{padding:0;margin:0;}这个开头的属性是一个定义在全局的属性。
根据这几行代码可以分析，我们可以定义一个最外层的盒子，在定义两个盒子，分别是左侧的盒子和右侧的盒子，然后在里面放入图片地址，就可以展示出图片了。下面的P标签是文字。
下面的照片是在网上找的，运行这个程序的时候可以试一试。
把上课时讲的Linux基本指令也做了一下总结：
相对路径：在这个目录下可以写
绝对路径：不在这个目录下必须写
| 命令 | 功能 |
|---|---|
| ls | 查看 |
| cd | 切换目录 |
| cd·· | 回退到上一个目录 |
| pwd | 查看当前目录地址 |
| cat文件名 | 查看文件内容 |
| vi文件 | 编辑文件内容 |
| 输入i | 编辑文件内容 |
| 1. 点击esc;2. 输入：wq(!)3. 回车 | 退回编辑 |
| rm文件名 | 删除文件 |
| cp 源文件 目标文件 | 复制文件，不是替换 |
| mkdir文件夹名 | 创建文件夹 |
| mv 源文件 目标文件 | 剪切 |
| rmdir | 删除目录 |
| mkdir -p 文件夹/文件夹/文件夹 | 创建多个文件夹 |
画上图的表格：
第一行：|内容|内容|
第一行：|-|-| //这里面写几个-都可以
第一行：|内容|内容|
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）