实例：开心网静态完整网页

大雄先生

于 2021-12-17 09:34:57 发布

阅读量792

点赞数 3

文章标签： css html 经验分享

本文链接：https://blog.csdn.net/x1785551/article/details/121989156

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0px; padding: 0px;}
			a{text-decoration: none;}
			li{list-style: none;}
			.wrap{
				width: 1225px;
				margin: 0px auto;
			}
			.nav{
				width: 1225px;
				height: 50px;
				background: linear-gradient(to bottom,rgb(208,36,66),rgb(210,88,114),rgb(210,88,114));
				border-radius: 10px;
				/* border: 1px solid green; */
				position: relative;
			}
			/* .nav>a{
				margin-left: 45px;
				color: white;
				font-size: 15px;
				font-weight: 600;
			} */
			.nav>a{
				display: inline-block;
				width: 99px;
				height: 39px;
				line-height: 39px;
				font-weight: 600;
				background: white;
				color: rgb(208,36,66);
				font-size: 15px;
				text-align: center;
				position: absolute;
				top: 11px;
			}
			.nav>img,.nav>a{
				vertical-align: middle;
			}
			.nav li:nth-of-type(1){
				color: white;
				font-size: 12px;
				position: absolute;
				top: 15px;
				right: 30px;
			}
			.content{
				position: relative;
			}
			.content>.content-top-left{
				width: 190px;
				height: 266px;
				border: gray 1px solid;
				border-radius: 8px;
				margin-top: 17px;
			}
			.content>.content-top-left li{
				background: url(img/游戏列表灰色渐变.jpg) no-repeat center;
				margin-top: 13px;
			}
			.content>.content-top-left li a{
				margin-left: 8px;
			}
			.content>.content-top-left li:hover{
				background: url(img/游戏列表鼠标移入的渐变.jpg) no-repeat center;
				margin-top: 13px;
			}
			.content-top-left img,.content-top-left a{vertical-align: bottom;}
			.content>.content-top-middle{
				width: 730px;
				height: 275px;
				background: url(img/xdtgg_frxz2_44.jpg) no-repeat center;
				/* 上方中间部分定位 */
				position: absolute;
				top:0px;
				left: 201px;
				border-radius: 20px;
			}
			.content-top-middle li{float: left;}
			.content-top-middle ul{
				position: absolute;
				top: 240px;
				right: 100px;
			}
			.content-top-middle ul li span{
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 10px;
				background-color: grey;
				text-align: center;
				margin-left: 8px;
			}
			.content-top-middle li:hover span{
				background-color: red;
				color: white;
			}
			.content>.content-top-right{
				width: 262px;
				height: 258px;
				border: gray 1px solid;
				border-radius: 8px;
				position: absolute;
				top:0px;
				left: 942px;
			}
			.content-top-right>h4,.content-top-right>p{
				margin-top: 30px;
				margin-left: 10px;
			}
			.content-top-right>img{
				margin-top: 12px;
				margin-left: 98px;
				margin-bottom: 12px;
			}
			.content-top-right>a:nth-of-type(1){margin-left: 16px;}
			.content-middle-left{
				width: 930px;
				height: 270px;
				border: gray 1px solid;
				margin-top: 27px;
				border-radius: 10px;
			}
			.content-middle-left>h4{
				border-bottom: gray 1px solid;
				height: 31px;
				line-height: 31px;
			}
			.content-middle-left>h4>span{
				color: rgb(125,8,8);
			}
			.content-middle-left>.content-middle-left-1{
				width: 420px;
				height: 190px;
				border: gray 1px solid;
				border-radius: 10px;
				margin-top: 20px;
				margin-left: 20px;
				margin-right: 20px;
				float: right;
				position: relative;
			}
			
			.content-middle-left-1>img{
				margin-top: 19px;
				margin-left: 9px;
				transition: all 1s;
			}
			.content-middle-left-1>img:hover{
				transform: translateX(-12px);
			}
			.content-middle-left-1&

最低0.47元/天解锁文章

大雄先生

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实例：开心网静态完整网页

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin: 0px; padding: 0px;} a{text-decoration: none;} li{list-style: none;} .wrap{ width: 1225p.
复制链接

扫一扫