整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
于用心的站长来说，近期在百度搜索引擎上检索信息时，会发现有的网站描述左侧有企业的LOGO标志，这是百度为站长们推出的一个不错的展示效果，更加提升了网站的展示效果。
首先我们要登陆到站长社区，通过站点属性工具向百度提交站点LOGO信息，提交的时候回有提示，图片的尺寸需要多大都有说明，以下是我们介绍的：
1.PC端站点LOGO尺寸：121*75，原75*75弃用。
2.移动站点LOGO尺寸（包括有对应PC站的移动站、独立移动站）：200*200，原48*52弃。。
3.自适应和代码适配LOGO尺寸：121*75和200*200分别用于PC和移动搜索展现，原75*75弃用。
如果大家网站没有提交的可以现在按照小编说的提交试试，只要您的网站符合标准，够质量，提交的图片尺寸合适，那么用不了多久在搜索引擎再次搜索信息时就会发现标志已经出现了。
文章出自畅想网络，转载地址：http://www.e-wkj.cn/xw/2101.html
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 项目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
/* 头部样式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>头部区域</h1>
</div>
</body>
</html>菜单导航条包含了一些链接，可以引导用户浏览其他页面：
例
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接 - 修改颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}内容区域一般有三种形式:
不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。
例：
.column {
float: left;
}
/* 左右侧栏的宽度 */
.column.side {
width: 25%;
}
/* 中间列宽度 */
.column.middle {
width: 50%;
}
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
底部区域在网页的最下方，一般包含版权信息和联系方式等。
例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* 头部标题 */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航条链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接颜色修改 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 创建两列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右侧栏 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 图像部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 文章卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 列后面清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 底部 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>我的网页</h1>
<p>重置浏览器大小查看效果。</p>
</div>
<div class="topnav">
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#" style="float:right">链接</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>文章标题</h2>
<h5>xx 年xx月 xx日</h5>
<div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
<p>文本...</p>
<p>当热诚变成习惯，恐惧和忧虑即无处容身。缺乏热诚的人也没有明确的目标。热诚使想象的轮子转动。一个人缺乏热诚就象汽车没有汽油。
善于安排玩乐和工作，两者保持热诚，就是最快乐的人。热诚使平凡的话题变得生动。！</p>
</div>
<div class="card">
<h2>文章标题</h2>
<h5>xx 年 xx 月xx日</h5>
<div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
<p>文本...</p>
<p>一切事无法追求完美，唯有追求尽力而为。这样心无压力，出来的结果反而会更好！</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>关于我</h2>
<div class="fakeimg" style="height:100px;"></div>
<p>6666</p>
</div>
<div class="card">
<h3>热门文章</h3>
<div class="fakeimg"><img src="img/fy2_wp.png">\</div>
</div>
<div class="card">
<h3>关注我</h3>
<p>本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，
不得用于任何商业用途，否则后果自负，请支持购买正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理。
声明：为非赢利性网站 不接受任何赞助和广告。</p>
</div>
</div>
</div>
<div class="footer">
<h2>底部区域</h2>
</div>
</body>
</html>本文主要介绍了Html的网页布局结构，如何去了解网络的布局，介绍了常见的移动设备的三种网页模式，最后通过一个小项目，总结之前讲解的内容。
代码很简单，希望可以帮助你学习。
果冻公开课，开讲啦
修真院倾情奉献的动画课堂：
每堂几分钟，用趣味生动又逻辑清晰 的方式，为你分享编程学习中的知识点及趣味小故事
本节课为大家带来第一课：什么是HTML
”
动画视频：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
文字解析：
45年前，北京时间10月29日上午10点，计算机向世界发出了它的第一句话“LOL”，标志着互联网时代的诞生。
而今天的我们，在享受着互联网便利的同时，是否产生过这样的思考：
互联网中我们最直接接触的网页，又是如何诞生的呢？
这个问题，可以追溯到更近的时间，25年前，HTML这门语言第一次诞生的时候。这是因为，网页的基本构成可以简单概括为由HTML、CSS和JS三部分构成。
当然，这三部分的出现时间也是有着先后关系的，从仅仅只有HTML，慢慢发展到有了CSS，最后到出现了JS。而我们今天也将简单向大家介绍一下HTML、CSS和JS这三种网页支柱语言。
HTML诞生于1993年，经过六年时间，从HTML1.0发展到了HTML4.0这个版本。之后，HTML经过了一个较为争议的过程，出现了一个分支，XHTML和HTML5。
由于XHTML的不兼容性，造成众多浏览器厂家和开发者的反对：W3C关闭了XHTML项目，合并了HTML5，历经八年正式诞生了HTML 5这个版本——要知道哪吒也只是怀了3年而已。
HTML这门语言，主要是通过一个个被尖括号<>包裹的标签对内容进行标记，来告诉浏览器如何显示其中的内容。
例如文字如何处理，画面如何安排，图片如何显示等。其中作为结束的标签在<>中有一个反斜杠/
HTML中的标签按照类别主要分为12大类，共119种，其中有30个是HTML 5中新推出的标签。
我们来看看我们最常用的标签都有哪些吧~
①基础类
<title></title> 定义文档的标题
我们平时看到的浏览器上面这个网页标题就是用这个标签实现的。
大多数的纯文字内容都是用<p>标签包住的，作用就是很简单的告诉浏览器这一大段都是文字
②格式类
<b>可以将文字加粗
<big>可以将文本变为大号文本
<i>可以将文字倾斜
③表单类
<input>是我们常用的输入控件，通常在网页中我们可以进行输入的地方都是用它进行标注的
<select>我们常见的下拉列表就是用它标注的，可以将所有选项折叠收缩，很方便对吧
<button>就是我们可以点击的各种按钮，不管是登录还是取消，都是这个标签
④图像类
<img>用来定义图像，大多数我们看到的图片都是用这个标签定义的
⑤音频视频类
<audio>用来定义我们的音频内容，如果在网页上看到这个音频播放的东西，准是这个标签的功劳
<video>用来定义视频，网页中你想放视频的话，可以用这个标签
⑥链接类
<a href="http://www.jnshu.com.cn">IT修真院</a>
我们经常看到的这个蓝色有下划线的文字就是<a>的作用，点击它我们可以去到新的页面
⑦样式类
<div></div>是用来标记一块区域，用来告诉浏览器，这一块是一个整体
<header></header>主要用来放页面头部的内容
<footer></footer>主要用来放页面尾部的内容
⑧列表类
<ol>列表标签，我们能看到的这种列表都是用它来实现
⑨表格类
<table>我们看到的这种表格就是用这个来实现的
大家发现了吗？
HTML的标签基本都是它标注内容的英文单词或者是缩写，十分的语义化
基本上这个标签是干嘛的，只要看这个标签是什么意思你就知道的八九不离十了，是不是很简单~
本节课的内容就是这些啦，我们来复习一下：
1、网页由HTML、CSS、JS三部分构成
2、历经8年，从HTML1.0发展到现行的HTML5
3、HTML语言作为标记语言用标签来告诉浏览器如何显示内容
4、常用的九类标签
是不是觉得HTML一下变得简单明了起来了呢，下节课，我们将向大家分享CSS的相关内容，敬请期待~
这里是果冻公开课，一个用趣味的动画来分享IT知识的课堂
我们将原本复杂、不易理解的编程知识，转化为一个个有趣的动画短视频，为更多人提供生动有趣的IT内容/服务
无论是大咖还是小白，都可以快速学会并深度了解每一个知识点，让IT，Q弹可口。
想了解更多就到我们官网看看吧
*请认真填写需求信息，我们会在24小时内与您取得联系。
