WEB前端--HTML(示例代码)
千次阅读

2021-06-14 02:31:14

HTML基础

一、基本概念

1、简介

HTML：网页超文本标记语言，不是编程语言，是描述性的标记语言。

2、基本结构

3、标记

：html开头，表示网页文档的开始

二、编写方法文档工具，如：记事本

IDE

三、浏览html文件

1、运行效果

如果用pycharm编写，不要直接运行，直接找到文件路径打开这个文件最快捷。因为pycharm直接运行是作为一个服务监听起来，比较慢。

2、看源文件

鼠标右键-->查看源文件

HTML基本标记

一、
标记head头部元素包括标题、基础信息和元信息等；
作用范围：整篇文档；

头信息中可以有：元信息、文档样式表和脚本等；

头部信息一般不会再网页上直接显示。

二、
标记用来说明页面的用途，显示在浏览器的标题栏中。
位置：
……之间
三、元信息

用来定义页面信息的说明、关键字和刷新等，它不用结束标记。属性有name和http-equiv。

1、设置页面关键字

供搜索引擎使用

2、设置页面说明

详细说明网页的内容

3、定义编辑工具

设置网页编辑工具名称

4、设置作者信息

5、设置网页文字及语言

6、设置网页定时跳转

7、icon

8、css文件

?9、js文件

四、主体标记

1、背景色 bgcolor

默认颜色是白色或灰白色，bgcolor自定义背景颜色。

2、背景图片 backgroud

3、文字颜色 text

4、链接文字属性 link

超链接的颜色默认是蓝色，访问后变成暗红色。可以通过link修改：

5、边距 margin

设置页面和浏览器边框的距离

五、注释标记

文字与段落标记

一、标题

1、h标记

~

，级别从最高到最低。

2、对齐方式 align

默认是左对齐，如更改，用align属性。left：左对齐

center：居中

right：右对齐

二、文本基本标记

标记用来控制字体、字号和颜色等属性。

1、字体属性 face

2、字号属性 size

3、字体颜色 color

三、文本格式化标记

1、字体加粗

2、斜体

3、上标 sup

如：平方、立方

sup是superscript的缩写，在数学公式、日常计算应用、书记文章注解等有广泛应用。可在文字的任何地方使用，允许嵌套。

结果：

4、下标sub

如：化学方程式

sub是subscript的缩写，在数学公式、化学方程式有广泛应用。

结果：

5、增大一级字号

6、小字号标记

7、下划线

四、段落标记

1、段落p

它没有结束标记
，下一个
开始意味着上一个段落结束。

2、换行br

相当于windows的“\r\n”和linux的"\n"换行

3、不换行nobr

五、水平线

1、插入水平线hr

2、水平线宽度width

3、水平线高度size

4、水平线去阴影noshade

布尔值，加上它，不会显示例题形状的水平线。浏览器默认是显示一条立体形状带阴影的水平线。

5、水平线颜色color

6、水平线排列 align

水平线默认是居中对齐，要想左对齐或右对齐，用align语法，该语法有3种：center：居中

left：左对齐

right：右对齐

六、其它标记

以&开头，以；结束。

1、插入空格

2、插入特殊符号“"

&&

>>

××

§&sect

使用列表

更多相关内容
web前端开发音乐播放器网页代码
2022-03-21 00:03:26

web前端开发音乐播放器网页代码

收起
《Web前端开发任务教程》案例源代码.zip
2021-09-25 14:05:31

整套资源不仅适合于正在学习和完善自我能力的教程

收起
Web前端开发详细教程, Web前端开发代码大全, 包含各种框架详解
2020-07-07 22:55:39

Web前端开发详细教程, Web前端开发代码大全, 包含各种框架详解

收起
web前端开发教材初级源代码.rar
2019-12-11 15:28:23

web前端开发教材初级源代码里面包括 01.HTML基础 02.CSS基础 03.JavaScript程序设计 04.HTML5和CSS3 05.jQuery 5个模块的代码

收起
web前端常用代码
2015-07-07 21:38:03

常用代码 eg.滚动() onmouseover=stop() scrollAmount=2> </marquee>

收起
JavaScript+jQuery交互式Web前端开发-源代码.zip
2021-04-16 15:40:14

此源代码，主要讲述如何将JavaScript和jQuery与html、css技术相结合，开发交互性强的网页，适用刚刚入门的小伙伴。

收起
web大作业制作网页代码 前端网页设计作业【带设计说明报告】
2021-06-29 09:43:50

web大作业制作网页代码 前端网页设计作业【带设计说明报告】 web网页大作业

收起
Web前端开发案例-源代码
2018-08-04 19:23:30

