文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > html教程 > 正文

精通CSS+DIV基础总结(二)_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:27:35
原创
1471人浏览过
精通CSS+DIV基础总结(二)_html/css_WEB-ITnose精通CSS+DIV基础总结(二)_html/css_WEB-ITnose精通CSS+DIV基础总结(二)_html/css_WEB-ITnose精通CSS+DIV基础总结(二)_html/css_WEB-ITnose精通CSS+DIV基础总结(二)_html/css_WEB-ITnose
<html><head><title>利用背景颜色分块</title><style><!--body{	padding:0px;	margin:0px;	background-color:#ffebe5;	/* 页面背景色 */}.topbanner{	background-color:#fbc9ba;	/* 顶端banner的背景色 */}.leftbanner{	width:22%; height:330px;	vertical-align:top;	background-color:#6d1700;	/* 左侧导航条的背景色 */	color:#FFFFFF;	text-align:left;	padding-left:40px;	font-size:14px;}.mainpart{	text-align:center;}--></style>   </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0">	<tr>		<td colspan="2" class="topbanner">@@##@@</td>	</tr>	<tr>		<td class="leftbanner">			<br><br>首页<br><br>分类讨论			<br><br>谈天说地<br><br>精华区			<br><br>我的信箱<br><br>休闲娱乐			<br><br>立即注册<br><br>离开本站		</td>		<td class="mainpart">正文内容...</td>	</tr></table></body></html>
登录后复制
登录后复制
<html><head><title>背景水平重复</title><style><!--body{	padding:0px;	margin:0px;}.topbanner{	background-image:url(bg2.jpg);		/* 背景图片 */	background-repeat:repeat-x;			/* 水平方向重复 */}--></style>   </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0">	<tr>		<td class="topbanner">@@##@@</td>		<!-- 配上banner图片 -->	</tr></table></body><html>
登录后复制
<html><head><title>年度收入</title><style><!--.datalist{	border:1px solid #429fff;	/* 表格边框 */	font-family:Arial;	border-collapse:collapse;	/* 边框重叠 */}.datalist caption{	padding-top:3px;	padding-bottom:2px;	font:bold 1.1em;	background-color:#f0f7ff;	border:1px solid #429fff;	/* 表格标题边框 */}.datalist th{	border:1px solid #429fff;	/* 行、列名称边框 */	background-color:#d2e8ff;	font-weight:bold;	padding-top:4px; padding-bottom:4px;	padding-left:10px; padding-right:10px;	text-align:center;}.datalist td{	border:1px solid #429fff;	/* 单元格边框 */	text-align:right;	padding:4px;}--></style>   </head><body> <table class="datalist">	<caption>年度收入 2004 - 2007</caption><!--添加表头-->	<tr>		<th></th>		<th scope="col">2004</th>		<th scope="col">2005</th>		<th scope="col">2006</th>		<th scope="col">2007</th>	</tr>	<tr>		<th scope="row">拨款</th>		<td>11,980</td>		<td>12,650</td>		<td>9,700</td>		<td>10,600</td>	</tr>	<tr>		<th scope="row">捐款</th>		<td>4,780</td>		<td>4,989</td>		<td>6,700</td>		<td>6,590</td>	</tr>	<tr>		<th scope="row">投资</th>		<td>8,000</td>		<td>8,100</td>		<td>8,760</td>		<td>8,490</td>	</tr>	<tr>		<th scope="row">募捐</th>		<td>3,200</td>		<td>3,120</td>		<td>3,700</td>		<td>4,210</td>	</tr>	<tr>		<th scope="row">销售</th>		<td>28,400</td>		<td>27,100</td>		<td>27,950</td>		<td>29,050</td>	</tr>	<tr>		<th scope="row">杂费</th>		<td>2,100</td>		<td>1,900</td>		<td>1,300</td>		<td>1,760</td>	</tr>	<tr>		<th scope="row">总计</th>		<td>58,460</td>		<td>57,859</td>		<td>58,110</td>		<td>60,700</td>	</tr></table></body></html>
登录后复制
<html><head><title>表单</title><style><!--form{	border: 1px dotted #AAAAAA;	padding: 1px 6px 1px 6px;	margin:0px;	font:14px Arial;}input{							/* 所有input标记 */	color: #00008B;	}input.txt{						/* 文本框单独设置 */	border: 1px inset #00008B;	background-color: #ADD8E6;}input.btn{						/* 按钮单独设置 */	color: #00008B;	background-color: #ADD8E6;	border: 1px outset #00008B;	padding: 1px 2px 1px 2px;}select{	width: 80px;	color: #00008B;	background-color: #ADD8E6;	border: 1px solid #00008B;}textarea{	width: 200px;	height: 40px;	color: #00008B;	background-color: #ADD8E6;	border: 1px inset #00008B;}--></style>   </head><body><form method="post"><p>请输入您的姓名:<br><input type="text" name="name" id="name" class="txt"></p><p>请选择你最喜欢的颜色:<br><select name="color" id="color">	<option value="red">红</option>	<option value="green">绿</option>	<option value="blue">蓝</option>	<option value="yellow">黄</option>	<option value="cyan">青</option>	<option value="purple">紫</option></select></p><p>请问你的性别:<br>	<input type="radio" name="sex" id="male" value="male" class="rad">男<br>	<input type="radio" name="sex" id="female" value="female" class="rad">女</p><p>你喜欢做些什么:<br>	<input type="checkbox" name="hobby" id="book" value="book" class="check">看书	<input type="checkbox" name="hobby" id="net" value="net" class="check">上网	<input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡觉</p><p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1"   style="max-width:90%" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p></form></body></html>
登录后复制
<html><head><title>动态超链接</title><style><!--body{	background:url(bg9.gif);	/* 页面背景图片 */	margin:0px; padding:0px;	cursor:pointer;}.chara1{	font-size:12px;	background-color:#90bcff;	/* 导航条的背景颜色 */}.chara1 td{	text-align:center;}a:link{							/* 超链接正常状态下的样式 */	color:#005799;				/* 深蓝 */	text-decoration:none;		/* 无下划线 */}a:visited{						/* 访问过的超链接 */	color:#000000;				/* 黑色 */	text-decoration:none;		/* 无下划线 */}a:hover{						/* 鼠标经过时的超链接 */	color:#FFFF00;				/* 黄色 */	text-decoration:underline;	/* 下划线 */}--></style>   </head><body><table align="center" cellpadding="1" cellspacing="0">	<tr><td>@@##@@</td></tr></table><table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center">	<tr>		<td><a href="#">首页</a></td>		<td><a href="#">心情日记</a></td>		<td><a href="#">Free</a></td>		<td><a href="#">一起走到</a></td>		<td><a href="#">从明天起</a></td>		<td><a href="#">纸飞机</a></td>		<td><a href="#">下一站</a></td>	</tr></table></body></html>
登录后复制
<html><head><title>鼠标变幻超链接</title><style><!--body{	padding:0px;	margin:0px;	background-color:#efe5e2;}table.banner{	background:url(banner2_bg.jpg) repeat-x;	width:100%;}table.links{	background:url(button3_bg.jpg) repeat-x;	font-size:12px;	width:100%}a{	width:80px; height:32px;	padding-top:10px;	text-decoration:none;	text-align:center;	background:url(button3.jpg) no-repeat;	/* 超链接背景图片 */}a:link, a visited{color:#2d2d26;}a:hover{	color:#FFFFFF;	text-decoration:none;	background:url(button4.jpg) no-repeat;	/* 变换背景图片 */}a.help:hover{								/* “帮助”按钮的样式 */	cursor:help;							/* 变幻鼠标形状 */}--></style>   </head><body><table cellpadding="0" cellspacing="0" class="banner">	<tr><td>@@##@@</td></tr></table><table cellpadding="0" cellspacing="0" class="links">	<tr><td><a href="#">首页导读</a><a href="#">推荐版面</a><a href="#">推荐文章</a><a href="#">收藏夹</a><a href="#">我的信箱</a><a href="#">休闲娱乐</a><a href="#" class="help">帮助</a></td></tr></table></body></html>
登录后复制
<html><head><title>页面滚动条</title><style><!--body{									/* 页面滚动条 */	background-color:#efe5e2;	scrollbar-3dlight-color: #B0C4DE;	scrollbar-arrow-color: #34547E;	scrollbar-base-color: #FF0000;		/* 基调颜色 */	scrollbar-darkshadow-color: #1D4272;	scrollbar-face-color: #CFDFF4;	scrollbar-highlight-color: #FFFFFF;	scrollbar-shadow-color: #5380BA;}.largetext {							/* 文本框滚动条 */	scrollbar-3dlight-color: #B0C4DE;	scrollbar-arrow-color: #FFFFFF;	scrollbar-base-color: #8BA9CF;	scrollbar-darkshadow-color: #436DA3;	scrollbar-face-color: #34547E;	scrollbar-highlight-color: #E6ECF4;	scrollbar-shadow-color: #000000;}.largetext1 {	scrollbar-3dlight-color: #B0C4DE;	scrollbar-arrow-color: #FFFFFF;	scrollbar-base-color: #8BA9CF;	scrollbar-darkshadow-color: #436DA3;	scrollbar-face-color: #34547E;	scrollbar-highlight-color: #E6ECF4;	scrollbar-shadow-color: #000000;}.largetext11 {scrollbar-3dlight-color: #B0C4DE;	scrollbar-arrow-color: #FFFFFF;	scrollbar-base-color: #8BA9CF;	scrollbar-darkshadow-color: #436DA3;	scrollbar-face-color: #34547E;	scrollbar-highlight-color: #E6ECF4;	scrollbar-shadow-color: #000000;}--></style>   </head><body><textarea name="textarea" cols="50" rows="6" class="largetext11">.largetext {	scrollbar-3dlight-color: #B0C4DE;	scrollbar-arrow-color: #FFFFFF;	scrollbar-base-color: #8BA9CF;	scrollbar-darkshadow-color: #436DA3;	scrollbar-face-color: #34547E;	scrollbar-highlight-color: #E6ECF4;	scrollbar-shadow-color: #000000;}</textarea><p>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。</p></body></html>
登录后复制
<html><head><title>百度??全球最大中文搜索引擎</title><style type="text/css">td,p{font-size:12px;}p{width:600px; margin:0px; padding:0px;}.ff{font-family:Verdana; font-size:16px;}#navigation{	margin:0px auto;	font-size:12px;	padding:0px;	border-bottom:1px solid #00c;	background:#eee;	width:600px;height:18px;}#navigation li{	float:left;					/* 水平菜单 */	list-style-type:none;		/* 不显示项目符号 */	margin:0px;padding:0px;	width:67px;}#navigation li a{	display:block;				/* 块显示 */	text-decoration:none;	padding:4px 0px 0px 0px;	margin:0px;}#navigation li a:link, #navigation li a:visited{	color:#0000CC;}#navigation li a:hover{			/* 鼠标经过时 */	text-decoration:underline;	background:#FFF;	padding:4px 0px 0px 0px;	margin:0px;}#navigation li#h{width:56px;height:18px;}		/* 左侧空间 */#navigation li#more{width:85px;height:18px;}	/* “更多”按钮 */#navigation .current{							/* 当前页面所在 */	background:#00C;	color:#FFF;	padding:4px 0px 0px 0px;	margin:0px;	font-weight:bold;}</style>   </head><body><center><br>@@##@@<br><br><br><br><div id="navigation"><ul>	<li id="h"></li>	<li><a href="#">资 讯</a></li>	<li class="current">网 页</li>	<li><a href="#">贴 吧</a></li>	<li><a href="#">知 道</a></li>	<li><a href="#">MP3</a></li>	<li><a href="#">图 片</a></li>	<li id="more"><a href="#">更 多 >></a></li></ul></div><p style="height:44px;"> </p><table width="600" border="0" cellpadding="0" cellspacing="0">	<tr>	<td width="92"></td>	<td><form><input type="text" name="wd" class="ff" size="35">	<input type="submit" value="百度搜索"></form></td>	<td width="92" valign="top"><a href="#">搜索帮助</a><br><a href="#">高级搜索</a></td>	</tr></table></center></body></html>
登录后复制
                   
                

                            

    
            
                            

                    

                        
                            HTML速学教程(入门课程)
                        
                        

                            HTML速学教程(入门课程)
                            
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

                        

                    

                    
                        下载
                    
                

                
          
			
            

                                
来源：php中文网

                            



            

                
                                            
                        收藏
                                    

                
                                            
                        点赞
                                    
            




            

                                    
                        上一篇：如何从零开始学习DIV+CSS_html/css_WEB-ITnose
                    
                                    
                        下一篇：CSS控制div自动延伸到窗口100%高度_html/css_WEB-ITnose
                    
                            

            

                
                
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

            


                       
                        

                
最新问题

                

                                        

                        

                            HTML表单提交到指定邮箱怎么实现
                            HTML表单可以通过服务器端脚本提交到指定邮箱。1.创建HTML表单，使用action属性指向服务器脚本。2.编写服务器脚本（如PHP）处理表单数据并发送邮件。3.注意安全性、邮件格式、错误处理和隐私合规。4.使用异步提交、表单验证和第三方邮件服务优化性能。
                            

                                

                                    2025-06-09 08:06:02
                                

                                

                                    910
                                

                            

                        

                    

                    
                    

                                        

                        

                            HTML下载链接添加进度条怎么实现
                            实现HTML下载链接添加进度条的关键在于利用JavaScript和HTML5的FileAPI来监控下载进度。让我们深入探讨如何实现这一功能，并分享一些实际应用中的经验。在开始之前，先回答你的问题：HTML下载链接添加进度条可以通过JavaScript监听XMLHttpRequest对象的progress事件来实现。我们可以利用这个事件来更新进度条的显示，从而让用户实时了解下载进度的变化。现在，让我们详细展开这个话题。在我的职业生涯中，我曾多次遇到需要为下载链接添加进度条的需求。无论是大文件下载还
                            

                                

                                    2025-06-08 10:30:02
                                

                                

                                    1004
                                

                            

                        

                    

                    
                    

                                        

                        

                            HTML表单提交后清空输入框内容怎么操作
                            可以使用JavaScript在表单提交后通过form.reset()方法清空HTML表单的输入框内容。具体步骤包括：1.在表单的onsubmit事件中调用submitForm函数。2.使用event.preventDefault()阻止表单默认提交行为。3.获取表单元素并处理数据。4.调用form.reset()方法清空表单。
                            

                                

                                    2025-06-07 08:21:01
                                

                                

                                    623
                                

                            

                        

                    

                    
                    

                                        

                        

                            html中h1和h2的区别 一级二级标题的3个关键差异
                            h1和h2标签在HTML中的三个关键差异是：1.h1用于页面主标题，h2用于子主题；2.h1字体默认比h2大；3.一个页面通常只有一个h1，多个h2用于划分章节。
                            

                                

                                    2025-06-06 09:15:02
                                

                                

                                    893
                                

                            

                        

                    

                    
                    

                                        

                        

                            html中外边距怎么设置 html外边距margin调整技巧
                            在HTML中设置外边距需要使用CSS。具体方法包括：1.使用通用margin属性设置所有方向的外边距，如margin:20px。2.使用单独的margin属性设置不同方向的外边距，如margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px，或简写为margin:10px20px30px40px。
                            

                                

                                    2025-06-05 08:21:01
                                

                                

                                    735
                                

                            

                        

                    

                    
                    

                                        

                        

                            html中的行内标签有哪些 html行内标签完整列表解析
                            HTML中的行内标签在网页设计中起着关键作用，它们用于修饰和格式化文本内容，不会自动换行。常见的行内标签包括：1.用于灵活的样式定制；2.用于创建超链接；3.和用于强调文本；4.用于嵌入图像；5.用于创建表单控件；6.用于创建可点击按钮。使用这些标签时应注意语义化、样式与结构分离、无障碍设计、性能优化和表单设计，以提升网页的整体效果和用户体验。
                            

                                

                                    2025-06-04 08:06:01
                                

                                

                                    640
                                

                            

                        

                    

                    
                    

                                        

                        

                            html中tbody标签的作用 表格主体tbody的语义化意义
                            标签用于定义表格的主体部分，其作用是将表格数据与表头和表尾区分开来，提升表格的语义化和可访问性。使用的好处包括：1.增强可访问性，帮助屏幕阅读器正确识别表格结构；2.便于样式控制，可以对表格主体部分进行单独的样式设置；3.便于数据操作，支持动态增删改查，提高操作效率；4.性能优化，通过JavaScript动态操作内容，提升性能。
                            

                                

                                    2025-06-03 10:00:02
                                

                                

                                    876
                                

                            

                        

                    

                    
                    

                                        

                        

                            HTML导航栏怎么做？nav标签有什么优势？
                            使用HTML创建导航栏推荐采用ul+li结构包裹在nav标签内，1.基本结构用ul+li搭建更清晰且方便CSS美化；2.nav标签具备语义化优势，提升SEO和可访问性；3.推荐使用flex布局进行样式处理，实现水平排列与悬停效果；4.需添加aria-label属性并考虑响应式设计适配移动端。
                            

                                

                                    2025-06-02 10:12:07
                                

                                

                                    907
                                

                            

                        

                    

                    
                    

                                        

                        

                            HTML如何实现轮播图？carousel怎么用HTML制作？
                            要实现基础轮播图需结合HTML、CSS和JavaScript。首先用HTML搭建结构，外层div容器包含图片列表，默认第一张显示；接着用CSS将图片叠放并隐藏非active图片；再通过JavaScript定时切换active类实现自动播放；最后可添加按钮实现手动切换。步骤清晰，结构为先，样式控制显示，JS实现动态切换，扩展性强。
                            

                                

                                    2025-05-31 10:03:01
                                

                                

                                    873
                                

                            

                        

                    

                    
                    

                                        

                        

                            HTML里怎么插入YouTube视频
                            在HTML中插入YouTube视频可以通过以下步骤实现：1.使用标签嵌入视频，替换VIDEO_ID为YouTube视频ID。2.采用响应式设计，使用包装div和CSS确保视频在不同设备上保持16:9比例。3.应用懒加载技术，使用IntersectionObserverAPI减少页面加载时间。4.添加视频标题和描述，提升SEO和用户体验。5.考虑用户隐私，提供同意选项并控制自动播放。
                            

                                

                                    2025-05-30 08:18:02
                                

                                

                                    195
                                

                            

                        

                    

                    
                    

                                    

            

            

                

                    
相关专题

                    更多>
                    
                

                

                    
                

            



        

    

    

            

        
        
        

		        

            
热门推荐

            

                            
            

            
        

        

                    

		

                
开源免费商场系统广告

        		
		

        

            

                
热门教程

                更多>
                
            

            

                

                    
相关推荐 

                    
热门推荐

                    
最新课程

                

                
                
                
            

            
        

        

            

                
最新下载

                更多>
                
            

                        
            

                

                    
网站特效 

                    
网站源码

                    
网站素材

                    
前端模板

                

                
                
                
                
            

            
        

    







    

        

            

                

                    

                        关于我们
                        免责申明
                        意见反馈
                        讲师合作
                        广告合作
                        
                        最新更新
                                                

                    

                    
php中文网：公益在线php培训，帮助PHP学习者快速成长！

                    

                      
                        关注服务号
                        
                      
                        
                        技术交流群
                        
                      
                        

                    

                

                

                
app下载

                
              

            

            

                

                    
                    

                        
PHP中文网订阅号

                        
每天精选资源文章推送

                    

                

                

                    
                    

                        
PHP中文网APP

                        
随时随地碎片化学习

                    

                

                

                    
                    

                        
PHP中文网抖音号

                        
发现有趣的

                    

                

            

        

    

    

        
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

    







































    
  • 
        
    
            
    
                
                    
                    
    PHP学习
    
                    
            
    
        
    
    
    • 
    
  • 
        
    
            
    
                
                    
                    
    技术支持
    
                    
            
    
        
    
    
    • 
    
  • 
        
    
            
    
                
                    
                    
    返回顶部
    
                    
            
    
        
    
    
    •