html+css网页练习一_飞道的博客

html+css网页练习一

2023-02-04 22:40 309人阅读评论(0)

素材获取在资源里

一、活动页面

1、要求

阅读下列说明、效果图和HTML代码，进行静态网页开发。
这个某项目中的其中一个活动页，应用html和css技术完成页面的布局。项目包含主页index.html、style.css，css和img文件夹

2、效果图

分析：

总体一个大盒子，顶部盒子固定图片和文字，添加背景颜色。
下面一张图片，直接引入和作为盒子背景都可。
往下奖品盒子背景颜色透明。再往下一个盒子边框为dashed虚线，部分文字特殊标记。
文字在线中间，可以文字设置背景颜色后上移覆盖实线
表格注意bgcolor，cellspacing，cellpadding ，消除外边线

3、index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>	
	</head>

	<body>
		<div class="border">
			<div class="flower">
				<img src="img/back.jpg"/>
				<span>花花个人赛</span>
			</div>
			<img src="img/banner.jpg" />
			<div class="model">
				<div class="modelone">
					<p class="p1">我的奖品 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<a> 3 </a> ></p>
				</div>
				<div class="modeltwo">
					<p>所有电子券请在<a>10月31日</a>前使用,逾期作废</p>
				</div>
			</div>
			<br>
			<br>
			<div class="line">
				
			</div>
			<h3 class="get">获奖名单</h3>	
			<div class="table">
				<table  cellspacing="0px" cellpadding="1px" align="center" width="270px" height="200px">
						<tr class="tr1" bgcolor="#7ae638" height="40px">
							<td>中奖用户</td>
							<td>RP排名</td>
							<td class="right">具体奖品</td>
						</tr>
						<tr class="tr2">
							<td>王振民</td>
							<td>1</td>
							<td class="right">一年学费+<p>特别礼品</p></td>
						</tr>
						<tr class="tr2">
							<td>谷文栋</td>
							<td>23</td>
							<td class="right">4个月学费+<p>特别礼品</p></td>
						</tr>
						<tr class="tr2">
							<td>王倩倩</td>
							<td>24</td>
							<td class="right">2个月学费+<p>特别礼品</p></td>
						</tr>
						<tr class="tr2">
							<td>钟尉</td>
							<td>124</td>
							<td class="right">100元红包+<p>特别礼品</p></td>
						</tr>
						<tr class="tr2">
							<td>韩雅</td>
							<td>345</td>
							<td class="right">50元红包+<p>特别礼品</p></td>
						</tr>
						<tr class="tr2">
							<td class="bottom">小黑子</td>
							<td class="bottom">360</td>
							<td class="bottom right" >30元红包+<p>特别礼品</p></td>
						</tr>
				</table>
				</div>
				<img class="i" src="img/bottomImg.jpg" />
			</div>
	</body>
</html>

4、style.css

*{
   
	margin: 0;
	padding: 0;
}
.border{
   
	height: 740px;
	width: 300px;
	margin: 50px auto;
	background-color: rgb(148, 239, 141);
}
.flower{
   
	height: 50px;
	width: 300px;
	background-color: #00bd23;
}
.flower img{
   
	height: 25px;
	width: 25px;
	margin-top: 15px;
	margin-left: 10px;
}
.flower span{
   
	font-weight: bold;
	color: aliceblue;
	position: relative;
	bottom: 5px;
}
.border>img{
   
	width: 300px;
	
}
.modelone{
   
	width: 270px;
	height: 45px;
	margin-left: 20px;
	margin-top: 10px;
	background-color: rgb(255,255,255,0.5);
}
.modelone .p1{
   
	width: 250px;
	height: 40px;
	line-height: 40px;
	font-weight: bold;
	margin-left: 20px;
	color: green;
}
.modelone a{
   
	color: red;
}
.modeltwo{
   
	width: 270px;
	height: 90px;
	margin-left: 20px;
	margin-top: 10px;
	background-color: white;
	border: 1px dashed red;
}
.modeltwo p{
   
	margin:18px ;
}
.modeltwo a{
   
	color: red;
}
.line{
   
	width: 250px;
	border: 1px solid #008000;
	border-top: 1px;
	margin: 0 auto;
}
.get{
   
	display: inline-block;
	width: 90px;
	text-align: center;
	color: #008000;
	background-color: #94ef8d;
	position: relative;
	top: -15px;
	left: 110px;
}
.table{
   
	margin: 0px 20px 0px 20px;
	color: #3d6a56;
	font-weight: bold;
	text-align: center;
	font-size: 15px;
}
.table p{
   
	font-size: 13px;
	color: gray;
}
.table .tr1{
   
	color: #F0F8FF;
	font-weight: 400;
}
.table .tr2{
   
	background-color: rgb(255,255,255,0.5);
}
.table td{
   
	border: 1px solid #6dbe9a;
	border-top: 0px;
	border-left: 0px;
}
.table .bottom{
   
	border-bottom: 0px;
}
.table .right{
   
		border-right: 0px;
}
.i{
   
	width: 300px;
}

