【京东商城首页实战1】建立站点及准备工作
2017-04-30 17:27
344 查看
今天,开始做京东商城的首页。
在css文件夹建立base.css文件和index.css文件。
下面贴上京东初始化代码,并一一解释:
把初始化代码粘贴到base.css文件里面就行了。
下载图标:www.jd.com/favicon.ico,保存到京东网页文件夹里(一定保存到根目录下)。
在引入index和base.css文件下面引入:
至此,所有的准备工作已经完成,接下来就开始动手做首页页面啦。
一、建立站点
首先要做的就是建立站点,所谓的站点其实就是建保存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"> <!--添加图标-->
至此,所有的准备工作已经完成,接下来就开始动手做首页页面啦。
相关文章推荐
- SQL Server ->> 高可用与灾难恢复(HADR)技术 -- AlwaysOn(实战篇)之建立活动目录域、DNS服务器和Windows故障转移群集(准备工作)
- 【京东商城首页实战8】热词菜单
- Myeclipse 中建立第一个jsp工程注意事项及开始软件准备工作
- MPI并行计算环境建立之一--配置前的准备工作
- [.NET领域驱动设计实战系列]专题四:前期准备之工作单元模式(Unit Of Work)
- UML实战之准备工作
- phonegap开发经验谈之一命令行建立项目和准备工作
- Spring MVC 程序首页的设置 - 一号门-程序员的工作,程序员的生活(java,python,delphi实战)
- Wordpress入门建站教程二:搭建WP站点的准备工作
- STM32准备工作【Keil配置、keil模板建立、ST-Link V2下载配置】
- html5--6-68 实战前的准备工作:了解HTML5大纲算法
- 【Cocos2d-X游戏实战开发】捕鱼达人之开发前准备工作(一)
- CEMAPI实战攻略(一)——准备工作
- ExtJS实战(1)-准备工作和界面赏析
- ExtJS实战(1)-准备工作和界面赏析