html+css综合练习一

最新推荐文章于 2024-05-30 10:50:39 发布
最新推荐文章于 2024-05-30 10:50:39 发布
阅读量1.1k 收藏 20
点赞数 2
分类专栏： html/css 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52108058/article/details/129007407
版权

文章目录

一、小米注册页面

1、要求

阅读下列说明、效果图，进行静态网页开发。
某网站注册页面开发项目，点击立即注册，进入第二个页面。项目名称为xiaomi，包含首页index.html、css文件夹，其中，css文件夹包含style.css文件。

2、案例图

在这里插入图片描述

在这里插入图片描述

3、实现效果

分析：

  1. 两个页面的切换用a标签来实现
  2. 输入框可以使用盒子模型来完成布局，也可以用input标签来完成效果
  3. 注意input，type属性中text，button，radio等属性值

请添加图片描述

3.1、index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<body>
		<div class="all">
			<div class="img">
			</div>
			<h1>注册小米账号</h1>
			<div class="middle">
				<p>国家/地区</p>
				<input class="input1" type="text" placeholder="  中国"/>
				<input class="input_right" type="text" placeholder="Ⓥ"/>
				<p>成功注册账号后，国家/地区将不能被修改</p>
				<br>
				<p>手机号码</p>
				<select name="" class="select">
					<option value="">+86</option>
					<option value="">+87</option>
				</select>
				<input class="input2" type="text" placeholder="  请输入手机号码" />
				<br>
				<br>
				<a href="index2.html"><input class="input3" type="button" name="" id="" value="立即注册" /></a>
			</div>
			<div class="radio">
				<input type="radio" name="" id="" value="" />
				<span class="gray">注册账号即表示您同意并愿意遵守小米<span class="mark">用户协议</span>和<span class="mark">隐私策略</span></span>
			</div>
			<div class="bottom">
				<ul>
					<li>简体</li>
					<li>|</li>
					<li>繁体</li>
					<li>|</li>
					<li>English</li>
					<li>|</li>
					<li>常见问题</li>
				</ul>
				<p>小米公司版权所有-京ICP备1004644-京公网安备11010802020134号京ICP证110507号</p>
			</div>
		
		
		
		</div>
	</body>
</html>

3.2、style.css

*{
	margin: 0;
	padding: 0;
}
.all{
	width: 600px;
	height: 510px;
	border: 1px solid #9D9D9D;
	margin: 20px auto;
}
.img{
	width: 50px;
	height: 50px;
	margin: 0 auto;
	background: url(../img/logo.jpg) no-repeat;
	background-size: 100% 50px;
}
h1{
	width: 200px;
	height: 50px;
	text-align: center;
	margin: 25px auto;
	font-family: 等线;
}
.middle{
	width: 400px;
	height: 250px;
	margin: 0 auto;
	padding-left: 130px;
}
.input1{
	width: 265px;
	height: 35px;
	border: 1px solid #e8e8e8;
}
.input_right{
	width: 35px;
	height: 35px;
	border: 1px solid #e8e8e8;	
	position: relative;
	left: -5px;
	top: 2px;
	text-align: center;
	font-size:18px;
}
.select{
	width: 50px;
	height: 37px;
	border: 1px solid #e8e8e8;
}
.input2{
	width:250px;
	height: 35px;
	position: relative;
	left: -5px;
	border: 1px solid #e8e8e8;
}
.input3{
	width: 300px;
	height: 40px;
	text-align: center;
	background-color: #ff6700;
	color: white;
	border: none;
}
p,span{
	font-size: 13px;
	margin: 5px 0px;
	color: #333333;
}
.radio{
	width: 400px;
	height: 50px;
	text-align: center;
	margin: 0 auto;
}
.radio input{
	border: 1px solid #e8e8e8;
	position: relative;
	top: 2px;
	width: 15px;
	height: 15px;
}
.gray{
	color: #9d9d9d;
}
.mark{
	font-weight: bold;
	color: #000000;
}
ul{
	width: 250px;
	height: 30px;
	margin: 0 auto;
}
li{
	list-style: none;
	color: #333333;
	float: left;
	margin: 0px 5px;
	font-size: 13px;
}
.bottom{
	width: 100%;
	height: 60px;
	background-color: #f9f9f9;
}
.bottom p{
	margin-left: 50px;
	color: #9D9D9D;
}

