编写网页项目的基本步骤——Html
编写网页项目的基本步骤——Html
开工前准备工作
创建一个文件夹,命名为项目名字,然后在文件夹里再创建一个首页文件:index.html,一个装css的文件夹:css:文件夹内再创建两个文件一个装首页样式的css文件、一个装公共样式的css文件,一个装图片的文件夹:images,如果还需要js,再创建一个js文件夹。
编写网页
从头部开始
一个网页的头部,首先需要标题:title,标题是描述了一个网页的主题。如下图,以小米官网为例,网站标题还有个logo,这个logo是需要引进来,用一个标签。
<link rel="icon" href="favicon.ico" type="image/x-icon"
rel:声明是标题logo ,href:图片地址,type:说明是什么类型
<link ref="shortcut icon" href="favicon.ico" type=""image/x-icon"
这个是说明图标可以在收藏夹里展示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Ya8DtMc-1586167026377)(C:\Users\FL\AppData\Roaming\Typora\typora-user-images\image-20200406160431357.png)]
还需要meta包裹的内容
<meta name="keywords" content="小米..."
这个是关键字,说明一个网页内容包含的核心搜索关键词
<meta name="description" content="小米官网"
这个是网站信息描述,作为搜索结果中的页面内容摘要显示。
网站头部内容是给浏览器看的,便于搜索引擎可以搜索到网页。
<link rel="stylesheet" href="css/index.css"
链接外部css样式
<script src="js/index.js"></script>
链接外部js代码
网页主体
分析页面的结构,划分页面区域。如:确定版心宽度,后面布局以版心宽度为基础。
编写公共样式css文件
清除外边距:
body,p,ul,h1,h2,h3,h4,h5,h6,dl,dd {
margin: 0;
}
清除内边距:
ul,ol{
padding: 0;
}
清除a标签下划线
a{
text-decoration: none;
}
清除列表样式
li{
list-style: none;
}
左右浮动
.fl{
float: left;
}
.fr{
float: right;
}
公共样式不管拿到哪里都可以使用,所以专门放在一个文件里。
如有别的需要,继续添加。
阿里图标的使用
阿里图标是矢量图,放在网页里面不管是放大还是缩小,图片都不会失真。用于小图标的显示
阿里图标的地址: https://www.iconfont.cn/home/index
下载之后,解压到项目文件里
点开文件夹
demo_index.html是使用说明文件,点开之后会有详细使用的办法。
我选用字体样式的引入方法。
复制,这是css样式。
这里有个问题要注意,复制完之后的代码url是文件所在地址,如果放入了font文件下,需要将url里面的添加上"…font/"。
复制,这是css样式。
复制,在相应的页面html文件的内容里添加代码
如果还没发现出现可能是颜色和背景颜色一致了。
小图标的代码:
代码后面的分号不能去掉。
最后讲一个vh和vw
1vw=1%的视口宽度
1vh=1%的视口高度
所以100vw就是会横穿整个视口宽度,无论是你放大还是缩小整个页面的时候,它都会横占整个视口宽度。
width=100%只是占满当前页面的宽度
编写网页项目的基本步骤——Html相关推荐
- html5编写网页代码_freeCodeCamp.org的未来-从向世界传授语言到编写代码的5年经验...
html5编写网页代码 freeCodeCamp went live in October 2014. In the five years since, we've done quite a bit. ...
- idea创建包怎么让包分层_idea创建Spring项目的方法步骤(图文)
Spring介绍 Spring概述 Spring是一个开源框架,Spring是2003年兴起的轻量级java开发框架,由Rod Johnson 在其著作 Expert One-On-One J2EE ...
- node.js编写网页_为Node.js编写可扩展架构
node.js编写网页 by Zafar Saleem 通过Zafar Saleem 为Node.js编写可扩展架构 (Writing Scalable Architecture For Nodejs ...
- web端项目展开测试步骤
web端项目展开测试步骤: 1.功能测试 1.1链接测试 链接是Web应用系统的一个主要特征,它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段.链接测试可分为三个方面.首先,测试所有链接是 ...
- 怎么把html封装成桌面应用,如何将一个现有的Vue网页项目封装成electron桌面应用...
需求缘由 开发了很久的网页项目,领导突然想变成桌面应用,又要重写代码?no,no,no.不可能的.重写代码吃力不讨好,浪费时间,浪费精力.那么我们该怎么办呢? 幸好,electron是如此神奇,它提供 ...
- 如何将一个现有的Vue网页项目封装成electron桌面应用(转载)
简介 需求缘由 基础 步骤 总结 参考内容 需求缘由 开发了很久的网页项目,领导突然想变成桌面应用,又要重写代码?no,no,no.不可能的.重写代码吃力不讨好,浪费时间,浪费精力.那么我们该怎么办呢 ...
- 开发人员项目开发的步骤
开发人员项目开发的步骤 前言 项目开发目的分析与确定 在开发商将开发项目确定下来之后,需要与需求方进行讨论,确定需求方对于软件开发需要实现的目标及其具体需要的功能等等,并进行可⾏性分析(技术.成本.法 ...
- 面试中项目讲解的步骤
面试中项目讲解的步骤 目录 1.项目开发时间 2.项目背景 3.项目需求(功能模块) 4.开发技术 5.负责内容 6.项目收获 本文章只是对六个步骤进行解析,具体的需要自行补充内容. 1.项目开发时间 ...
- 在自己电脑上编写的项目如何让别人也能访问(内网穿透)?
小伙伴们通常都是在自己的电脑上编写自己的项目.在我们将项目开发完成后,如果要让别人也能访问,就是在浏览器输入一个域名网址后就能访问我们的项目.正常步骤为:要先购买一台云服务器,然后购买一个域名,接着将 ...
最新文章
- 【每日学习Mybatis中基础】trim标签使用
- Windows 软件管理命令行工具scoop介绍
- 千万PV级别WEB站点架构设计
- 双目测距测深度_TOF还能这么玩?荣耀V20黑科技升级变测距神器
- 消除ie上的:为了有利于保护安全性,IE已限制此网页运行可以访问计算机的脚本或 ActiveX 控件...
- linux 中禁用USB存储
- Springboot在线电影系统实战开发
- 中国互联网二十四年红黑史
- 姓名国别分类代码:PyTorch深度学习实践 - Lecture_13_RNN Classifier
- 一套新能源汽车动力电池热管理热仿真攻略
- 苹果电脑python编译器_Mac版-python环境配置(二):编译器pycharm下载安装
- 零基础带你玩转微信小程序--小程序的基础和安装
- 6.1. Principles of Usability
- guzzle php,windows系统下安装使用guzzle
- 997. 找到小镇的法官_小镇...
- inconsistent datatypes: expected DATE got NUMBER
- 欢迎访问互联网进化论官方网站
- 计算机处理器份额,2020 年电脑处理器排行榜单出炉
- 日复一日,年复一年,祝我們都好在新的一年.
- 第八届“泰迪杯”数据挖掘挑战赛的一点心得
热门文章
- 学习云计算前景如何?云计算在物联网中到底起到什么作用?
- Java 后端 - 腾讯云短信报错:AuthFailure.SecretIdNotFound message:The SecretId is not found, please ensure that
- UI设计中构图形式美的黄金法则!
- 最流行的编程语言JavaScript能做什么?
- 【Python】输入输出(11)
- 薛家计算机培训,薛家ug编程网络培训
- MIKE 21 教程 0.1 软件介绍与教学目录
- RxJava VS kotlin flow
- python之 下载及安装Anaconda
- 全网最细华为路由器mpls 虚拟专用网络intranet 组网配置