新闻网页展示

最新推荐文章于 2024-08-24 13:47:49 发布

敢跟头像对视三秒吗？

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量136

点赞数

分类专栏： web开发练习文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45769564/article/details/123189703

版权

web开发练习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在这里插入图片描述
还没有制作完，暂时制作到现在这样

代码：

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>杂志社</title>
		<link rel="stylesheet" type="text/css" href="css/mian.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />

	</head>
	<body>

		<div id="wrapper">
			<div id="header">
				<div class="toper1">
					<div class="toper1l">
						<img src="img/zzs_04.jpg"> |
						<img src="img/zzs_06.jpg"> |
						<img src="img/zzs_08.jpg"> |
						<img src="img/zzs_10.jpg"> |
						<img src="img/zzs_12.jpg"> |

					</div>
					<div class="toper1r">
						<a href="img/zzs_62.jpg">FAQ </a>
						<a href="img/zzs_81.jpg">Contact Us </a>
						<a href="img/zzs_58.jpg">About</a>
						<img src="img/zzs_14.jpg">
					</div>
				</div>
				<div class="toper2">
					<div class="toper2l">
						<img src="img/zzs_25.jpg">
					</div>
					<div class="toper2r">
						<img src="img/zzs_23.jpg">
					</div>
				</div>
				<div class="toper3">
					<a href="img/zzs_29.jpg"><img src="img/zzs_29.jpg"></a><a href="img/zzs_29.jpg">FEATURES <img
							src="img/zzs_32.jpg"></a><a href="img/zzs_29.jpg">TECNOLOGY</a><a
						href="img/zzs_29.jpg">BUSINESS</a><a href="img/zzs_29.jpg">TRAVEL</a><a
						href="img/zzs_29.jpg">BEAUTY</a><a href="img/zzs_29.jpg">REVIEWS</a>

				</div>

			</div>
			<div id="bodyer">
				<div class="lb">
					<div class="stage">
						<img src="img/zzs_37.jpg">
						<img src="img/zzs_38.jpg">
						<img src="img/zzs_39.jpg">
					</div>
				</div>
				<div class="lb2">
					<marquee behavior="" direction="right">赏天下奇闻，论时事新闻，闻政治风云</marquee>

				</div>
				<div class="main">
					<div class="section">
						
						<div class="content">NEWS</div>
						<div class="stage1">
							<img src="img/zzs_37.jpg">
							<img src="img/zzs_38.jpg">
							<img src="img/zzs_39.jpg">
						</div>
						<div class="content">LATEST NEWS</div>
						<div class="stage2">
							<img src="img/zzs_37.jpg">
							<img src="img/zzs_38.jpg">
							<img src="img/zzs_39.jpg">
						</div>

					</div>
					<div class="aside">

						adsfadsfadfa

					</div>
				</div>
				
			</div>
			<div id="footer"></div>



		</div>


	</body>
</html>

css

body{
	background-image: url(../img/islemag-background.jpg);
}
.red{color: #FF0000;}
.blue{color: skyblue;}
.black{color: black;}
#wrapper{
	margin: 20px auto;  
	/* 上下间隔20  左右自动 */
	width: 1000px;
	border: 1px solid red;
	background-color: white;
}
#bodyer{
	clear: left;
	max-width: 1000px;
	/* display: -webkit-box;
	display: -moz-box; */
	/* -moz-box-flex: 1;
	-webkit-box-flex: 1; */
	
}
#wrapper>#header>.toper1>.toper1r{
	float: right;
	margin: 10px;
}
#wrapper>#header>.toper1>.toper1r>a{
	color: dimgrey;
	text-decoration: none;
	margin-right: 10px;
	
}
#wrapper>#header>.toper1>.toper1l{
	float: left;
	margin: 10px;
}
#wrapper>#header>.toper1>.toper1l>img{
	margin-right: 6px;
	
}
#wrapper>#header>.toper1{
	background-color: lightgray;
	
}
#wrapper>#header>.toper2{
	clear: left;
	display: inline-block;
}
#wrapper>#header>.toper2>.toper2l{
	display: inline-block;
	margin-left: 20px;
}
#wrapper>#header>.toper2>.toper2r{
	display: inline-block;
	margin-left: 80px;
}
#wrapper>#header>.toper3>a{
	/* margin-right: 10px; */
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 3px solid skyblue;
	border-right: 1px solid #D3D3D3;
	padding-right: 10px;
	padding-left: 10px;
}
#wrapper>#header>.toper3{
	/* margin-left: 100px; */
	margin-top: 5px;
	height: 40px;
}
#wrapper>#header>.toper3>a:hover{
	background-color: #D3D3D3;
	transition-duration: 2s;
}
#wrapper>#bodyer>.lb{
	display: inline-block;
	overflow: hidden;
	width: 820px;
	height: 400px;
	margin:auto;
	position: relative;
	margin: 20px;
}
#wrapper>#bodyer>.lb>.stage{
	height: 400px;
	width: 1220px;
	position: absolute;
	animation: stage 17s ease-in-out 0s infinite normal;
	display: inline-block;
}
#wrapper>#bodyer>.lb>.stage img{
	/* display: inline-block; */
}
@keyframes stage{
	0%{
		transform: scaleX(1);
	}
	50%{
		transform: scaleX(1) translate(-400px);
	}
	50.001%{
		transform: scaleX(1) translate(-400px);
	}
	100%{
		transform: scaleX(1);
	}
}
@keyframes stage1{
	0%{
		transform: scaleX(1);
	}
	50%{
		transform: scaleX(1) ;
		margin-left: 200px;
	}
	50.001%{
		transform: scaleX(1);
	}
	100%{
		transform: scaleX(1);
	}
}
#wrapper>#bodyer>.main{
	display: -webkit-box;
	display: -moz-box;
	
}
#wrapper>#bodyer>.main>.section{
	/* display: -webkit-box;
	display: -moz-box;
	-moz-box-flex: 5;
	-webkit-box-flex: 5; */
	width: 740px;
	border: 1px solid yellow;
	
	
}
#wrapper>#bodyer>.main>.aside{
	/* display: -webkit-box;
	display: -moz-box;
	-moz-box-flex: 2;
	-webkit-box-flex: 2; */
	width: 250px;
	border: 1px solid red;
}
#wrapper>#bodyer>.main>.section>.content{
	/* width: 750px; */
	/* height: 30px; */
	border-bottom: 2px solid #696969;
	/* float: left; */
	/* margin: auto; */
	padding: 0 20px;
	margin: 10px 20px;
}
	
	
#wrapper>#bodyer>.main>.section>.stage1{
	/* clear: left; */
	
	
}
#wrapper>#bodyer>.main>.section>.stage1 img{
	width: 200px;
	margin: 10px 20px;
	
}
#wrapper>#bodyer>.main>.section .stage2 img{
	width: 140px;
	margin: 10px 20px;
	
}

敢跟头像对视三秒吗？

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
新闻网页展示

还没有制作完，暂时制作到现在这样代码：html：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>杂志社</title> <link rel="stylesheet" type="text/css" href="css/mian.css" /> <link rel="stylesheet" type="text/css".
复制链接

扫一扫

专栏目录