网页制作流程
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软件上传网站到远程服务器
在浏览器中输入域名,访问品优购网站