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)