/* 第二个页面 */
.all2{
	width: 600px;
	height: 460px;
	border: 1px solid #000000;
	margin: 20px auto;
}
.middle span{
	color: #FF6700;
}
.input4{
	width: 300px;
	height: 40px;
	text-align: center;
	color: black;
	background-color: white;
	margin-top: 10px;
	border: 1px solid #E8E8E8;
}
.code{
	width: 200px;
	height: 35px;
	border: 1px solid #e8e8e8;
}
.code2{
	width: 90px;
	height: 36px;
	border: 1px solid #e8e8e8;
	background-color: white;
	color: gray;
}
.please{
	margin-top: 10px;
}

二、下午茶页面

1、要求

阅读下列说明、效果图，进行静态网页开发。
项目包含首页index.html、img文件夹和css文件夹，页面效果如图所示

2、案例图

在这里插入图片描述

3、index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<body>
		<div class="all">
			<img class="tea" src="img/4004a41.png" >
			<input class="search" type="text" placeholder="  搜索"/>
			<input class="search2" type="button" value="搜索" />
			<br>		
			<table class="table" border="0" cellspacing="15">
				<tr>
					<td>普洱茶</td>
					<td>黑茶</td>
					<td>白茶</td>
				</tr>
				<tr>
					<td>红茶</td>
					<td>绿茶</td>
					<td>花茶</td>
				</tr>
				<tr>
					<td>乌龙茶</td>
					<td>龙井茶</td>
					<td>粉茶</td>
				</tr>
				</table>
				
				<div class="middle">
						<div class="left">
							<h2>店铺优惠券</h2>
							<p>先领券 在购物</p>
						</div>
						<div class="right">
							<div class="money">
								<h2>￥10</h2>
								<p>满100￥可用</p>
							</div>
							<div class="aleady">
								<p>已</p>
								<p>领</p>
								<p>取</p>
							</div>
						</div>
					</div>		
				<div class="bottom">
					<div class="new">
						<p>新品推荐</p>
					</div>
					<div class="box">
						<img src="img/1606161623506004.jpg" >
						<p>绿茶大降价</p>
						<p class="price">￥100</p>
					</div>
					
					<div class="box">
						<img src="./img/4004a41.png" >
						<p>绿茶大降价</p>
						<p class="price">￥100</p>
					</div>			
						
					<div class="box">
						<img src="img/TB1AmjPFVXXXXXGXFXXXXXXXXXX_!!0-item_pic.jpg_240x240.jpg" >
						<p>绿茶大降价</p>
						<p class="price">￥100</p>
					</div>
					
					<div class="box">
						<img src="img/TB1SJUPGpXXXXaQXFXXXXXXXXXX_!!0-item_pic.jpg_240x240.jpg" >
						<p>绿茶大降价</p>
						<p class="price">￥100</p>
					</div>
					
					<div class="box">
						<img src="img/TB1sRuyIpXXXXaSXFXXXXXXXXXX_!!0-item_pic.jpg_240x240.jpg" >
						<p>绿茶大降价</p>
						<p class="price">￥100</p>
					</div>
					
					<div class="box">
						<img src="img/TB2HLUgpFXXXXX7XFXXXXXXXXXX-117206891.jpg_240x240.jpg" >
						<p>绿茶大降价</p>
						<p class="price">￥100</p>
					</div>
					
					<div class="box">
						<img src="img/TB2s7sqdXXXXXa_XXXXXXXXXXXX_!!1723239607.jpg_430x430q90.jpg" >
						<p>绿茶大降价</p>
						<p class="price">￥100</p>
					</div>
				</div>			
		</div>
	</body>
</html>

4、style.css