html 和css 学习源码容翔实、结构清晰、循序渐进，基例实战紧密结合，既可作为HTML5+CSS3初学者的入门，也适合作为中高级用户对新技术作进一步学习的参考

收起

css
Web前端开发实训项目源代码
2018-01-24 10:49:23

用bootstrap做的一个校园前端实训项目，有很强的参考价值。

收起
web前端开发流程图
2018-12-31 11:47:22

本资源是是以思维导图的形式展示了关于Web前端项目开发的流程图，很详细，需者自取。

收起
web前端开发（一）—HTML基础
万次阅读 多人点赞 2018-07-31 23:41:15
web前端简介什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单表单元素-文本、...
目录

web前端简介

什么是HTML？

HTML标签

HTML基本结构

HTML 段落标签

HTML 换行标签

HTML标题

HTML 水平线

HTML注释

HTML 标签

HTML 列表标签

HTML表格

HTML超链接

HTML 图片

HTML表单

表单元素-文本、密码框

表单元素-多行文本框

表单元素-选择框

表单元素-下拉选择框

表单元素-按钮

HTML-div

web前端简介

web前端开发是从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

什么是HTML？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML标签

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，标签对中的第一个标签是开始标签，第二个标签是结束标签

标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。

HTML基本结构

一个HTML文件是有自己固定的结构，如下所示：

<html>

<head>...</head>

    <body>...</body>

</html>

代码讲解：

1. <html></html>称为根标签，所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在之后会详细介绍。

3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

在head中设置网页标题和字符集编码

<head>

    <title>这里是标题</title>

    <meta charset="utf-8"/>

</head>

HTML 段落标签

如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。

<p>段落 </p>

<p>标签的默认样式，段前段后都会有空白。

HTML 换行标签

如果希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：

<p>This is<br/>a para<br/>graph with line breaks</p>

HTML标题

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
语法： <hx>标题文本</hx> (x为1-6)

题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。一个标题标签要独占一整行。

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。
```
<p>This is a paragraph</p>
```
```
 <hr />
```
```
<p>This is a paragraph</p>
```
```
<hr />
```
```
<p>This is a paragraph</p>
```
HTML注释

么是代码注释？代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

语法：



HTML <span>标签

<span>它的作用就是为了结合CSS设置单独的样式用的，本身没有任何效果。

HTML 列表标签

1）无序列表

在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，如下图所示。

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

语法：
```
<ul>
```
```
  <li>...</li>
```
```
  <li>... </li>
```
```
   ......
```
```
</ul>
```
2）有序列表

如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。
```
语法：
```
```
<ol>
```
```
   <li>信息</li>
```
```
   <li>信息</li>
```
```
   ......
```
```
</ol>
```
HTML表格

有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：

想在网页上展示上述表格效果可以使用以下代码：

创建表格的四个元素：

table、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

4、<th>…</th>：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数。

表格标题

<caption> 指定表格标题，它显示在表格上方。

     语法：

<table>

    <caption>标题文本</caption>

    <tr>

        <td>…</td>

        <td>…</td>

        …

    </tr>

…

</table>

合并单元格

有时候一些行和列需要合并，如下：

合并行使用rowspan属性，合并列使用功能colspan属性。

HTML超链接

使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法：

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

例如：

<a href="http://www.baidu.com" title="点击进入百度">click here!</a>

上面例子作用是单击click here!文字，网页链接到http://www.baidu.com这个网页。

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

如下代码：

<a href="目标网址" target="_blank">click here!</a>

HTML 图片

在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

举例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

HTML表单

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

<form   method="传送方式"   action="服务器文件">

讲解：

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ：数据传送的方式（get/post）。

<form    method="post"   action="save.php">

        <label for="username">用户名:</label>

        <input type="text" name="username" />

        <label for="pass">密码:</label>

        <input type="password" name="pass" />

</form>

注意:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、method : post/get

表单元素-文本、密码框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

语法：

<form>

   <input type="text/password" name="名称" value="文本" />

</form>

1、type：

当type="text"时，输入框为文本输入框;

当type="password"时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用)

举例：

<form>

姓名：

<input type="text" name="myName">

<br/>

密码：

<input type="password" name="pass">

</form>

在浏览器中显示的结果：

表单元素-多行文本框

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：
```
<textarea  rows="行数" cols="列数">文本</textarea>
```
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。

举例：
```
<form  method="post" action="save.php">
```
```
        <label>联系我们</label>
```
```
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
```
```
</form>
```
注意：代码中的<label>标签在本章5-9中讲解。

在浏览器中显示结果：

表单元素-选择框

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:

