<![CDATA[MitSeek]]> https://mitseek.com/ zh-cn www.emlog.net 创建对象 https://mitseek.com/?post=67 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="demo"></p> <script> var person={ firstname:"章", lastname:"天真", age:19, eyecolor:"褐色" }; document.getElementById("demo").innerHTML= "姓："+person.firstname+"<br>"+"名字:"+person.lastname+"<br>"+"年龄:"+person.age+"<br>"+"喜欢的颜色:"+person.eyecolor; </script> </body> </html>]]> Wed, 10 Dec 2025 18:48:43 +0800 MitSeek https://mitseek.com/?post=67 盒子的基本操作 https://mitseek.com/?post=66 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .main{ width: 700px; border: 1px solid red; padding: 50px; overflow:auto;/* 清除子元素浮动 */ background:#ff3bdd; color: white; margin: 0 auto; } hr{ border: 2px solid white; } img{ width: 300px; } h2{ text-align: center; } .box1{ float: left; margin: 50px 23px; background: #2380ff; outline: 8px #2aff1c dashed;/* 轮廓线 */ background: -o-linear-gradient(bottom right,red,#fffa86); background: linear-gradient(to bottom right ,red,#fffb46); } </style> </head> <body> <div class="main"> <h2>美女团员</h1> <hr /> <div class="box1"> <img src="02.jpg" alt="" /> <h2>美女</h2> </div> <div class="box1"> <img src="02.jpg" alt="" /> <h2>美女</h2> </div> <div class="box1"> <img src="02.jpg" alt="" /> <h2>美女</h2> </div> <div class="box1"> <img src="02.jpg" alt="" /> <h2>美女</h2> </div> </div> </body> </html>]]> Sun, 30 Nov 2025 01:09:21 +0800 MitSeek https://mitseek.com/?post=66 盒子内的布局 https://mitseek.com/?post=65 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .main{ border: 1px solid red; width: 480px; overflow: auto;/* 清除子元素的浮动 */ color: white; margin: 0 auto; padding: 30px; background:-o-linear-gradient(bottom right,red,blue);/* 背景颜色渐变 */ background: linear-gradient(to bottom right,red,blue); } div h1{ text-align: center; } .box{ float: left; margin-left:30px; } .box1{ width:200px; text-indent: 2em;/* 首行缩进2个字符 */ } img{ width: 180px; height: 200px; } </style> </head> <body> <div class="main"> <h1>一二一</h1> <div class="box"> 1 <div class="box1">1.1</div> <div><img src="01.webp" alt="" /></div> <div class="box1">1.3</div> </div> <div class="box"> 2 <div class="box1">2.1</div> <div><img src="02.jpg" alt="" /></div> <div class="box1">2.3</div> </div> </div> </body> </html>]]> Sun, 30 Nov 2025 00:48:44 +0800 MitSeek https://mitseek.com/?post=65 布局 https://mitseek.com/?post=64 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ min-height: 700px; } .header,.footer{ border:1px solid #ffff00; background: #333333; text-align: center; } .left,.right,.center{ min-height: 150px; position: relative;/* 相对定位 */ float: left; } .container{ padding: 0 200px; overflow: hidden;/* 清除浮动 */ color: white; } .left{ margin-left:-100%; left: -200px; width: 200px; background: green; } .center{ width: 100%; background: blue; } .right{ margin-left:-200px; right: -200px; width: 200px; background: red; } </style> </head> <body> <div class="header"> <h3>head</h3> </div> <div class="container"> <div class="center"> <h3>左边</h3> </div> <div class="left"> <h3>中间</h3> </div> <div class="right"> <h3>右边</h3> </div> </div> <div class="footer"> <h3>footer</h3> </div> </body> </html>]]> Fri, 28 Nov 2025 00:27:11 +0800 MitSeek https://mitseek.com/?post=64 表单、搜索页面 https://mitseek.com/?post=63 表单form action 表单提交的地址进行处理 name用于给表单命名 标签input type text文本 password密码 hidden隐藏域 radio单选按钮 checkbox复选框 标注label 按钮button name 名称 type 类型button sumit reset value初始值 disabled是否禁用此按钮 select 表单控件，多选菜单 option下拉菜单内容 fieldset表单内的相关元素分组 legend用于定义fieldset标题 textarea标签用于定义多行文本域 output用于计算结果输出 meter标签用于定义度量衡 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ background-image: url("02.jpg"); background-size:cover;/* 满屏 */ } ul{ list-style: none; position: absolute; /* '绝对定位' */ right: 0; top: 15px; } ul li{ float: left; margin-right: 15px; } ul li a{ color: white; } .title{ width: 400px; margin: auto; } .title div{ float: left; border: 1px solid red; font-size: 30px; padding: 5px 15px; margin-left:30px; border-radius:20px; } .box{ width: 800px; margin: 200px auto; } .search1{ width: 500px; height: 40px; line-height: 36px; background: rgba(255, 255, 255,0.5); font-size: 16px; color: blue; margin-left: 80px; } .search2{ font-size: 16px; width: 104px; height: 45px; background: #38f; color: #fff; line-height: 40px; border: none; } .search2:hover{ background: #969922; } </style> </head> <body> <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> <li><a href=""></a>登录</li> <li><a href=""></a>注册</li> </ul> <div class="title"> <div>搜</div> <div>搜</div> <div>搜</div> </div> <div class="box"> <input type="text" class="search1" /><input type="button" value="搜搜搜" class="search2" /> </div> </body> </html>]]> Wed, 26 Nov 2025 19:56:20 +0800 MitSeek https://mitseek.com/?post=63 日历 https://mitseek.com/?post=62 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ border: 1px solid #00bfff; width: 270px; } table{ margin: auto; } th,td{ text-align: center; } td{ background: #fffcc5; } th,caption{ background: #00Bfff; } </style> </head> <body> <div> <table cellspacing="0" cellpadding="10" border="0"> <caption>2025年11月</caption> <tr> <th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th> </tr> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr> <tr> <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td> </tr> <tr> <td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td> </tr> <tr> <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td> </tr> <tr> <td>29</td><td>30</td><td>31</td> </tr> </table> </div> </body> </html>]]> Wed, 26 Nov 2025 18:39:09 +0800 MitSeek https://mitseek.com/?post=62 表格标题,行的颜色 https://mitseek.com/?post=61 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> table{ background: #000eee; color: white; } caption{ background: #00ff00; border-radius:30px 30px 0 0; font-size: 30px; color: #fff; border: 1px solid #0d0d0f; } th,td{ padding: 10px 50px 20px; } tr:nth-child(2n){/* 偶数行的背景颜色 */ background: #1deeee; } tr:nth-child(2n+1){/* 计数行的背景颜色 */ background: #ff83fa; } </style> </head> <body> <table border="1" cleepadding="100" cellspacing="0"> <caption>员工表</caption> <tr> <th>姓名</th> <th>职位</th> <th>薪资</th> </tr> <tr> <td>小明</td> <td>经理</td> <td>5000</td> </tr> <tr> <td>小红</td> <td>秘书</td> <td>10000</td> </tr> </table> </body> </html>]]> Wed, 26 Nov 2025 17:07:19 +0800 MitSeek https://mitseek.com/?post=61 表格的基本使用 https://mitseek.com/?post=60 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> table{ background-size: 200px 200px; color: white; } tr{ height: 150px; align-items: center; } </style> </head> <body> <table border="10" bordercolor="blue" cellspacing="0" cellpadding="20" bgcolor="green"><!-- 边框颜色 --> <!-- 边框间距为0 ,文字的间距,背景颜色--> <caption>表格</caption><!-- 定义表格标题 --> <tr> <td colspan="3">0</td><!-- 跨3列 --> </tr> <tr> <th>1</th><!-- 定义表格表头 --> <th>2</th> <th>3</th> </tr> <tr> <td rowspan="2"><img src="02.jpg" width="150px"/></td><!-- 跨2行 ,img插入图片--> <td>5</td> <td>6</td> </tr> <tr> <td>8</td> <td>9</td> </tr> </table> </body> </html>]]> Tue, 25 Nov 2025 18:32:46 +0800 MitSeek https://mitseek.com/?post=60 UL、LI标签的应用 https://mitseek.com/?post=59 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> ul{ list-style-type:none ; } .head{ background: #0000ff; font-size: 25px; font-weight: bold; color: white; line-height: 40px; } li{ position: relative; border: 1px dotted midnightblue; /* solid 实线,东 dotted虚线 */ padding-left: 50px; width: 600px; height: 40px; line-height: 40px; } span{ display: inline-block; /* position: relative; left: 0 px; */ position: absolute; left: 0; top: 0; vertical-align: middle; width: 40px; height: 40px; color: white; background: #ff3bdd; border-radius: 5px; text-align: center; line-height: 40px; font-size: 20px; } </style> </head> <body> <ul> <li class="head">鱼类排行</li> <li><span>鲤鱼</span>生长在优雅的花园里，每日共人们欣赏。</li> <li><span>草鱼</span>生长在田间的稻田里，陪伴这稻苗长大，很适合做种稻人的朋友。</li> <li><span>鲫鱼</span>这个小生命在大江大河里游趟，见过了大风大浪，在顽强的长大。</li> </ul> </body> </html>]]> Tue, 25 Nov 2025 14:13:35 +0800 MitSeek https://mitseek.com/?post=59 列表标签 https://mitseek.com/?post=58 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .ul1{ list-style: none;/* 无序标签 circle空心圆 disc实心圆 square实心方块*/ } .ul2{ list-style: decimal;/* 数字序号 */ } .ul3{ list-style: none; position: absolute;/* 绝对定位 */ left: -30px;/* 向左移动30 */ top: 320px;/* 向下移动320 */ } .ul3 li{ background: yellow; border: 1px solid blue; } div{ width: 70px; border-bottom:3px solid black;/* 下边框属性 */ } .ul4{ /* text-align: center; */ list-style: none; } .ul4 li{ position: relative; /* 相对定位 */ left: 300px; } .ul4 h2{ position: relative; /* 相对定位 */ left: 300px; } .ul4 li span{ display: block;/* 设置块元素 */ position: absolute; left: -50px; width: 16px; height: 16px; background: #ff3bdd; border-radius: 10px; } </style> </head> <body> <ul class="ul1"> <li>英语</li> <li>语文</li> <li>数学</li> <li>物理</li> <li>化学</li> <li>计算机</li> </ul> <ul class="ul2"> <li>英语</li> <li>语文</li> <li>数学</li> <li>物理</li> <li>化学</li> <li>计算机</li> </ul> <!-- 写一个菜单 --> <div>mitseek</div> <ul class="ul3"> <li>首页</li> <li>HTML</li> <li>CSS</li> <li>JAVASCRIPT</li> <li>PHP</li> <li>关于我</li> </ul> <ul class="ul4"> <h2>MITSEEK</h2> <li><span></span>HTML</li> <li><span></span>CSS</li> <li><span></span>JAVASCRIPT</li> <li><span></span>PHP</li> <li><span></span>关于我</li> </ul> </body> </html>]]> Tue, 25 Nov 2025 11:11:59 +0800 MitSeek https://mitseek.com/?post=58