html+css网页练习二

已于 2023-02-05 09:38:17 修改
阅读量1.6k 收藏 12
点赞数 1
分类专栏： html/css 文章标签： css html 前端
于 2023-02-04 17:02:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52108058/article/details/128862409
版权

文章目录

素材在我的主页中资源里

一、茶叶公司官网页面

1、要求

这是某茶叶公司的官网，以下效果图是商品展示页。
该项目包含prolist.html、css文件夹、img文件夹，其中，css文件夹包含include.css文件；img文件夹包含所用到的图片。

2、效果图

分析：

  1. 总布局是一个大盒子body，包含左右两个小盒子right和left
  2. left盒子需要设置背景图片，放入ul li 标签调整位置即可
  3. left盒子需要分为上下两部分，用来设置背景图片达到边角处有特殊效果功能
  4. 注意浮动产生的影响，要消除浮动，调整背景图片的位置和大小，postion和size的用法

在这里插入图片描述

3、prolist.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/include.css"/>
	<body>
			<div class="all">
						<div class="left">
							<ul>
								<li class="li1">网站首页</li>
								<li><hr ></li>
								<li>首页导航</li>
								<li><hr ></li>
								<li>首页导航</li>
								<li><hr ></li>
								<li>产品列表</li>
								<li><hr ></li>
								<li>产品列表</li>
								<li><hr ></li>
								<li>作者列表</li>
								<li><hr ></li>
							</ul>
						</div>
						<div class="right">
							<h1>产品列表</h1>
							<div class="line">
								
							</div>
							<div class="bottom">
								<div class="img">
									<p>产品介绍</p>
								</div>
								<div class="img">
											<p>产品介绍</p>
								</div>
								<div class="img">
											<p>产品介绍</p>
								</div>
							</div>
							<div class="bottom">
								<div class="img">
											<p>产品介绍</p>
								</div>
								<div class="img">
											<p>产品介绍</p>
								</div>
								<div class="img">
											<p>产品介绍</p>
								</div>
							</div>				<div class="bottom">
								<div class="img">
											<p>产品介绍</p>
								</div>
								<div class="img">
											<p>产品介绍</p>
								</div>
								<div class="img">
											<p>产品介绍</p>
								</div>
							</div>

						<div class="yuan">
							<div class="gray one">
								<p><<</p>
							</div>
							<div class="gray green">
								<p>1</p>
							</div>
							<div class="gray">
								<p>2</p>
							</div>
							<div class="gray">
								<p>3</p>
							</div>
							<div class="gray">
								<p>4</p>
							</div>
							<div class="gray">
								<p>>></p>
							</div>
						</div>
						<div class="bottom">
							<h2>热门咨询</h2>
								<span>专注与新时代的学习&emsp; &emsp;&emsp;2023.2.1</span>
									<span>专注与新时代的学习&emsp; &emsp;&emsp;2023.2.1</span><br>
										<span>专注与新时代的学习&emsp; &emsp;&emsp;2023.2.1</span>
											<span>专注与新时代的学习&emsp; &emsp;&emsp;2023.2.1</span><br>
												<span>专注与新时代的学习&emsp; &emsp;&emsp;2023.2.1</span>
													<span>专注与新时代的学习&emsp; &emsp;&emsp;2023.2.1</span>
							
						</div>
						<div id="border">
							
						</div>
						<div class="clear">
							
						</div>
					</div>
				</body>

		</html>

4、include.css

*{
	margin: 0px;
	padding: 0px;
}
.all{
	width: 1700px;
	height: 1200px;
	background: url(../img/xsb.jpg) no-repeat;
	background-size:100%;
	background-position: bottom;
	margin: 0 auto;
}
.left{
	float: left;
	width: 200px;
	height: 500px;
	margin-left: 150px;
	margin-top: 100px;
	background: url(../img/left.png);
}
ul{
	list-style:none;
}
.li1{
		margin-top: 50px;
}
li{
	font-size: 20px;
	font-weight: bold;
	margin: 20px 30px;
	text-align: center;
}
.right h1{
	margin: 40px 330px;
}
.right{
	float: left;
	width: 800px;
	height: 1100px;
	border: 3px solid black;
	margin: 100px 150px;
	background:url(../img/tp.png) repeat-x ;
	background-size: 800px;
	margin-top: 40px;
	margin-bottom: 40px;
}
.right .line{
	border-top: 1px solid #DDDDDD;
}

