search

博客列表 >html标签+css选择器的使用--2018年8月22日10时43分作业

html标签+css选择器的使用--2018年8月22日10时43分作业

七分钟的记忆的博客
七分钟的记忆的博客原创
2018年08月22日 10:54:56605浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>登录页面</title>
</head>
<body>
<style type="text/css">
tr,td{
padding:0;
margin:0;
}
table caption{
  text-align:center;
  font-size:20px;
  font-weight:bold;
  margin-bottom:30px;
}
table tr{
  text-align:center;
   margin-top:20px;
   display: inline-block;
}

table{
  border-collapse: collapse;  /* 合并边框线 */
  width:300px;
  margin:0 auto;
  margin-top:30px;
  background:#eee;
  display:inherit;
  padding:15px;
}

tbody{
  text-align:center;
}
table [type="text"]{
  width:200px;
  height:30px;
  border:1px solid #4285F4;
  padding-left:15px;
  margin-left:15px;

}



table tr [type="submit"]{
  width:60px;
  height:30px;
  background:#4285F4;
  color:#fff;
  border:none;
  cursor:pointer;
}
table tr [type="submit"]:hover{
  background:#999;
}
</style>

<table>
   <caption>用户登录 </caption>
   <tbody>
     <tr>
       <td> <label>邮箱:</label></td>
       <td><input type="text" name=""></td>
     </tr>
       <tr>
       <td> <label>密码:</label></td>
       <td><input type="text" name=""></td>
     </tr>
     <tr>
       <td><input type="submit" name=""></td>
     </tr>
   </tbody>


</table>

</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>网站后台管理系统</title>
</head>
<body style="background:#eee">

<style type="text/css">
 *{
    margin:0;
    padding:0;
 }
 body{
    margin:0;
 }
ul,li{
    list-style-type:none;
}
a{
    text-decoration:none;
    color:#000;
}
a:hover{
    color:#f30;
    text-decoration:underline;
}