语法：
```
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
```
1、type:

   当 type="radio" 时，控件为单选框

   当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

如下面代码：

注意：代码中的<label>标签在本章 5-9 中有讲解。

在浏览器中显示的结果：

注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

表单元素-下拉选择框

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：

讲解：

1、value：

2、selected="selected"：

设置selected="selected"属性，则该选项就被默认选中。

在浏览器中显示的结果：

表单元素-按钮

在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：

<input   type="submit"   value="提交">

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

举例：

HTML-div

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

语法：

<div>…</div>

确定逻辑部分：

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。
收起
展开全文
HTML5
Web前端开发技术（第2版）储久良课后实验材料及源代码
2018-07-15 11:15:23

Web前端开发技术（第2版）储久良课后实验材料及源代码

收起

WEB前端开发简易网页制作

万次阅读 多人点赞 2020-04-04 12:54:27

效果 ...网页代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ ...

效果

在这里插入图片描述

代码如下：

网页代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin: 1%;
            min-height: 700px;
        }
        header{
            height: 180px;
            margin: 1%;
            font-family: 黑体;
            color: whitesmoke;
            font-size: 90px;
            text-align: center;
            border-radius: 10px 10px 10px 10px;
            border-color: whitesmoke;
            border-style: groove;
            line-height: 180px;
            overflow: hidden;
        }
        nav{
            color: whitesmoke;
            border-radius: 10px 10px 10px 10px;
            margin: 1%;
            width: 20%;
            height: 500px;
            display: block;
            float: left;
            scroll-margin: 0;
            border-color: whitesmoke;
            border-style: ridge;
        }
        .menu{
            font-size: 40px;
            height: 80px;
            overflow: hidden;
            transition: 1s;
            text-align: left;
        }
        .menu:hover{
            text-align: left;
            height:330px
        }
        nav ul li{
            list-style: none;
            fontsize: 30px;
            line-height: 200%;
        }
        iframe{
            margin: 1%;
            border-style: ridge;
            display: block;
            color: whitesmoke;
            border-radius: 10px 10px 10px 10px;
            float: right;
            height: 500px;
            scroll-margin: 0;
            width: 75%;
        }
        a{
            text-decoration: none;
        }
        a:link{
            color: white;
        }
        a:visited{
            color: darkred;
        }
        a:hover{
            color: coral;
        }
        footer{
            width:95%;
            text-align: center;
            color: white;
            fontsize: 30px;
        }
    </style>
</head>
<body background="bg.jpg" style="background-repeat: no-repeat;background-size: 100% 100%; background-attachment: fixed">
<header>
    EVE 星战前夜
</header>
<article>
    <nav>
        <ul>
            <li class="menu">游戏相关
                <ul>
                    <li><a href="data.html" target="choose">游戏资料</a> </li>
                    <li><a href="activity.html" target="choose">游戏活动</a> </li>
                    <li><a href="shop.html" target="choose">游戏商城</a> </li>
                </ul>
            </li>
            <hr style="width: 80%"/>
            <li class="menu">用户中心
                <ul>
                    <li><a href="login.html" target="choose">用户登录</a></li>
                    <li><a href="personal.html" target="choose">个人中心</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <iframe name="choose" id="choose">
    </iframe>
</article>
<footer>LXT版权所有 COPYRIGHT © 1998 - 2020 LXT. ALL RIGHTS RESERVED
</footer>
</body>
</html>

框架代码模板


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    header{
        color: red;
        text-align: left;
        font-size: 40px;
        height: 60px;
        margin: 10px;
        line-height: 60px;
        overflow: hidden;
    }
    nav{
        min-height: 380px;
        display: block;
        float: top;
        margin: 10px;
    }
    p{
        color: white;
        font-size: 100px;
        text-align: center;
    }
    a{
        text-decoration: none;
    }
    a:link{
        color: white;
    }
    a:visited{
        color: darkred;
    }
    a:hover{
        color: coral;
    }
    </style>
</head>
<body>
<header>
    <a href="1.html">资料1 |</a>
    <a href="2.html">资料2 |</a>
    <a href="3.html">资料3 |</a>
    <a href="4.html">资料4 |</a>
    <a href="5.html">资料5 |</a>
    <a href="6.html">资料6 |</a>
    <a href="7.html">资料7 |</a>
    <a href="8.html">资料8 </a>
</header>
<hr style="width: 100%"/>
<article>
    <nav>
        <p>资料内容</p>
    </nav>
</article>
<footer>
    这是尾部
</footer>
</body>
</html>

收起

展开全文

html5

【Web前端开发】第一课、Web前端的概述
2021-01-08 16:50:23