.bottom .img{
	width: 150px;
	height: 150px;
	margin: 30px 50px;
	float: left;
	background: url(../img/1505959883391632.jpg) no-repeat;
	background-size: 100%;
}
.bottom .img p{
	width: 100%;
	height: 30px;
	background-color: rgba(0,255,0,0.5);
	line-height: 30px;
	margin-top: 120px;
	text-align: center;
	color: white;
}
.yuan{
	clear: left;
}
.yuan .gray{
	float: left;
	width: 50px;
	height: 50px;
	background: url(../img/yuan.png);
	background-size: 100%;
	margin: 0 10px;
}
.yuan .green{
	float: left;
	width: 50px;
	height: 50px;
	background: url(../img/gtea.png);
	background-size: 100%;  
}
.yuan .one{
	margin-left: 200px;
}
.yuan .gray p{
	line-height: 50px;
	text-align: center;
}
.yuan .green p{
	line-height: 50px;
	text-align: center;
}
h2{
	clear: left;
	margin: 70px 0px 20px 50px;
}
.bottom span{
	font-size: 18px;
	display: inline-block;
	margin: 10px 40px;
	font-weight: bold;
}
#border{
	clear: left;
	width: 800px;
	height: 94px;
	background: url(../img/bt.png) no-repeat;
	background-size: 800px;
	background-position: bottom;
	
}

二、电商网站页面

1、要求

这是某电商网页其中的页面，以下效果图是购物车模块。
该项目包含index.html、css文件夹、img文件夹，其中，css文件夹包含index.css文件；img文件夹包含所用到的图片。

2、效果图

分析：

  1. 总体一个大盒子，中间分为上、中、下三个盒子
  2. 注意多选框checkbox的用法
  3. 可以用行内元素span转换为行内块元素进行设置文字，也可以用块元素p转换为行内块元素进行设置文字
  4. 注意border：none；可以取消按钮边框

在这里插入图片描述

3、index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<body>
		<div class="all">
			<div class="top">
				<input type="checkbox" name="" id="" value="" />
				<span>全选</span>
				<span class="s1">产品信息</span>
				<span class="s2">单价</span>
				<span class="s3">数量</span>
				<span class="s3">小计</span>
				<span class="s3">操作</span>
			</div>
			<div class="top2">
				<input type="checkbox" name="" id="" value="" />
				<span>店名1</span>
			</div>
			<div class="line">
				
			</div>
			<div class="box1">
				<input type="checkbox" name="" id="" value="" />
				<img src="img/pixie1.jpg" align="top" >
				<span class="shoe">2018新款鞋，皮带，男士商务皮鞋</span>
				<span class="pace">29.00</span>
				<input class="num" type="button" name="" id="i" value="-" />
				<span>4</span>
				<input type="button" name="" id="i" value="+" />
				
				<span class="num2">116</span>
				<a class="num2" href="#">删除</a>
			</div>
			<div class="line">
				
			</div>
			<div class="box1">
				<input type="checkbox" name="" id="" value="" />
				<img src="img/pixie1.jpg" align="top" >
				<span class="shoe">2018新款鞋，皮带，男士商务皮鞋</span>
				<span class="pace">39.00</span>
				
				<span class="num3">1</span>
				<input type="button" name="" id="i" value="+" />
				
				<span class="num2">&nbsp;&nbsp;39</span>
				<a class="num2" href="#">删除</a>
			</div>
			<div class="line">
				
			</div>
			<div class="top2">
				<input type="checkbox" name="" id="" value="" />
				<span>店名2</span>
			</div>
			<div class="line">
				
			</div>
			<div class="box1">
				<input type="checkbox" name="" id="" value="" />
				<img src="img/pixie1.jpg" align="top" >
				<span class="shoe">2018新款鞋，皮带，男士商务皮鞋</span>
				<span class="pace">99.00</span>
			
				<span class="num3">1</span>
				<input type="button" name="" id="i" value="+" />
				
				<span class="num2">&nbsp;&nbsp;99</span>
				<a class="num2" href="#">删除</a>
			</div>
			<div class="line">
				
			</div>
			<div class="bottom">
				<span class="sum">总计：￥<span class="zero">0</span></span>
			</div>
		</div>
	</body>