*{
	margin: 0;
	padding: 0;
}
.all{
	width: 500px;
	height: 1500px;
	border: 1px solid black;
	margin: 0 auto;
	background-color: #f1f1f1;
}
.all  .tea{
	width: 500px;
	height: 200px;
}
.search{
	width: 400px;
	height: 30px;
	border: none;
	background-color: white;
	margin-left: 10px;
	margin-top: 12px;
}
.search2{
	width: 70px;
	height: 30px;
	border: none;
	background-color: #69a84f;
	color: white;
	border-radius: 0px 5px 5px 0px;
	margin-top: 12px;
}
.table{
	width: 500px;
	height: 150px;
	text-align: center;
}
.table td{
	width: 150px;
	background-color: #69A84F;
	color: white;
}
.middle{
	width: 500px;
	height: 120px;
}
.middle .left{
	float: left;
	width: 245px;
	height: 120px;
	text-align: center;
}
.middle .left h2{
	font-size: 22px;
	color: red;
	font-family: 等线;
	margin-top: 40px;
}
.middle .left p{
	color: #9D9D9D;
}
.middle .right{
	float: left;
	width: 245px;
	height: 120px;
	background: url(../img/Color1.png) no-repeat;
	background-size: 230px;
	background-position: center;
}
.right .money{
	float: left;
	width: 190px;
	height: 100px;
	color: white;
	text-align: center;
}
.right .money h2{
	font-size: 20px;
	font-weight: 400;
	margin-top: 30px;
}

.right .aleady{
	float: left;
	width: 50px;
	height: 100px;
	color: white;
	text-align: center;
	margin-top: 30px;
}
.bottom{
	width: 500px;
	height: 500px;
}
.bottom .new{
	width: 500px;
	height: 40px;
	background-color: #69A84F;
}
.new p{
	color: white;
	margin-left: 10px;
	line-height: 40px;
}
.bottom .box{
	width: 230px;
	height: 220px;
	float: left;
	margin: 9px 9px 0px 9px;
	border: 1px solid #9D9D9D;
}
.box img{
	width: 230px;
	height: 170px;
}
.box .price{
	color: red;
}
.box p{
	margin-left: 10px;
}

三、法国巴黎页面

1、要求

阅读下列说明、效果图，进行静态网页开发。
项目包含首页index.html、img文件夹和css文件夹，页面效果如图所示

2、案例图

在这里插入图片描述

3、index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<body>
		<div class="all">
			<img class="world" src="img/图片1.png" >
			<div class="top">
			</div>
			<div class="box">
				<img src="img/图片2.png" >
				<p>图图直播</p>
			</div>
			<div class="box">
				<img src="img/图片2.png" >
				<p>无涯规则</p>
			</div>
			<div class="box">
				<img src="img/图片2.png" >
				<p>会员专区</p>
			</div>
			<div class="box">
				<img src="img/图片2.png" >
				<p>手信商城</p>
			</div>
			
			<div class="clear">
				
			</div>
			<div class="middle">
				<p><span class="have">直播预告：</span>国学鬼才孙建坤解读《山海经》</p>
				<img class="black" src="img/live.jpg" >
				<img class="black" src="img/live11.jpg" >
				<p class="have">无涯视频</p>
				
				<div class="box2">
					<img src="img/live1.jpg" >
					<p>读书也读你，带你品味读书中的乐趣</p>
				</div>
				<div class="box2">
					<img src="img/live2.jpg" >
					<p>读书也读你，带你品味读书中的乐趣</p>
				</div>
				<div class="box2">
					<img src="img/live3.jpg" >
					<p>读书也读你，带你品味读书中的乐趣</p>
				</div>
				<div class="box2">
					<img src="img/live4.jpg" >
					<p>读书也读你，带你品味读书中的乐趣</p>
				</div>
				
				<p class="have">人气公社</p>
				<div class="box3">
					<img src="./img/live-1.jpg" >
					<p>传统文化</p>
				</div>
				<div class="box3">
					<img src="./img/live-2.jpg" >
					<p>中华经典</p>
				</div>
				<div class="box3">
					<img src="./img/live-3.jpg" >
					<p>商业管理</p>
				</div>
				<div class="box3">
					<img src="./img/live-4.jpg" >
					<p>风景观光</p>
				</div>
				<div class="box3">
					<img src="./img/live-1.jpg" >
					<p>文明古迹</p>
				</div>
				
				<p class="have">商城精选</p>
				<div class="box_left">
					<img src="img/pa1.png" >
				</div>
				<div class="box_right">
					<img src="img/pa2.png" >
				</div>
				<div class="box_right">
					<img src="img/pa3.png" >
				</div>
			</div>
			
			
			
			
			
		</div>
	</body>
