HTML综合练习

最新推荐文章于 2024-06-17 18:24:32 发布
最新推荐文章于 2024-06-17 18:24:32 发布
阅读量250 收藏
点赞数
文章标签： xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_2035/article/details/82671744
版权 

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>t3</title>
	<link rel="stylesheet" href="./yh.css" />
	<style>
		#container{
			width: 1002px;
			margin: 0 auto;
		}
		#header{
			height: 128px;
			border:1px solid #eee;
			background: url(./imgs/titlebg.png);
		}
		#nav ul{
			height: 110px;

		}
		#nav li{
			float: left;
			width: 90px;
		}
		#nav a{
			text-align: center;
			display: block;
			font-family: '微软雅黑';
			font-size: 16px;
		}
		#nav a:hover{
			background: url(./imgs/nav_hover.png);
		}
		#left{
			width: 680px;
			height: 600px;
			border: 1px solid #eee;
			float: left;
		}
		#right{
			width: 300px;
			height: 600px;
			border: 1px solid #eee;
			float: right;
		}
		#footer{
			height: 120px;
			border: 1px solid #eee;
			background: #eee;
		}
		.clear_float{
			width: 0;
			height: 0;
			clear: both;
		}
		.subtitle{
			height: 49px;
			background: #eee;
		}
		.subtitle img{
			float: left;
			margin: 12px 10px;
		}
		.subtitle h1{
			float: left;
			font-size: 16px;
			margin: 10px 0px 10px 1px;
		}
		.subtitle a{
			float: right;
		}
		.four{
			width: 335px;
			height: 270px;
			float: left;
			border: 1px solid #eee;
		}
		.four img{
			width: 200px;
			float: left;
			padding: 3px;
			background: white;
		}
		.four li{
			float: left;

			/*padding-left: 19px;*/
			height: 24px;
		}
		.four a{
			background: url(./imgs/point_focus.png) no-repeat;
			font-size: 16px;
			font-family: '微软雅黑';
			padding-left: 18px;

		}
		#art ul{
			margin-top: 1px;
			padding-top: 10px;
			height: 200px;
			border: 1px solid #eee;
		}
		#art li{
			height: 20px;

		}
		#art a{
			background: url(./imgs/point_focus.png) no-repeat;
			padding-left: 18px;
			font-family: '微软雅黑';
			font-size: 16px;
		}
		#footer ul{
			height: 30px;
			border: 1px solid #eee;
			margin-top: 10px;
			/*margin-right: 10px;*/
		}
		#footer li{
			float: left;
			margin-right: 15px;
		}
		#footer a{
			font-family: '微软雅黑';
			font-size: 16px;
		}
		#footer address{
			font-family: '微软雅黑';
			font-size: 16px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="header">
			<img src="./imgs/logo.png" alt="" />
			<div id="nav">
				<ul>
					<li><a href="#">导航1</a></li>
					<li><a href="#">导航2</a></li>
					<li><a href="#">导航3</a></li>
					<li><a href="#">导航4</a></li>
					<li><a href="#">导航5</a></li>
					<li><a href="#">导航6</a></li>
				</ul>
			</div>
		</div>
		<div id="main">
			<div id="left">
				<div class="subtitle">
					<img src="./imgs/point.png" alt="" />
					<h1>核心业务</h1>
					<a href="#">More&gt&gt</a>
				</div>
				<div class="four">
					<h2>电子商务网站1</h2>
					<img src="./imgs/2.jpg" alt="" />
					<ul>
						<li><a href="#">随便吧无聊啊1</a></li>
						<li><a href="#">随便吧无聊啊2</a></li>
						<li><a href="#">随便吧无聊啊3</a></li>
						<li><a href="#">随便吧无聊啊4</a></li>
						<li><a href="#">随便吧无聊啊5</a></li>
						<li><a href="#">随便吧无聊啊6</a></li>
					</ul>
				</div>
				<div class="four">
					<h2>电子商务网站1</h2>
					<img src="./imgs/2.jpg" alt="" />
					<ul>
						<li><a href="#">随便吧无聊啊1</a></li>
						<li><a href="#">随便吧无聊啊2</a></li>
						<li><a href="#">随便吧无聊啊3</a></li>
						<li><a href="#">随便吧无聊啊4</a></li>
						<li><a href="#">随便吧无聊啊5</a></li>
						<li><a href="#">随便吧无聊啊6</a></li>
					</ul>
				</div>
				<div class="four">
					<h2>电子商务网站1</h2>
					<img src="./imgs/2.jpg" alt="" />
					<ul>
						<li><a href="#">随便吧无聊啊1</a></li>
						<li><a href="#">随便吧无聊啊2</a></li>
						<li><a href="#">随便吧无聊啊3</a></li>
						<li><a href="#">随便吧无聊啊4</a></li>
						<li><a href="#">随便吧无聊啊5</a></li>
						<li><a href="#">随便吧无聊啊6</a></li>
					</ul>
				</div>
				<div class="four">
					<h2>电子商务网站1</h2>
					<img src="./imgs/2.jpg" alt="" />
					<ul>
						<li><a href="#">随便吧无聊啊1</a></li>
						<li><a href="#">随便吧无聊啊2</a></li>
						<li><a href="#">随便吧无聊啊3</a></li>
						<li><a href="#">随便吧无聊啊4</a></li>
						<li><a href="#">随便吧无聊啊5</a></li>
						<li><a href="#">随便吧无聊啊6</a></li>
					</ul>
				</div>
			</div>
			<div id="right">
				<div class="subtitle">
					<img src="./imgs/point.png" alt="" />
					<h1>核心业务</h1>
					<a href="#">More&gt&gt</a>
				</div>
				<div id="art">
					<ul>
						<li><a href="#">随便一个什么文字1</a></li>
						<li><a href="#">随便一个什么文字2</a></li>
						<li><a href="#">随便一个什么文字3</a></li>
						<li><a href="#">随便一个什么文字4</a></li>
						<li><a href="#">随便一个什么文字5</a></li>
						<li><a href="#">随便一个什么文字6</a></li>
					</ul>
				</div>
				<div id="contact">
					<div class="subtitle">
						<img src="./imgs/point.png" alt="" />
					<h1>核心业务</h1>
					<a href="#">More&gt&gt</a>
					</div>
				</div>
			</div>
		</div>
		<div class="clear_float"></div>
		<div id="footer">
			<ul>
				<li><a href="#">联系我们1</a></li>
				<li><a href="#">联系我们2</a></li>
				<li><a href="#">联系我们3</a></li>
				<li><a href="#">联系我们4</a></li>
				<li><a href="#">联系我们5</a></li>
				<li><a href="#">联系我们6</a></li>
			</ul>
			<address>
				版权所有：&copy2003-2016 摔角网 版权所有 浙ICP备12034799号-3
			</address>
		</div>
	</div>
