html网页如何排版,HTML网页排版划分练习

/*

*Copyright (c) 2017，烟台大学计算机学院

All rights reserved.

*文件名称：关于HTML的练习

*作 者：张晴晴

*完成日期：2017年11月6日

*版 本 号：v1.0 *

*问题描述：HTML5的新特性

*输入描述： 无

*程序输出： 无

*/

网页横栏-下拉列表

body{

font-size:16px;

font-family:"仿宋";/*body里面设置字体*/

}

#nav{

line-height:40px;

list-style-type:none;

padding:0px;

width:100%;

font-size:36px;

position:absolute;

left:30%;

top:5%;

}

#nav ul{

line-height:50px;

position:absolute;

left:-100000px;

padding:0px;/*定义元素边框和元素内容之间的距离*/

}

#nav li{

float:left;

/*display:inline;*//*使之在一行上显示*/

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:447px;

top:34px;

}

header{

width:100%;

height:10%

}

aside{

width:20%;

height:80%;

float:left

}

article{

width:80%;

height:70%;

float:left

}

footer{

width:100%;

height:10%;

float:left;

background-color:#CCC;

}

.text{

text-align:justify;

line-height:30px;}

.table1{

line-height:30px;

border:0;

}

#img{

margin:0px;

float:left;

left:0px;

border:0;

}

#table{

left:10px;

line-height:20px;}

• c++
  • 子菜单
  • 子菜单
  • 子菜单
  • 子菜单
• java
  • 子菜单
  • 子菜单
  • 子菜单
  • 子菜单
• c
  • 子菜单
  • 子菜单
  • 子菜单
  • 子菜单
• c#
  • 子菜单
  • 子菜单
  • 子菜单
  • 子菜单
• html
  • 子菜单
  • 子菜单
  • 子菜单
  • 子菜单
• ar
  • 子菜单
  • 子菜单
  • 子菜单
  • 子菜单

会员登录
用户名:
密 码:
站点信息
访问:	6562次
在线：	12人
会员：	3244次
留言：	6565个
建站：	2017/11/6
页面标准

风格名称：	好看的网页
设计制作：	张晴晴
CSS制作：	晴晴张
发布时间：	2016-11-6
演示地址：	计算机中心
风格简介：	简约型

点击查看大图

点击下载该风格

---

风格名称：	好看的网页
设计制作：	张晴晴
CSS制作：	晴晴张
发布时间：	2016-11-6
演示地址：	计算机中心
风格简介：	简约型

点击查看大图

点击下载该风格

谢谢观看

运行结果：