HTML5快速入门（三）—— 标签综合运用
2016-06-21 17:56
676 查看
前言：
1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我
2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时间获得更新信息
3.如果有需要Reactive Native + H5跨平台开发的朋友，可以联系我，在本系列结束之前会根据需求的程度决定是否继续
4.全系列文章最后尽可能地附上综合实例，帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等
另：有很多朋友私聊我说图片不能正常显示的问题，测试后发现简书上可以在windows和mac端完美显示，如果看不到图片麻烦移步简书链接
安装完毕后先来简单部署一下项目文件结构：这边就先创建一个imgs文件夹和一个css文件夹就好了
接下来创建根网页文件（index.html）
再创建一个css文件(index.css)
为了演示展示本地图片，我们就将用到的图片以本地的形式保存下来放在imgs内
注：图片怎么放进来？只要点击需要放进工程的图片 —— 复制图片 —— 然后选择imgs文件夹 —— 粘贴 —— OK
到这里，准备工作就完毕了
从图中可以看出，网页可以分成上、中、下3部分
上部：左边一张图片，右边一个登录按钮
中部：上边一张图片，下面一个搜索框，搜索框右边一个搜索按钮，再下面有个语音选择按钮
尾部：左边一组，右边一组
大概的结构就是上面描述的那样，我们可以把网页的搭建看成是房屋的建设，那么我们需要怎么来做呢？首先我们要分析每个结构用什么标签来做：
上部：我们用div标签包裹住图片和按钮，在分别用div包装图片和按钮
中部：我们用div标签包裹整个中部内容，再用div分别包裹住图片，搜索框和搜索按钮
尾部：我们用div标签包裹整个尾部内容，再用div分别包裹左边内容和右边内容
好了，房子的结构搭建好了，效果是这样的，当然和成品差好多~不过很正常嘛，我们还没装修房子是吧，那么接下来就是使用css来装修房子的时候了
上面我们已经根据不同的标签和功能预先设置了类标签名称，接下来就根据目标网页的样子来定制我们的css
首先，网页会有默认边距，我们需要先将其归置为0，方便我们后面的计算和调试，设置的方式很多，一般偷懒的我喜欢使用通配符 ‘*’ 来直接设置，而像百度等大公司则是将可能使用到的标签全部取出设置（如下图），这么做的原因可能是考虑到性能问题吧，因为通配符是设置所有的标签，从理论上来说性能应该是最差的，这边就先不纠结了
这边我们使用的是外部样式的css，所以先来引入外部css文件
效果：
先来设置头部的样式
效果：
接下来是内容的样式
效果：
再来就是尾部的样式了
效果：
OK，这样是不是和目标网页的样子差不多了？有些细节大家可以自己试着调一下
最后给大家提供一个必备的网站，W3school里面包含了所有标签的属性，使用，JavaScript等你需要的东西，很方便很好用
1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我
2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时间获得更新信息
3.如果有需要Reactive Native + H5跨平台开发的朋友，可以联系我，在本系列结束之前会根据需求的程度决定是否继续
4.全系列文章最后尽可能地附上综合实例，帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等
另：有很多朋友私聊我说图片不能正常显示的问题，测试后发现简书上可以在windows和mac端完美显示，如果看不到图片麻烦移步简书链接
准备工作
工欲善其事，必先利其器，首先我们需要安装WebStorm这款超超超好用的工具，工具已经帮各位上传到网盘了，画重金搞到的mac最新版呦！windows端的小伙伴麻烦自行百度吧，毕竟资源多webStorm下载地址（已包含安装方法和汉化等方法） —— 密码：awh2安装完毕后先来简单部署一下项目文件结构：这边就先创建一个imgs文件夹和一个css文件夹就好了
接下来创建根网页文件（index.html）
再创建一个css文件(index.css)
为了演示展示本地图片，我们就将用到的图片以本地的形式保存下来放在imgs内
注：图片怎么放进来？只要点击需要放进工程的图片 —— 复制图片 —— 然后选择imgs文件夹 —— 粘贴 —— OK
到这里，准备工作就完毕了
分析页面
先来看一下我们的目标网页easyicon开发中图标素材搜索神器从图中可以看出，网页可以分成上、中、下3部分
上部：左边一张图片，右边一个登录按钮
中部：上边一张图片，下面一个搜索框，搜索框右边一个搜索按钮，再下面有个语音选择按钮
尾部：左边一组，右边一组
大概的结构就是上面描述的那样，我们可以把网页的搭建看成是房屋的建设，那么我们需要怎么来做呢？首先我们要分析每个结构用什么标签来做：
上部：我们用div标签包裹住图片和按钮，在分别用div包装图片和按钮
<body> <!--头部--> <div class="header"> <!--左边图片--> <div class="header-lefticon"> <a href="http://www.easyicon.net/" target="_blank"> <img src="imgs/Snip20160615_2.png" alt="easyicon图片"> </a> </div> <!--右边登录--> <div class="header-rightlogin"> <a href="http://www.easyicon.net/vip/?ref=/" target="_blank">登录</a> </div> </div> </body>
中部：我们用div标签包裹整个中部内容，再用div分别包裹住图片，搜索框和搜索按钮
<body> <!--内容--> <div class="content"> <!--logo--> <div class="content-logo"> <a href="http://www.easyicon.net/update/" target="_blank"> <img src="imgs/logo.png" alt="logo图片"> </a> </div> <!--搜索框和搜索按钮--> <div class="content-search"> <!--搜索框--> <input& 4000 gt; <!--搜索按钮--> <a href="#" target="_blank">搜索图标</a> </div> <!--语言按钮--> <div class="content-language"> <a href="#" target="_blank">中文简体</a> </div> </div> </body>
尾部：我们用div标签包裹整个尾部内容，再用div分别包裹左边内容和右边内容
<body> <!--尾部--> <div class="footer"> <!--左边内容--> <div class="footer-left"> <a href="http://www.easyicon.net/update/" target="_blank">图标更新</a> <a href="http://www.easyicon.net/covert/" target="_blank">图标转换</a> <a href="http://www.easyicon.net/vip/upload.php" target="_blank">上传图标</a> </div> <!--右边内容--> <div class="footer-right"> 沪ICP备05015552号 <a href="http://www.easyicon.net/thank.php" target="_blank">特别鸣谢</a> <a href="http://www.easylogo.cn/" target="_blank">EASYLOGO</a> <a href="http://www.uimaker.com/" target="_blank">ui制造者</a> </div> </div> </body>
好了，房子的结构搭建好了，效果是这样的，当然和成品差好多~不过很正常嘛，我们还没装修房子是吧，那么接下来就是使用css来装修房子的时候了
上面我们已经根据不同的标签和功能预先设置了类标签名称，接下来就根据目标网页的样子来定制我们的css
首先，网页会有默认边距，我们需要先将其归置为0，方便我们后面的计算和调试，设置的方式很多，一般偷懒的我喜欢使用通配符 ‘*’ 来直接设置，而像百度等大公司则是将可能使用到的标签全部取出设置（如下图），这么做的原因可能是考虑到性能问题吧，因为通配符是设置所有的标签，从理论上来说性能应该是最差的，这边就先不纠结了
*{
margin:0;
padding: 0;
}
/*设置整体的a标签样式*/
a{
/*设置文字颜色*/
color: black;
/*去除下划线*/
text-decoration: none;
/*字体颜色*/
color: grey;
}这边我们使用的是外部样式的css，所以先来引入外部css文件
<!--引入外部样式css--> <link rel="stylesheet" href="css/index.css">
效果：
先来设置头部的样式
.header{
/*设置顶部背景颜色,方便调试*/
/*background-color: yellow;*/
/*设置高度*/
height: 60px;
/*设置间距*/
margin: 20px 120px 0 120px;
}
.header-lefticon{
/*垂直居中*/
line-height: 60px;
/*靠左悬浮*/
float: left;
}
.header-rightlogin{
/*垂直居中*/
line-height: 60px;
/*靠右悬浮*/
float: right;
}
.header-rightlogin a{
/*设置边框*/
border: 1px solid black;
/*设置内边距*/
padding: 5px 10px;
/*设置右间距*/
margin-right: 20px;
/*字体颜色*/
color: black;
}效果：
接下来是内容的样式
.content{
/*设置顶部背景颜色,方便调试*/
/*background-color: green;*/
/*设置内容水平居中*/
text-align: center;
/*高*/
/*height: 600px;*/
position: absolute;
left: 0px;
bottom: 60px;
display: inline-block;
width: 100%;
}
.content-logo{
/*设置顶部背景颜色,方便调试*/
/*background-color: red;*/
/*水平居中*/
margin: 0 auto;
/*设置内容水平居中*/
text-align: center;
width: 200px;
margin-top: 100px;
}
.content-search{
/*设置顶部背景颜色,方便调试*/
/*background-color: rebeccapurple;*/
/*高度*/
height: 40px;
/*设置宽度*/
width: 600px;
/*使文字居中*/
text-align: center;
margin: 0 auto;
}
.content-search input{
/*宽度*/
width: 500px;
/*高度*/
height: 40px;
/*边框*/
border: 3px solid greenyellow;
box-sizing: border-box;
}
.content-search a{
background-color: greenyellow;
/*设置文字颜色*/
color: white;
/*改变标签类型*/
display: inline-block;
/*设置高度和宽度*/
height:100%;
width: 100px;
/*浮动在右边*/
float: right;
/*垂直居中*/
line-height: 40px;
}
.content-language{
margin-top: 200px;
}
.content-language a{
border: 1px solid black;
/*字体颜色*/
color: black;
}效果：
再来就是尾部的样式了
.footer{
/*background-color: rebeccapurple;*/
position: absolute;
left: 20px;
bottom: 0px;
right: 20px;
height: 60px;
}
.footer-left{
/*悬浮左边*/
float: left;
line-height: 60px;
margin: 0 auto;
/*字体大小*/
font-size: 15px;
}
.footer-right{
/*悬浮右边*/
float: right;
line-height: 60px;
margin: 0 auto;
/*字体大小*/
font-size: 15px;
/*字体颜色*/
color: grey;
}效果：
OK，这样是不是和目标网页的样子差不多了？有些细节大家可以自己试着调一下
最后给大家提供一个必备的网站，W3school里面包含了所有标签的属性，使用，JavaScript等你需要的东西，很方便很好用
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