</body>
</html>
iteye_2035
关注
HTML与css和js综合练习
weixin_46331127的博客
06-09 478
HTML+JS+CSS综合练习一、 滑动样式二、滑动样式 给大家带来一波干货！！ 希望对大家有用 一、 滑动样式 login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <link rel="stylesheet" href="default.css"> </he
HTML 练习
weixin_72146684的博客
09-07 317
.
HTML-表单综合练习
小石头
02-19 625
表单综合练习
html入门综合练习
最新发布
u010674101的专栏
06-17 1590
通过实际项目练习可以更好地理解和掌握HTML、CSS和JavaScript。逐步提高自己的HTML、CSS和JavaScript技能。"请输入有效的电子邮件地址""所有字段都必须填写"
html5-css综合练习
weixin_34148340的博客
10-25 205
div{ width: 600px; height: 800px; padding: 40px; font-size: 12px; line-height: 25px; border:20px ridge rgba(200,60,30,0.6); background-image: url(../pic/sc16.png),url(../pic/sc17....
HTML综合案例练习
moteandsunlight的博客
02-26 1207
可以首先看一下我们的效果，之后再思考怎么实现总的来说，这个练习不算难。这里关于这个简历的代码编写我们不说太多，只注意以下几个内容即可：注意及时查看我们的代码是否符合预期，即一段一段测基本信息那里的内容应该是普通文字，但是注意加换行符项目那里注意不同级别的划分功能介绍是二级的无序话不多说，直接看效果和源码！！ 二、简历内容填写 首先可以看一下我们最终的效果：接下来，我们思考怎么实现。这里由于这个练习代码相对更多，更琐碎，所以这里列了一个思维导图，帮助理解。 三、总结 关于HTML 总的来讲，html还是比较简
html注册页面综合练习以及CSS初始学习
weixin_53317758的博客
03-19 402
下午开始了第二次隔离人员的采样，应该离回去不远了吧，真的好想回寝室回到自己的小窝呀好想和室友同学上食堂吃饭好想去浴星湖散步，现在连小小的愿望都成了奢侈，还得知赣州的感染人员在第三次检查的时候才查出阳性，还挺紧张的这次的采样后天才能查到吧，太恨病毒了藏那么深三番五次的打扰我们的生活节奏。好在傍晚有老师给我们送温暖，原来江西应用科技还有人情味的，最后附上一张美食照^^ 学的东西还要反复的复习和练习，才能成为自己的知识呢，在注册页面综合练习中花了挺长时间的，老师一讲啥啥我都要翻笔记才想起来--！今天学到用W3C
html综合练习.
12-21
本压缩包“html综合练习”是专为初学者设计的一系列实践教程，旨在帮助他们快速上手并熟练掌握HTML的基本概念和语法。 在HTML中，我们主要关注以下几个核心知识点： 1. **HTML基本结构**：每个HTML文档都由`<!...
HTML综合练习题一公开课.docx
12-18
HTML 综合练习题一公开课 本资源摘要信息涵盖了 HTML 综合练习题的一些知识点，包括 HTML 基础知识、表格和表单、超链接、图像、背景和样式等。 选择题 1. 在下列标记中，不是双标记的是（ ） Answer: C、 ...
html综合练习.zip
12-24
本压缩包文件"html综合练习.zip"包含两个与HTML相关的实践练习文件，旨在帮助学习者加深对HTML的理解和应用。 "HTML基础实施练习.html"可能是一个入门级别的练习，它涵盖了HTML的基本结构和元素。在HTML中，文档...
HTML练习题
05-07
这是我自己整理出来的HTML练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
牛客HTML专项练习【错题+知识点辨析】(持续更新中)
qq_55154022的博客
11-20 439
牛客HTML专项练习【错题+知识点辨析】(持续更新中)
HTML-10：综合练习
臧小川的博客
06-09 148
这只是一个标题 臧汗青的自我描述 我叫臧汗青最爱吃东西吃很多的东西，吃完就睡觉，睡个大懒觉，懒觉睡多了，再去吃东西。
html+css布局综合练习
借风拥你
03-18 1211
一、准备工作 1.引入reset.css 主要是消除一些默认的样式 /* 基础设置 */ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{ margin: 0; padding: 0; } ul,ol { list-style: none; } img { /* 底部留白 */ display:
一、HTML5基础综合练习-表单与表格
m0_52766105的博客
07-25 436
=""
HTML练习
SunnyLune的博客
06-25 413
<html> <!-- 颜色背景 --> <body style="background-color:PowderBlue"> <!-- 图片背景 --> <!--<body background="SDT .jpg">--> <h1 align="center">居中排列</h1> <a na...
JavaWeb:html,css,JavaScript综合小练习
这是一个博客
03-06 436
就是练习了，学到了大部分的前端知识，别看了，就发着玩儿的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值