HTML网页排版划分练习

来源：互联网发布：淘宝和天猫哪个靠谱编辑：程序博客网时间：2024/06/11 01:36

/* *Copyright (c) 2017，烟台大学计算机学院 All rights reserved. *文件名称：关于HTML的练习*作    者：张晴晴 *完成日期：2017年11月6日 *版 本 号：v1.0  * *问题描述：HTML5的新特性 *输入描述： 无*程序输出： 无*/<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>    body{  height:1000px;  font-family:"黑体";  } header{  width:100%;  height:20%;  } aside{  width:20%;   height:70%;  float:left;} article{   width:80%;   height:70%;   float:left;   } footer{    width:100%;    height:10%;    background:#CCC;    float:left;    }   #nav{    list-style-type:none;    padding:0px;    width:100%; font-size:36px;    }   #nav ul{  line-height:50px;  position:absolute;  left:-100000px;  padding:0px;/*定义元素边框和元素内容之间的距离*/  }     #nav li{  float:left;  background-color:white;  width:100px;  } #nav a{   padding:50% 0%;/*一层网络连接的相对位置*/  color:black;/*链接本来的颜色*/  text-decoration:none;  }    #nav a:hover{/*hover设置鼠标移动到a上面时的样式*/  color:white;/*鼠标指向链接显示的颜色*/  background-color:blue;/*鼠标指示背景显示颜色*/  list-style-type:none;  }   #nav li:hover ul{/*指定下拉列表出现的位置*/  left:auto;   /*left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。*/  }  #nav ul li{/*下拉子菜单中所有内容*/  background-color:#FCC;  list-style-type:none;  width:100%;  clear:left;/*规定哪一侧不允许浮动元素*/  }  #nav ul a{/*二层下拉列表中的样式*/  text-decoration:none;     padding:0px;  color:#06F;}/*链接本来的颜色*/  .up{ position:absolute; left:30%; top:0%;}     #img{     float:left;     position:relative;     left:0px;     top:30px;     border:0;     }  #table{           position:relative;           left:10px;     top:-5px;     line-height:20px;}

</style></head>

<body>

<header><img src="img/logo.gif" height=40% width=100%><ul id="nav" class="up">    <li ><a href="">首页</a>            <ul>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            </ul>   </li>    <li> <a href="">博客</a>            <ul>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            </ul>   </li>    <li> <a href="">设计</a>   <ul>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>   </ul> </li> <li>  <a href="">相册</a>            <ul>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            </ul> </li> <li>  <a href="">论坛</a>            <ul>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            </ul> </li> <li><a href="">关于</a>            <ul>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            <li><a href="">子菜单</a></li>            </ul> </li></ul><img src="img/banner.jpg" height=60% width=100%></header>

<aside><table border="0" cellpadding="0" cellspacing="0" class="table1" height:100%><tr><td nowrap bgcolor="#CCCCCC" colspan="2"><input type="text" width="100"><input type="button" value="Search" align="right"></td></tr>

<tr><td colspan="2"><h4>会员登录</h4></td></tr><tr><td>用户名:</td>     <td align="center"><input type="text" width="100" class="text"></td></tr><tr><td>密 码:</td>     <td align="center"><input type="text" width="100" class="text"></td></tr></tr><tr><td align="right"><input type="button" value="登录"></td><td align="center"><input type="button" value="提交"></td></tr>

<tr><td colspan="2"><h4>站点信息</h4></td></tr><tr><td align="right">访问:</td><td>6562次</td></tr><tr><td align="right">在线：</td><td>12人</td></tr><tr><td align="right">会员：</td><td>3244次</td></tr><tr><td align="right">留言：</td><td>6565个</td></tr><tr><td align="right">建站：</td><td>2017/11/6</td></tr><tr><td colspan="2"><h4>页面标准</h4></td></tr><tr>  <td colspan="2" align="center"><img src="img/left.jpg" width="166"></td></tr></table></aside>

<article><img  border="0" src="img/style_1.jpg" width:50% height:40% id="img"><br><br><table width:50% id="table"><tr><td width="100">风格名称：</td><td>好看的网页</td></tr><tr><td>设计制作：</td><td>张晴晴</td></tr><tr><td>CSS制作：</td><td>晴晴张</td></tr><tr><td>发布时间：</td><td>2016-11-6</td></tr><tr><td>演示地址：</td><td>计算机中心</td></tr><tr><td>风格简介：</td><td>简约型</td></tr></table><br><br>

<table width:100% height:10%><tr><td align="center"><font color="#999999" size="-1">点击查看大图</font></td><td align="right"><img src="img/save.jpg"><font color="#999999" size="-1">点击下载该风格</font></td></tr></table><hr style="border-style:dashed" color="#999999">

<img  border="0" src="img/style_2.jpg" width:50% height:40% id="img"><br><br><table width:50% height:40% id="table"><tr><td>风格名称：</td><td>好看的网页</td></tr><tr><td>设计制作：</td><td>张晴晴</td></tr><tr><td>CSS制作：</td><td>晴晴张</td></tr><tr><td>发布时间：</td><td>2016-11-6</td></tr><tr><td>演示地址：</td><td>计算机中心</td></tr><tr><td>风格简介：</td><td>简约型</td></tr></table><br><br><table width:100% height:10%><tr><td align="center"><font color="#999999" size="-1">点击查看大图</font></td><td align="right"><img src="img/save.jpg"><font color="#999999" size="-1">点击下载该风格</font></td></tr></table></article><footer><p align="center"><font size="-1" color="#000000">谢谢观看</font></p></footer>

</body></html>

运行结果：

阅读全文

0 0