html+css网页练习三

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

文章目录

素材在我的主页的资源处获取

一、登录注册页面

1、要求

阅读下列说明、效果图完成移动端布局。
在某项目中需要登录后才可以看到主页面顾按照效果图完成移动端的登录页面布局。项目中的文件包含index.html、style.css和img文件夹。

2、效果图

分析

  1. 顶部背景是由上面一部分纯色背景+下面一部分图片构成
  2. 中间logo在一个盒子中logo修改宽高后居中

在这里插入图片描述

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">
			<div class="top">
				<div class="top_in">
					
				</div>
			</div>
			<span class="span1">注册</span>
			<span class="span1">登录</span>
			<div class="middle">
				<p class="p1">请输入用户名</p>
				<p class="p1">请输入密码</p>
				<p class="p2">忘记密码</p>
				<p class="aload">登录</p>
				
				<div class="line">
					
				</div>
				<h3>第三方登录</h3>
				<img class="img1" src="img/icon-img1.jpg" >
				<img src="img/icon-img2.jpg" >
				<img src="img/icon-img3.jpg" >
				<p class="agree">登录表示你同意该软件<span>用户服务协议</span>
				和<span>隐私信息</span></p>
			</div>
		</div>
	</body>
</html>

4、style.css

*{
	margin: 0;
	padding: 0;
}
.all{
	width: 400px;
	height: 650px;
	border: 1px solid black;
	margin: 0 auto;
}
.top{
	width: 400px;
	height: 180px;
	background: url(../img/logol-bottomBj.jpg) no-repeat;
	background-position: bottom;
	background-color: #7a9ad7;
}
.top .top_in{
	width: 60px;
	height: 60px;
	border-radius: 60px;
	background: url(../img/logol.jpg) no-repeat;
	background-color: aliceblue;
	background-size: 45px;
	background-position: center;
	position: relative;
	left: 175px;
	top: 55px;
}
.all .span1{
	display: inline-block;
	font-size: 18px;
	font-weight: bold;
	margin-left: 100px;
	margin-top: 20px;
	margin-bottom: 10px;
}
.middle{
	width: 400px;
	height: 420px;
	border-top: 1px solid #a9aaa8;
}
.middle .p1{
	width: 330px;
	height: 40px;
	border-bottom: 1px solid #a9aaa8;
	margin: 0 auto;
	margin-top: 20px;
	color: #a9aaa8;
}
.p2{
	text-align: right;
	color: #a9aaa8;
	margin-top: 20px;
	margin-right: 35px;
}
.aload{
	width: 200px;
	height: 50px;
	border-radius: 30px;
	line-height: 50px;
	text-align: center;
	margin: 0 auto;
	background-color: #7a9ad7;
	color: white;
	margin-top: 20px;
}
.line{
	width: 330px;
	height: 1px;
	border-top: 1px solid #a9aaa8;
	margin: 0 auto;
	margin-top: 50px;
}
h3{
	width: 100px;
	text-align: center;
	position: relative;
	margin: 0 auto;
	bottom: 15px;
	background-color: white;
	color: #a9aaa8;
}
.middle .img1{
	margin-left: 100px;
}
.middle img{
	margin: 0 10px; 
}
.agree{
	text-align: center;
	font-size: 15px;
	margin-top: 10px;
}
.agree span{
	color: #7a9ad7;
}

二、发展历程页面

1、要求

阅读下列说明、效果图和HTML代码进行静态网页开发。
这是一个公司的发展历程项目包含首页index.html、css文件夹其中css文件夹包含style.css文件。index.html在PC端效果如图所示。

2、效果图

分析

  1. 时间线的布局基本是左侧一个大盒子显示右边框第一行是装时间第二行是装的文字
  2. 小圆圈为单独一个盒子设置边距和背景即可调整位置到线的最下方
  3. 右侧为一个盒子套着另一个盒子或者是时间

