收藏
批改状态：合格
老师批语：
今天朱老师主要讲了学习php的三个问题，1、学习php为什么还要学习html 2、php是用来做什么的3、为什么要用框架来开房项目。
属性是用来描述标签的，标签的四个公共属性：1、style内联样式 2、id标识唯一元素 3、class标识同类元素 4、title提示信息 单标签：引用可替换元素 双标签：程序员自己写的 table表 tr 、td、th的用法以及css的控制方法。
<!DOCTYPE html>
<html>
<head>
<title>8月14日</title>
<style type="text/css">
table{
width: 700px;
text-align: center;
margin: 20px auto;
border-collapse: collapse;
}
table caption{
font-size: 3rem;
font-weight: bold;
color: #666;
}
table,th,td {
border: 1px solid #666;
}
table tr:first-child {
background-color: lightgreen;
}
table tr:hover {
background-color: #efefef;
cokor:coral;
}
table tr td img{
padding: 5px;/*内边距*/
border-radius: 10px;/*圆角10px*/
}
table tr td a{
text-decoration: none;
width: 140px;
height: 40px;
padding: 5px;
border: 1px solid black;
background-color: white;
color: black;
border-radius: 8px;
}
table tr td a:hover{
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>购物清单</h2>
<p>牛奶</p>
<p>奶牛</p>
<p>电风扇</p>
<hr>
<ul>
<li>牛奶</li>
<li>那妞naini</li>
<li>电风扇</li>
</ul>
<hr>
<table>
<caption>购物清单</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>拍子</th>
<th>数量</th>
<th>缩略图</th>
<th>买了</th>
</tr>
<tr>
<td>1</td>
<td>牛奶</td>
<td>伊利</td>
<td>2箱</td>
<td><img src="图片地址" width="100"></td>
<td><a href="http://taobao.com">点击买了</a></td>
</tr>
<tr>
<td>2</td>
<td>奶牛</td>
<td>红富士</td>
<td>10斤</td>
<td><img src="图片地址" width="100"></td>
<td><a href="http://taobao.com">点击买了</a></td>
</tr>
<tr>
<td>3</td>
<td>电风扇</td>
<td>格力</td>
<td>2台</td>
<td><img src="图片地址" width="100"></td>
<td><a href="http://taobao.com">点击买了</a></td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<title>某高校一周食谱</title>
<meta charset="utf-8">
<style type="text/css">
table {
width: 1300px;
text-align: center;
margin: 20px auto;
border-collapse: collapse;
}
table caption{
font-size: 3rem;
font-weight: bold;
color: #666;
margin-bottom: 15px;
}
table th {
width: 130px;
height: 80px;
}
table td {
width: 130px;
height: 80px;
}
p {
font-size: 2rem;
font-weight: bold;
color: #666;
}
#div1 img{
cursor: pointer;
transition: all 0.6s;
}
#div1 img:hover{
transform: scale(1.8);
}
</style>
</head>
<body>
<h2>2018年8月时颖制作，咨询QQ：888888888 鼠标移到图片图片放大</h2>
<table border="1">
<caption>某高校每周食谱</caption>
<tr>
<th>餐别</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
<th>厨师照片</th>
</tr>
<tr>
<td>早餐</td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><div id="div1"><img src="https://img.php.cn/upload/avatar/000/001/120/5ad4492ab6d99770.jpg" width="120px" height="80px" /></td></div>
</tr>
<tr>
<td>中餐</td>
<td><ul>
<li>西红柿鸡蛋</li>
<li>大米</li>
<li>面条</li>
</ul></td>
<td><ul>
<li>大米</li>
<li>红烧肉</li>
<li>馒头</li>
</ul></td>
<td><ul>
<li>面条</li>
<li>包子</li>
<li>毛血旺</li>
</ul></td>
<td><ul>
<li>包子</li>
<li>水煮鱼</li>
<li>大米</li>
</ul></td>
<td><ul>
<li>大米</li>
<li>西红柿鸡蛋</li>
<li>包子</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>鲍鱼</li>
</ul></td>
<td><ul>
<li>海参</li>
<li>包子</li>
<li>大虾</li>
</ul></td>
<td><div id="div1"><img src="https://img.php.cn/upload/avatar/000/001/120/5ad4492ab6d99770.jpg" width="120px" height="80px" /></td></div>
</tr>
<tr>
<td>晚餐</td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><ul>
<li>稀饭</li>
<li>包子</li>
<li>油条</li>
</ul></td>
<td><div id="div1"><img src="https://img.php.cn/upload/avatar/000/001/120/5ad4492ab6d99770.jpg" width="120px" height="80px" /></td></div>
</tr>
<tr>
<td colspan="9" ><p>锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦。</p></td> </tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
