PHP教学-浮动定位与布局 - 第九期学习

Community Learn Tools Library Leisure

English

Home > List of blog posts > PHP教学-浮动定位与布局

Blogger Information

Blog 25

fans 2

comment 0

visits 18520

Special Recommendation

More>

Related recommendations

实例

table{
    border: 1px red solid;
    color: #3a87ad;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px #999999;
    border-collapse: collapse;
    text-align: center;
    width: 700px;
    margin: 20px auto;
}

td,th{
    border: 1px solid  red;
    padding: 10px;
}

table>caption{
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: black;
}

/*隔行变色*/
tbody tr:nth-of-type(2n+1){
    background-color: #ececec;
}

tbody>tr:first-of-type>td:first-of-type{
    background: linear-gradient(red,yellow);
}
tbody>tr:nth-last-of-type(2)>td:first-of-type{
    background: linear-gradient(yellow,red);
}

thead>tr:first-of-type>th{
    background: linear-gradient(lightgrey,lightsalmon);
}
tfoot>tr>td{
    background: linear-gradient(lightseagreen,lightcyan);
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

* 使用<div><span><p><ul>...等标签来制作一张课程表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二个表格</title>
<link rel="stylesheet" href="static/css/style2.css">
</head>
<body>
<article class="table">
<h2 class="caption">第九期课程安排</h2>
<section class="thead">
<ul>
<li>序号</li>
<li>课程</li>
<li>描述</li>
</ul>
</section>

<section class="tbody">
<ul>
<li>1</li>
<li>前端开发基础</li>
<li>HTML5常用标签,CSS3样式控制与页面布局</li>
</ul>
<ul>
<li class="ThisMyClass"></li>
<li>PHP开发基础</li>
<li>PHP语法,类与对象,常用开发技术与案例</li>
</ul>
<ul class="THisClassUl">
<li class="ThisMyClass abTop">2</li>
<li>大型CMS开发实战</li>
<li>Laravel开发基础,Laravel开发CMS全程精讲</li>
</ul>
</section>

<section class="tfoot">
<ul>
<li>备注</li>
<li>全程直播教学</li>
<li>每晚20：00-22：00（节假日除外）</li>
</ul>
</section>
</article>
</body>
</html>

实例

.table{
    display: table;
    box-sizing: border-box;
    border-collapse: collapse;
    border: 1px solid #444;
    width: 650px;
    margin: auto;
    color: #444;
}

.caption{
    display: table-caption;
    text-align: center;
}

.thead{
    display: table-header-group;
    /*text-align: center;*/
    font-weight: bold;
    font-size: 1.2rem;
    /*letter-spacing: 5px;*/
    background: linear-gradient(green,white);
    color: white;
    text-shadow: 1px 1px 1px black;
}

.tbody{
    display: table-row-group;
    text-align: center;
}
section ul{
    display: table-row;
    text-align: center;
}
section ul li{
    display: table-cell;
    border: 1px solid #444;
    padding: 10px;
}

.tfoot{
    display: table-footer-group;
    background-color: #ededed;
}
.ThisMyClass{
    border:none;
}
.THisClassUl{
    /*position:relative*/
    position: relative;
}
.abTop{
    /*position: absolute;*/
    position: absolute;
    margin-top: -25px;
    margin-left: 18px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

* 使用绝对定位,实现用户登录框在页面中始终居中显示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<link rel="stylesheet" href="static/css/style3.css">
<style>
input:enabled{
background-color:beige;
}

input:disabled{
background-color: lightgreen;
}

input:required{
background-color: red;
}

</style>
</head>
<body>
<div>
<h2>用户登录</h2>
<form action="" method="post">
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="example@email.com">
</p>

<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required placeholder="不得少于6位">
</p>

<p>
<label for="save" >保存密码:</label>
<input type="checkbox" id="save" name="save" checked readonly>
</p>

<p>
<label for="save_time">保存期限:</label>
<select name="save_time" id="save_time">
<option value="7" selected>7天</option>
<option value="30">30天</option>
</select>
</p>

<p>
<input type="hidden" name="login_time" value="登陆时间戳">
</p>

<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
</p>

<script>
document.querySelector('[type="hidden"]').value = new Date().getTime()
</script>
</form>
</div>
</body>
</html>

实例

body{
    position: relative;
}

div{
    position: absolute;
    left: 50%;
    margin-left: -150px; width:300px;
}



h2{
    text-align: center;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

* 模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<link rel="stylesheet" href="static/css/style4.css">
</head>
<body>
<div class="top">头部</div>
<div class="box2">
<div class="neirong">内容区</div>
<div class="zuo">左侧</div>
<div class="you">右侧</div>
</div>
<div class="dibu">底部</div>
</body>
</html>

实例

body{
    width: 1000px;
    margin: auto;
}

.top,.dibu{
    background-color: lightcyan;

    height: 50px;
}

.box2{
    border: 1px solid lightcoral;
    padding-left: 200px;
    padding-right: 200px;
    box-sizing: border-box;
    overflow: hidden;
}

.neirong{
    float: left ;
    box-sizing: border-box;
    width: 100%;
    min-height: 600px;
    background-color: lightseagreen;

}

.zuo{
    box-sizing: border-box;
    min-height: 600px;
    width: 200px;
    background-color: lightgreen;
    float: left;
    margin-left: -100%;
    position: relative;
    left:-200px;
}

.you{
    float: left;
    box-sizing: border-box;
    min-height: 600px;
    width: 200px;
    background-color: lightgoldenrodyellow;
    margin-left:-200px;
    position: relative;
    left: 200px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

* (选做): 将圣杯布局中的左右二列,使用绝对定位来实现

/*body{*/
/* width: 1000px;*/
/* margin: auto;*/
/*}*/

.top,.dibu{
background-color: lightcyan;

height: 50px;
}

.box2{
border: 2px solid lightcoral;
padding-left: 200px;
padding-right: 200px;
box-sizing: border-box;
overflow: hidden;
position: relative;
}

.neirong{
float: left ;
box-sizing: border-box;
width: 100%;
min-height: 600px;
background-color: lightseagreen;

}

.zuo{
box-sizing: border-box;
min-height: 600px;
width: 200px;
background-color: lightgreen;
float: left;

position: absolute;
top: 0;
left: 0;
/*position: absolute;*/
/*left:-200px;*/
}

.you{
float: left;
box-sizing: border-box;
min-height: 600px;
width: 200px;
background-color: lightgoldenrodyellow;
position: absolute;
top: 0;
right: 0;
/*margin-left:-200px;*/
/*position: relative;*/
/*left: 200px;*/
}

Correction status：qualified

Teacher's comments：你的类名, 真是醉了, 这么简单的单词, 还是要记一些的, 左右, left, right 比拼音要好多了, 不是吗?

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

PHP教学-配置环境

2023-01-16 23:16:18