CSS(品优购案例)

目录

品优购项目案例

1.创建如下文件夹:

2.创建文件

3.网站favicon图标

4.网站TDK三大标签SEO优化

页面必须有三个标签用来符合SEO优化

5.常用模块类名命名

6.内容

header头部制作 注意

 LOGO SEO优化

footer底部模块制作

main主体模块制作

floor楼层区制作​编辑

 tab栏

列表结构搭建

准备工作 

注册页

Web服务器

远程服务器

将自己的网站上传到远程服务器步骤:


品优购项目案例

(素材地址:)

1.创建如下文件夹:

名称说明
项目文件夹shopping
样式类图片文件夹images
样式文件夹css
产品类图片文件夹upload
字体类文件夹fonts
脚本文件夹js

2.创建文件

名称说明
首页index.html
CSS初始化样式文件base.css
CSS公共样式文件

common.css

发士大

有些网站初始化得不太提倡*{margin:0;padding:0;}

比如新浪:

html,body,ul,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,from,fiedset,legeend,img{margin:0;padding:0;}

3.网站favicon图标

favicon.ico一般用于作为缩略得网站标志,它显示在浏览器得地址栏或者标签上。

在html页面得<head></head>元素之间引入代码

<link rel="shortcut icon" herf="favicon.ico" type=“image/x-icon”/>

4.网站TDK三大标签SEO优化

SEOSearch Engine Optimization)汉译为搜索引擎优化,是一种利用搜索引擎得规则提高网站在有关搜索引擎内自然排名得方式。

目的  对网站进行深度得优化,从而帮助网站获取免费流量,进而在搜索引擎上提升网站的排名,提高网站的知名度。

页面必须有三个标签用来符合SEO优化

 title网站标题:

是搜索引擎了解网页入口和对网页主题归属的最佳判断点。

建议:网站名(产品名)-网站的介绍(尽量不要超过30个汉字)

description网站说明:

 见要说说明我们网站主要是做什么的

keywords关键字:

页面关键词,最好限制为6~8个关键词,之间用英文逗号隔开,关键词越靠前被搜索的概率越高

5.常用模块类名命名

名称说明
搜索导航栏shortcut
头部header
标志logo
购物车shopcar
搜索search
热点词hotwords
导航nav
导航左侧dropdown包含.dd  .dt
导航右侧navitems
页面底部footer
页面底部服务模块mod_service
页面底部帮助模块mod_help
页面底部版权模块mod_copyright

6.内容

header头部制作 注意

 LOGO SEO优化

1.logo里面首先放一个h1标签。目的是为了提权,告诉搜索引擎,这个地方很重要

2.h1里面放一个链接,为了点击logo可以返回首页,把logo的背景图片给链接即可。

3.为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来

        方法1 :text-indent移动到盒子外面(text-indent:-9999px),然后overflow:hidden,淘宝的做法

        方法2:直接给font-size:0;就看不到文字了,京东的做法

4.最后链接一个title属性,这样鼠标放到logo上就可以看到提示文字了 

搜索框里面的文字

 placeholder="语言开发"

 dorpdown 二级菜单  下拉菜单

footer底部模块制作

 

main主体模块制作

floor楼层区制作

 

 tab栏

列表结构搭建

准备工作 

 1.新建页面文件 list.html

2.头部和底部基本一致,需要将首页中的头部和底部的结构复制过来

3.头部和底部的样式也需要,因此list.html中也需要引入common.css 

注册页

注册页:register.html

注意:注册页面比较隐私,为了保护用户信息,我们不需要对当前页面做SEO优化

 

 

图片与文字对齐:

vertical-align: middle;

Web服务器

如果想要很多人访问我们的网站,可以把品优购放到服务器上,这样就可以多人访问我们的网站了

服务器是提供计算服务的设备,也是一台计算机,在网络环境下,根据服务器提供的服务类型不同,服务器又分为文件服务器、数据服务器、应用程序服务器、Web服务器等。

Web服务器一般是指网站服务器。根据服务器在网络中所在的位置不同,又可以分为本地服务器远程服务器

远程服务器

我们只要把项目上传到远程服务器电脑上,任何人都可以利用域名访问我们的网站了 

免费的远程服务器(免费空间)http://free.3v.do/

将自己的网站上传到远程服务器步骤:

1.去免费空间网站注册账号

2.记录下主机名、用户名、密码、域名

3.利用cutftp软件上传网站到远程服务器

4.在浏览器中输入域名,即可访问我们的网站了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值