</html>

4、index.css

*{
	margin: 0;
	padding: 0;
}
.all{
	width: 1000px;
	height: 800px;
	margin: 0 auto;
}
.top{
	width: 900px;
	height: 50px;
	margin: 0 auto;
	background: #dddddd;
	padding-left: 30px;
}
.top span{
	display: inline-block;
	line-height: 50px;
}
.s1{
	margin-left: 20px;
}
.s2{
	margin-left: 250px ;
}
.s3{
	margin-left: 100px;
}
.top2{
	margin-left: 80px;
}
.line{
	width: 930px;
	border-top: 1px solid black;
	margin: 0 auto;
}
.box1{
	margin: 20px 10px 40px 10px;
	padding-left:60px;
}
.box1 .shoe{
	width: 200px;
	display: inline-block;
	position: relative;
	top: 18px;
}
.pace{
	margin-left: 30px;
}
.box1 img{
	position: relative;
	top: 18px;
}
.num{
	margin-left: 70px;
}
.num2{
	margin-left: 80px;
}
.num3{
	margin-left: 105px;
}
img{
	width: 100px;
	height: 100px;
	margin-left: 30px;
}
.bottom{
	width: 900px;
	height: 50px;
	margin: 0 auto;
	background: #dddddd;
	padding-left: 30px;
}
.bottom .zero{
	font-size: 30px;
	font-weight: bold;
	color: red;
}
.bottom .sum{
	position: relative;
	left: 800px;
}
#i{
	width: 30px;
	height: 30px;
	border: none;
}

三、顶部信息栏页面

1、要求

项目包含首页head.html、css文件夹、img文件夹，其中，css文件夹包含base.css文件；img文件夹包含用到的图片。
index.html在PC端效果如图所示。

2、效果图

分析：

  1. 下划线用的不是text-decoration，而是给该标签设置宽高，显示下边线即可
  2. 红标号1，新建一个盒子修改边角为圆，在调整位置
  3. 注意图片，设置align属性是指图片和周围文字的相对位置。并不是指图片的位置，文字在图片中间用center

在这里插入图片描述

3、head.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
	</head>
	<body>
		<div class="all">
			<span>平台首页</span>
			<span>个人中心</span>
			<span>我的主页</span>
			<span>学习中心</span>
			<span class="underline">资源中心</span>
			<img class="img1" src="img/xiaobiao_img3.jpg" align="center">
			
			<img class="img2" src="img/xiaobiaio_tx.jpg" align="center" >
			<span>李珣同学</span>
			<span class="garden">1</span>
			<img src="img/xiaobiao_img1.jpg" align="center">
			<img class="img3" src="img/xiaobiao_img2.jpg" align="center">
		</div>
	</body>
</html>

4、header.css

*{
	margin: 0;
	padding: 0;
}
.all{
	width: 1110px;
	height: 55px;
	border: 1px solid black;
	background-color: #ffcf4e;
	margin: 0 auto;
}
.all span{
	display: inline;
	line-height: 55px;
	margin: 0px 20px;
}
.all .underline{
	width: 70px;
	height:45px;
	display: inline-block;
	border-bottom: 2px solid black;
}
.img2{
	margin-left: 200px;
}
.img3{
	margin-left: 10px;
}
.all .garden{
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid black;
	border-radius: 20px;
	background-color: #FF0000;
	text-align: center;
	line-height: 20px;
	position: relative;
	left: -40px;
	bottom: 15px;
}

四、安卓页面

1、要求

在某项目中，项目中的文件包含index.html、index.css和images文件夹。

2、效果图

在这里插入图片描述

