ysoren 发表于 2018-12-15 09:39:02

20161108 PHP

  一:田字格练习
  

  代码如下:
  

  
  
  
  田字格练习
  
  
  #top{
  width: 40px;
  height: 40px;
  /*float: left;*/
  /*这是整体居中!*/
  margin: 0 auto;
  }
  #a{
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  float: left;
  

  

  }
  #b{
  width: 20px;
  height: 20px;
  background-color: #00ff00;
  float: left;
  

  }
  #c{
  width: 20px;
  height: 20px;
  background-color: #0000ff;
  float: left;
  

  }
  

  #d{
  width: 20px;
  height: 20px;
  background-color: #cc0011;
  float: left;
  

  }
  .clean{
  width: 0px;
  height: 0px;
  clear: both;
  }
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  图形所示
http://s2.运维网.com/wyfs02/M02/89/F0/wKiom1gh3UDBWUQqAAABJ-g989o183.png-wh_500x0-wm_3-wmp_4-s_2187151169.png
  二:田字格再练习
  编码如下
  
  
  
  
   田字格练习
  
  #top{
  width: 400px;
  height: 400px;
  margin: 0 auto;
  }
  .a{
  width: 200px;
  height: 200px;
  float: left;
  background-color: #ff0000;
  }
  #first{
  /*width: 200px;
  height: 200px;*/
  background-color: #ff0000;
  /*float: left;*/
  }
  #second{
  /*width: 200px;
  height: 200px;*/
  background-color: #00ff00;
  /*float: left;*/
  }
  #thrth{
  /*width: 200px;
  height: 200px;*/
  background-color: #0000ff;
  /*float: left;*/
  }
  #forth{
  /*width: 200px;
  height: 200px;*/
  background-color: #cc00dd;
  /*float: left;*/
  }
  /*.clean{
  clear: both;
  }*/
  

  

  

  

  
  
  
  
  
  
  
  
  
  
  
  

  
  
  如图所示
http://s1.运维网.com/wyfs02/M02/89/ED/wKioL1gh3bbi9eVvAAAJkwmXel0589.png-wh_500x0-wm_3-wmp_4-s_1642548376.png
  比较这两个程序,效果是一样的,但后者程序简单易懂,可多加练习。
  三:画个圆
  编码如下
  
  
  
  
  画个圆
  
  #top{
  width: 100px;
  height: 100px;
  /*background-color: #ff0000;*/
  margin: 0 auto;
  }
  .f{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  float: left;
  }
  

  #a{
  background-color: #ff0000;
  }
  #b{
  background-color: #00ff00;
  }
  #c{
  background-color: #0000ff;
  }
  #d{
  background-color: #aabbcc;
  }
  
  
  
  
  
  
  
  
  
  
  
  如图所示
http://s2.运维网.com/wyfs02/M00/89/F1/wKiom1gh4EvhPtD9AAAIejVnQ1A792.png-wh_500x0-wm_3-wmp_4-s_2772079602.png
  一定要注意格式,刚才出现错误,查了好几次才查出来。
  四:H标签P标签的使用

  
  
  
  中国新闻报
  
  
  #first{
  width: 500px;
  height: 200px;
  /*这是DIV的外边框,四个边框的顺序为从上开始顺时针转且对称*/
  margin:0px40px ;
  }
  #qw{
  /*这是字体的大小*/
  font-size: 50px;
  
  /*这是字体的颜色*/
  color: #ff0000;
  
  }
  #qe{
  color: #abcdef;
  }
  
  #aa{
  color: #CCDDEE;
  }
  p{
  /*这是首行缩进2个空格*/
  text-indent: 30px;
  }
  
  
  
  
  
  
  
  
  必知!火狐即将发生的四大变化
  

  
  P标签为段落标签
  BR为强制换行标签且为单标签
  11月7日,党和国家领导人习近平、刘云山等在北京人民大会堂会见中华全国新闻工作者协会第九届理事会全体代表和中国新闻奖、长江韬奋奖获奖者代表。新华社记者 李学仁 摄
  

  在第十七个中国记者节到来之际,中华全国新闻工作者协会第九届理事会第一次会议暨中国新闻奖、长江韬奋奖颁奖会7日在京举行。中共中央总书记、国家主席、中央军委主席习近平亲切会见理事会全体代表和获奖者代表,并发表重要讲话。他强调,做好党的新闻舆论工作,营造良好舆论环境,是治国理政、定国安邦的大事。党中央高度重视新闻舆论工作,对做好党的新闻舆论工作提出了明确要求,大家要抓好落实,把中央主要媒体和各级媒体越办越好,为党和人民作出更大贡献,做党和人民信赖的新闻工作者。
  

  1.具体摘要
  

  在第十七个中国记者节到来之际,中华全国新闻工作者协会第九届理事会第一次会议暨中国新闻奖、长江韬奋奖颁奖会7日在京举行。中共中央总书记、国家主席、中央军委主席习近平亲切会见理事会全体代表和获奖者代表,并发表重要讲话。他强调,做好党的新闻舆论工作,营造良好舆论环境,是治国理政、定国安邦的大事。党中央高度重视新闻舆论工作,对做好党的新闻舆论工作提出了明确要求,大家要抓好落实,把中央主要媒体和各级媒体越办越好,为党和人民作出更大贡献,做党和人民信赖的新闻工作者。
  
  
  
  如图所示
http://s2.运维网.com/wyfs02/M01/89/F1/wKiom1gh4ieTFSw5AABjGXXkR1M067.png-wh_500x0-wm_3-wmp_4-s_3464107090.png
  注意外边框的使用margin
  

  

  五:总结

  写程序注意包含与被包含的关系,不要弄乱弄混。所以在平时写程序时注意书写格式要清晰明了便于查漏补缺,再有就是注意格式和一些特殊的符号,不要记混,更要熟练运用。凡事从基础做起,慢慢向外扩展,温故而知新。




页: [1]
查看完整版本: 20161108 PHP