学习搭建一个小网站_7_html和网站模板-优快云博客

本文介绍了使用HTML和CSS基础知识创建个人博客的基本步骤。通过添加不同的元素如图片、标题和文本，并利用div作为容器，逐步实现了较为美观且具有简单动态效果的页面布局。

临时决定不抄网上的各种模板了，挖个坑：用bootstrap自己搭一个模板页，丑就丑点

重新学习bootstrap中，明天开始填坑（过年了，可能要填很多天。。）

--------------------过年分割线-------------------

开工继续

请先看html基础教程，这里 http://www.w3cschool.cn/index-5.html，初步理解html各种标签，标签里的属性，以及用法

一个简单的html大概包括这些东西

<!DOCTYPE html> <!--doctype告诉浏览器这网页是html5标准-->
<html> <!--网页以html标签做为根节点-->
<head> <!-- head定义文档的头部，可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等-->
   <title>我是标题，会显示在浏览器的标签栏</title>
    <!--这里是引入各种网页需要的资源，以下是CSS-->
   <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!--这里是引入各种网页需要的资源，以下是JavaScript-->
   <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body><!-- body定义文档的内容-->
      <h1>我是内容，显示在浏览器内容框</h1>
</body>
</html>

----------大概显示成这样子----------

嗯，看起来很丑的样子，没啥内容，也不会动

上面这句话提出了3个需求，网页要漂亮，网页要有内容，网页最好有动态效果

接下来不会立即解决这3个需求，先提供解决问题的思路

首先，一个blog至少有这些东西，网站的log，网站简介，文章标题，文章配图，文章正文

根据这些需求，以下html增加了点内容

<!DOCTYPE html>
<html> <!--网页以html标签做为根节点-->
<head> <!-- head定义文档的头部，可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等-->
   <title>我是标题，会显示在浏览器的标签栏</title>
<!-- head里先不应用外部资源了-->
</head>
<body><!-- body定义文档的内容-->
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif"/>
<h1>上面是网站logo</h1>
<img src="http://img0.imgtn.bdimg.com/it/u=577333074,577007802&fm=21&gp=0.jpg"/>
<h1>我是标题1</h1>
<span>我是上面图片花1的内容1</span>
<img src="http://img3.imgtn.bdimg.com/it/u=2471132592,1969231645&fm=21&gp=0.jpg"/>
<h1>我是标题2</h1>
<span>我是上面图片花2的内容2</span>
<h1>我是标题3</h1>
<span>我没有图片</span>
<h1>我是标题4</h1>
<span>我也没有图片</span>
</body>
</html>

显示成这个样子

现在内容有了，但是显示的还是很丑，图片位置也没对齐

在head里加上这一段CSS

<style type="text/css">
  img {display:block;}
</style>

现在看，文字就会始终显示在图片下方了，算是达到了一点点对齐的效果
，但还是不够清晰，最好能每个标题和内容都分块

这需要使用“容器”和对应的css样式来实现

<!DOCTYPE html>
<html> <!--网页以html标签做为根节点-->
<head> <!-- head定义文档的头部，可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等-->
   <title>我是标题，会显示在浏览器的标签栏</title>
<style type="text/css"><!-- head里的style定义是这个网页内通用的css-->
  .myimg {width:100px; height:100px; display:block;}
  .divborder {  border-style:solid; border-width:1px;}
.divborder:hover {background-color:yellow;}

</style>
</head>
<body><!-- body定义文档的内容-->
<div>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif"/>
<h1>上面是网站logo</h1>
</div>
<div style="width:50%">
<div class="divborder" style="width:100%;float:left;"><!-- 标签里的style属性定义的是 内联样式，大部分情况下拥有最高优先级-->
<h1>我是标题1</h1>

<div style="float:left"><img class="myimg" src="http://pic86.nipic.com/file/20151222/6650319_232747363000_2.jpg"/></div>
<div style="float:left">

<span>我是左边图片花1的内容1</span>
</div>
</div>
<div class="divborder" style="width:100%;float:left;">
<h1>我是标题2</h1>
<div style="float:left"><img class="myimg" src="http://pic86.nipic.com/file/20151222/6650319_221609449000_2.jpg"/></div>
<div style="float:left">
<span>我是左边图片花2的内容2</span></div>
</div>
<div class="divborder" style="width:100%;float:left;">
<h1>我是标题3</h1>
<span>我没有图片</span>
</div>
<div class="divborder" style="width:100%;float:left;">
<h1>我是标题4</h1>
<span>我也没有图片</span>
</div>
</div>
</body>
</html>