首页 > 代码库 > 学习PHP的第二天

学习PHP的第二天

2016年11月8日,星期二。


关于今天所学知识内容的总结:


  、"id"具有唯一性因此"id"的优先级高于"class"(类)的优先级

 

 清除表示:<div class="clean"></div>

      清除的三种类型:right(右清除)、left(左清除)、both(两端清除)

      注意:清除方向应与浮动方向(float:right/left;)保持一致,如果清除方向与浮动方

             向相反,则不会产生清除效果。

            both(两端清除)左浮动(float:left;和右浮动(float:right;)都会产              生效果。

            将<div class="clean"></div>放在需要清除浮动项的上方即可清除浮动效果。


 index、default网站常用的两个默认首页。


  四、用margin(边框)功能制作居中型田字格的编码,如下:

      

<!DOCTYPE html>

<html>

<!--头标题-->

<head>

<!--编码-->

<meta charset="utf8">


<title>居中田字格</title>

<style>

div{width: 400px;

    height: 400px;

    margin: 0 auto;

    }


#a{background-color: #FF0000;

width: 200px;

    height:200px;

float: left;}

#b{background-color: #00FF00;

width: 200px;

    height:200px;

float: left;}

#c{background-color: #00FF00;

width: 200px;

    height:200px;

float: left;}

#d{background-color: #0000FF;

width: 200px;

    height:200px;

float: left;}


</style>


</head>

<body>

<div>

<div id="a"></div>

<div id="b"></div>

<div id="c"></div>

<div id="d"></div>

</div>


</body>

</html>


    效果图,如图:


技术分享


 、利用border-radius将正方形转换成圆形的编码,如下:


  

<<!DOCTYPE html>

<html>

<head>

<meta charset="utf8">

<title>四个圆形</title>

<style type="text/css">


#wtf{width:250px;

    height:250px;

margin: 0 auto;}



.a{background-color: #FF0000;

width: 100px;

height: 100px;

border-radius: 50px;

  

float: left;

margin: 10px;}


#aa{background-color: #FF0000;}


#bb{background-color: #FF0000;}


#cc{background-color: #FF0000;}



</style>

</head>

<body>


<div id="wtf">

<div class="a" id="ee"></div>

<div class="a" id="aa"></div>

<div class="a" id="bb"></div>

<div class="a" id="cc"></div>

</div>


</body>

</html>>


      效果,如下图:


技术分享


六、制作网页的基础文字练习,原创魔兽世界短文《苏拉玛的黄昏》:


  

<<!DOCTYPE html>

<html>

<head>

<meta charset="utf8">

<title>苏拉玛的黄昏</title>

<style>

h1{color: blue;text-indent: 400px;}

div{float: left;}


</style>



</head>

<body>

<!--题目-->

<h1>苏拉玛的黄昏</h1>


<div>


<!--段落-->

<p>&nbsp;&nbsp;苏拉玛上层精灵的护盾保护了城市免于天崩地裂的毁灭,使得他们得以在屏障中继续肆无忌惮地使用夜之井魔法。但这个护盾隔绝了日光和月光,使得整个苏拉玛处于永远的夜晚当中。<br><p>&nbsp;&nbsp;这也是“永夜之城”这个名号的来历。</p>

<p>&nbsp;&nbsp;一万年里,失去了太阳和月亮,再加上夜之井的魔法能量的影响。这些上层精灵发生了变异,最终成为了现在的夜之子。</p>

<p>&nbsp;&nbsp;而其中受到影响最大的,正是艾利桑德本人。身为苏拉玛的首领,她基本上日夜沉浸于夜之井的魔力当中(考虑艾萨拉)。</p>

<P>&nbsp;&nbsp;夜之井力量的核心正是阿曼苏尔之眼,这个泰坦神器通过与井水的共鸣创造出了一个近似于永恒之井的力量源。</P>

<p>&nbsp;&nbsp;随着她受到阿曼苏尔之眼的影响越来越大,艾利桑德觉得自己似乎获得了操纵时间的力量。她可以进入不同的时间层级,召唤出不同时间流中的自己的分身,甚至可以窥见未来。</p>

<p>&nbsp;&nbsp;通过这一能力,艾利桑德使得夜之子一族兴盛至今。甚至得以与“邻国”的风暴峡湾维库文明分庭抗礼(在古代,两个文明曾有过不少摩擦,主要是针对领土争端的问题,夜之子在天崩地裂后曾试图到护盾外围去发展)。</p>

<p>&nbsp;&nbsp;然而,在军团入侵这个事件中。艾利桑德无论如何观测未来的片段。看到的都只有在不同时间流里她自己殒命的场景。在她看到的所有未来中,军团都获得了胜利,而她本人则被军团所杀。</p>




</div>




</body>

</html>


  效果图,如下:

 

技术分享

本文出自 “12244251” 博客,谢绝转载!

学习PHP的第二天