w3c首页简单模仿html+css

ShaneKori

已于 2022-03-02 13:27:54 修改

阅读量878

点赞数 3

文章标签： css html 前端

于 2021-12-29 15:44:49 首次发布

本文链接：https://blog.csdn.net/m0_63091773/article/details/122217423

版权

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
	<style>
		body {
			width: 1903px;
			height: 2040px;
			text-align: center;
			margin: 0;
			padding: 0;
			border: 0;
			font-family: '微软雅黑'
		}
 
		/*a链接样式*/
 
		a {
			text-decoration: none;
		}
 
		/*内容窗口样式*/
 
		div#wrapper {
			width: 1239px;
			height: 2040px;
			/* background-color: skyblue; */
			margin: 0 auto;
			text-align: left;
		}
 
		/*表头样式*/
 
		#header {
			width: 1210px;
			height: 100px;
			/* background-color: #00BB00; */
			margin: 0 auto;
		}
 
		/*LOGO链接*/
 
		#wrapper #header a#logo {
			display: block;
			width: 500px;
			height: 100px;
			overflow: hidden;
			background: transparent url("image/bg.png") -3px -150px no-repeat;
			padding: 0;
			margin: 0;
			float: left;
		}
 
		/*LOGO链接触发*/
 
		#wrapper #header a#logo:hover {
			background: transparent url("image/bg.png") -3px -250px no-repeat;
		}
 
		/*表头右侧样式*/
 
		div#searchui {
			float: right;
			display: block;
			width: 308px;
			height: 100px;
			margin: 0;
			padding: 0;
			background-color: transparent;
		}
 
		/*表头右侧Text表格样式*/
 
		#searchui input.box {
			margin: 0;
			margin-top: 35px;
			width: 258px;
			height: 30px;
			font: 12px Verdana, Arial, Helvetica, sans-serif;
			border: 1px solid #ddd;
			background-color: #fff;
			padding: 0;
 
		}
 
		/*表头右侧button样式*/
 
		#searchui input.button {
			width: 30px;
			height: 30px;
			margin: 0;
			padding: 0;
			background-color: #AE4141;
			color: #fff;
			font: 12px Verdana, Arial, Helvetica, sans-serif;
			border: none
		}
 
		/*导航栏样式*/
 
		div#navfirst {
			width: 1210px;
			height: 48px;
			background-color: #66b3ff;
			margin: 0 0 0 12px;
		}
 
		/*取消项目符号样式*/
 
		div#navfirst ul#menu {
			list-style: none;
 
 
 
 
 
		}
 
		/*绝对定位*/
 
		div#navfirst ul#menu li {
			position: absolute;
			top: 0;
		}
 
		/*导航图*/
 
		div#navfirst ul#menu {
			background: transparent url("image/bg.png") top left no-repeat;
			height: 48px;
			width: 1210px;
			position: relative;
			margin: 0;
			padding: 0;
		}
 
		/*导航栏的li和a变化为块*/
 
		ul#menu li,
		ul#menu li a {
			display: block;
			height: 48px;
		}
 
 
 
		/*各尺寸*/
 
		#h {
			width: 166px;
			left: 0px;
		}
 
		#b {
			width: 191px;
			left: 166px;
		}
 
		#s {
			width: 175px;
			left: 357px;
		}
 
		#p {
			width: 198px;
			left: 532px;
		}
 
		#x {
			width: 113px;
			left: 730px;
		}
 
		#w {
			width: 197px;
			left: 843px;
		}
 
		#r {
			width: 170px;
			left: 1040px;
		}
 
		/*各hover*/
 
		#h a:hover {
			background: transparent url("image/bg.png") 0 -48px no-repeat;
		}
 
		#b a:hover {
			background: transparent url("image/bg.png") -166px -48px no-repeat;
		}
 
		#s a:hover {
			background: transparent url("image/bg.png") -357px -48px no-repeat;
		}
 
		#p a:hover {
			background: transparent url("image/bg.png") -532px -48px no-repeat;
		}
 
		#x a:hover {
			background: transparent url("