二、改革进展与成效管理平台页面

1、要求

阅读下列说明、效果图和HTML代码，进行静态网页开发。
项目名称为“改革进展与成效管理平台”，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含normalize.css文件；img文件夹包含用到的图片。

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="header">
			<div class="top">
				<div class="logo">
					<div class="img">
						<img src="img/logo.png" >
					</div>
					<div class="name">
						<h1>改革进展与成效管理平台</h1>
						<p>gai ge jin zhan yu cheng xiao guan li ping tai</p>
					</div>

				</div>
				<div class="input">
					<div class="input1">
						<div class="input1_1">
							<input type="text" name="input" />
						</div>
						<div class="img">
	
						</div>
					</div>
					<div class="input2">
						<img src="img/admin.png" >
						<span>工作平台</span>
					</div>
				</div>
			</div>
			<div class="cata">
				<ul>
					<li>首页</li>
					<li>成果展示</li>
					<li>改革部署</li>
					<li>改革动态</li>
					<li>督查动态</li>
					<li>区县党建</li>
				</ul>
			</div>
		</div>
		<div class="body">
		<div class="contact">
			<span>联系我们</span>
		</div>
		</div>
		<div class="last">
			<div class="left">
				<img src="./img/admin.png" align="center">
				<span>+86123456789 123456789</span>
				<br>
				<img src="./img/admin.png" >
				<span>+86123456789 123456789</span>
				<br>
				<img src="./img/admin.png" >
				<span>+86123456789 123456789</span>
				<br>
				<img src="./img/admin.png" >
				<span>+86123456789 123456789</span>
			</div>
			<div class="right">
				<ul>
					<li>首页</li>
					<li>|</li>
					<li>决策</li>
					<li>|</li>
					<li>力度</li>
					<li>|</li>
					<li>督察</li>
					<li>|</li>
					<li>审核</li>
					<li>|</li>
					<li>民意</li>
				</ul>
				<div class="clear">
					
				</div>
				<br>
				<img class="img1" src="img/admin.png" >
				<img src="img/admin.png" >
				<img src="img/admin.png" >
				<p>&copy;dsdsdsdsdsdsdsdsdsdsds</p>
			</div>
		</div>
	</body>
</html>

4、normalize.css

*{
   
	margin: 0px;
	padding: 0px;
}
/* 顶部导航 */
.header{
   
	width: 1500px;
	height: 180px;
	margin: 0 auto;
}
.header .top{
   
	width: 100%;
	height: 130px;
	background-color: #0c549e;
}
.header .top .logo{
   
	width: 800px;
	height: 100%;
	float: left;
}
.header .top .logo .img{
   
	float: left;
	width: 90px;
	margin:40px 0px 0px 150px;
}
.header .top .logo .name{
   
	float: left;
	margin:40px 0px 0px 0px;
}
.header .top .logo .name h1{
   
	color: white;
	letter-spacing: 10px;
}
.header .top .logo .name p{
   
	font-size: 15px;
	font-weight: bold;
	color: white;
	word-spacing: 10px;
}
.header .top .input{
   
	width: 700px;
	height: 100%;
	float: left;
}
.header .top .input .input1{
   
	float: left;
	width: 250px;
	height: 100%;
	margin: 50px 0px 0px 150px;
}
.header .top .input .input1 .input1_1{
   
	float: left;
}
.header .top .input .input1 input{
   
	width: 200px;
	height: 25px;
}
.header .top .input .input1 .img{
   
	float: left;
	width: 26px;
	height: 26px;
	border: 1px solid white;
	background: url(../img/search.png) no-repeat 5px;
}
.header .top .input .input2{
   
	width: 200px;
	height: 100%;
	float: left;
	margin: 55px 0px 20px 50px;
}
.header .top .input .input2 span{
   
	font-size: 15px;
	color: white;
	position: absolute;
}
.header .cata{
   
	width: 1500px;
	height: 50px;
}
.cata ul{
   
	margin-left: 150px;
}
.cata li{
   
	height: 50px;
	width: 100px;
	float: left;
	list-style: none;
	font-size: 25px;
	line-height: 50px;
	text-align: center;
	margin: 0 30px;
	
}
li:hover{
   
	color: white;
	background-color: #0C549E;
}
.body{
   
	width: 1500px;
	height: 450px;
	background: url(../img/banner.jpg);
	background-size: 100% 800px;
	background-position: center;
	margin: 0 auto;
	position: relative;
}
.contact{
   
	width: 200px;
	height: 50px;
	line-height: 50px;	
	background-color: #0C549E;
	position: absolute;
	left: 150px;
	bottom: -25px;
}
.contact span{
   
	font-size: 18px;
	font-weight: bold;
	color: white;
	margin-left: 20px;

}
.last{
   
	width: 1500px;
	height: 300px;
	border: 1px solid black;
	margin: 0 auto;
	background-color: #15233d;
}
.left{
   
	width: 500px;
	padding: 50px 0px 0px 100px;
	float: left;
}
.left span{
   
	color: white;
	display: inline-block;
	margin-left: 30px;
	margin-top: 30px;
}
.right{
   
	width: 500px;
	height: 100%;
	float: left;
	padding-left: 400px;
}
.right ul{
   
	margin-left: 100px;
}
.right li{
   
	color: white;
	font-size: 15px;
	float: left;
	list-style: none;
	margin: 100px 0px 0px 10px;
}
.clear{
   
	clear: left;
}
.right .img1{
   
	margin-left: 330px;
}
.right p{
   
	color: white;
	font-size: 15px;
	margin-left: 220px;
	margin-top: 20px;
}