在这里插入图片描述

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">
			<h2 class="develop">发展历程</h2>
			<p class="english">CONMPANY HISTORY</p>
			<div class="box1">
				<p class="p">2012.12</p>
			</div>
			<div class="yuan">
			</div>
			<div class="box2">
				<p>公司成立</p>
			</div>
			<div class="clear">
			
			</div>
	
			<div class="box1">
				<div class="box3">
					<p>园区服务方向</p>
				</div>
			</div>
			<div class="yuan">
			</div>
			<p class="time">2013.02</p>
			<div class="clear">
				
			</div>

			<div class="box1">
				<p>2014.03</p>
			</div>
			<div class="yuan">
			</div>
			<div class="box2">
				<p>火天使投资900万元</p>
			</div>
			<div class="clear">
				
			</div>
			<div class="box1">
				<div class="box3">
					<p>业务转型互联网销售</p>
				</div>
			</div>
			<div class="yuan">
			</div>
		<p class="time">2013.09</p>
			<div class="clear">
				
			</div>
				
			<div class="box1">
				<p>2016.06</p>
			</div>
			<div class="yuan">
			</div>
			<div class="box2">
				<p>v1.0版本上线</p>
			</div>
			<div class="clear">
				
			</div>
						
			<div class="box1">
				<div class="box3">
					<p>期待...</p>
				</div>
			</div>
			<div class="yuan">
			</div>
		<p class="time">2017.03</p>
			<div class="clear">
				
			</div>
										
		</div>
	</body>
</html>

4、style.css

*{
	margin: 0;
	padding: 0;
}
.all{
	width: 600px;
	height: 600px;
	border: 1px solid black;
	margin: 0 auto;
}
.all .develop{
	text-align: center;
	color: #d94646;
	margin-top: 10px;
}
.all .english{
	text-align: center;
	color: #d94646;
	margin-top: 10px;
	margin-bottom: 20px;
}
.box1{
	float: left;
	width: 300px;
	height: 60px;
	border-right: 4px solid #bdbdbd ;
}
.box1 p{
	text-align: right;
	color:#D94646 ;
	margin-top: 55px;
	margin-right: 20px;
}
.yuan{
	width: 7px;
	height: 7px;
	border-radius: 7px;
	border: 3px solid #D94646;
	margin: 0 auto;
	position: relative;
	top: 60px;
	left: 2px;
	background-color: white;
}
.box2{
	float: left;
	width: 200px;
	height: 45px;
	border: 2px solid #D94646;
	border-radius: 0px 22.5px 22.5px 0px;
	margin-left: 30px;
	position: relative;
	top: 30px;
}
.box2 p{
	width: 190px;
	height: 35px;
	text-align: center;
	line-height: 35px;
	background-color: #D94646;
	border-radius: 0px 22.5px 22.5px 0px;
	margin-top: 5px;
	margin-left: 5px;
	color: white
}
.clear{
	clear: both;
}
.box3{
	float: left;
	width: 200px;
	height: 45px;
	border: 2px solid #D94646;
	border-radius: 22.5px 0px 0px 22.5px;
	margin-left: 70px;
	margin-top: 45px;
}
.box3 p{
	width: 190px;
	height: 35px;
	text-align: center;
	line-height: 35px;
	background-color: #D94646;
	border-radius: 22.5px 0px 0px 22.5px;
	margin-top: 5px;
	margin-left: 5px;
	color: white
}
.time{
	color: #D94646;
	position: relative;
	top: 40px;
	left: 20px;
}

三、Web技术社区页面

1、要求

“Web技术社区”网站包含首页index.html、css文件夹和img文件夹。
首页index.html内容分为两部分一是【网站介绍】位于页面上端内容为【欢迎语】和【网站内容介绍】以文字的形式展示二是【技术介绍】位于页面下端展示四项【技术】每项都包括【技术logo】和【技术特点】以图片和列表的形式展示。
对页面样式进行设计要求为
1页面全局样式设置页面全局属性页面外边距和内边距为“0”字体为“宋体”字体大小为“35px”。为页面设置透明度动画在页面加载时执行透明度从“0”到“1”动画持续时间为“1s”动画次数为“1”次。
2【网站介绍】样式为页面上端【网站介绍】部分添加背景颜色“#000000”并设置宽度为“100%”、高度为“400px”、字体颜色为“#FFFFFF”。另外为【欢迎语】和【网站内容介绍】内容设置“绝对布局”、距顶部边缘“16%”、距左边缘“16%”、宽度为“68%”、文本内容“居中”。
3【技术介绍】样式为页面下端【技术介绍】设置“弹性布局”、文本内容“居中”。另外为【技术】设置宽度为“17%”、外边距为“4%”为【技术logo】设置高度为“200px”、宽度为“200px”、边框颜色为“#000000”、边框为“1px、实线”、边框设置“20px圆角”为【技术特点】中列表设置文本内容“居左”。

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">
			<div class="top">
				<p>欢迎来到Web技上术社区<br><br>本站包括了HTML、css、Javascript、jQuery等各种基础编程教程。本站致力于推广各种前端技术所有资源是完全免费的
				并且会根据当前互联网的变化实时更新本站内容。同时本站内容如果有不足的地方也欢迎广大编程爱好者在本站留言提供意见。</p>
			</div>
			<div class="bottom">
				<img src="img/html.png" >
				<ul>
					<li>HTML指的是超文本标记语言</li>
					<li>HTML不是一种编程语言而是超文本标记语言</li>
					<li>标记语言是一套标记标签</li>
				</ul>
			</div>
			<div class="bottom">
				<img src="img/css.png" >
				<ul>
					<li>CSS指层叠样式表</li>
					<li>样式定义如何显示HTML元素</li>
					<li>样式通常存储在样式表中</li>
				</ul>
			</div>
			<div class="bottom">
				<img src="img/js.png" >
				<ul>
					<li>JavaScript是种轻量级的编程语言</li>
					<li>JavaScript是可插入HTML页面的编程代码</li>
					<li>JavaScript插入HTML页面后,可由所有的现代浏览器执行</li>
				</ul>
			</div>
			<div class="bottom">
				<img src="img/jquery.png" >
				<ul>
					<li>jQuery是一个JavaScript函数库</li>
					<li>jQuery是一个轻量级的”写的少做的多”的</li>
					<li>jQuery提供了大量的插件</li>
				</ul>
			</div>
		</div>
	</body>