</html>

4、style.css

*{
	margin: 0;
	padding: 0;
}
.all{
	width: 500px;
	height: 1700px;
	border: 1px solid black;
	margin: 0 auto;
}
p{
	font-size: 15px;
}
.world{
	width: 500px;
}
.top{
	width: 400px;
	height: 200px;
	margin: 0px auto;
	background: url(../img/banner1.jpg) no-repeat;
	background-position: center;
	background-size: 400px 200px;
	position: relative;
	top: -5px;
}
.box{
	float: left;
	width: 120px;
	height: 100px;
	text-align: center;
}
.box p{
	font-size: 13px;
}
.clear{
	clear: left;
}
.middle{
	width: 500px;
	height: 100%;
	
}
.have{
	font-size: 18px;
	color: #d1bc92;
	font-family: "宋体";
	margin-left: 5px;
}
.middle .black{
	width: 485px;
	height: 200px;
	margin: 5px 0px 0px 15px;
	border-radius: 5px 0px 0px 5px;
}
.middle .box2{
	float: left;
	width: 240px;
	height: 180px;
	margin: 5px 0px 0px 10px;
}
.box2 img{
	width: 240px;
	height: 150px;
}
.box2 p{
	font-size: 13px;
}
.box3{
	float: left;
	width: 90px;
	height: 150px;
	margin: 10px 0px 0px 10px;
	text-align: center;
}
.box3 img{
	width: 90px;
	height: 90px;
}
.box_left{
	float: left;
	width: 240px;
	height: 300px;
	margin: 5px;
}
.box_left img{
	width: 240px;
	height: 300px;
}
.box_right{
	float: left;
	width: 240px;
	height: 150px;
	margin: 5px;
}
.box_right img{
	width: 240px;
	height: 150px;
}
微笑伴你而行
关注
  • 2
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
pink老师html＋css综合案例个人练习
03-13
在“pink老师html+css综合案例个人练习”中，我们可以看到一个关于HTML和CSS技术应用的实际项目。这个练习可能是为了帮助学习者巩固和提升他们在HTML结构化标记语言和CSS样式表语言方面的技能。日期标注为“2023.3....
html+css+js各种案例大全
最新发布
06-20
HTML表单综合练习 - 2.HTML简单页面练习 CSS样式基础运用 - 3.五彩导航 伪元素选择器综合运用 - 4.学成在线 HTML+CSS标准流+浮动综合运用实例 - 5.子绝父相定位 绝对定位及"子绝父相"综合案例 - 6.定位及...
HTML+CSS基础题
weixin_46132649的博客
12-09 2620
HTML+CSS基础题
HTML核心+CSS基础（练习）
2301_80441013的博客
11-19 293
学习语言练习是必不可少，重中之重的，这一周我进行了常规流，浮动，定位以及表单元素的练习下面就让我们一起看看这周的分享吧！
使用html+css实现一个静态页面（厦门旅游网站制作6个页面） 旅游网页设计制作 HTML5期末考核大作业，网站——美丽家乡。 学生旅行 游玩 主题住宿网页
HTML网页设计
05-30 397
👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网站题目👨‍🎓二、网站
css常用demo练习
SundayGoG的博客
05-30 1718
1.横向弹性布局，溢出的部分换行 flex布局实现不同分辨率屏幕显示效果不同，”自适应布局“ (flex-flow是flex-direction和flex-wrap的复合属性） display:flex; flex-flow:wrap; white-space: nowrap; text-overflow: ellipsis; 2.文字多余部分用省略号表示 over-flow:hidden; white-space:nowarp; text-overflow:ellipsis; 3.弹性布局，水平均匀间
html CSS相关练习
guoqingru0311的博客
07-13 182
CSS相关练习练习一：css实现翻页样式效果改善：（使用ul-li列表方式实现）2、导航栏： 练习一：css实现翻页样式 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现翻页效果</title> <style type="text/css"> .box{
css 习题练习
一个字，学
04-27 286
css 习题练习 style样式代码可以单独放在新的.css脚本中，也可以直接写在.html脚本里: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
html+css+js 仿微信红包
10-19
在IT行业中，HTML、CSS和JavaScript是构建网页和交互式用户体验的三大核心技术。"html+css+js 仿微信红包"这个项目旨在利用这三种语言的...在实际开发中，这样的练习也常常被用来作为面试题，以考察候选人的综合技能。
美食介绍网页，html+css,包括tabs切换，css轮播图
12-24
综合以上信息，我们可以得出，这个项目是一个初学者的HTML和CSS实践，通过创建一个包含tabs切换和CSS轮播图的美食介绍网页，学习者可以提升对网页布局和交互设计的理解，同时也掌握了如何将静态内容转化为动态展示的...
前端（html+css+js）小米商城单页面练习
09-18
4. 综合联系小米商城：这个练习项目不仅涵盖了基础的HTML、CSS和JavaScript知识，还将这些技术应用到实际的场景中，模拟真实的小米商城首页。这要求开发者具备一定的项目经验和问题解决能力，能够理解用户需求，合理...
html练习+css
06-23
普通的html练习，做的时间为2017年6月23日
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
淘宝首屏静态页面（HTML+CSS）布局练习.zip
05-07
适合刚接触前端基础知识的同学，初步了解了HTML+CSS后，可以尝试练习类似项目；该项目主要为HTML+CSS实现，不涉及交互、逻辑功能，旨在提高样式布局能力
HTML与CSS题库
01-22
里面包含了很多题库，包括HTML CSS JavaScript的题目。
项目练习demo
11-13
node搭建的前端项目，采用ejs模板引擎，MVC模式，jq实现交互
HTML+CSS练习项目
[ 「今でもあなたは私の光。」❤️如今你依旧是我的光。
04-13 249
【代码】HTML+CSS练习项目。
【HTML/CSS篇】牛客题库练习
weixin_50927106的博客
08-28 1702
< dl > < dt > nowcoder < dd > nowcoder < dt > nowcoder < dd > nowcoder < dt > nowcoder < dd > nowcoder
简单HTML练手项目[HTML+CSS]
qq_62371640的博客
05-14 1497
今天用HTML和css制作一个简单的网易云音乐导航栏。
html+css+js学习
02-09
HTML、CSS和JavaScript是前端开发中最基础的三种技术，它们分别负责网页的结构、样式和交互。下面是对它们的简单介绍： 1. HTML（超文本标记语言）：HTML是一种用于创建网页结构的标记语言。通过使用不同的HTML标签，可以定义网页的标题、段落、链接、图像等内容。HTML是网页的骨架，用于描述页面的结构和语义。 2. CSS（层叠样式表）：CSS用于控制网页的样式和布局。通过CSS，可以设置网页的字体、颜色、背景、边框等外观效果，还可以实现响应式布局和动画效果。CSS与HTML结合使用，可以使网页更加美观和易于阅读。 3. JavaScript（JS）：JavaScript是一种脚本语言，用于实现网页的交互功能。通过JavaScript，可以对用户的操作做出响应，实现表单验证、动态内容加载、页面元素的交互效果等。JavaScript可以与HTML和CSS结合使用，使网页具有更强的交互性和动态性。 学习HTML、CSS和JavaScript可以按照以下步骤进行： 1. 学习HTML基础：了解HTML标签的基本语法和常用标签，学会创建网页的结构和内容。 2. 掌握CSS样式：学习CSS的基本语法和常用属性，掌握如何设置网页的样式和布局。 3. 学习JavaScript编程：了解JavaScript的基本语法和常用功能，学会使用JavaScript实现网页的交互效果。 4. 综合实践：通过实际项目或练习，将HTML、CSS和JavaScript结合起来，实现一个完整的网页或Web应用程序。 在学习过程中，可以参考一些优秀的教程和资源＊＊＊www.w3schools.com/）等。此外，还可以通过阅读相关书籍、参加在线课程或加入开发社区来提升自己的技能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微笑伴你而行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值