黑马跟学——品优购书写思路及疑问(未解决)

网页制作流程

PC端首页,列表页,注册页面

属性书写顺序

1.布局定位属性

2.自身属性

3.文本属性

4.其他属性

项目搭建工作

1.项目文件夹 shopping

2.样式类图片文件夹 images

3.样式文件夹 CSS

4.产品类图片文件夹 upload

5.字体类文件夹 fonts

6.脚本文件夹 js

favicon图标

制作图标

1.切成

2.转换 在线制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net

放在网站根目录下

3.引用

在<head></head>元素之间引入代码

网站TDK三大标签SEO优化

SEO搜索引擎优化,提升网站的排名,提高网站的知名度

title

网站名-网站的介绍

description

简要说明网站主要做什么

keywords

页面关键词

6-8个,英文逗号进行分割

常见模块类名命名

快捷导航栏 shortcut

头部 header

标志 logo

购物车 shopcar

搜索 search

热点词 hotwords

导航 nav

导航左侧 dropdown dd dt

导航右侧 navitems

页面底部 footer

页面底部服务模块 mod_service

页面底部帮助模块 mod_help

页面底部版权模块 mod_copyright

快捷导航栏右侧小li宽度大小不一

LOGO SEO优化

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

2.h1里面放一个链接,返回首页

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

法一:text-indent移到盒子外面(text-indent: -9999px),然后overflow:hidden,

法二:直接给font-size:0;

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

疑问:导航栏制作时给a设置hover点到字体才会变化,如果是给li设置字体hover则根本不会变化

 

焦点图

不要直接插入图片

ul 里面包含 小li 再插入图片起到轮播效果

小li掉下来

1.修改ul足够宽

2.overflow: hidden;

行内块元素

text-align:center;可以让行内块元素居中显示

精灵图思路

弹幕中有小伙伴提示用nth:child();

11个太多,简化代码

一个公共部分,剩下的便只有宽度高度和背景分别设置

代码依然能够简化

省略号效果

overflow: hidden;//超出部分隐藏

white-space: nowrap;//一行显示

text-overflow: ellipsis;//文字多出的部分省略号

选前面3个

nth-child(-n+3)

选3后面

nth-child(n+3)

猜你喜欢模块换一批(疑问)

如何给伪元素加上鼠标经过变色 与a一样的效果

图片怎样垂直居中

两行文字第一排如何做到向右对齐

tab栏选项卡原理布局需求

tab_list

tab_content

注册页面

比较隐私不需要SEO优化

简化为主

register.html

haeder

registerarea

1.为什么H3和login不在一行,给了login右浮动

因为login要放在h3里面

2.safe里面的em设置了颜色依旧没变化

因为忽略了优先级

3.表单添加表单域

把ul放在form表单下

Web服务器

本地服务器

远程服务器

申请免费空间 免费空间-free.3v.do 提供100M永久免费ASP空间申请

记录下主机名,用户名,密码,域名

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

在浏览器中输入域名,访问品优购网站

  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值