</html>

4、style.css

*{
	margin: 0px;
	padding: 0px;
	font-family: 宋体;
	font-size: 35px;
	transition: 1s;
}
.top{
	background-color: #000000;
	width: 100%;
	height: 400px;
	color: #FFFFFF;
}
.top p{
	position: absolute;
	top: 16%;
	left: 16%;
	width: 68%;
	text-align: center;
}
.bottom{
	position: relative;
	text-align: center;
	width: 17%;
	border: 4%;
	float: left;
	margin: 0 40px;
}
.bottom img{
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	border-radius: 20px;
}
.bottom li{
	text-align: left;
}

四、电商网站注册、登录页面

1、要求

阅读下列说明、效果图进行静态网页开发。
某电商网站注册、登录页面开发项目。项目名称为verify包含首页index.html、css文件夹其中css文件夹包含style.css文件。

2、效果图

注意

  1. placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示一旦用户输入信息该提示就会自动消失
    在这里插入图片描述

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">
			<h2>注册</h2>
			<span class="span1">*</span>
			<span>用户名&emsp;</span>
			<input type="text" name="" id="" value="" placeholder="字符串长度为6-20,包含数字和字母"/>
			<br>
			<span class="span1">*</span>
			<span>电子邮箱</span>
			<input type="text" name="" id="" value="" placeholder="输入正确的电子邮箱地址"/>
			<br>
			<span class="span1">*</span>
			<span>密码&emsp;&emsp;</span>
			<input type="text" name="" id="" value="" placeholder="设置密码"/>
			<br>
			<span class="span1">*</span>
			<span>确认密码</span>
			<input type="text" name="" id="" value="" placeholder="确认密码必须与密码一致"/>
			
			<p>提交</p>
								
		</div>
	</body>
</html>

4、style.css

*{
	margin: 0;
	padding: 0;
}
.all{
	width: 500px;
	height: 400px;
	border: 1px solid black;
	margin: 0 auto;
}
h2{
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #6e7478;
}
input{
	width: 300px;
	height: 30px;
}
.span1{
	color: red;
	margin-left: 20px;
	display: inline-block;
	margin-top: 20px;
	margin-right: 10px;
}
p{
	width: 400px;
	height: 40px;
	background-color: green;
	margin: 0 auto;
	color: white;
	margin-top: 20px;
	text-align: center;
	line-height: 40px;
}
阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: CSS
返回列表

上一篇：【HDFS】一个RPC的生命周期，从服务端接收到响应的各个阶段的统计指标

下一篇：consul使用心得

“html+css网页练习三” 的相关文章

理解CSS1年前 (2023-02-02)
＜ CSS小技巧：filter滤镜妙用＞1年前 (2023-02-02)
CSS给元素添加边框（样式、颜色、宽度）1年前 (2023-02-02)
CSS+JS 置顶效果1年前 (2023-02-02)
CSS 排行榜1年前 (2023-02-02)
python爬虫学习笔记-CSS(大致了解)1年前 (2023-02-02)
css 2D转换1年前 (2023-02-02)
css优先级、CSS盒模型、内边距padding、外边距margin、边框border、盒模型的计算及模式转换、三维盒子1年前 (2023-02-03)
CSS网格教程：网格布局模块/网格容器/网格项目1年前 (2023-02-03)
CSS预处理器、移动端适配1年前 (2023-02-03)

阿里云国际版