第4天：div 块级元素

是你的暖暖的
173 阅读1分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

网页的布局包括：头部、导航栏、焦点图、内容、页面底部

前端名词名词释义
WWWwww（英文Worid Wide Web的缩写）中文译为“万维网”是intertnet提供的一种网页浏览服务。
URLURL<英文Uniform Resource Locator的缩写）中文译为 “统一资源定位符” URL其实就是Web地址，俗称“网址”
DNSDNS（英文Domain Name System的缩写）是域名解析系统。
HTTPHTR（英文Hypertext transfer protocal的馆写）中文译为超文本传输协设，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
WebWeb通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。
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是标记段落里的内容。\

效果： 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>

1.png

2.png

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

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

画上图的表格：

第一行：|内容|内容|

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

第一行：|内容|内容|

avatar
文章
阅读
粉丝