3、index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<body>
		<div class="aaa">
			<div class="all">
				<div class="search">
					<span>搜索课程</span>
				</div>
				
				<div class="img1">
					<img src="img/banner.png" >
				</div>
				<div class="img2">
					<img src="img/nav-001.png" >
					<img src="img/nav-002.png" >
					<img src="img/nav-003.png" >
					<img src="img/nav-004.png" >
					<span>临床学院</span>
					<span>科研学院</span>
					<span>医考学院</span>
					<span>科员学院</span>
				</div>
				<h3>精品推荐</h3>
				<div class="img3">
					<img src="img/pd-001.png" >
					<img src="img/pd-002.png" >
					<span class="s1">从基础到实战：全面讲...</span>
					<span class="s1">Meta分析零基础的实...</span>
					<span class="s2 ss2">￥215.00</span>
					<span class="s2 sss2">新课特惠</span>
					<span class="s2 ssss2">￥398</span>
					
					<span class="s2 ss2" id="s2">￥215.00</span>
					<span class="s2 ssss2">￥398</span>
				</div>
				
				<div class="img3">
					<img src="img/pd-003.png" >
					<img src="img/pd-004.png" >
					<span class="s1">从基础到实战：全面讲...</span>
					<span class="s1">Meta分析零基础的实...</span>
					<span class="s2 ss2">￥215.00</span>
					<span class="s2 sss2">新课特惠</span>
					<span class="s2 ssss2">￥398</span>
					
					<span class="s2 ss2" id="s2">￥215.00</span>
					<span class="s2 ssss2">￥398</span>
				</div>
			</div>
		</div>

	</body>
</html>

4、index.css

*{
	margin: 0;
	padding: 0;
}
.all{
	width: 500px;
	height: 800px;
	border: 2px solid #808080;
	margin: 30px auto;
}
.search{
	width: 400px ;
	height: 40px;
	border-radius: 50px;
	margin: 10px auto;
	background-color: #ededed;
}
.search span{
	display: inline-block;
	line-height: 40px;
	margin-left: 20px;
	font-size: 18px;
	color: gray
}
.img1 img{
	width: 480px;
	margin-left: 10px;
}
.img2 img{
	margin: 0px 25px;
}
.img2 span{
	margin: 0px 28px;
	color: gray;
}
h3{
	margin-left: 20px;
	margin-top: 20px;
}
.img3 img{
	width: 220px;
	height: 100px;
	margin: 10px 10px;
}
.s1{
	font-size: 18px;
	margin: 0px 20px;
}

