css+HTML：静态页面还原

最新推荐文章于 2024-05-15 20:09:31 发布
最新推荐文章于 2024-05-15 20:09:31 发布
阅读量182 收藏
点赞数 1
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63489869/article/details/125352219
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页还原</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.header{
				width:100%;
				height:491px;
			}
			.header_top{
				width:100%;
				height:142px;
				background-color: black;
			}
			.header_top .inner{
				width:994px;
				height:142px;
				margin: 0 auto;
				
			}
			.header_top .inner .logo{
				width:451px;
				height:142px;
				float: left;
			}
			.header_top .inner .logo h1{
				width:451px;
				height:142px;
				background-image: url(images/index5_02.png);

			}
			.header_top .inner .logo h1 a{
				width:451px;
				height:142px;
				display: block;
				text-indent: -1000px;

			}
			.header_top .inner .nav{
				width:480px;
				height:142px;
				float: right;
			}
			.header_top .inner .nav ul li{
				list-style: none; /*列表符号清楚*/
				float: left;
				font-size: 12px;
				/*行高等于容器高度时,文本垂直居中*/
				line-height: 142px;
				/*间距*/
				margin-right: 29px;
				
			}
			.header_top .inner .nav ul li a{
				text-decoration: none;
				color: #7f7f7f;
			}
			.header_top .inner .nav ul li .active{
				color:#cb2700 ;
			}
			.header_bot{
				width:100%;
				height:349px;
				background-image: url(images/index_02.png);
				
			}
			.header_bot .inner{
				width: 965px;
				height: 283px;
				margin: 0 auto;
				padding-top: 66px;
				padding-left: 29px;
				position: relative;  /*图片定位*/
			}
			.header_bot .inner h3{
				color: white;
				font-size: 24px;
				margin-bottom: 17px;
			}
			.header_bot .inner p{
				width: 588px;
				color: #7f7f7f;
				line-height: 25px;
				margin-bottom: 19px;
			}
			.header_bot .inner p a{
				color: #cb2800;
			}
			.header_bot .inner .more{
				display: block;
				width: 106px;
				height: 41px;
				color: white;
				background-image: url(images/more_1_03.png);
				text-decoration: none; /*无文本修饰*/
				line-height: 41px;
				text-align: center;
				font-size: 20p;
				border-radius: 4px;  /*圆角*/
				
			}
			.header_bot .inner img{
				/*图片位置特殊时，用绝对定位*/
				position: absolute;
				left: 654px;
				top: -30px;
			}
			.main{
				width:100%;
				height:896px;
				background-image: url(images/index_04_03.png);
			}
			.main .inner{
				width: 940px;
				height: 856px;
				margin: 0 auto;
				padding-top: 40px;
				padding-left: 29px;
				padding-right: 25px;
			}
			.main .inner .top{
				width: 940px;
				height: 180px;
				
			}
			.main .inner .top ul li{
				float:left;
				list-style: none;
				margin-right: 20px;
			}
			.main .inner .top ul .img3{
				margin-right: 0;
			}
			.main .inner .top ul li img{
				/*清楚图片自带的格式*/
				display: block;
			}

			.main .inner .left{
				width: 620px;
				height: 636px;
				float: left;
				padding-top:40px ;
			}
			.main .inner .left h3{
				font-size: 26px;
				color: white;
				margin-bottom: 20px;
			}
			.main .inner .left img{
				display: block;
				float:left;
			}
			.main .inner .left .one,.main .inner .left .two{
				width: 537px;
				float: right;  /*浮动不占位置*/
				color: #7F7F7F;
				line-height: 24px;
			}
			.main .inner .left .one{
				margin-bottom: 10px;
			}
			.main .inner .left .two{
				margin-bottom: 30px;
			}
			.main .inner .left .one span{
				color: white;
			}
			.main .inner .left .more{
				display: block;
				width: 106px;
				height: 41px;
				color: white;
				background-image: url(images/more_1_03.png);
				text-decoration: none; /*无文本修饰*/
				line-height: 41px;
				text-align: center;
				font-size: 20p;
				border-radius: 4px;  /*圆角*/
				/*清除浮动*/
				clear: both;
				margin-left: 82px;
				margin-bottom: 30px;
			}
			.main .inner .left .box{
				border-bottom: 1px dotted #3C3D3D;
				margin-bottom: 30px;
			}	
			.main .inner .left .img1{
				display: block;
				float:left;
			}
			.main .inner .left .img2{
				padding-left: 21px;
				margin-bottom: 30px;
				
			}
			.main .inner .left .three{
				width: 299px;
				float: right;  /*浮动不占位置*/
				color: #7F7F7F;
				line-height: 24px;
			}
			.main .inner .left .three span{
				color: white;
			}
			
			.main .inner .left .more1{
				display: block;
				width: 106px;
				height: 41px;
				color: white;
				background-image: url(images/more_1_03.png);
				text-decoration: none; /*无文本修饰*/
				line-height: 41px;
				text-align: center;
				font-size: 20p;
				border-radius: 4px;  /*圆角*/
				/*清除浮动*/
				clear: both;
				margin-left: 82px;
			}
			.main .inner .right{
				width: 300px;
				height: 636px;
				float: right;
				padding-top: 40px;
			}
			.main .inner .right h3{
				width: 300px;
				height: 48px;
				background-color: black;
				color: white;
				line-height: 48px;
				text-indent: 22px; /*文本缩进*/
				font-size: 24px;
				margin-bottom: 20px;
			}
			.main .inner .right ul li{
				width:280px;
				height:34px;
				margin-left:20px ;
				color: white;
				list-style: none;
				line-height: 34px;
				border-bottom: 1px dotted #3c3d3d;
				text-indent: 12px;
				font-style: italic;
				/*取消背景图的平铺*/
				background-repeat: no-repeat;
				background-image: url(images/sanjaio_07.png);
				background-position: left center; 
			}
			.main .inner .right ul .last{
				border-bottom: none;
				margin-bottom: 30px;  /*调整距离下个bottom的距离*/
			}
			.main .inner .right .bottom{
				width: 300px;
				height: 232px;
				background-color: black;	
			}
			.main .inner .right .bottom h5{
				text-indent: 20px;
				padding-top: 20px;
				color: white;
				font-size: 16px;
			}
			.main .inner .right .bottom img{
				padding-top: 14px;
				padding-left: 20px;
				display: block;
			}
			.main .inner .right .bottom .bont{
				padding-top: 22px;
				color: white;
				font-size: 15px;
				text-indent: 20px;
				font-weight: bold;
			}
			.main .inner .right .bottom .text{
				padding-top: 10px;
				color: #7f7f7f;
				font-size: 15px;
				text-indent: 20px;
				line-height: 24px;
			}
			.footer{
				width:100%;
				height:124px;
				background:black;
			}
			.footer .inner{
				width:100%;
				height: 124px;
				margin: 0 auto;
			}
			.footer .inner .text{
				width: 750px;
				height: 124px;
				float: left;
				padding-top: 38px;
			}
			.footer .inner .text .text1,.text2{
				font-size: 13px;
				color: #7f7f7f;
				text-align: center;
			}
			.footer .inner .text .text2{
				margin-bottom: 12px;
			}
			.footer .inner .text .text3{
				color: #cb2800;
			}
			.footer .inner ul li{
				list-style: none;
				float: left;
				margin-right: 10px;
				margin-top: 49px;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="header_top">
				<div class="inner">
					<div class="  logo">
						<!--logo用H1标签-->
						<h1><a href="index1.html">EaglesTroop</a></h1>
					</div>
					<div class="nav">
						<!--相同元素的并列排序，都是使用无序列表-->
						<ul>
							<li>
								<a href="#" class="active">About</a>
							</li>
							<li>
								<a href="#">Foudation</a>
							</li>
							<li>
								<a href="#">Program</a>
							</li>
							<li>
								<a href="#">Leaders</a>
							</li>           
							<li>
								<a href="#">Gallery</a>
							</li>
							<li>
								<a href="#">Contacts</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="header_bot">
				<div class="inner">
					<h3> Welcome to Eagles Boy Scount Troops!</h3>
					<p>
						There is no denying <a href="#">that the Internet</a> has brought us great convenience.
						 With <a href="#">the internet,</a> home can be a library, a school, an office, a place 
						 of a entertainment. Information on trains to discounts on goods, all at 
						 the of a keyboard.
					</p>
					<!--
                    	按钮一般用a标签
                    	特殊图片一般用定位去做
                    -->
					<a href="#" class="more">more</a>
					<img src="images/1_03.png" alt="" />
				</div>
			</div>
		</div>
		<div class="main">
			<div class="inner">
				<div class="top">
					<ul>
						<li>
							<img src="images/top_04.png" alt="" />
						</li>
						<li>
							<img src="images/top_2_03.png" alt="" />
						</li>
						<li class="img3">
							<img src="images/top_3_03.png" alt=""/>
						</li>
					</ul>
					
					
					
				</div>
				<div class="left">
					<h3>Next Event</h3>
					<img class="img" src="images/rili_06.png" />
					<p class="one">
						<span>Lorem ipsum dolor sit amet,consetetur sadipscing elitr</span>
						sed diam nonumy eirmod tempor Lorem ipsum dolor sit amet,consetetur sadipscing elitr
						Lorem ipsum dolor sit amet,consetetur sadipscing elitr Lorem ipsum dolor sit amet,consetetur sadipscing elitr
					</p>
					<p class="two">
						consetetur sadipscing elitrLorem ipsum dolor sit amet,consetetur sadipscing elitr Lorem ipsum dolor sit amet,
					</p>
					<a href="#" class="more">more</a>
					<div class="box">	
					</div>
					<img class="img1" src="images/riqi_12.png" />
					<img class="img2" src="images/boy_07.png" />
					<p class="three">
						<span>Lorem ipsum dolor sit amet,consetetur sadipscing elitr</span>
						sed diam nonumy eirmod tempor Lorem ipsum dolor sit amet,consetetur sadipscing elitr
						Lorem ipsum dolor sit amet,consetetur sadipscing elitr Lorem ipsum dolor sit amet,consetetur sadipscing elitr
					</p>
					<a href="#" class="more1">more</a>
				</div>
				 <!--  当class里面只有一个标签时，css中不用写.（点） 
				 	利用背景图来特殊列表
				 -->
				<div class="right">                     
					<h3>Our Adventures</h3>
					<ul>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Consetetur sadipscing eitr</li>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Consetetur sadipscing eitr </li>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Consetetur sadipscing eitr </li>
						<li class="last">Lorem ipsum dolor sit amet</li>
					</ul>
					<div class="bottom">
						<h5>Troop#345 Meetings</h5>
						<img src="images/jing_07.png" />
						<p class="bont">Monday 9:00-12:00</p>
						<p class="text">Lorem ipsum dolor sit amet </p>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="inner">
			<div class="text">
				<p class="text1">Eagles Troop @2012</p>
			    <p class="text2"><a href="#" class="text3">Website Template</a> by TemplateMonster.com</p>
			</div>
			<ul>
				<li> <img src="images/foot_03.png"  class="one"/></li>
			    <li> <img src="images/foot2_03.png"  class="two"/></li>
			    <li><img src="images/foot3_03.png"  class="three"/> </li>
			    <li><img src="images/foot4_03.png"  class="four"/></li>
			</ul>
			</div>
			</div>
			

		</div>
	</body>
</html>

 

正在努力加载...
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html + css 还原qq音乐静态页面，仿qq音乐HTML页面
04-06
qq音乐项目html静态页面，html + css 还原qq音乐静态页面
静态网页还原
Bai_CYK的博客
07-31 287
页面还原
Html5移动web还原PS设计布局（更好的了解html5页面，记录快捷操作，CSS关键技巧设置）
jimoluoluo1989的专栏
11-13 243
更好的了解html5页面，记录快捷操作，更快捷的编码 <!DOCTYPE html><!-- 文档声明--声明当前使用的是html第五个版本--html5 --> <html><!-- 浏览器只能职别出标签里的内容 html页面也叫标签页面--> <head><!-- 给浏览器进行设置 --> <meta charset="utf-8"><!-- 编码格式：utf-8通用格式 --> <
html保存当前状态,如何保存和还原HTML5 Canvas状态？
weixin_32503531的博客
05-31 284
HTML5 canvas提供了两种重要的方法来保存和恢复画布状态。每次调用save方法时，画布状态都存储在堆栈中，并且每次调用restore方法时，都会从堆栈返回上次保存的状态。序号方法和说明1save()此方法将当前状态压入堆栈。2restore()此方法在堆栈上弹出顶部状态，将上下文恢复到该状态。示例您可以尝试运行以下代码来保存和还原HTML5 Canvas-HTML>#test{wi...
HTML+CSS+Photoshop静态网页还原
Zhou_Chuang_Ya的博客
06-18 205
HTML+CSS+Photoshop静态网页还原
小米官网纯静态页面 html+css
11-26
小米官网纯静态页面 html+css实现 （没有商品详情页面，不是官网纯还原）当个期末作业还是可以的。
淘宝静态页面（HTML + CSS）
08-22
此项目是课余事件练习pc端页面编写能力的，仿淘宝页面，还原度十分逼真，大家可以利用起来里面有很多有用的练习内容大家可以尝试做成活得，省得自己写页面了！！
HTML+CSS静态页面设计
03-30
有三个页面，基本还原原页面效果。包括一个首页，一个人才招聘页面，一个人才研究会所页面。https://www.muji.com.cn/仿的该网页，适用于前端基础项目学习参考。
仿京东购物车网页页面.html
03-25
简单的网页还原，自己练习自写代码。实现了购物车静态页面的布局，样式等操作步骤。
HTML+css：页面还原
weixin_63489869的博客
06-21 485
HTML+css：页面还原
HTML,CSS,JS文件在浏览器中如何转换为页面？
qq_56392992的博客
11-20 964
HTML,CSS,JS文件在浏览器中如何转换为页面？ 1.构建DOM树：浏览器通过HTML解析器解析HTML文档，首先将标签转换成DOM树中的Dom节点（包括js生成的标签）生成DOM树。 2.构建样式表：CSS解析器解析对应的CSS样式文件信息（包括js生成的样式和外部CSS文件）， 将CSS转化为浏览器可以理解的样式表，并计算出DOM节点的样式。 3.构建布局树：从根节点递归调用，计算每一个元素的大小，位置等。并给出每个节点所应该在频幕上出现的精确坐标。 4.对布局树进行分层，生成分层树。 5.为每个图
HTML、CSS和JavaScript，是如何变成页面的？
weixin_43105356的博客
07-29 544
HTML、CSS和JavaScript，是如何变成页面的？ 通常，我们编写好 HTML、CSS、JavaScript 等文件，经过浏览器就会显示出漂亮的页面（如下图所示），但是你知道它们是如何转化成页面的吗？这背后的原理，估计很多人都答不上来。 从图中可以看出，左边输入的是 HTML、CSS、JavaScript 数据，这些数据经过中间渲染模块的处理，最终输出为屏幕上的像素。 1、渲染流程 浏览器渲染流程是一套复杂的机制，先给大家看看几个流程顺序。 第一种： 1、HTML的加载 HTML是一个网页的基础
响应式页面
lv_suri的博客
07-14 972
同一套静态页面代码，在不同的设备中展现出不同的效果，并且可以自适应
几款CSS3美化的表格样式
学习笔记
10-25 4536
几款CSS3美化的表格样式 table.table1{ font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-weight: bold; line-height: 1.4em; font-style: normal; border-collap
根据一个旅游网站的psd素材还原的静态页面
weixin_30537451的博客
12-20 156
自学web前端的html、css和jquery两个月，想检验下自己的学习成果，遂从网上下了个关于旅游网站的psd素材，自己照着素材还原网站的静态页面。 这是我制作好的静态页面的压缩文件：旅游网站首页.rar 也附上psd文件的截图和制作好的页面在浏览器的截图 这是做好的页面截图： ...
样式表单MIME 类型 “text/plain“ 不是 “text/css“问题处理
最新发布
jkzyx123的博客
05-15 262
样式表单www.*.com/static/js/*.css未载入，因为它的 MIME 类型 "text/plain" 不是 "text/css"。
给我写个静态的css+html静态页面
07-08
以下是一个简单的示例，演示如何使用 HTML 和 CSS 创建一个静态页面： ```html <!DOCTYPE html> <html> 静态页面示例 /* CSS 样式 */ body { font-family: Arial, sans-serif; background-color: #f2f2f2; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值