html静态网页代码免费网站模板下载
作者:80网站模板发布时间:2021-04-19浏览量:27
精选企业建站模板,pb建站教程以及各类手机网站模板下载和企业网站模板分享,PbootCMS模板下载提供优质网站模板源码,仿站业务PbootCMS个人博客模板,PbootCMS企业建站,PbootCMS导航模板等

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>



————————————————

版权声明:本文为CSDN博主「柏舟1230」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/qq_28891989/article/details/80290000


文章标签:html    静态网页    代码    网站    模板    下载   
关 键  词:html静态网页代码下载,免费网站模板下载,建站程序
本文网址:http://www.80oo.cn/jishu/380.html如有转载请注明来源!
最新模板
(自适应手机版)净水设备类pbootcms网站模板

编号:x084     价格:50
(自适应手机版)站长导航类网站pb网站模板下载

编号:x085     价格:100
(手机版)蓝色通用企业wap手机网站源码

编号:x083     价格:50
建站知识
2021
06-01
网站语言需要配合一定的规则,大家在使用网站模板的时候,都需要提前知道网站的语言是什么,有助于使用这套模板,大家在看到别人网站的时候,不知道别人的网站是什么语言开发的,也想要做同样的网站的时候,教大家怎样看网站用什么语言开发的1. 根据 meta 信息判断不少的网站会在 meta 添加框架的信息,比如 Joomla、XOOPS、
2021
06-01
很多站长在建站的时候喜欢在底部加入网站运行时间统计,显得逼格特别上档次,今天技术小编就分享下,一个购买网站模板的用户,寻求这样一个代码加上运行时间代码。查看了网站底部模板代码插入的网上很多教程,貌似都只能精确到天,今天我们麦模板技术小编分享的代码是运行时间精确到年月日时分秒。网站底部模板运行时间代码
2021
05-13
如今建站是件很简单的事情,任何人都可以在不了解Web开发,设计或编码的情况下建立和设计网站。无论您是想为自己还是为企业创建网站,都可以使用正确的工具和资源轻松地做到这一点。本分步指南将帮助您从头开始创建网站,而无需花钱给自由职业者,代理商或网站建设者。您只需要1-2小时的空闲时间即可完成指南并建立网站。建
2021
05-11
一个网站的框架是跟搜索引擎蜘蛛抓取收录有关的。网站设计工作的内容 网站主页设计而大部分客户登录网站先浏览的便是主页。在网站设计时,首页布局不光仅仅是思考到美观方面,关键的问题是符合网站的营销策略,所以设计网站主页的工作量占据多半以上的时间。设计网站主页的工作量占据多半以上在设计网站之
服务热线