精华内容
下载资源
问答
  • 国外旅游行业大气又好看的静态网站源码,可作为前端模板学习使用,简洁大方,扁平炫酷,响应式设计。
  • HTML静态网页作业

    2019-02-15 00:39:31
    北邮信息网络应用基础HTML静态网页作业,下载后注意修改后使用(@-@)
  • html静态网页

    2014-12-11 12:13:39
    基于html+css写的一个小网页,只是样式,没有数据库连接。
  • 100多套HTML静态网页模板.zip,纯html界面100套,拿来即用
  • 主要介绍了tomcat部署简单的html静态网页的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 插入图片以及背景图片,网易云音乐音频的超链接、网易云官网的超链接、电子邮件超链接,插入视频,实现页面布局和登录表单的功能,代码可供初学者参考。
  • 静态网页包括主页、表单、表格、导航条、圆角、音视频、动态图片等子页,代码很基础,非常适合初学者。该静态网页包括主页、表单、表格、导航条、圆角、音视频、动态图片等子页
  • html静态网页设计 采用的外部样式来设计贵美商城网站
  • HTML静态网页项目

    2013-11-21 16:10:36
    一个纯HTML的项目,加js写的动态页面
  • 提供10个精美的Html模版,对html初学者有一定帮助与
  • HTML静态网页模板

    2016-08-29 15:54:07
    HTML静态网页模板,css+html开发层布局
  • HTML静态网页

    2011-11-17 20:50:34
    上海世博会静态网页,世博会的宣传片以及世博馆的介绍及展示
  • 静态网页模板html+css

    2017-12-05 19:28:03
    里面包含129套案例集合,html静态网页模板合集,html+css模板,可以选择自己喜欢的样式模板
  • 资料仅可参考如有不妥请联系本人改正或者删除 * 2020年08月13日 HTML静态网页的制作 资料仅可参考如有不妥请联系本人改正或者删除 * 2020年08月13日 HTML静态网页的制作 资料仅可参考如有不妥请联系本人改正或者删除...
  • 好看的静态网页,值得你拥有。好看的静态网页,值得你拥有。好看的静态网页,值得你拥有。好看的静态网页,值得你拥有。
  • html静态网页模板

    2019-04-22 22:57:00
    html静态模板资源大全,快速选择属于自己的模板,很多英文的高端大气上档次
  • 9500套HTML静态网页模板,总有你想要的,网站快速成型必备,有各类型的的网页模板,开发网站没有思路,不妨来看看吧。
  • HTML静态网页留言板ASP自动代码, 解压到你的网站根目录即可guestbook/index.html 本程序是html显示,提交,实现了很多人想要的“html留言板” 本程序没有做登陆验证,请用户自己添加
  • 静态html网页 代码

    2017-12-23 21:56:07
    html写的简单的小网页,代码图片都在文件夹里,点开可以直接运行
  • html 静态网页

    2011-11-30 21:20:59
    学校组织的一个网页设计大赛,拿出来晒晒,没事的可以看看,大学生要是交作业足够了。
  • HTML静态网页设计

    万次阅读 多人点赞 2018-05-13 22:03:39
    第一周:HTML静态网页1.HTML理论介绍及常用格式(1).HTML主体格式<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title...

    第一周:HTML写静态网页

    一、HTML理论介绍及常用格式

    1.HTML主体格式基本结构
    <!DOCTYPE html>
    <html>
    <head>
    <mate charset="utf-8"/>
    <title>标题</title>
    </head>
    <body>
    主要内容
    </body>
    </html>
    解说:整个HTML格式分为两大部分,一个是head部分,一个是body部分,其中head部分是用于书写网页样式,而body部分用于书写网页主题


    2.常用标签:

    标题标记

    <h1></h1>

    ...
    <h6></h6>

    <p></p>段落标签

    <b></b> <strong></strong>加粗  

    <i></i>倾斜

    <br/>换行


    &nbsp;空格

    <img src="" alt="" title=""/> 图片【gif,png,jpg】src:图片的链接地址 alt:图片加载失败的时候,在图片原本的位置显示的提示文本
    title:鼠标悬停的时候,显示的提示文本

    <a href="" target=""></a> 超链接  href:链接地址  target:打开新网页的打开方式,默认是在本页面打开

    <div></div> 盒子

    <span></span>

    3.css样式:

    内联样式: <标记 style="属性1:属性值1;属性2:属性值2;..."></标记>
    内部样式:在head中添加<style></style>

    4.选择器:
    (1)标签选择器:在<>中的标记都可以作为标签选择器
    语法:
    <style>
    标记{
    属性1:属性值1;
    属性2:属性值2;
                }
    </style>
    (2)class选择器:必须在style中进行声明,在标签中进行引用,声明的时候使用“.”进行声明,多个class选择器可以同时作用于一个标记。
    语法:
    <style>
    .color1{
    属性1:属性值1;
    属性2:属性值2;
                }
            .color2{
    属性1:属性值1;
    属性2:属性值2;
    }
    </style>
    <p class= "color1 color2">M</p>
    id选择器:必须在style中进行声明,在标签中进行引用,声明的时候使用“#”进行声明,他是唯一的,取名的时候不能使用关键字
    语法:
    <style>
    #color1{
    属性1:属性值1;
    属性2:属性值2;
    }
    #color2{
    属性1:属性值1;
    属性2:属性值2;
    }
    </style>
    <p id= "color1">M</p>

    :hover 伪类选择器,表示鼠标经过事件
    包含选择器:必须要有包含的关系
    比如:.box p
    <div class="box">
    <p></p>
    </div>


    (5)常用的css属性:
    width:宽  取值px/%
    height:高  取值px/%
    background-color 背景颜色
    font-size 字体大小
    font-weight:bold;字体加粗
    line-height  行高
    color 字体颜色
    text-align:center/left/right 文本居中/居左/居右
    border:边框宽度  边框颜色  边框样式; 边框
    box-showdow:水平阴影的位置,垂直阴影的位置,高斯模糊的距离,阴影的宽度,阴影的颜色以及透明度,阴影的样式
    border-radius:边框圆角
    transform:rotate(10deg) scale(1.2); 动画,旋转动画单位deg  缩放动画
    transtion:all 0.3s; 过渡动画,单位ms/s
    margin:外边距
    padding:内边距

    (6)元素类型
    块元素:

    特征:独占一行,可以设置宽高,一般情况下作为容器。
    若宽不指定的情况下默认与父元素宽度相等,若高不指定的情况下,则它的高度由其内容来决定。
    对于块元素,我们若指定了宽度,可以使用margin-left与margin-right取值为auto来进行水平居

    例如:div、p、h1~h6


    行内元素:
    特征:不独占一行,设置不上宽高。
    行内元素的大小由其内容大小来决定。
    例如:span、a


    行内块元素:隶属于行内元素,但是又具有块元素的特征。

    特征:既不独占一行,又能设置宽高。


    (7).元素类型转换
    display:block; 转为块元素
    display:inline; 转为行内元素
    display:inline-block;转为行内块元素


    (8)浮动
    float:left; 左浮动
    float:right; 右浮动
    作用:通过浮动,我们可以使块元素在同一行显示


    (9)列表
    无序列表

    <ul>
    <li></li>
    <li></li>
    ...
    </ul>


    有序列表

    type的取值:1、a、A、i、I

    <ol type="">
    <li></li>
    <li></li>

    </ol>


    自定义列表
    <dl>
    <dt>名词</dt>
    <dd>解释</dd>
    </dl>




    (10)css样式:
    外部样式的引用
    <link   href="外部样式文件的地址"></link>

    去掉下划线:
    text-decoration: none;

    去掉列表默认的样式:
    list-style: none;

    平移动画
    transform: translateX(20px) ;
    translateX:在x轴的平移,取值为正,向右平移,取值为负,向左平移
    translateY:在y轴的平移,取值为正,向下平移,取值为负,向上平移。


    (11)background:背景颜色  背景图片链接地址  背景图片平铺方式  背景图片水平方向的位置  背景图片垂直方向的位置
    参数二:url("")
    参数三:默认repeat,no-repeat 不平铺  repeat-x水平平铺   repeat-y垂直
    参数四:默认left,取值left/right/center/px/%
    参数五:默认top,取值top/bottom/center/px/%


    (12)position定位
    可以有四个方位进行定位:
    left、top、right、bottom

    绝对定位:position:absolute;
    特征:参照物是具有定位属性的父元素,不占据原本的位置(脱离文档流)
    相对定位:position:relative;
    特征:参照物是自己原本的位置,占据自己原本的位置(不脱离文档流),一般情况下作为包含块


    固定定位:position:fixed;
    特征:参照物当前窗口,它的位置与父元素无关,也与当前所在位置无关。


    (13)高度塌陷
    高度塌陷出现的契机:当没有给父元素高度,并且它里面所有的子元素都发生浮动的时候,会出现高度塌陷。
    why? 父元素没有指定高度,那么它的高度由其子元素来决定,当子元素都给了浮动,【浮动是脱离文档流的(不再占据自己原本的位置)】,
    父元素测量不到子元素的高度,高度显示为0
    解决:
    给父元素添加overflow:hidden;
    在子元素的最后添加一个空盒子,并且给这个空盒子添加clear:both;




    (14)opacity透明度
    他的取值[0,1] 0:全透明  1:不透明




    (15)display:none; 隐藏

    opacity:0; 与display:none;区别
    使用它们两个的时候,都可以实现不可见的功能,但是opacity:0的时候,这个元素它存在只是透明度发生变化
    ,而是display:none;这个元素不占据位置(移除)


    (16)选择器的权重

    “*”通配符权重为0000
    标签选择器的权重为0001
    class选择器的权重为0010
    id选择器的权重为0100
    内联样式的权重为1000
    伪类选择器的权重 0010
    群组选择器的权重等于它自己本身的权重
    包含选择器的权重为所有权重之和


    当属性出现重复的时候,会遵从权重高的那个,当权重相同的时候,后写的属性值会覆盖前面的那个




    (17)图片整合
    本质:就是对背景图片进行定位。
    使用的契机:背景图片大于盒子的时候。




    (18)锚链接
    定义锚点,使用id来定义 :<p id="back">锚点</p>
    定义锚链接,使用a标签:<a href="#back">锚链接</a>




    (19)overflow:hidden/scroll/auto
    hidden:超出显示区域的部分隐藏
    scroll:无论内容有木有超出显示区域,都会显示滚动条
    auto:当内容超出显示区域的时候,则显示滚动条,否则不显示。




    (20)子类选择器
    .nav li:nth-child(1),小括号中可以使用2n或者2n+1/2n+1,选中奇数或者是选中偶数个,
    通过1/2/3...可以选中.nav下面的第n个li。



    二、项目实战

    (一)一些粗浅的想法。

    1.拿到一个需求,第一步不是去按照自己的想法立刻去敲代码,首先应该做好规划,就以写静态网页为例,写规划的时间要远远小于你自己后期改代码的时间。

    2.添加注释。添加注释是很好的习惯,在刚写代码的时候,添加的注释要尽可能的详细,这会为后期的维护和项目的交接提供很好的便利,不然没人看的懂你的代码。

    3.变量名的选择。在取变量名的时候,千万不要使用拼音,因为拼音看多了,真的是接受不了。使用英文的变量名会好很多,见文知意。

    4.代码书写完,功能实现之后,要去优化自己的代码,让自己的代码更加简洁,可读性更强

    (二)书写项目导航栏(以CNDS为例)


    首先:对于这个导航栏分析一下,第一个cnds图标放在一个盒子里(logo),然后给文字信息一个盒子(content),所以CNDS和文字信息都在同一个盒子(nav)

    代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>CNDS</title>
    		<style type="text/css">
    			/*上面这部分是书写这个box盒子的格式,其中包括大小,背景颜色,以及位置*/
    			.nav{
    				width: 1000px;
    				height: 50px;
    				/*给出背景颜色,可以更好的判断盒子的位置,最后再滤除背景颜色*/
    				/*background: red;*/
    				margin: 20px 10px;
    			}
    			.logo{
    				width: 95px;
    				height: 40px;
    				/*margin-top: 10px;*/
    				float: left;
    				margin: 10px;
    			}
    			.logo img{
    				line-height: 40px;
    			}
    			.content{
    				width: 500px;
    				height: 35px;
    				margin: 5px;
    				/*background: bisque;*/
    				float: left;
    			}
    			.content ul{
    				/*去除列表格式*/
    				list-style: none;
    			}
    			.content li{
    				/*去除列表格式*/
    				list-style: none;
    				/*使列表排成一排*/
    				float: left;
    				/*上下间隔为0,左右间隔为5个像素*/
    				margin: 0 5px;
    				/*上下居中*/
    				line-height: 100%;
    			}
    			.content li a {
    				/*去除超链接的下划线*/
    				text-decoration: none;
    				/*超链接的字体颜色:黑色*/
    				color: black;
    			}
    			.content li a:hover{
    				/*使用hover动画,改变鼠标经过事件*/
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<!--给出一个大盒子nav,用于存放CNDSlogo和文本-->
    		<div class="nav">
    			<div class="logo">
    				<!--导入图片使用<img src="图片地址">-->
    				<img src="img/CNDS.png"/>
    			</div>
    			<div class="content">
    				<ul>
    					<li><a href="#">首先</a></li>
    					<li><a href="#">博客</a></li>
    					<li><a href="#">学院</a></li>
    					<li><a href="#">下载</a></li>
    					<li><a href="#">GitChat</a></li>
    					<li><a href="#">TinyMind</a></li>
    					<li><a href="#">商城</a></li>
    					<li><a href="#">VIP</a></li>
    					<li><a href="#">其他</a></li>
    				</ul>
    			</div>
    		</div>
    	</body>
    </html>


    (三)一个完整页面的设计

    1.功能需求

    (1)以设计稿为主,页面宽度可以参考下面网址,设计稿相对于下面网址做了小修改
    (2)总时间为4小时 首页和文章详情页面(如图)
    (3)详情页面的新闻详情不需要自己单独排版,随便复制内容 调整 行高 和字体大小就可以了
    (4)轮播先用一张图片代替  images文件夹已经提供
    (5)分享也用一张图片代替,images文件夹已经提供
    (6)页面的制作完全按照设计稿   文字 和图片可以随便复制,但是布局出来的效果要和设计稿一样

    原网站:http://yigujin.wang/

    2.代码实现

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>上机考试</title>
    		<style type="text/css">
    			.box{
    				width: 100%;
    				height: 100%;
    				/*background: red;*/	
    			}
    			.box .head{
    				width: 100%;
    				height: 105px;
    				background: white;
    			}
    			.head .logo{
    				width: 235px;
    				height: 65px;
    				background: blue;
    				float: left;
    				margin: 0 20px;
    				background: url(img/logo.jpg) no-repeat;
    			}
    			.head .nav{
    				width: 650px;
    				height: 65px;
    				/*background: blueviolet;*/
    				float: right;
    				margin: 0 200px;
    			}
    			.nav ul{
    				list-style: none;
    				text-align: center;
    				line-height: auto;
    			}
    			.nav li{
    				width: 75px;
    				height: 25px;
    				list-style: none;
    				float: left;
    				margin: 0 10px;
    				text-align: center;
    				line-height: 25px;
    			}
    			.nav li a{
    				text-decoration: none;
    				color: black;
    				font: 10px;
    				font-weight: bold;
    				display: block;
    			}
    			.nav li:nth-child(1):hover{
    				background: ;
    				
    			}
    			.nav li:nth-child(2):hover{
    				background: red;	
    			}
    			.nav li:nth-child(3):hover{
    				background: red;	
    			}
    			.nav li:nth-child(4):hover{
    				background: red;	
    			}
    			.nav li:nth-child(5):hover{
    				background: red;	
    			}
    			.content{
    				width: 1100px;
    				height: 2500px;
    				/*background: blue;*/
    				margin: 0 100px;
    				margin-bottom: 200px;
    			}
    			.main{
    				width: 800px;
    				height: 100%;
    				/*background: green;*/
    				float: left;
    				margin: 0 10px;
    			}
    			
    			.main .bg{
    				width:800px ;
    				height: 300px;
    				margin: 10px 0;
    				
    			}
    			.bg img{
    				width:100% ;
    				height: 100%;
    			}
    			.text1{
    				width: 100%;
    				height: 215px;
    				
    			}
    			.text1 .bg-sb{
    				width: 270px;
    				height: 200px;
    				margin: 2px 2px;
    				float: left;
    				
    			}
    			.bg-sb img{
    				width:100%;
    				height: 100%;
    			}
    			.text1 .essay{
    				width: 380px;
    				height: 200px;
    				float: left;
    				/*background: violet;*/
    				margin: 0 10px;
    			}
    			
    			.essay ul{
    				list-style: none;
    				text-align: left;
    			}
    			.essay li{
    				list-style: none;
    				
    			
    			}
    			.essay li:nth-child(1){
    				font-size: 18px;
    				font-weight: bold;
    			}
    			.essay li:nth-child(4){
    				font-size: 18px;
    				font-weight: bold;
    				margin: 10px ;
    			}
    			.essay li a{
    				display: block;
    				text-decoration: none;
    				font-size: 12px;
    				color: rgb(168,181,213);
    				float: left;
    				margin:  0 10px;	
    			}
    			.main .avd1{
    				width: 800px;
    				height: 200px;
    				/*background: hotpink;*/
    				
    			}
    			.adv1 img{
    				width: 800px;
    				height: 200px;
    			}
    			.consult{
    				width:240px;
    				height: 100%;
    				/*background: gold;*/
    				float: left;
    				margin: 0 20px;
    			}
    			.consult1{
    				width: 240px;
    				height: 85px;
    				/*background: yellowgreen;*/
    				margin: 10px 0;
    			}
    			.consult1 img{
    				width: 100%;
    				height: 85px;
    				margin: 10px 0;
    			}
    			.consult2{
    				width: 240px;
    				height: 480px;
    				/*background: darkgrey;*/
    				border: 1px solid white;
    			}
    			.consult2 p{
    				font-size: 18px;
    				font-weight: bold;
    				margin: 5px 5px;
    			}
    			.consult2 ul{
    				list-style: none;
    			}
    			.consult2 li{
    				width: 200px;
    				display: block;
    				list-style: none;
    				margin: 15px 0;
    				/*border: 1px dashed black;*/
    				border-bottom: 1px dashed black;
    				
    			}
    			.consult2 li a{
    				text-decoration: none;
    				color: gray;
    			}
    			.foot{
    				width: 100%;
    				height: 260px;
    				background: black;
    				margin-bottom: 20px;
    			}
    			.title{
    				width: 1100px;
    				height: 100px;
    				background: gray;
    				margin: 10px 30px;
    			}
    			.title ul{
    				list-style: none;
    			}
    			.title li{
    				list-style: none;
    				float: left;
    				margin: 0 10px;
    			}
    			.title li a{
    				text-decoration: none;
    				color: white;
    			}
    			.num{
    				width:1100px;
    				height: 50px;
    				margin: 100px 30px;
    			}
    			.num ul{
    				list-style: none;
    				
    			}
    			.num li{
    				list-style: none;
    				float: left;
    				margin: 0 10px;
    				color: white;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<div class="head">
    				<div class="logo">
    					
    				</div>
    				<div class="nav">
    					<ul>
    						<li  ><a style="color: red;"href="#">本站首页</a></li>
    						<li><a href="#">Nana主题</a></li>
    						<li><a href="#">随笔笔记</a></li>
    						<li><a href="#">技术文档</a></li>
    						<li><a href="#">手气不错</a></li>
    						<li><a style="background: rgb(192,30,34);color:white ;">搜索</a></li>
    					</ul>
    				</div>
    			</div>
    			<div class="content">
    				<div class="main">
    					<div class="bg">
    						<img src="img/banner.jpg"/>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic01.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic01.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic02.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic01.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic02.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是9折或85折的优惠,经过与老薛主机首席运营官Mars的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="adv1">
    						<img src="img/ad04.jpg"/>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic02.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic01.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic01.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic02.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="text1">
    						<div class="bg-sb">
    							<img src="img/news_pic02.jpg"/>
    						</div>
    						<div class="essay">
    							
    							<ul>
    								<li>台下一年功,台上10分钟</li>
    								<li>随笔笔记  :9小时前</li>
    								<li>老薛主机市面上大多数都是 9 折或 85 折的优惠,经过与老薛主机首席运营官 Mars 的沟通联系,终于获得老薛主机终</li>
    								<li><a href="">阅读26次</a></li>
    								<li><a href="">博主生活</a></li>
    								<li><a href="">工作生活</a></li>
    							</ul>
    
    							
    						</div>
    					</div>
    					<div class="adv2">
    						
    					</div>
    				</div>
    				<div class="consult">
    					<div class="consult1">
    						<img src="img/ad01.jpg"/>
    					</div>
    					<div class="consult2">
    						<p>最新文章</p>
    						<ul>
    							<li><a href="#">台上一分钟台下十年功之折腾HJK集团电话交换机</a></li>
    							<li><a href="#">wordPress调用指定tag标签下的所有文章制作专题文章</a></li>
    							<li><a href="#">帝国之双面佳人第六十章</a></li>
    							<li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>
    							<li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>
    						</ul>
    					</div>
    					<div class="consult1">
    						<img src="img/ad01.jpg"/>
    					</div>
    					<div class="consult2">
    						<p>最新文章</p>
    						<ul>
    							<li><a href="#">台上一分钟台下十年功之折腾HJK集团电话交换机</a></li>
    							<li><a href="#">wordPress调用指定tag标签下的所有文章制作专题文章</a></li>
    							<li><a href="#">帝国之双面佳人第六十章</a></li>
    							<li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>
    							<li><a href="#">wordPress新手入门教程之文章管理篇新手入门教程之文章管理篇</a></li>
    						</ul>
    					</div>
    					
    				</div>
    			</div>
    			<div class="foot">
    				<div class="title">
    					<ul>
    						<li>友情链接:</li>
    						<li><a href="#">百度</a></li>
    						<li><a href="#">博客</a></li>
    					</ul>
    				</div>
    				<div class="num">
    					<ul>
    						<li>copyright@zbpNana主题</li>
    						<li>桂ICP备1400471号</li>
    						<li>Theme by zbpNana </li>
    						<li>Powered by Z-BlogPHP</li>
    					</ul>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    

    结束语:第一次写博客,还有很多欠缺的地方,请各位大神多多指教。


    展开全文
  • HTML静态网页模板下载大全

    千次下载 热门讨论 2009-03-15 12:37:10
    HTML静态网页模板 HTML静态网页模板 HTML静态网页模板
  • html静态网页实例一(附完整代码)

    万次阅读 多人点赞 2020-10-31 13:13:57
    这个例子我们做一个游戏静态页面,自动跳转到我们想要玩的游戏或者视频等网站 大家也可以根绝我的代码,适当修改一些信息,但是套用我的这个模板请注释下来自我这,我也是初学者,辛辛苦苦写了几个小时,尊重下劳动...

    这个例子我们做一个游戏静态页面,自动跳转到我们想要玩的游戏或者视频等网站

    大家也可以根绝我的代码,适当修改一些信息,但是套用我的这个模板请注释下来自我这,我也是初学者,辛辛苦苦写了几个小时,尊重下劳动成果

    先看效果图:在这里插入图片描述我以张杰为背景图,里面是各种网站跳转,比如我点击:冰火人,他就会跳转到4399的冰火人游戏界面。
    在这里插入图片描述

    ok,上代码,我觉得比较简单,就没注释,希望能看懂:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>游戏界面</title>
    <link rel="stylesheet" href="css/nav.css">
     
    </head>
    <body>
    
      <div class="content">
      	<p style="font-size: 50px;
                color:greenyellow;
                background: black;
     			padding:25px;
     			margin: auto;
                height:150px;
                text-align:center;
                width: 1500px;">精美网站</details> </p>
      	<marquee width=100%  height=40 bgcolor=yellow>快来一起玩吧</marquee>
      	
      	<body background="img/zhangjie.jpg"
    	style=" background-repeat:no-repeat ;
    	background-size:100% 100%;
    	background-attachment: fixed;"
    	>
    
        <dl>
            <dt><a href="http://www.4339.com">小游戏</a></dt>
            <dd >
            <ul>
                <li>
                   <a href="http://www.4399.com/flash/209536.htm">冰火人</a>
                   <a href="http://p.37pk49.com/s/1/683/11722.html?uid=510412">女神联盟</a> 
                   <a href="http://www.4399.com/flash/213106.htm">植物大战僵尸</a> 
                   <a href="http://www.4399.com/flash/11487.htm#search3">山地自行车</a> 
                   <a href="http://www.4399.com/special/34.html">黄金矿工</a>
                   <a href="http://www.4399.com/flash/195270.htm">孙悟空大闹天宫</a>
                   <a href="http://www.4399.com/flash/21674.htm">前线战争OL</a>
                </li>
            </ul>
            </dd>
            <dd class="more"><a href="http://www.4339.com">更多游戏还有哦&gt;&gt;</a></dd>
            
        </dl>
        <dl class="s1">
            <dt><a href="http://www.baidu.com">游戏网站</a></dt>  
            <dd >
            <ul>
                <li><a href="http://www.4339.com">4339小游戏</a> 
                	<a href="http://www.6949.com">6949小游戏</a> 
                    <a href="http://3155.4355.cn/">3155小游戏</a>
                    <a href="http://www.4399i.net/">4399i小游戏</a>
                    <a href="http://www.3199.cn/?hmsr=1616">3199小游戏</a>
                    <a href="http://www.7k7k7.com">7k7k7小游戏</a>
                </li>
            </ul>
            </dd>
            <dd class="more"><a href="http://www.51.com/top/2/">这些网站还不够?&gt;&gt;</a>
            	
            </dd>
        </dl>
        <dl>
            <dt><a href="http://www.6655.com/1/yingshi.htm">[影视]</a></dt>
            <dd >
            <ul>
                <li><a href="http://www.iqiyi.com">爱奇艺高清</a>
                    <a href="http://www.tudou.com/">土豆网</a>
                    <a href="http://tv.sohu.com/movie/">搜狐电影</a>
                    <a href="http://tv.cntv.cn/">CNTV</a>
                    <a href="http://www.kktv1.com/c.shtml?c=52560">KK美女视频</a> <a
                    href="http://p.yiqifa.com/s?sid=a4df75c5719e9b11&amp;pid=184&amp;wid=410486&amp;vid=426282&amp;cid=7100&amp;lid=168915&amp;euid=&amp;vwid=">六间房</a>
                </li>
            </ul>
            </dd>
            <dd class="more"><a href="http://www.6655.com/1/yingshi.htm">更多&gt;&gt;</a>
            </dd>
        </dl>
        <dl class="s1">
            <dt><a href="http://www.6655.com/1/xiaoshuo.htm">[小说]</a></dt>
            <dd >
            <ul>
                <li><a href="http://www.qdmm.com/">起点女生网</a>
                    <a href="http://www.zongheng.com/?co=1616">纵横中文网</a>
                    <a href="http://p.yiqifa.com/c?s=3b2f15ba&amp;w=88243&amp;c=6805&amp;i=23342&amp;l=0&amp;e=&amp;t=http://www.zazhipu.com/">杂志铺</a>
                    <a href="http://www.xxsy.net/">潇湘书院</a>
                    <a href="http://www.qidian.com/Default.aspx">起点</a>
                    <a href="http://www.xs8.cn/">言情小说吧</a></li>
            </ul>
            </dd>
            <dd class="more"><a href="http://www.6655.com/1/xiaoshuo.htm">更多&gt;&gt;</a>
            </dd>
        </dl>
        <dl>
            <dt><a href="http://www.6655.com/1/youxi.htm">[游戏]</a></dt>
            <dd >
            <ul>
                <li><a href="http://365.uc108.com/">同城游棋牌</a>
                    <a href="http://games.sina.com.cn/">新浪游戏</a>
                    <a href="http://p.yiqifa.com/c?s=ae39a645&amp;w=154815&amp;c=6756&amp;i=23904&amp;l=0&amp;e=&amp;t=http://www.5173.com/">5173游戏交易</a>
                    <a href="http://www.17173.com/">17173游戏</a>
                    <a href="http://www.duowan.com/">多玩游戏</a>
                </li>
            </ul>
            </dd>
            <dd class="more"><a href="http://www.6655.com/1/youxi.htm">更多&gt;&gt;</a>
            </dd>
        </dl>
        <dl class="s1">
            <dt><a href="http://www.6655.com/1/yinyue.htm">[音乐]</a></dt>
            <dd >
            <ul>
                <li><a href="http://www.1ting.com">一听音乐网</a>
                    <a href="http://mp3.sogou.com/">搜狗音乐</a>
                    <a href="http://music.baidu.com">百度mp3</a>
                    <a href="http://www.yinyuetai.com/">音悦台MV</a>
                    <a href="http://www.iqiyi.com/zongyi/superboy.html">快乐男声</a>
                </li>
            </ul>
            </dd>
            <dd class="more"><a href="http://www.6655.com/1/yinyue.htm">更多&gt;&gt;</a>
            </dd>
        </dl>
        <dl>
            <dt><a href="http://www.6655.com/1/jiaoyou.htm">[交友]</a></dt>
            <dd >
            <ul>
                <li><a
                    href="http://reg.jiayuan.com/st/?id=421710&amp;url=http://reg.jiayuan.com">世纪佳缘</a>
                <a href="http://www.zhiji.com/?ad=1616" class="green">同城交友网</a>
                <a   href="http://www.zhenai.com/901934.html">珍爱网</a><a
                <a    href="http://www.9see.com/go123?from=120_1">美女秀场</a>
                 <a   href="http://www.iqiyi.com/zongyi/fcwr.html">非诚勿扰</a>
                </li>
            </ul>
            </dd>
            <dd class="more"><a href="http://www.6655.com/1/jiaoyou.htm">更多&gt;&gt;</a>
            </dd>
        </dl>
        <dl class="s1">
            <dt><a href="http://www.6655.com/1/lvyou.htm">[旅游]</a></dt>
            <dd >
            <ul>
                <li>
                   <a  href="http://vacations.ctrip.com/?allianceid=1091&amp;sid=1227&amp;ouid=">携程旅游</a>
                   <a  href="http://www.tuniu.com/?p=1627&amp;cmpid=mkt_08005301&amp;utm_campaign=daohang&amp;utm_source=1616.net&amp;utm_medium=textlink"</a>                class="green">途牛旅游网</a><a href="http://www.zoutu.com/">云南旅游</a><a
                   <a  href="http://hotel.elong.com/?banid=1616">艺龙订酒店</a> 
                   <a  href="http://www.qunar.com/?ex_track=auto_4f4dd298">去哪儿旅游</a>
                   <a  href="http://detail.tmall.com/item.htm?id=21737099723">迪士尼门票</a> 
                   <a  href="http://www.17u.cn/FlightQuery.aspx#refid=14748221">同程机票</a>
                </li>
            </ul>
            </dd>
            <dd class="more"><a href="http://www.6655.com/1/lvyou.htm">更多&gt;&gt;</a>
            </dd>
        </dl>
         
    </div>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("dl:odd").css("background","#ececec")
        })
    </script>
    
    <canvas id='canvas' width="600" height="600"></canvas>
    
    </body>
    </html>
    

    大家直接复制代码是实现不了效果的,因为还有图片没有加载,自己百度搜一下其他的好看的图片,替换就好了。我把我现在这个项目发到自己资源,包括照片,不太会的,可以直接下载我的资源也可以。

    转载请带上本人网页

    展开全文
  • HTML静态网页练习例子

    千次阅读 2020-03-14 21:52:24
    HTML静态网页 HTML网页 下面展示代码 HTML。 1.background:背景函数 2.Style="color : "颜色 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title&...

    HTML静态网页

    HTML网页

    下面展示代码 HTML
    1.background:背景函数
    2.Style="color : "颜色

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    
    <body background="bj.jpg">
    <h1 style="color: aliceblue">我的空间</h1>
    <h4 style="color:#1FF798"><a href="#">主页</a><a href="#"> 爱好</a><a href="#"> 个人展示</a><a href="#"> 教育</a><a href="#">  生活轨迹</a><a href="#">  联系我</a></h4>
    <hr>
    <p style="color: #A2E7B9">爱好1:我喜欢散步,这是个很棒的活动,能让我沉稳平静,思维专注</p>
    <p style="color: #A2E7B9">爱好2:我喜欢旅游,让自己的思维和身体都在路上,认识生活的更多美好</p>
    <p style="color: #A2E7B9">爱好3:我热爱电子游戏,每当探索到一个新的产品,新的系统操作方式,新的程序,都会让我感到新奇和兴奋</p>
    <p style="color: #A2E7B9">爱好4:我爱好时尚,</p>
    <p style="color: #A2E7B9">爱好5:我喜欢金钱,因为他可以让我买到我喜欢的东西</p>
    </body>
    </html>
    
    

    背景图片
    背景图片

    特点:

    简易性:超级文本标记语言 版本升级采用 超集方式,从而更加灵活方便。

    可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加 标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。

    平台无关性:虽然 个人计算机大行其道,但使用 MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是 万维网( WWW)盛行的另一个原因。

    通用性:另外, HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器

    效果图

    效果图

    如有不好请多多包涵

    如有版权问题请联系作者

    展开全文
  • html静态网页实例二(附完整代码)

    万次阅读 多人点赞 2020-10-31 13:27:01
    这个例子是一个旅游网页,参考别人模板修改的 效果图: 参考代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®...

    这个例子是一个旅游网页,参考别人模板修改的

    效果图:在这里插入图片描述

    参考代码:

    
    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
    	<style>
    		#mTitle{
    			background:url(xinjiang/button1.jpg) repeat-x;
    			height:28px;
    			border-bottom:1px solid #A56AFF;
    		}
    		body{
    			background-color:#A56AFF;
    		}
    		a{
    			text-decoration:none;
    			padding-left:12px;
    		}
    		#mWeather{
    			background-color:#5EA6EB;
    			line-height:23px;
    			font-size:16px;
    		}
    		#mWeather p{
    			background:url(xinjiang/weather.jpg) no-repeat;
    			background-size:200px 41px;
    			line-height:40px;
    			font-size:25px;
    			padding-left:65px;
    			margin:0px;
    		}
    		.mTui{
    			background-color:#5EA6EB;
    			text-align:center;
    		}
    		.mBg{
    			background:url(xinjiang/button1.jpg) repeat-x;
    		}
    		.mIcon{
    			background:url(xinjiang/icon2.gif) no-repeat left bottom;
    			padding-left:10px;
    			font-size:20px;
    		}
    		.mImg{
    			padding-left:11px;
    		}
    		#mLine{
    			line-height:25px;
    		}
    		ul{
    			list-style:none;
    			padding:0px;
    			margin:0px;
    			background-color:#5EA6EB;
    		}
    		ul li{
    			padding-left:10px;
    			line-height:26px;
    			border-bottom:1px dashed;
    		}
    		#mBottom{
    			background-color:#5EA6EB;
    			text-align:center;
    			border-top:1px solid #A56AFF;
    		}
    		#mBottom span{
    			color:white;
    			
    		}
    		#mCenter{
    			border-left:1px solid #A56AFF;
    			width:410px;
    		}
    		#mRight{
    			border-left:1px solid #A56AFF;
    			width:150px;
    		}
    	</style>
     </head>
     <body>
    	<table align="center" bgcolor="white"> 
    		<tr><td colspan="3"><img src="xinjiang/banner.jpg"></td></tr>
    		<tr><td colspan="3" id="mTitle">
    				<a href="#">首页</a>
    				<a href="#">走进民族</a>
    				<a href="#">民族概况</a>
    				<a href="#">吃在新疆</a>
    				<a href="#">路线选择</a>
    				<a href="#">特色线路</a>
    				<a href="#">户外探险</a>
    				<a href="#">精彩游记</a>
    				<a href="#">付款方式</a>
    				<a href="#">给我留言</a>
    			</td>
    		</tr>
    		<tr>
    			<td>
    				<table>
    					<tr><td id="mWeather">
    							<p>天气查询</p>
    							乌鲁木齐 晴转阴25℃-35℃<br/>
    							喀什 阵雨转多云25℃-32℃<br/>
    							吐鲁番 多云转阴20℃-28℃<br/>
    							库尔勒 阵雨转阴21℃-28℃<br/>
    							卡拉玛依 雷阵雨26℃-30℃
    						</td>
    					</tr>
    					<tr class="mBg"><td class="mIcon">今日推荐</td></tr>
    					<tr class="mTui">
    						<td><img src="xinjiang/tuijian1.jpg"></br>香木河</td>
    					</tr>
    					<tr class="mTui">
    						<td><img src="xinjiang/tuijian2.jpg"></br>白巴哈</td>
    					</tr>
    					<tr class="mTui">
    						<td><img src="xinjiang/tuijian3.jpg"></br>乔戈里峰</td>
    					</tr>
    					
    				</table>
    			</td>
    			<td id="mCenter" >
    				<table align="center">
    					<tr><td><img src="xinjiang/ghost.jpg"></td></tr>
    					<tr><td><img src="xinjiang/picture_h1.gif"></td></tr>
    					<tr><td>
    							<img class="mImg" src="xinjiang/beauty1.jpg">
    							<img class="mImg" src="xinjiang/beauty2.jpg">
    							<img class="mImg" src="xinjiang/beauty3.jpg">
    							<img class="mImg" src="xinjiang/beauty4.jpg">
    						</td>
    					</tr>
    					<tr><td><img src="xinjiang/route_h1.gif"></td></tr>
    					<tr><td id="mLine">
    							<img src="xinjiang/icon1.gif">&nbsp;&nbsp;果子沟—赛里木湖—那拉提大草原—霍尔果斯口岸</br>
    							<img src="xinjiang/icon1.gif">&nbsp;&nbsp;喀纳斯—禾木河—克拉玛依—乌伦古湖—喀纳斯</br>
    							<img src="xinjiang/icon1.gif">&nbsp;&nbsp;乌鲁木齐—奎屯—乔尔玛—那拉提—巴音布鲁克</br>
    							<img src="xinjiang/icon1.gif">&nbsp;&nbsp;库尔勒—博斯腾湖—将军戈壁—天池</br>
    						</td>
    					</tr>
    				</table>
    			</td>
    			<td id="mRight">
    				<table>
    					<tr class="mBg"><td class="mIcon">新疆地图</td></tr>
    					<tr><td><img src="xinjiang/map1.jpg"></td></tr>
    					<tr><td><img src="xinjiang/map2.jpg"></td></tr>
    					<tr class="mBg"><td class="mIcon">特色美食</td></tr>
    					<tr><td>
    							<ul>
    								<li>大盘鸡</li>
    								<li>窝窝馕</li>
    								<li>芝麻馕</li>
    								<li>哈密瓜</li>
    							</ul>
    						</td>
    					</tr>
    					<tr class="mBg"><td class="mIcon">新疆住宿</td></tr>
    					<tr><td>
    							<ul>
    								<li>马航国际酒店</li>
    								<li>亚中亚大酒店</li>
    								<li>银都大饭店</li>
    								<li>如意大饭店</li>
    								<li>好友大酒店</li>
    								<li>王朝宾馆</li>
    								<li>神望宾馆</li>
    							</ul>
    						</td>
    					</tr>
    				</table>
    			</td>
    		</tr>
    		<tr><td colspan="3" id="mBottom">网页爱好者&copy;版权所有 2020-2025<br/>
    				联系我们<span>2835809579@qq.com</span></td></tr>
    	</table>
     </body>
    </html>
    
    

    本人QQ已经在代码最下面,本人大二,编程新手喜欢编程的,可以跟我交流

    展开全文
  • 两个HTML静态网页

    2011-03-20 22:11:33
    两个服装类静态网页关于两个服装类静态网页两个服装类静态网页关于两个服装类静态网页
  • Html+css静态网页制作

    2018-01-09 18:34:52
    html静态网页制作,购物页面,有插入音乐视频等,物美价廉!!!
  • 静态网页包括主页、表单、表格、导航条、圆角、音视频、动态图片等子页,代码很基础,已经调试成功,方便初学者参考。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 185,144
精华内容 74,057
关键字:

html静态网页