当前位置：网站首页>News web page display

News web page display

2022-06-11 06:47:00 【Dare you look at the avatar for three seconds?】

Insert picture description here
Not finished yet , For the time being, it has been made like this

Code ：

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> Magazines </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"> Enjoy the wonders of the world , On current affairs and news , Hear about the political situation </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;  
	/*  Up and down spacing 20  Left and right automatic  */
	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;
	
}
原网站

版权声明
本文为[Dare you look at the avatar for three seconds?]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/03/202203020525471461.html

边栏推荐

猜你喜欢

随机推荐