div块级元素

举报
吴梦青 发表于 2022/05/29 19:46:46 2022/05/29
【摘要】 前端名词名词释义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
这个代码的效果图如下所示:
image.png

<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标签是文字。
下面的照片是在网上找的,运行这个程序的时候可以试一试。
1.png

2.png

把上课时讲的Linux基本指令也做了一下总结:
相对路径:在这个目录下可以写
绝对路径:不在这个目录下必须写

命令 功能
ls 查看
cd 切换目录
cd·· 回退到上一个目录
pwd 查看当前目录地址
cat文件名 查看文件内容
vi文件 编辑文件内容
输入i 编辑文件内容
1. 点击esc;2. 输入:wq(!)3. 回车 退回编辑
rm文件名 删除文件
cp 源文件 目标文件 复制文件,不是替换
mkdir文件夹名 创建文件夹
mv 源文件 目标文件 剪切
rmdir 删除目录
mkdir -p 文件夹/文件夹/文件夹 创建多个文件夹

画上图的表格:

第一行:|内容|内容|

第一行:|-|-| //这里面写几个-都可以

第一行:|内容|内容|

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。