HTML网页排版划分练习
2017-11-06 16:42
337 查看
/*
*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>运行结果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML、CSS笔记（网页排版）
- HTML练习（网页计算器）
- HTMLParser解析网页，提取链接地址、标题名称，并插入数据库 分类： python 小练习 HTMLParser 2014-02-19 09:57 519人阅读 评论(0) 收藏
- HTML网页的段落排版和换行
- HTML新特性-网页排版
- 3月20日html(二) 图片热点，网页划分，表单
- HTML5-网页排版划分
- div+css是网页排版技巧_html/css_WEB-ITnose
- 大学生简单网页div+css网页纯手写代码制作html静态页面切图排版
- 实现将html网页中的元素复制到微信编辑器中，并正常呈现排版
- HTML&CSS----练习做网页
- 前端技能练习：html网页布局css属性position的属性值的描述
- 练习HTML——简单的网页设计
- HTML-JavaScript---网页时间显示同步练习
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第33讲_Object类_闭包_成员函数再说明_聪明的猪小练习_学习笔记_源代码图解_PPT文档整理
- HTML--网页练习--（360导航首页的一部分）
- HTML巩固练习之网页中插入背景音乐与浮动框架
- 菜鸟练习C#htmlparser----C#正则加htmlDOM进行网页解析腾讯新闻帖子列表相关信息提取
- 菜鸟练习C#htmlparser----C#正则加htmlDOM进行网页解析腾讯新闻帖子列表相关信息提取
- 第一次的html网页编辑-登陆界面