计划
因为 我想做一个问卷系统 大致看了一下 感觉要学的东西有点多
大一大二的时候比较松散 不怎么学习 前期不学的后作用就是这样了
目标十天看完它 或者一个周吧
学习进度
今天2023.03.08
因为之前有个假期自己看了一点b站的html
所以我学到了表格 现在到表单
大概是从下午三点开始 现在是 21:56
把这本书的html部分看完了,前面的没看,因为觉得差不多都是那样的
搞出来的东西好丑哈哈哈,然后我搜了一下怎么样把背景放进表格,baidu说要css
接下来按着课本来制作一下这个网页
十分钟才搞得这个框框 好拉... 接下来要把它往下挪一点
伟大的作品往往采用最朴实的做法
加个表 空的 高80
这是昨晚最后的效果
本来我的框直接用了iframe标签,但是这个是要放一个专门的html文件才可以,应该会更简单吧
但是我现在就随便弄弄,不过真的好麻烦啊 这个table tr td
下面是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>框架练习</title>
<style type="text/css">
body{background: url(/resource/小猫.jpg);}
</style>
</head>
<body>
<table height="80"></table>
<table align="center">
<tr>
<td>
<table width="300" height="600" bgcolor="pink" align="center" >
<tr clospan="10"> <td><table height="50"></table></td></tr>
<tr><td align="center">
<table>
<tr ><td><input type="button" value=" 内容1 " style=" font-family: 宋体;font-size: larger;" ></td></tr>
<tr ><td><input type="button" value=" 内容2 " style=" font-family: 宋体;font-size: larger;" ></td> </tr>
<tr ><td><input type="button" value=" 内容3 " style=" font-family: 宋体;font-size: larger;" ></td></tr>
<tr ><td><input type="button" value=" 内容4 " style=" font-family: 宋体;font-size: larger;" ></td></tr>
</table>
</td></tr>
<tr clospan="10"> <td><table height="50"></table></td> </tr>
</table>
</td>
<td>
<table align="center" width="900" hight="600" align="center" border="2">
<tr height="50"><td width="30" ><input type="image" src="/resource/老鼠.png" height="50"></td>
<td align="left">  新手上路</td>
</tr>
<tr height="150"><td colspan="2"><input type="image" src="/resource/老鼠.png" width="900" height="220" ></td>
</tr>
<tr height="50"><td width="30" ><input type="image" src="/resource/老鼠.png" height="50"></td>
<td align="left">  新手上路</td>
</tr>
<tr height="250"><td colspan="2">
<ul>
<li>买买买</li><li>买买买</li><li>买买买</li><li href="/xiaoxiao.html">买买买</li>
</ul></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
2023.3.9
今天开始学习css
2023.3.12
又摆了几天
不过昨晚看了一个这个 B站视频 感觉收益很大 果然不可以单看书
现在的效果是这样
下面为新代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>网页导航</title>
</head>
<style>
.one {
width: 180px;
background: pink;
text-align: right;
text-indent: 20px;
}
input {
width: 150px;
text-align: left;
text-indent: 25px;
height: 35px;
margin: 3px;
font-family: 黑体;
font-size: 15px;
font-weight: bold;
}
.two {
height: 20px;
display: block;
background-image: url(/resource/老鼠.png);
background-size: 20px;
background-repeat: no-repeat;
border-bottom: 1px solid gray;
text-indent: 22px;
}
.flow {
display: block;
height: 120px;
width: 300px;
background-image: url(/resource/小猫.jpg);
background-size: 220px;
background-repeat: no-repeat;
background-position: right;
text-align: left;
line-height: 100px;
margin-top: 10px;
}
.list {
display: block;
margin-top: -10px;
}
a:hover {
color: pink;
}
</style>
<body>
<table>
<tr>
<td class="one">
<div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="帮助首页"></div>
<div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="注册与认证"></div>
<div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="购物规则"></div>
<div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="联系我们"></div>
</td>
<td>
<div class=" two">新手上路
</div>
<span class="flow">买家入门:</span>
<br />
<span class="flow">卖家入门:</span>
<div class="two">热门帮助</div>
<div class="list">
<ul>
<li><a href="">如何实时与卖家沟通</a></li>
<li><a href="">如何查找想要的商品</a></li>
<li> <a href="">如何出价购买商品</a></li>
<li> <a href="">如何使用购物通付款</a></li>
<li> <a href="">如何给卖家评价</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
最终效果啦
<!DOCTYPE html>
<html lang="en">
<head>
<title>网页导航</title>
</head>
<style>
table {
margin: 100px auto 20px auto;
height: 500px;
}
.one {
height: 500px;
width: 180px;
background: pink;
text-align: right;
text-indent: 20px;
}
input {
width: 150px;
text-align: left;
text-indent: 25px;
height: 35px;
margin: 3px;
font-family: 黑体;
font-size: 15px;
font-weight: bold;
}
.two {
height: 25px;
width: 600px;
display: block;
margin-left: 20px;
background-image: url(/resource/老鼠.png);
background-size: 20px;
background-repeat: no-repeat;
background-position: 0 -2px;
border-bottom: 1px solid gray;
text-indent: 22px;
font-size: 18px;
}
.flow {
display: block;
height: 100px;
width: 600px;
background-image: url(/resource/小猫.jpg);
background-size: 600px;
background-repeat: no-repeat;
background-position: 100px 0px;
text-align: left;
text-indent: 20px;
line-height: 100px;
margin-top: 10px;
font-weight: 600;
font-family: 黑体;
}
.list {
height: 300px;
display: block;
margin-top: -10px;
font-size: 17px;
margin-left: 12px;
}
a:hover {
color: pink;
}
</style>
<body>
<table>
<tr>
<td class="one">
<div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="帮助首页"></div>
<div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="注册与认证"></div>
<div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="购物规则"></div>
<div align="center"> <a class="btn" href="/xiaoxiao.html"><input type="button" value="联系我们"></div>
</td>
<td>
<div class=" two">新手上路
</div>
<span class="flow">买家入门:</span>
<br />
<span class="flow">卖家入门:</span>
<div class="two">热门帮助</div>
<div class="list">
<ul>
<li><a href="">如何实时与卖家沟通</a></li>
<li><a href="">如何查找想要的商品</a></li>
<li> <a href="">如何出价购买商品</a></li>
<li> <a href="">如何使用购物通付款</a></li>
<li> <a href="">如何给卖家评价</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
又学到了, .类 img{width:100%;} 就可以等宽啦
我上面的都是手动调的