html中div+css学习总结

最新推荐文章于 2022-07-10 06:06:05 发布

原创最新推荐文章于 2022-07-10 06:06:05 发布 · 830 阅读

0 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

3 篇文章

订阅专栏

本文介绍DIV+CSS布局技巧，包括水平导航条制作、列表缩进控制、图片垂直居中等，并演示了简单的表单验证方法及网页时间显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

曾经学习过网站设计，使用的是dreamweaver，当时主要是做asp的，html做的很少，也可以说是几乎为零。当时主要是在拆分或者设计下做的，所以我更倾向于使用表格去分区，而不是框架或者div。这次学完之后，知道了div的好处，以及div+css所带来的便利，所以我做个学习总结。

一、水平导航条的制作示例

下面是我做的一个图书管理系统的首页的页面水平导航条html代码：

<div class="content">
  <div class="header"> 
    <div class="down">
    	<ul >
            <li style="width:125px;text-align:center;">学校首页</li>
            <li style="width:125px;text-align:center;">本馆概况</li>
            <li style="width:125px;text-align:center;">机构设置</li>
            <li style="width:125px;text-align:center;">规章制度</li>
            <li style="width:125px;text-align:center;">下载中心</li>
            <li style="width:125px;text-align:center;">常见问题</li>
            <li style="width:125px;text-align:center;">读者留言</li>
            <li style="width:125px;text-align:center;">读者交流</li>
            <li style="width:125px;text-align:center;">校园记忆</li>
        </ul>
    </div>
  </div>

css中li属性的设置代码如下：

.content .header .down{
	clear: both;
    width: 100%;
	height:35px;
}
.content .header .down ul li{
	float: left;
	list-style-type:none;
	width:84px;
	text-align:left;
}

二、设置<ul>列表缩进

默认情况下，<ul>列表缩进两个字符显示列表项目，可以通过设置负边界值达到控制其缩进值的目的。代码如下：

.content .header .down ul {
	margin-left:-15px;
}

三、图片垂直居中显示

在<img>标签中让align="absmiddle" 。

四、网页居中显示

代码如下：

body{
	margin:0 auto;
}
.content {
	margin:0 auto;
	width:75%;
}

其中content是外边框div

五、logo下三列结构div写法

如果将网页分为上中下五部分，最上面是logo，中间为main，最下方为版权信息，其中main分为left、middle、right。main的三分法html代码实现如下：

<div class="main">
	<div class="left"></div>
	<div class="middle"></div>
	<div class="right"></div>
</div>

css代码如下：

.content .main .left {
	background-color: #0C9;
	float: left;
	width: 20%;
	height:100%;
}
.content .main .middle {
	background-color: #36F;
	float: left;
	width: 60%;
		height:100%;
}
.content .main .right {
	background-color: #000;
	float: left;
	width: 20%;
		height:100%;
}

为了编辑的时候便于区分，可将各个区块设置不同的背景色。

六、表单处理

1、表单验证html示例代码如下：

<SCRIPT LANGUAGE="JavaScript">
function validate( )
{
	var  f=document.reg_form;
	if(f.uname.value=="")
	{
		alert("请输入姓名");
		f.uname.focus();
		return false;
	}  
	if (f.gender[0].checked==false && f.gender[1].checked==false)
	{
		alert("请指定性别");
		f.gender[0].focus();
		return false;
	}
	if ((f.password.value.length < 6) || (f.password.value == ""))
	{
		alert("请输入至少 6 个字符的密码！");
		f.password.focus();
		return false;
	}
	q=f.email.value.indexOf("@");
	if (q==-1)
	{
		alert("请输入有效的电子邮件地址");
		f.email.focus();
		return false;
	}	
	if (f.age.value<1 || f.age.value> 99 || isNaN(f.age.value))
	{
		alert("请输入有效的年龄！");
		f.age.focus();	
		return false;
	}
}
</SCRIPT>

2、onSubmit事件处理代码：

<FORM  onSubmit=”return 调用函数名”>…</FORM>

如果函数返回true，则向远程服务器提交表单；如果函数返回false，则取消提交。

七、网页当前时间时钟的函数实现

function disptime( )
{
 var time = new Date( ); 
 var hour = time.getHours( ); 
 var minute = time.getMinutes( );
 var second = time.getSeconds( );
 var apm="AM"; 
 if (hour>12) 
 {
    hour=hour-12;
    apm="PM"  ;
 }
 if (minute < 10)
   minute="0"+minute;
 if (second < 10) 
   second="0"+second;
 document.myform.myclock.value =hour+":"+minute+":"+second+" "+apm;
 var myTime = setTimeout("disptime()",1000);
}

其中setTimeout的作用是设置定时器每隔1秒（1000毫秒），调用函数disptime()，执行则刷新时钟显示。