header{
    width:100%;
    height:80px;
    background:linear-gradient(to top,#4285F4,#efefef);
    margin:0 auto;
    border-bottom:1px solid #f30;
}
header h1{
    float: left;
    line-height:80px;
}
.nav{
    width:1000px;
    margin:0 auto;
    line-height:80px;
}
nav{
    float: right;
}
nav ul li{
    float: left;
    padding-right:15px;
    color:#666;
}

article{
    min-height:100%;
    float: left;
    min-width:100%;

}
iframe{
    min-width:100%;
    height:500px;
    border:none;
}
aside{
    width:200px;
    min-height:100%;
    background:linear-gradient(to left,#4285F4, #eee);
    margin-left:-100%;
    float: left;
    position:relative;
    left:-200px;

}
aside ol{
    margin-top:30px;
}
aside ol li{
  line-height:40px;
  text-align:center;

}
main{
    width:1000px;
    height:700px;
    padding-left:200px;
    margin:0 auto;
}
footer{
  text-align:center;
  color:#4285F4;
  font-size:14px;
}


</style>

<header>
   <div class="nav">
    <h1>后台管理系统</h1>
    <nav>
        <ul>
            <li>你好！admin, 欢迎使用CMS!</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>
    </nav>
   </div>
</header>


<main role="main">
    <article>
       <iframe src="01.html" name="main">  </iframe>
     <footer>
         <p> Copyright © 2004-2017 DedeCMS. 织梦科技 版权所有 </p>
     </footer>
    </article>

    <aside>
        <ol>
            <li><a href="">产品管理</a></li>
            <li><a href="03.html" target="main">用户管理</a></li>
            <li><a href="04.html" target="main">商品管理</a></li>
            <li><a href="">分类管理</a></li>
            <li><a href="02.html" target="main">系统设置</a></li>
        </ol>
    </aside>


</main>


</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>网站后天管理系统</title>
</head>
<body>

<style type="text/css" media="screen">

h1{
    font-size:30px;
}
h2{
    font-size:20px;
}

ul,li{
    list-style-type:none;
}

</style>

<h1>欢迎使用专业的PHP网站管理系统   </h1>

<h2> 安全提示 </h2>
<ul>
    <li>1.默认管理目录为dede，需要立即将它更名；</li>
    <li>2.强烈建议data/common.inc.php文件属性设置为644（Linux/Unix）或只读（NT）；</li>
    <li>3.没有更改默认的管理员名称和密码，强烈建议您进行更改！马上修改</li>
</ul>

<h2> 商业授权 </h2>
<ul>
    <p>如果产品商业使用授权，您可以在我们的授权中心查询到相关
    商业授权信息，如果授权类型同查询不符，则说明您可能了非法商业授权，
    请及时同我们取得联系。</p>
</ul>

<h2> 程序团队 </h2>
<ul>
    <li>主程序研发：*****</li>

</ul>

</body>
</html>


运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>系统管理</title>
</head>
<body>
<style type="text/css">
table td{
   padding-top:20px;
}
table td:first-child{
    text-align:right;

}
table tr td [type="text"]{
    width:250px;
    height:30px;
    border:1px solid #4285F4;
    padding-left:15px;
}
textarea{
   border:1px solid #4285F4;
}
[type="submit"]{
    width:100px;
    height:40px;
    border:1px solid #eee;
    background:#4285F4;
    color:#fff;
    text-align:center;
    border-radius:5px;
    cursor:pointer;
}
[type="submit"]:hover{
    background:#666;
}
table tr:last-child td:last-child{
    text-align:center;
}
h2{
    text-align:center;
}

table{
    width:600px;
    margin:0 auto;
}
</style>

<h2>系统设置 </h2>
 <form action="" method="get">
      <table>

          <tbody>
              <tr>
                  <td> <label for="title">站点名称：</label></td>
                  <td><input type="text" name="">  </td>
              </tr>

              <tr>
                  <td><label> 站点关键词： </label>  </td>
                  <td> <input type="text" name=""> </td>
              </tr>
              <tr>
                  <td><label>站点描述：</label></td>
                  <td><textarea cols="40" rows="6"></textarea></td>
              </tr>
              <tr>
                  <td colspan="2"><input type="submit" name=""></td>
              </tr>
          </tbody>
      </table>

 </form>

</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>用户管理</title>
</head>
<body>
<style type="text/css">
tr,td{
padding:0;
margin:0;
}
table caption{
  text-align:center;
  font-size:20px;
  font-weight:bold;
  margin-bottom:30px;
}
table thead{
  background:#eee;
}
table thead tr th{
  border:1px solid #4285F4;
}
table td{
  border:1px solid #4285F4;
  text-align:center;
}
table tr{
  width:500px;
  height:50px;
}

table{
  border-collapse: collapse;  /* 合并边框线 */
  width:650px;
  margin:0 auto;
  margin-top:30px;

}

table tbody tr td:last-child{
  color:#008000;
  cursor:pointer;
}


a{
  text-decoration:none;
  color:#008000;
  width:28px;
  height:24px;
  border:1px solid #008000;
  display: inline-block;
  text-align:center;
}
p{
  margin-top:30px;
  text-align:center;

}

.active{
  background:#008000;
  color:#fff;
}
.more{
  border:none;
}

a:first-child{
  width:35px;

}
a:last-child{
  width:35px;

}
</style>

<table>
   <caption>用户管理 </caption>
    <thead>
           <tr>
             <th>ID</th>
             <th>用户名</th>
             <th>邮箱</th>
             <th>角色</th>
             <th>操作</th>
           </tr>
     </thead>


     <tbody>
      <tr>
        <td>1</td>
        <td>admin</td>
        <td>1652786790@qq.com</td>
        <td>超级管理员</td>
        <td>编辑|删除</td>
      </tr>
        <tr>
        <td>2</td>
        <td>admin</td>
        <td>1652786790@qq.com</td>
        <td>超级管理员</td>
        <td>编辑|删除</td>
      </tr>
        <tr>
        <td>3</td>
        <td>admin</td>
        <td>1652786790@qq.com</td>
        <td>超级管理员</td>
        <td>编辑|删除</td>
      </tr>
        <tr>
        <td>4</td>
        <td>admin</td>
        <td>1652786790@qq.com</td>
        <td>超级管理员</td>
        <td>编辑|删除</td>
      </tr>
      </tbody>
</table>

<p>
  <a href="">首页 </a>
   <a href="" class="active">1 </a>
    <a href="">2 </a>
    <a href=""> 3</a>
     <a href="" class="more">.... </a>
      <a href="">尾页 </a>

  </p>


</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>用户管理</title>
</head>
<body>
<style type="text/css">
tr,td{
padding:0;
margin:0;
}
table caption{
  text-align:center;
  font-size:20px;
  font-weight:bold;
  margin-bottom:30px;
}
table thead{
  background:#eee;
}
table thead tr th{
  border:1px solid #4285F4;
}
table td{
  border:1px solid #4285F4;
  text-align:center;
}
table tr{
  width:500px;
  height:50px;
}

table{
  border-collapse: collapse;  /* 合并边框线 */
  width:650px;
  margin:0 auto;
  margin-top:30px;

}

table tbody tr td:last-child{
  color:#008000;
  cursor:pointer;
}


a{
  text-decoration:none;
  color:#008000;
  width:28px;
  height:24px;
  border:1px solid #008000;
  display: inline-block;
  text-align:center;
}
p{
  margin-top:30px;
  text-align:center;

}

.active{
  background:#008000;
  color:#fff;
}
.more{
  border:none;
}

a:first-child{
  width:35px;

}
a:last-child{
  width:35px;

}
img{
  width:50px;
}
table tr td:nth-child(3){
  color:#f30;
}

</style>

<table>
   <caption>商品管理 </caption>
    <thead>
           <tr>
             <th>ID</th>
             <th>标题图片</th>
             <th>文档标题</th>
             <th>所属分类</th>
             <th>操作</th>
           </tr>
     </thead>


     <tbody>
      <tr>
        <td>1</td>
        <td><img src="img/1.jpg" alt=""></td>
        <td>小米9手机预计在明年8月正式上市</td>
        <td>超级管理员</td>
        <td>编辑|删除</td>
      </tr>
        <tr>
        <td>2</td>
        <td><img src="img/2.jpg" alt=""></td>
        <td>小米9手机预计在明年8月正式上市</td>
        <td>超级管理员</td>
        <td>编辑|删除</td>
      </tr>
        <tr>
        <td>3</td>
        <td><img src="img/3.jpg" alt=""></td>
        <td>小米9手机预计在明年8月正式上市</td>
        <td>超级管理员</td>
        <td>编辑|删除</td>
      </tr>
        <tr>
        <td>4</td>
        <td><img src="img/4.jpg" alt=""></td>
        <td>小米9手机预计在明年8月正式上市</td>
        <td>超级管理员</td>
        <td>编辑|删除</td>
      </tr>
      </tbody>
</table>

<p>
  <a href="">首页 </a>
   <a href="" class="active">1 </a>
    <a href="">2 </a>
    <a href=""> 3</a>
     <a href="" class="more">.... </a>
      <a href="">尾页 </a>

  </p>


</body>
</html>

运行实例 »

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

895667154798412330.jpg

上一条：变量命名规则+web服务器访问原理+本地虚拟主机创建步骤+字符串中的变量解析，字符转义，heredoc，nowdoc下一条：支付知识基础
html标签+css选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多