.s2{
	font-size: 15px;
	color: #fcd9b5;
}
.ss2{
	font-size: 18px;
	display: inline-block;
	margin-left: 20px;
}
.sss2{
	border: 1px solid #f8bc96;
}
.ssss2{
	color: #808080;
	text-decoration: line-through;
}
#s2{
	margin-left: 40px;
}
微笑伴你而行
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
练习 | css页面练习案例
A123ppleQueen的博客
06-09 708
纸质卡片
从零开始学WEB前端——HTML实战练习，推荐一个GitHub项目
m0_60452070的博客
03-20 883
项目 1描述项目 1项目 2描述项目 2。
CSS和HTML练习
Cherry_Box_be_1的博客
03-31 245
上课弄的关于古诗词鉴赏的小网页设计
制作一个简单HTML公司官网网页设计（HTML+CSS）
VX_WJ88950106的博客
12-24 831
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
HTML+CSS练习项目
最新发布
[ 「今でもあなたは私の光。」❤️如今你依旧是我的光。
04-13 234
【代码】HTML+CSS练习项目。
【HTML+CSS】小兔鲜儿网站首页（静态网页）
m0_63179877的博客
06-30 2593
小兔鲜儿网站首页是利用HTML+CSS进行开发，网站首页包括四部分内容，分别是快捷导航、banner图区域、新鲜好物、生鲜、尾部版权。
css 习题练习
一个字，学
04-27 280
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
CSS3练习
weixin_40794404的博客
07-09 352
CSS3练习 教材：CSS设计指南 文章目录CSS3练习思路1. 为盒模型添加阴影2. 将边界赋予圆角效果：3. 居中没有宽度的元素4.关于inline-block：5.过渡动画6.文本阴影7.CSS3 transform结果 思路 确定网页的布局与结构，将它们分割开来，先写出各个主要的结构化标记。 为包含整体的<body>标记等先添加一些基础的CSS，如font-family，background，margin等等，确定一个基准。 逐步对每个结构添加内容并进行样式化。 1. 为盒模型
HTML+CSS网页练习.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
HTML+css+JQ 网页实例练习.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
HTML5最佳实战项目
09-23
HTML5最佳实战项目,适用于新手 自己写的一个小测试，可以交流
HTML+CSS项目练习源码.md
08-22
巩固html和css基础知识，让我们对后面做大项目打好基础！
html+css网页设计作业.zip
07-20
仿写了魅族的电脑端的官网，运用html+css，实现的源码压缩包。 主要写了首页，详情页，订单页，购物车页，登录页，订单详情页，目的是为了练习布局和样式。 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、...
前端网页练习(html+css).zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
HTML、css项目上手练习
雨云21的博客
05-04 7945
根据下边的效果图完成一个完整网页的制作 1、头部的制作： （1）制作#tou外盒子效果； （2）制作#tou1内盒子1效果：包括导航与logo； （3）制作#tou2内盒子效果：包括标题与段落文字； ...
HTML项目案例，适合练手总结。
qq_47828130的博客
11-06 7430
HTML网页设计虽然简单，但也有很多细节需要留意，特别是浮动和定位的知识点，需要理清思路！
html+css在线做题网页版
07-19
### 回答1： HTML CSS在线做题网页版是一个基于网页平台的在线做题系统，用户可以通过浏览器访问该网页，并在网页上进行HTML CSS相关的题目练习和学习。 这个网页版的做题系统主要有以下几个特点和功能： 1. 题目分类：网页会将HTML和CSS相关的题目进行分类，用户可以根据自己的需要选择不同的题目类型进行学习和练习。例如，可以选择CSS样式设计、HTML标签使用等不同的题目分类。 2. 在线编辑器：网页版的做题系统提供一个在线代码编辑器，可以让用户直接在网页上编写HTML和CSS代码，并随时查看实时效果。用户可以根据题目要求，在编辑器中进行代码编写和修改，然后通过预览功能查看最终效果。 3. 解析和提示：当用户提交答案后，网页会提供题目的解析和相关提示。用户可以通过这些解析和提示了解正确答案的原因，并通过参考解析进行学习和记忆。 4. 进度记录和错题本：网页会记录用户的做题历史，包括已完成的题目和答题情况。用户可以查看自己的做题进度和成绩，并可以把做错的题目加入错题本，方便日后重点复习。 通过HTML CSS在线做题网页版，用户可以随时随地进行HTML和CSS相关的题目练习和学习。这个网页版的做题系统不仅方便易用，而且具有实时预览和解析提示等功能，能够帮助用户更好地理解和掌握HTML和CSS知识。无论是初学者还是进阶者，都能从中受益，并提高自己的HTML CSS编程技能。 ### 回答2： HTML CSS在线做题网页版是一个网站，旨在帮助用户学习和练习HTML和CSS编程技能。它提供了一系列的题目和练习，供用户进行实践和提升。 这个网站主要分为两个部分：题目和代码编辑器。 在题目部分，网站会列出一些具体的HTML和CSS的题目，用户需要根据题目的要求编写相应的代码。这些题目涵盖了HTML和CSS的不同方面，从基础的语法理解到布局和样式设计，都有相应的题目。 在代码编辑器部分，网站提供了一个交互式的代码编辑器，用户可以在这里编写和调试HTML和CSS代码。用户可以在编辑器中输入代码，实时预览效果，并且可以随时执行代码进行调试。 用户可以通过阅读题目要求，理解题意，然后在代码编辑器中编写相应的HTML和CSS代码。他们可以反复尝试，在编辑器中修改和调试代码，直到达到题目要求为止。 通过这个网站，用户可以进行实践练习，巩固和提升自己的HTML和CSS编程技能。他们可以在编写代码的过程中发现问题和解决问题，提升自己的编程能力。 总的来说，HTML CSS在线做题网页版是一个提供HTML和CSS题目和代码编辑器的网站，旨在帮助用户学习和练习HTML和CSS编程技能。用户可以通过阅读题目要求，编写和调试代码，进行实践和提升自己的技能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

微笑伴你而行

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

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

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

打赏作者

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

抵扣说明：

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

余额充值