index.html
<html><head><title>html框架</title><meta charset="utf-8"></head><frameset rows="90,*,90" noresize="noresize" frameborder="1" border="1"><frame name="top" src="top.html"/><frameset cols="20%,80%"><frame name="left" src="left.html"/><frame name="right" src="right.html"/></frameset><frame name="bottom" src="bottom.html"/></frameset></html>top.html<html><head><title>网页的顶部</title><meta ...
header标签,aside标签,footer标签 <!doctype html>
<html>
<head>
<style>
/*
*{border:1px solid red;height:20px}
所有的html5结构标签本质上来说就是一个div标签,只不过有意义
*/
/*页面头部 header*/
header{height:150px;background:#ABCDEF}
nav{height:30px;background:#FF9900;margin-top:100px}
nav ul li{width:100px;height:30px;float:left;line-height:30px}
/...
存在一个问题就是当屏幕缩小至一定宽度的时候,边框栏会被挤开1body {2 font-family: ‘Amarante‘, cursive;3 background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;5 }6 7.wrapper {8 margin: 0 auto; 9 }
11.header-wrapper{
12 background-color: #BD9C8C;
13 }
15.header {
16 width: 80%;
17 background-color: #BD9C8C;
18 margin: 0 auto;
19 margin-bottom: 5px;
20 text-align: ce...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>隐藏导航练习</title><style type="text/css">
<style type="text/css">
*
{ margin:0px;padding:0px;}
#aa
{height:40px;width:90px;top:80px;left:200px;background...
常用的类型: 1.数学: Math.ceil():天花板数 Math.floor():地板数 Math.round():四舍五入取整数 Math.random():生成0-1之间的随机数2.日期时间: var s = new Date(); var s = new Date(1999,7,23); 函数: getFullYear(): getMonth(): getDate():获取日 getHours() getMinutes() getSeconds() getDay():获取星期 setFullYear(year,month,day) setHours(hour,minute,sec...
这个练习主要是是练习最近几天学到的知识,没有很好的设计布局都是自己随意组合的。很多知识未熟练的运用,并且没有熟记标签,所以对网页的修饰效果并不好。以后要用用不熟的标签和提高自己的设计思维。html文件(test8.html):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>作者:一叶扁舟</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="...
1、菜单条主要代码<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>
.a1
{background-color:#F00;width:100px;height:40px;top:100px;left:30%;position:absolute;overflow:hidden;}
.a2
{background-color:#F00;width:100px;height:40px;top:100px;left:30%;position:absolute;}
.a3
{width:100px;height:120px;top:40px;position:absolute;}
.a4
{width:100px;height:40px;background-color:...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title></head><frameset rows="200,100,*" cols="100,*" frameborder="1"><frame src="www.baidu.com" noresize="noresize"/><frame src="Untitled-1.htm...
自从上次老师讲了html,javascript,div+cs,就对其产生了浓厚的兴趣。在练习的途中,我发现它的灵活性真的很高,首先我订了一下标题,并且从大到小,从上到下依次显示,它们之间有些层次的错位。我分别用了IE浏览器和Google浏览器,发现它们的层次有所不同,如下IE浏览器Google浏览器其代码如下:<style>h2.ex1{position:relative;left:284px;}h3.ex2{position:relative;left:244px;.left{float:left;}}</style></head><body backg...
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.right{float: right;}.pg-header{height: 48px;line-height: 48px;background-color: #303a40;color: white;}.pg-header .logo{float: left;width: 200px;text-align: center;}.pg-header .user{padding: 0 20px;height: 48px;position: relative;}.pg-header .user:hover{background-color: #425a66;}.pg-header .use...
效果图:代码: 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5<title>无标题文档</title> 6<style> 7body ul {margin:0;padding:0;} 8a{text-decoration:none;} 9li{list-style:none;}10img{border:none; vertic...
1.仿照QQ列表分组<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><link rel="stylesheet" href="css/new_file.css" /><!--<script>function aa(){//将所有div节点中的disp值变为nonevar divDivs = document.getElementsByTagName("div");for(var i=0;i<divDivs;i++){divDivs[i].style.display = "none";}}aa();</script>--><!--1.点击分组,展开当前列表2.第几分组,在当前分组展开之前,先关闭其他分...
实现效果通过创建表格嵌套表单实现实现代码<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form><table align="center" bgcolor="aqua"><tr><th bgcolor="blue" colspan="2">欢迎注册</th></tr><tr><th width="150" align="right"><label for="user">用户名:</label></th><th align="left"><input type="text" /></th></tr><tr><th align="right"><label for="password">密码:</label></th><t...
上学的时候学的HTML现在都已经忘得差不多了,CSS也基本不认识了,现在趁着学习javaWeb再重新联系下吧代码如下 1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2<html> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5<title>表格+表单练习</title> 6</head> 7<body bgcolor="#F0F0F0"> 8<form method="post"> 9<table widt...
我是按照W3school上面的教程学习的,个人觉得教程很不错,每节都有小练习,加油! 都是自己敲的代码,有的书上反对自己写代码,但是我觉得因为没有基础,自己写写还是有好处的,嘿嘿,个人意见不同吧。。 练习1: 代码如下: <html> <body bgcolor="yellow"> <h1 align="center">This is heading 1</h1> <h2 align = "left">This is heading 1</h2> <h3 align = "right">This is heading 1</h3> <h4>This is heading 1</h4> <h5>Thi...