【京东商城首页实战1】建立站点及准备工作

最新推荐文章于 2021-02-20 19:13:02 发布

编程大学姐远春儿

最新推荐文章于 2021-02-20 19:13:02 发布

阅读量5.8k

点赞数 12

分类专栏：前端手把手实战前端实战文章标签： css 京东商城 css样式初始化添加网站图标

本文链接：https://blog.csdn.net/sinat_34647836/article/details/69936983

版权

前端实战同时被 2 个专栏收录

13 篇文章 260 订阅

订阅专栏

前端手把手实战

12 篇文章 6 订阅

订阅专栏

今天，开始做京东商城的首页。

一、建立站点

首先要做的就是建立站点，所谓的站点其实就是建保存HTML、css、图片或视频等文件的一个文件夹。如图：

这里写图片描述

这里写图片描述
在css文件夹建立base.css文件和index.css文件。

这里写图片描述

二、css样式初始化

因为css元素一般都自带默认样式，不同浏览器默认值不同，所以一般所有网站开发之前都会进行样式初始化，初始化的目的就是清除默认样式，并设置通用样式，避免过多重复样式，这样提高了编码质量。初始化的弊端是会对SEO造成一些影响。
下面贴上京东初始化代码，并一一解释：

@charset "UTF-8";
/*设置字符集*/
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
}
/*清除默认padding和margin*/
fieldset, img, input, button {
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}
/*清除表单类标签默认样式*/
ul, ol {
    list-style: none;
}
/*清除列表小圆点或序号*/
input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun", "宋体";
}
/*清除文本框上下padding，并设置字体*/

select, input {
    vertical-align: middle;
}
/*设置下拉列表和表单的垂直对齐方式。*/
select, input, textarea {
    font-size: 12px;
    margin: 0;
}
/*设置上述标签的字体大小和并清除margin*/
textarea {
    resize: none;
}
/*固定文本框大小，用户无法调整元素的尺寸。*/
/*防止拖动*/
img {
    border: 0;
    vertical-align: middle;
}
/*  设置图片的垂直方式，可以去掉图片底侧默认的3像素空白缝隙*/
table {
    border-collapse: collapse;
}
/*合并表格边框*/
body {
    font: 12px/150% Arial, Verdana, "\5b8b\4f53";
    color: #666;
    background: #fff
}
/*字号 行高 字体 合写。 Arial, Verdana指的是宋体，"\5b8b\4f53" 是宋体的另一种表示方式，工作中用得比较多*/
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /*IE/7/6兼容*/
}
/*清除浮动的方式，双伪元素清除浮动*/
a {
    color: #666;
    text-decoration: none;
}
/*清除a下划线，并设置字体颜色*/
a:hover {
    color: #C81623;
}
/*设置悬浮时的颜色*/
h1, h2, h3, h4, h5, h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}
/*设置标题元素的文本修饰和字号*/
s, i, em {
    font-style: normal;
    text-decoration: none;
}
/*用作css钩子，里面放一下比较小的内容*/
.col-red {
    color: #C81623 !important;
}
/*文档的颜色*/
.w {
    width: 1210px;
    margin: 0 auto;
}
/*版心 */
.fl {
    float: left
}
/*左浮动*/
.fr {
    float: right
}
/*右浮动*/
.al {
    text-align: left
}
/*文本居左*/
.ac {
    text-align: center
}
/*文本居中*/
.ar {
    text-align: right
}
/*文本居右*/
.hide {
    display: none
}
/*隐藏元素*/

把初始化代码粘贴到base.css文件里面就行了。

三、引入文件

在index.html文件引入css文件：

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>京东商城</title>
    <link rel="stylesheet" href="css/base.css">
    <!--引入base.css文件，base文件必须在index文件前-->
    <link rel="stylesheet" href="css/index.css">
    <!--引入index.css文件--> 
</head>

四、添加网站图标

打开一个网站，可以看到网页标签处会有网站图标，这是怎么添加的呢？

这里写图片描述

下载图标：www.jd.com/favicon.ico,保存到京东网页文件夹里（一定保存到根目录下）。

这里写图片描述

在引入index和base.css文件下面引入：

    <link rel="stylesheet" href="css/base.css">
    <!--引入base.css文件，base文件必须在index文件前-->
    <link rel="stylesheet" href="css/index.css">
    <!--引入index.css文件-->
    <link rel="shortcut icon" href="favicon.ico">
    <!--添加图标-->