2020-10-19

最新推荐文章于 2024-07-17 18:42:40 发布

ZiWie丶ZHANG

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量229

点赞数

文章标签： html css3

原文链接：https://image.baidu.com/

版权

项目一

运行效果图

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>风雨同舟</title>
	<style type="text/css">
		.bj{
			background: url(../img/02-bg.jpg); 
			background-repeat: no-repeat;
			background-size: cover ;
			width: 600px;
			margin: auto;
			
		}
		h1{text-align: center; margin: 0; padding: 20px 0 20px 0;}
		hr{ color: #ffffff; width: 500px; margin-bottom: 70px;}
		header>p{color: #a7a7a7; text-align: right; padding-right: 25px; margin: 0;}
		.zt_zi{color: #dadada; line-height: 22px; padding-left: 30px;}
		.footer_p{text-indent: 20px; font-size: 17px;}
		.footer_span1{color: #ead706; font-size: 20px;}
		.footer_span2{color: #ffffff;}
		.footer_span3{color: #ff0000;}
		.article_div{overflow: hidden; white-space: nowrap; width: 160px;}
		.yw_zi>p:nth-last-child(1){color: #c3c3c3; text-align: right; padding: 10px 20px 20px 0;}
	</style>
</head>
<body>
	<div class="bj">
		<header>
			<h1>【风雨同舟】</h1>
			<p>作者：于浩宸</p>
			<hr style="color: #ffffff;">
		</header>
		<article class="zt_zi">
			<p>	我站在这个十字路口</p>
			<p>	等你陪我一起走</p>
			<p>	不想再次错过</p>
			<p>	我不能再沉默</p>
			<p> 心里的话一定要对你说ss</p>
			<p> · · · · · ·   </p>
			<p>	我们手拉手一起走<p>
			<p>	越过高山越过无数的块坷</p>
			<p>	就算风雨再大</p>
			<p>	有我为你撑着雨伞</p>
			<p>	阴霾过后</p>
			<p>	一定会看见彩虹</p>
			<p> · · · · · ·   </p>
		</article>
		<footer class="yw_zi">
			<p class="footer_p">
				<span class="footer_span1">【祝贺】</span><span class="footer_span2">2020年12月22日是张君先生和李丽小姐大喜之日</span>
				<span class="footer_span3">，祝他们新婚快乐，百年好台，风雨同舟！！！@于浩宸</span>
			</p>
			<p>2020年12月20日广州</p>
		</footer>
	</div>
</body>
</html>

项目二

运行效果图

HTML代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>服装推广</title>
		<style type="text/css">
			@font-face {
				font-family:LTCH;
				src: url(../font/LTCH.TTF);
			}
			@font-face {
				font-family:BOOMBOX;
				src: url(../font/BOOMBOX.TTF);
			}
			@font-face {
				font-family:FZJZJW;
				src: url(../font/FZJZJW.TTF);
			}
			@font-face {
				font-family:ROCK;
				src: url(../font/ROCK.TTF);
			}
			@font-face {
				font-family:TCCM____;
				src: url(../font/TCCM____.TTF);
			}
			
			body{margin: auto; width: 65%;}
			h1{text-align: center;}
			
			p{margin: 0; padding: 20px 20px 20px 100px;}
			article{
				background:url(../img/01-bg.png); 
				background-size: cover;
				width: 1300px;
			}
			p:nth-child(2){font-family: LTCH; font-size: 60px; color: yellow; }
			.p_span1{font-family: BOOMBOX}
			.p_span2{font-size: 60px; font-family: ROCK;}
			.p_span3{font-size: 40px; color: #f8d6d9; font-family: 楷体;}
			.p_span4{font-size: 40px;}
			.p_span5{font-size: 50px; font-family: FZJZJW; color: #ffffff;}
			.article_p{color: #f8d6d9; font-size: 40px;}
		</style>
	</head>
	<body>
		<header>
			<h1>东莞佳佳服饰有限公司服装推广</h1>
		</header>
		<article>
			<img src="../img/hdys.jpg" alt="衣舍"/>
				<p>全场<span class="p_span1">5</span>折封顶</p>
				<p>
					<span class="p_span2">2020</span><span class="p_span3">秋天全面上新</span>
				</p>
				<P>
					<span class="p_span4">全场两件</span><span class="p_span5">包邮</span>
				</P>
				<p class="article_p">折后尽享满减</p>
				<p class="article_p">全年仅一次一定不能错过</p>
		</article>	
	</body>
</html>

项目三

运行效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>女装狂欢购</title>
		<link rel="stylesheet" type="text/css" href="../css/nz.css"/>
	</head>
	<body>
		<div class="body_div">	
			<div class="bd_div">
			<h2>双11/TOPS</h1>
			<p class="div_p1">会员优惠购购购&rarr;</p>
			<h1>女装狂欢购</h1>
			<p class="div_p2">新品<span class="span_1">5</span><span class="span_2">折</span>起购</p>
			<p class="div_p3">打折/减价/优惠</p>
			<div class="bd_div2"></div>
			<p>活动时间：11月10日-11月11日</p>
			</div>
		</div>
	</body>
</html>

			/* 定义字体 */
			@font-@font-face {
				font-family:LTCH;
				src: url(../font/LTCH.TTF);
			}
			
			/* 添加背景 */
			.body_div{
				background: url(../img/03-bg.jpg); 
				background-size: cover;
				width: 1800px;
			}
			
			/* 整体字体外边距样式 */
			.bd_div{padding: 120px 0 20px 490px;}
			
			/* 双11样式 */
			h2{
				font-family: LTCH; 
				font-size: 70px;
				margin: 0;
			}
			
			/* 会员优惠购购购边框样式 */
			.div_p1{
				border: 3px solid #000000;
				width: 160px;
				margin: 0;
				font-weight: 1000;
				font-size: 20px;
			 }
			 
			 /* 女装狂欢购样式 */
			h1{
				font-size: 70px;
				color: red;
				text-shadow: 5px 5px 5px #000000;
			}
			
			/* 新品样式 */
			.div_p2{font-size: 30px; margin: 0;}
			
			/* 打折/减价/优惠样式 */
			.div_p3{
				font-size: 30px; 
				font-weight: 1000; 
				margin: 0;  
				border: 3px solid #000000;
				width: 220px;
				padding: 3px 20px;
			}
			
			/* 5样式 */
			.span_1{font-size: 55px; color: #db7e40;}
			
			/* 折样式 */
			.span_2{color: #db7e40;}
			
			/* 小横线样式 */
			.bd_div2{
				width: 25px; 
				height: 5px; 
				background-color: #000000; 
				margin-top: 20px;W
			}
			
			/* 活动时间样式 */
			p:nth-last-child(1){ 
				font-weight: 1000; 
				font-size: 18px;
			}

项目四

在这里插入图片描述

HTML代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>早安你好</title>
		<link rel="stylesheet" type="text/css" href="../css/hellow.css">
		<link rel="icon" type="image/x-icon" href="../img/01.ico">
	</head>
	<body>
		<div class="body_div">
			<header>
				<h1 class="header_h11">早安 你好</h1>
				<p class="header_p1">ZHANANNHAO</p>
			</header>
			<article>
				<header>
					<h1 class="header_h12">为梦想奔跑的年轻人</h1>
					<p class="header_p2">遇见美丽的自己</p>
				</header>
				<p class="header_p3">人生的每一场相遇都是缘兮 没有对错</p>
				<p class="header_p3">人生的每一个清晨都该努力 不应拖延</p>
			</article>
		</div>
	</body>
</html>

CSS代码：
@font-face {
				font-family: KXHT;
				src: url(../font/KXHT.TTF);
			}
			@font-face {
				font-family: FZJZJW;
				src: url(../font/FZJZJW.TTF);
			}
			/* 全局背景 样式 */
			.body_div{
				background: url(../img/04-bg.jpg);
				background-size: cover;
				text-align: center;
				width: 800px;
				height: 1423px;
				margin: auto;
			}
			/* 早安 你好-样式 */
			.header_h11{
				font-size: 100px;
				font-family: KXHT;
				color: #feaa5d;
				padding-top: 40px;
			}
			/* ZHANANNHAO 样式 */
			.header_p1{
				font-size: 30px;
				font-style: italic;
				color: #cd96ff;
				text-decoration: underline;
			}
			/* 为梦想奔跑的年轻人 样式 */
			.header_h12{
				font-size: 60px;
				color: #03f701;
				font-weight: 500;
				font-family: "隶书";
			}
			/* 遇见美丽的自己 样式 */
			.header_p2{
				font-size: 40px;
				color: #fd8000;
				font-family: "隶书";
			}
			/* 人生的 样式 */
			.header_p3{
				color: #a65a1e;
				font-size: 40px;
				font-weight: 200;
				font-family: FZJZJW;
			}

ZiWie丶ZHANG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-10-19

项目一运行效果图<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>风雨
复制链接

扫一扫