zoukankan      html  css  js  c++  java
  • HTML5快速入门(三)—— 标签综合运用

    前言:

    1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真正快速入门,如果有哪些不清楚的地方或者错误,欢迎联系我
    2.更新时间没有规律,一般会在3天左右更新一篇(全系列预计会有12篇)因为需要工作,所以只能在闲暇之余整理,如果有喜欢的朋友可以关注我,将会第一时间获得更新信息
    3.如果有需要Reactive Native + H5跨平台开发的朋友,可以联系我,在本系列结束之前会根据需求的程度决定是否继续
    4.全系列文章最后尽可能地附上综合实例,帮助朋友更好地理解
    5.此系列会涉及到HTML、CSS、JavaScript等

    另:有很多朋友私聊我说图片不能正常显示的问题,测试后发现简书上可以在windows和mac端完美显示,如果看不到图片麻烦移步简书链接

    准备工作

    • 工欲善其事,必先利其器,首先我们需要安装WebStorm这款超超超好用的工具,工具已经帮各位上传到网盘了,画重金搞到的mac最新版呦!windows端的小伙伴麻烦自行百度吧,毕竟资源多webStorm下载地址(已包含安装方法和汉化等方法) —— 密码:awh2
    • 安装完毕后先来简单部署一下项目文件结构:这边就先创建一个imgs文件夹和一个css文件夹就好了

    部署工程结构.gif

    • 接下来创建根网页文件(index.html)

    创建根网页文件.gif

    • 再创建一个css文件(index.css)

    创建css文件.gif

    • 为了演示展示本地图片,我们就将用到的图片以本地的形式保存下来放在imgs内
      • 注:图片怎么放进来?只要点击需要放进工程的图片 —— 复制图片 —— 然后选择imgs文件夹 —— 粘贴 —— OK
    • 到这里,准备工作就完毕了

    本地图片导入.gif


    分析页面

    网页结构分析.png

    • 从图中可以看出,网页可以分成上、中、下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>
              	<!--搜索按钮-->
              	<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来装修房子的时候了

    网页最初结构.png

    • 上面我们已经根据不同的标签和功能预先设置了类标签名称,接下来就根据目标网页的样子来定制我们的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">
      
      

    效果:

    初始结构效果图.png

    • 先来设置头部的样式


      .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;
      }
      
      

      效果:

    头部效果图.png

    • 接下来是内容的样式


      .content{
      	/*设置顶部背景颜色,方便调试*/
      	/*background-color: green;*/
      	/*设置内容水平居中*/
      	text-align: center;
      	/*高*/
      	/*height: 600px;*/
      	position: absolute;
      	left: 0px;
      	bottom: 60px;
      
      	display: inline-block;
      	 100%;
      }
      
      .content-logo{
      	/*设置顶部背景颜色,方便调试*/
      	/*background-color: red;*/
      	/*水平居中*/
      	margin: 0 auto;
      	/*设置内容水平居中*/
      	text-align: center;
      	 200px;
      margin-top: 100px;
      }
      
      .content-search{
      	/*设置顶部背景颜色,方便调试*/
      	/*background-color: rebeccapurple;*/
      	/*高度*/
      	height: 40px;
      	/*设置宽度*/
      	 600px;
      	/*使文字居中*/
      	text-align: center;
      	margin: 0 auto;
      
      }
      
      .content-search input{
      	/*宽度*/
      	 500px;
      	/*高度*/
      	height: 40px;
      	/*边框*/
      	border: 3px solid greenyellow;
      	box-sizing: border-box;
      }
      
      .content-search a{
      	background-color: greenyellow;
      	/*设置文字颜色*/
      	color: white;
      	/*改变标签类型*/
      	display: inline-block;
      	/*设置高度和宽度*/
      	height:100%;
      	 100px;
      	/*浮动在右边*/
      	float: right;
      	/*垂直居中*/
      	line-height: 40px;
      }
      
      .content-language{
      	margin-top: 200px;
      }
      
      .content-language a{
      	border: 1px solid black;
      	/*字体颜色*/
      	color: black;
      }
      
      

      效果:

    内容效果图.png

    • 再来就是尾部的样式了


      .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;
      }
      
      

      效果:

    尾部效果图.png

    • OK,这样是不是和目标网页的样子差不多了?有些细节大家可以自己试着调一下

    最后效果图.png

    最后给大家提供一个必备的网站,W3school里面包含了所有标签的属性,使用,JavaScript等你需要的东西,很方便很好用

  • 相关阅读:
    论学究式教育
    Oracle中rownum与order by的执行顺序
    无效存储过程问题解决
    解决SGA_MAX_SIZE 的大小比 MEMORY_TARGET 大导致数据无法启动的错误
    ORACLE 按时间创建分区表
    Timage Canvas画图
    Oracle存储过程的加密
    Win32对话框模板创建的窗口上响应键消息,Tab焦点切换消息,加速键消息
    win32 TreeCtrl控件通知消息, LVN_SELCHANGED和LVN_ITEMCHANGED用法
    win32 对话框模板添加加速键
  • 原文地址:https://www.cnblogs.com/miaomiaoshen/p/5604507.html
Copyright © 2011-2022 走看看