HTML+CSS制作列表页面和多彩照片以及美食推荐页面

最新推荐文章于 2024-05-11 12:06:13 发布

Night_798

最新推荐文章于 2024-05-11 12:06:13 发布

阅读量3.2k

点赞数 6

文章标签：美食前端框架 css3 html5

本文链接：https://blog.csdn.net/Night_798/article/details/124764199

版权

html和css的基础的页面里

此html标签为元素定义标记，css元素不会向用户呈现任何特殊效果，当用户选择此便签时，浏览器会标签相关的表单控件上。

html和css属性应当与相关元素的id属性相同。

1.制作中心动态列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.box {
				border: 1px solid #dcdcdc;
				width: 250px;
				height: 290px;
				margin: 0 auto;
				border-radius: 9px;
				background-image: linear-gradient(#95D6FB 20%, #fff 30%);
			}

			h3 {
				font-size: 15px;
				height: 50px;
				line-height: 50px;
				color: #FFFFFF;
				border-bottom: 1px solid;
			}

			.wrap {
				margin-left: 10px;
				float: left;
				background-image: url(img1/bg.gif);
				width: 30px;
				height: 30px;
				margin-top: 10px;
				margin-right: 5px;
			}

			ul li {
				width: 240px;
				height: 32px;
				background-image: url(img1/dotBg.gif);
				line-height: 35px;
			}

			a {
				padding-left: 20px;
				text-decoration: none;
				color: #999;
			}

			a:hover {
				color: #E88081;
			}

			.box1 {
				margin-top: 6px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h3>
				<div class="wrap"></div>
				中心开班信息
			</h3>
			<div class="box1">
				<ul>
					<li><a href="#">8月12：学历+技能班</a></li>
					<li><a href="#">8月16：高考特招班</a></li>
					<li><a href="#">8月23日：Java精英班</a></li>
					<li><a href="#">8月31日：学士后强化班</a></li>
					<li><a href="#">9月5日：大学生就业班</a></li>
					<li><a href="#">9月9日：企业定向委培班</a></li>
					<li><a href="#">9月16日：网络营销强化班</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

效果图：

2.制作多彩照片

需要说明：使用2D变形效果制作演示案例中的照片展示页面。

当鼠标放在图标上时，利用hover将图片的大小和角度还原

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.mata {
				width: 900px;
				height: 350px;
				margin: 90px auto;
			}

			ul {
				overflow: hidden;
				width: 900px;
				padding: 30px;
			}

			li {
				border: 1px solid #999;
				width: 150px;
				float: left;
				border-radius: 5px;
				padding: 5px 12px 1px 5px;
				margin: 10px -5px 26px 25px;
			}

			.t1 {
				transform: rotate(45deg);
			}

			.t2 {
				transform: rotate(-15deg);
			}

			.t3 {
				transform: rotate(27deg);
			}

			.t4 {
				transform: rotate(-15deg);
			}

			.t5 {
				transform: rotate(10deg);
			}

			.t6 {
				transform: rotate(-15deg);
			}

			.t7 {
				transform: rotate(20deg);
			}

			.t8 {
				transform: rotate(-30deg);
			}

			li:hover {
				transform: rotateZ(0deg) scale(1.2);
			}
		</style>
	</head>
	<body>
		<div class="mata">
			<ul>
				<li class="t1">
					<a href="#"><img src=img3/1.jpg width="100%"></a>
				</li>
				<li class="t2">
					<a href="#"><img src="img3/2.jpg" width="100%"></a>
				</li>
				<li class="t3">
					<a href="#"><img src="img3/3.jpg" width="100%"></a>
				</li>
				<li class="t4">
					<a href="#"><img src="img3/4.jpg" width="100%"></a>
				</li>
				<li class="t5">
					<a href="#"><img src="img3/5.jpg" width="100%"></a>
				</li>
				<li class="t6">
					<a href="#"><img src="img3/6.jpg" width="100%"></a>
				</li>
				<li class="t7">
					<a href="#"><img src="img3/7.png" width="100%"></a>
				</li>
				<li class="t8">
					<a href="#"><img src="img3/8.png" width="100%"></a>
				</li>
			</ul>
		</div>
	</body>
</html>

效果图:

3.制作美食今日推荐页面

1.使用<div>标签和无序列表等标签布局页面

2.使用foiat属性排版美食图片和文字列表。

3.使用position属性定位元素--“省20%”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.Chrome{
				border: 1px solid #dddddd;
				width: 270px;
				height: 400px;
				margin: 50px auto;
				border-radius: 8px;
			}
			span{font-size: 15px;
				color: #e50635;	
			}
			h3{
				font-size: 15px;
				margin-top: 13px;
				margin-left: 35px;
			}
			p{
				font-size: 12px;
				line-height: 20px;
				color: #A9A9A9;
			}
			.box{
				margin-top: 15px;
				position: relative;
			}
			.box1{
				float: right;
				margin-right: 25px;
			}
			a{
				font-size: 13px;
				color: #e50635;
			}
			.box img:nth-child(2){
				position: absolute;
				top: -15px;
				right: 147px;
			}
		</style>
	</head>
	<body>
		<div class="Chrome">
			<h3>
				<span>SHOP</span>
				今日推荐
			</h3>
			<img src="img2/more.gif"  style="float: right; margin-top: -18px; margin-right: 15px;">
			<ul class="box">
				<li>
					<img src="img2/img9.gif"  style="margin-left: 20px;">
					<img src="img2/shen.png" >
					<div class="box1">
					<p><a href="#"><b>汉来国际美食百货</b></a></p>
					<p>口味：创意中餐</p>
					<p>区域：朝阳/CBS</p>
					</div>
				</li>
			</ul>
			<ul class="box">
				<li>
					<img src="img2/img7.gif"  style="margin-left: 20px;">
					<div class="box1">
					<p><a href="#"><b>汉来国际美食百货</b></a></p>
					<p>口味：创意中餐</p>
					<p>区域：朝阳/CBS</p>
					</div>
				</li>
			</ul>
			<ul class="box">
				<li>
					<img src="img2/img8.gif"  style="margin-left: 20px;">
					<div class="box1">
					<p><a href="#"><b>汉来国际美食百货</b></a></p>
					<p>口味：创意中餐</p>
					<p>区域：朝阳/CBS</p>
					</div>
				</li>
			</ul>
			<ul class="box">
				<li>
					<img src="img2/img7.gif"  style="margin-left: 20px;">
					<div class="box1">
					<p><a href="#"><b>汉来国际美食百货</b></a></p>
					<p>口味：创意中餐</p>
					<p>区域：朝阳/CBS</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>

效果图如下：

CSS3 变形效果所学的知识使用到代码

向水平和垂直各移动 200 像素，也可以使用百分

比 transform: translate(200px,200px);

向水平平移 200 像素，不加后面的 0 也可以

transform: translate(200px,0);

transform: translateX(200px);

向垂直平移 200 像素

transform: translate(0,200px);

transform: translateY(200px);

水平、垂直方向放大 1.5 倍

transform: scale(1.5);

transform: scale(1.5,1.5);

水平、垂直方向缩小 0.8 倍

transform: scale(0.8,0.8);

水平方向放大 1.5 倍

transform: scaleX(1.5);

垂直方向放大 1.5 倍

transform: scaleY(1.5);

旋转元素， 0 ~ 360 度之间，负值均可

transform: rotate(-45deg);

Night_798

关注

6
点赞
踩
40

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS制作列表页面和多彩照片以及美食推荐页面

html和css的基础的页面里此html标签为元素定义标记，css元素不会向用户呈现任何特殊效果，当用户选择此便签时，浏览器会标签相关的表单控件上。html和css属性应当与相关元素的id属性相同。1.制作中心动态列表<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/.
复制链接

扫一扫