三、头部静态html

1、要求

制作一个公用的头部静态html，现在提供的设计效果图。
项目名称为header，包含header.html、css文件夹、img文件夹，其中，css文件夹包含header.css文件；img文件夹包含h5logo.png、hotline.gif、top_02.gif、top_bg.gif图片。

2、效果图

分析：

总盒子边框有阴影
内部盒子背景颜色平铺
li之间放的图片隔开

3、header.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="css/header.css" type="text/css" />
	<body>
		<div class="head">
			<img class="img1" src="img/h5logo.png" >
			<img class="img2" src="img/hotline.gif" >
			<ul>
				<li>HOME</li>
				<li><img src="img/top_02.gif" ></li>
				<li>HTML5</li>
				<li><img src="img/top_02.gif" ></li>
				<li>CSS3</li>
				<li><img src="img/top_02.gif" ></li>
				<li>GEGE</li>
				<li><img src="img/top_02.gif" ></li>
				<li>JQUERY</li>
				<li><img src="img/top_02.gif" ></li>
				<li>JS</li>
				<li><img src="img/top_02.gif" ></li>
				<li>JAVA</li>
				<li><img src="img/top_02.gif" ></li>
				<li>C</li>
				<li><img src="img/top_02.gif" ></li>
				<li>LINUX</li>
				<li><img src="img/top_02.gif" ></li>
				<li>CENTOS</li>
			</ul>
		</div>
	</body>
</html>

4、header.css

*{
   
	margin: 0;
	padding: 0;
}
.head{
   
	width: 1100px;
	height: 100px;
	border: 1px solid black;
	margin: 50px auto;
	box-shadow: 1px 5px 10px 0px ;
	background-image: url(../img/top_bg.gif);
}
.img1{
   
	position: relative;
	left: 50px;
	top: 25px;
}
.img2{
   
	margin-left: 500px;
}
ul{
   
	margin-left: 350px;
}
li{
   
	list-style: none;
	float: left;
	margin: 0 5px;
}

四、课程表

1、要求

李华用html的表格打印了2019年下学期的课程表，周三有体育课标红，完成的整体效果如图。
项目名称为table，包含首页table.html、css文件夹，其中，css文件夹包含table.css文件。

2、效果图

分析：

rowspan（占几行），colspan（占几列）

3、table.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/table.css"/>
	<body>
		<table class="table" border="1" cellspacing="2px" cellpadding="3px" width="500px">
			<tr>
				<th colspan="6">2019年下学期课程表</th>
			</tr>
			<tr>
				<th>星期一</th>
				<th>星期二</th>
				<th>星期三</th>
				<th>星期四</th>
				<th>星期五</th>
				<th>周末</th>
			</tr>
			<tr>
				<td>语文</td>
				<td>数学</td>
				<td class="red">英语</td>
				<td>语文</td>
				<td>英语</td>
				<td rowspan="3">休息</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>历史</td>
				<td class="red">语文</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>政治</td>
				<td>语文</td>
				<td class="red">体育</td>
				<td>英语</td>
				<td>数学</td>
			</tr>
		</table>
	</body>
</html>

4、table.css

.table{
   
	margin: 50px auto;
	text-align: center;
}
.red{
   
	color: red;
}

转载：https://blog.csdn.net/qq_52108058/article/details/128857251

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章