文章目录一、什么是Web前端开发二、网站与网页三、Web前端技术1. Web前端技术的构成有三个，HTML+CSS+JavaScript2. Web前端的技术标准一、什么是Web前端开发 Web：Web系统也叫www，或者称为万维网，以网站形式呈现...

收起
web前端开发技术储久良第三版答案
2018-12-09 18:35:06

web前端开发技术储久良第三版答案

收起

web前端简易网页制作

千次阅读 2022-04-06 18:26:56

简易旅游网，静态网页制作页面效果

简易旅游网，静态网页制作

页面效果

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css" </head>

    <body>
        <div class="header con">
            <div class="photo"></div>
            <div class="headerlist">
                <ul>
                    <li><a class="active">介绍</a></li>
                    <li><a>天气</a></li>
                    <li><a class="active">地图</a></li>
                    <li><a>交通</a></li>
                    <li><a class="active">周边酒店</a></li>
                    <li><a class="last">周边景点</a></li>
                </ul>
                <div class="serch">
                    <input type="text" placeholder="搜索">
                </div>
            </div>
        </div>
        <div class="nav">
            <ul class="con">
                <li>首页</li>
                <li>门票</li>
                <li>旅游点评</li>
                <li>景点大全</li>
                <li>资讯</li>
                <li>关于我们</li>
            </ul>
        </div>
        <div class="banner"></div>
        <div class="list con">
            <div class="item">
                <img src="../图片/OIP-C.jpg">
                <p>2022年的开端</p>
            </div>
            <div class="item">
                <img src="../图片/Default.jpg">
                <p>背起行囊去远方</p>
            </div>
            <div class="item">
                <img src="../图片/th.jpg">
                <p>电影中的世外桃源</p>
            </div>
        </div>
        <div class="footer">
            <div class="con">
                <ul>
                    <li>网站导航</li>
                    <li>旅游攻略</li>
                    <li>自由行</li>
                    <li>写游记</li>
                    <li>酒店预订</li>
                    <li>订火车票</li>
                    <li>旅游指南</li>
                    <li>APP下载</li>
                    <li>网站地图</li>
                    <li>联系我们</li>
                    <li>隐私政策</li>
                    <li>服务协议</li>
                </ul>
                <p>全球旅游服务售后热线<span>888888-888888</span></p>
            </div>
        </div>
    </body>

</html>

* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

.con {
    width: 966px;
    margin: 0 auto;
}

.header {
    height: 110px;
}

.photo {
    width: 165px;
    height: 110px;
    background: url(../图片/logo.png);
    float: left;
    background-position: center;
    background-size: 100% 100%;
}

.headerlist {
    float: right;
}

.headerlist ul {
    height: 44px;
    margin-top: 10px;
    line-height: 44px;
}

.headerlist li {
    float: left;
}

.headerlist a {
    border-right: 1px solid #b2c7ea;
    padding-left: 13px;
    padding-right: 13px;
    font-size: 13px;
    color: indigo;
}

.headerlist .last {
    border: 0;
    padding-right: 0;
}

.headerlist li .active {
    color: pink;
}

.serch {
    float: right;
    width: 234px;
    height: 28px;
    border: 1px solid indigo;
}

.serch input {
    border: 0;
    outline: none;
    width: 210px;
    float: left;
    height: 28px;
    padding-left: 14px;
}

.nav {
    height: 53px;
    line-height: 53px;
    border-top: 1px solid #edf4fc;
    background-color: #274964;
    color: aliceblue;
}

.nav li {
    float: left;
    font-size: 16px;
    padding-right: 76px;
}

.banner {
    height: 380px;
    background: url(../图片/Sunrise.jpg) no-repeat center;
    background-size: cover;
}

.list {
    height: 213px;
    margin-top: 51px;
    margin-bottom: 35px;
}

.item {
    height: 211px;
    width: 305px;
    border: 1px solid #cccccc;
    float: left;
    margin-right: 12px;
}

.item img {
    width: 305px;
    height: 165px;
    display: block;
}

.item p {
    height: 47px;
    padding-left: 28px;
    line-height: 47px;
    color: #274964;
}

.footer {
    height: 206px;
    border-top: 1px solid cornsilk;
    background-color: #cccccc;
}

.footer ul {
    height: 84px;
    padding-top: 30px;
    padding-bottom: 30px;
    line-height: 28px;
    border-bottom: 1px solid gray;
}

.footer ul li {
    width: 210px;
    padding-left: 30px;
    font-size: 12px;
    float: left;
    color: indigo;
}

.footer p {
    height: 61px;
    line-height: 61px;
    padding-left: 30px;
    font-size: 12px;
}

