【52】静态网页开发(2)——常见技巧与方法

倏存

已于 2022-07-12 21:35:31 修改

阅读量510

点赞数 4

分类专栏：前端基础文章标签： css html 网页设计

于 2021-04-15 16:33:01 首次发布

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115720728

版权

前端基础专栏收录该内容

79 篇文章 7 订阅

订阅专栏

本篇目录：

文件结构搭建
<head>内配置

一、文件结构搭建

网站中会包含多个.html文件.css文件及图片等多媒体文件，我们需要使用不同的文件夹进行整理。搭建好即可，后期在编辑器中直接打开总文件。
文件中最基本的结构包括:
其中favicon.ico是网页标题中图标的固定命名；文件要求与index.html同级储存，使用时用link标签引用

二、`<head>`内的配置

默认<meta>标签;
title;
icon图标;
CSS引入（清除默认样式/公共样式/独有样式）;

css引入文件	命名习惯	怎么写
清除默认样式文件	`reset.css`	可以自己平时工作中积累，也可以从网上查询资源（搜索有很多开源的）
公共样式文件	`common.css`或者`模块名.css`	分为整体公共的和仅仅几个页面公共的，可以从设计图中观察找所有的公共样式，比如版心等布局方式
独有样式文件	一般与相对应的html文名一样，比如制作首页的独有样式，那就是`index.css`	顺序一般在最后，可以层叠掉公共样式，要注意选择器权重

<head>
   <meta charset="UTF-8">
   <title>该网页的标题</title>
   <link rel="shortcut icon" href="favicon.ico"  type="images/x-icon">
   <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--清除默认样式-->
   <link rel="stylesheet" type="text/css" href="css/common.css"><!--公共样式-->
   <link rel="stylesheet" type="text/css" href="css/index.css"> <!--首页独有样式-->
</head>