您的位置：首页 > 编程语言 > PHP开发

学习PHP第二天HELLO HTML

2017-02-13 22:01 162 查看

一、复习

1.DOCTYPE 标签

DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的
文档类型定义（DTD）来解析文档。
2. CSS 选择器

<style>

    div{

    }

</style>

3. id 选择器

    #idName{

    }

    <div id="idName"></div>

4. 类选择器

   .className{

    }

    <div id="idName"></div>

二、内联与块

div 独占一行

属性设置

display: none;

display: block;

绿水字体格式，内联，行内，块控制


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<style type="text/css">
div{
margin: auto;
}

/* 绿水字体控制，内联，块，字体格式 */
#yonge{
width: 200px;
height: 200px;

border: 1px solid gray;
float: left;
}

#lvshui{
color: green;
text-shadow: 1px 1px 1px red;
}

#yonge1{
width: 200px;
height: 200px;

border: 1px solid gray;
float: left;
}

#lvshui1{
color: green;
text-shadow: 1px 1px 1px red;

display: block;
width: 20px;
height: 20px;
border: 1px solid red;
}

#yonge2{
width: 200px;
height: 200px;

border: 1px solid gray;
float: left;
}

#lvshui2{
font-size: 40px;
color: green;
text-shadow: 1px 1px 1px red;
border: 1px solid red;
}

</style>
</head>
<body>

<div id="yonge">
鹅鹅鹅<br>
曲项向天歌<br>
白毛浮<span id="lvshui">绿水</span><br>
红掌拨清波<br>
</div>

<div id="yonge1">
鹅鹅鹅<br>
曲项向天歌<br>
白毛浮<span id="lvshui1">绿水</span><br>
红掌拨清波<br>
</div>
<div id="yonge2">
鹅鹅鹅<br>
曲项向天歌<br>
白毛浮<span id="lvshui2">绿水</span><br>
红掌拨清波<br>
</div>

</body>
</html>




效果图：

三、 border-radius边框圆角画太极图

这是操作练习



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2001画太极图</title>

<style type="text/css">

div{
float: left;
}

#TaiJiTu{
width: 100px;
height: 100px;
border: 2px solid blue;

border-radius: 50px 40px 50px 30px;
}

#t0{
width: 100px;
height: 100px;
background: white;

border: 100px solid black;
border-radius: 150px;
}

#t1{
width: 100px;
height: 100px;
background: black;
border: 1px solid white;
border-radius: 150px;
}

#t2{
width: 300px;
height: 600px;

border: 1px solid black;
border-left: 300px solid black;

border-radius: 300px;

clear: left;
}

#t3{
width: 300px;
height: 600px;

border: 1px solid black;
border-left: 300px solid black;

border-radius: 300px;
}

#t3::before{
content: '';
display: block;

width: 100px;
height: 100px;
background: white;

border: 100px solid black;
border-radius: 150px;

margin-left: -150px;
}

#t3::after{
content: '';
display: block;

width: 100px;
height: 100px;
background: black;

border: 100px solid white;
border-radius: 150px;

margin-left: -150px;
}

</style>

</head>
<body>
<div id="TaiJiTu"></div>
<div id="t0"></div>
<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>
</body>
</html>
效果图：

四、相对定位和绝对定位

1. 相对定位：相对自己移动，不影响其他元素

2. 绝对定位：相对父元素的位置，相对其他元素最后加载，重叠放置

3. position: static;

    position: relative; 相对定位

   position: absolute; 绝对定位

   position: fixed;


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2002相对定位和绝对定位.html</title>

<style type="text/css">
div{
width: 300px;
height: 100px;
}

#t1{
background: red;

/*margin-top: 50px;*/

position: relative;
top: 50px;
left: 100px;
/* 相对定位：相对自己移动，不影响其他元素 */
/*
position: static;
position: relative; 相对定位
position: absolute; 绝对定位
position: fixed;
*/

border: 1px solid blue;
}

#t2{
background: pink;
}

#t3{
background: blue;
}

#common{
width: 600px;
height: 500px;
background: orange;
}

#t11{
background: red;

position: absolute;/* 绝对定位：相对父元素的位置，相对其他元素最后加载，重叠放置 */
top: 450px;
left: 30px;
z-index: 1;/* 层叠层次，数字越大，越在上层 */

border: 1px solid blue;
}

#t22{
background: pink;

position: absolute;
top: 470px;
left: 50px;

border: 1px solid black;
}

#t33{
background: blue;
position: absolute;
top: 490px;
left: 70px;

border: 1px solid yellow;
}
</style>

</head>
<body>
<h3>相对定位</h2><hr>
<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>
<h3>绝对定位</h3><hr>
<div id="common"></div>
<div id="t11">01绝对定位：通过改变 z-index:1 提高了层叠层次。比默认的都高！</div>
<div id="t22">02绝对定位</div>
<div id="t33">03绝对定位</div>
</body>
</html>


效果图：

每日总结：

1.应该早点睡觉，白天困一点没有效率，还不如早点睡养好明天的精神

2.实际进度和自己预想的相差太多，调整一下

3.死磕，从容。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： PHP html css

相关文章推荐

新的分享

章节导航