整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

用HTML怎么制作网页呢?

 用HTML怎么制作网页呢?静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计 ‍ ,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的。

  一、网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

  二、网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

  三、网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

  四、网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

  五、网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。 其中: (1) html文件包含:其中index.html是首页、其他html为二级页面; (2) css文件包含:css全部页面样式,文字滚动, 图片放大等; (3) js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。

前话

Hello,小伙伴们大家新年好,本篇是今年第一篇,也筹划许久,本篇主题为美食,系html5网站模板,div加css布局,网页资源分开存储以便管理,网页结构清晰简单,希望本篇能够助力各位萌新

主题

《周末の食记》

美食能抚平一切的忧伤

简介

文件结构包含了css、fonts、images、js和html,运用html5技术,包括nav标签、header标签和footer标签等,采用bootstrap进行布局

图摘

目录

编码

<div class="ftco-46-row d-flex flex-column flex-lg-row">
    <div class="ftco-46-text ftco-46-arrow-right">
        <h4 class="ftco-46-subheading">Food</h4>
        <h3 class="ftco-46-heading">扬州炒饭</h3>
        <p class="mb-5">一碗不一样的炒饭,让你难以拒绝.</p>
        <p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
        </div>
        <div class="ftco-46-image" style="background-image: url(images/img_3.jpg);"></div>
        <div class="ftco-46-text ftco-46-arrow-up">
        <h4 class="ftco-46-subheading">Food</h4>
        <h3 class="ftco-46-heading">蓝莓酸奶冰激凌</h3>
        <p class="mb-5">触动您的心灵,令人甜蜜至极,难以忘怀,心旷神怡的味觉享受,精选一级的夏威夷果仁,入口丝滑</p>
        <p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
    </div>
</div>

结语

如果人的一生总的能量是固定的话,那就节省开支,延长时间,喜怒哀乐不溢于言表,不困于心智,保持乐观心态

本的网页结构

网页基本结构:

<html>
	<head>
        <title>这是网页标题</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <meta name="keywords" content="这是关键字"/>
        <link href="css文件路径" rel="stylesheet"/>
        <link rel="shortcut icon" href="favicon.ico"/>
    </head>
    <body>
        
    </body>
</html>

常见网页标签:

标签

含义

常用属性

a

超链接

href / target / title

img

图片

src / alt / title / width / heiht

h1-h6



p



br



hr



em



strong



i



span



div



CSS美化网页

css样式使用方式

  1. 行内(内敛)样式
  2. 内部样式
  3. 外部样式

css基本选择器

  1. ID - > #
  2. CLASS -> .
  3. 标签 -> 标签名

优先级

  1. ID > CLASS > 标签 (在同一个元素上的ID , CLASS比较)
  2. 行内 > 内部> 外部
  • *important 最高级别
  • 高级选择器:

    1. 并集选择器
    2. 交集选择器
    3. 后代选择器
    4. 子元素选择器
    5. 兄弟选择器
    6. 属性选择器

    前提: 非继承属性 > 继承属性(除此条件外,基本可以适应以下计算规则)

    ID

    CLASS

    标签

    100

    10

    1

    文本样式

    样式

    含义

    属性值

    字体样式

    列表与表格

    表单

    盒子模型

    浮动

    定位