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

*文件名称：关于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
演示地址：	计算机中心
风格简介：	简约型

点击查看大图

点击下载该风格

谢谢观看

运行结果：

html网页如何排版,HTML网页排版划分练习相关推荐

计算机网页设计布局与排版研究,论计算机网页设计的布局与排版
王禹智摘要:网页设计是一种直观的视觉语言,需要对其进行布局与排版.虽然网页设计与平而设计之间存在一定的区别,但是其两者依然存在一定的相似之处,网页设计应该充分借鉴利用平而设计的原则与方法.网页设计 ...
嵌套页面h5怎么调起手机文件_让微信公众号文章排版像网页h5一样高大上
做过微信公众号文章排版的同学都知道,微信自己的排版工具只能排些简单的图文混合.遇到这种同况时,很多同学会考虑用第三方编辑器或直接用他们的模板,然后稍微改改便直接发布. 没有我想要的排版样式怎么办,可以 ...
IntelliJ Idea及其同系列产品解决网页查看源码Html排版样式乱了
这个问题解决的是一个工具进行几个步骤设置就能解决的了,webStorm ,phpstorm解决网页查看源码Html排版样式乱了一样是这家公司的产品,也可以参照一下步骤设置,即可解决问题浏览器查看网 ...
HTML div表格排版,畅谈DIV排版和table排版的区别
本文向大家简单介绍一下DIV排版和table排版的区别,除特殊需求外,贸然采用DIV排版,并不理智.当然,CSS排版取代html是一个趋势,但现在还没有成熟.除页面十分简练的页面外,还是不建议用DIV ...
html用div排版类型table,DIV排版和Table排版的区别
W3C推出层与CSS排版,目的是提高执行效率,优化程序,由原有的HTML向XML过度,XML的优点在这不多说拉.但层排版并没有得到广泛的应用,有人认为是层排版技术难掌握所以不能广泛应用,我看这纯数无稽 ...
13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
如何设计网页？快速制作网页秘诀！
原文:http://www.csdnit.com/showtopic-158.html 在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了. 其实网 ...
rem 前端字体_响应式网页设计:rem设置网页字体大小自适应
首先简单科普一下什么是响应式网页.响应式网页是指会根据输出设备的分辨率不同,而自动调整布局的网页.同时,在输出设备分辨率改变时,也能及时自动调整.说穿了,就是三个字:自适应. 响应式网页不仅仅是响应不 ...
微信小程序九宫格图的排版----注意层次排版（层次最重要）
微信小程序九宫格图的排版----注意层次排版(层次最重要) 1.wxml中的代码(图片和数据都是网页获取来的,详细下看) 2.排版 3.使用.js文件进行事件加载 | | | |
win10计算机无限弹网页,win10系统浏览网页时频繁弹出广告怎么办 Window10阻止网页弹出广告的四种方法...
使用win10系统电脑上网的用户,在打开网页浏览时经常会碰到一些广告弹窗.这样,不免让人感觉非常的困扰.那么,我们该怎样设置才能在windows10系统下阻止网页跳出广告弹窗呢?下面,小编就向大家分享 ...

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

会员登录

站点信息

页面标准

html网页如何排版,HTML网页排版划分练习相关推荐

最新文章

热门文章