.footer p span {
    color: indigo;
}

收起

展开全文

html5 css

WEB前端-案例汇总
2017-11-08 00:48:26

WEB前端-案例汇总；史上最全的前端资源大汇总；适合初学者进阶，几乎涵盖前端开发所有案例。

收起
前端网页HTML
2018-12-08 16:21:04

前端网页开发代码，包含HTML和css等脚本语言。

收起
这7个web前端开发写代码软件，你过用几个？
万次阅读 2019-01-11 16:02:03

群里的朋友，经常问到web前端开发写代码用那个软件好？今天在这里统一回答下，主流的web前端开发写代码的软件有这些Webstorm、Vscode、Sublime Text、HBuilder、Dreamweaver、notepad++、editplus等，做前端这么多年...

收起
电商（淘宝）界面 web前端模板
2018-11-23 11:26:11

用Adobe Dreamweaver 打开然后根据需要改想要的风格就好了。css/html

收起
『总结』web前端开发常用代码整理
万次阅读 多人点赞 2018-05-21 17:07:35

IE条件注释条件注释简介IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。条件注释只能用于IE5以上，IE10以上不支持。如果你安装了多个IE，条件注释将会以...

收起
Web前端开发规范手册.pdf
2018-04-11 22:13:36

Web前端开发规范手册提高团队协作效率  便于前端开发以及后期优化维护  方便新进的成员快速上手  输出高质量的代码

收起
小米官网前端页面代码
2021-01-10 13:38:10

小米官网前端页面代码

收起
25个前端网页模版
2018-11-23 13:58:24

包含二十五款不同风格的后台管理模版方便前端开发 包含二十五款不同风格的后台管理模版方便前端开发

收起
Web前端开发用户登录代码_登录界面
千次阅读 2021-06-14 03:31:12

前端开发如何记录登录状态：登录界面@mediascreenand(max-width:768px){font-size:30px!important;}}@mediascreenand(max-width:420px){font-size:19px!important;}}@mediascreenand(max-width:400px){font-size:18...

收起
web前端开发基础入门篇（一）
千次阅读 2021-11-18 18:19:39

本篇将依次介绍HTML、W3C标准、网页的开发工具和浏览工具、客户端应用计术等基础知识。

收起
Web前端：HTML最强总结附详细代码
万次阅读 多人点赞 2021-03-26 23:25:48

HTML是HyperText Markup Language的简称，中文名称:超文本标记语言，它是一种用于创建网页的标准标记语言

收起
HTML期末大作业~web前端开发个人博客HTML整站模板~Web大学生网页成品 ~个人主页博客网页HTML设计制作...
千次阅读 2021-10-08 10:44:46

HTML期末大作业~ 学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页...

收起

html javascript bootstrap

~

，级别从最高到最低。

web前端开发音乐播放器网页代码

《Web前端开发任务教程》案例源代码.zip

Web前端开发详细教程, Web前端开发代码大全, 包含各种框架详解

web前端开发教材初级源代码.rar

web前端常用代码

JavaScript+jQuery交互式Web前端开发-源代码.zip

web大作业制作网页代码 前端网页设计作业【带设计说明报告】

Web前端开发案例-源代码

Web前端开发实训项目源代码

web前端开发流程图

web前端开发（一）—HTML基础

web前端简介

什么是HTML？

HTML标签

HTML基本结构

HTML 段落标签

HTML 换行标签

HTML标题

HTML 水平线

HTML注释

HTML <span>标签

HTML 列表标签

HTML表格

HTML超链接

HTML 图片

HTML表单

表单元素-文本、密码框

表单元素-多行文本框

表单元素-选择框

表单元素-下拉选择框

表单元素-按钮

HTML-div

Web前端开发技术（第2版）储久良课后实验材料及源代码

WEB前端开发简易网页制作

效果

代码如下：

【Web前端开发】第一课、Web前端的概述

web前端开发技术储久良第三版答案

web前端简易网页制作

WEB前端-案例汇总

前端网页HTML

这7个web前端开发写代码软件，你过用几个？

电商（淘宝）界面 web前端模板

『总结』web前端开发常用代码整理

Web前端开发规范手册.pdf

小米官网前端页面代码

25个前端网页模版

Web前端开发用户登录代码_登录界面

web前端开发基础入门篇（一）

Web前端：HTML最强总结 附详细代码

HTML期末大作业~web前端开发个人博客HTML整站模板~Web大学生网页成品 ~个人主页博客网页HTML设计制作...

web前端开发网页代码

web大作业制作网页代码前端网页设计作业【带设计说明报告】

Web前端：HTML最强总结附详细代码