1. li 后面的小竖线

1）用 li 的边框实现

float: left;
line-height: 12px;
padding: 0px 15px;
margin-top: 8px;
height: 12px;
border-right: 1px solid #666666;

设置好外边距和内边距以及高度，来控制小短线的高度。

2）用多个 li 来实现

给 li 设置高度，然后给偶数的 li 设置为宽度为1px，高度指定，颜色指定，再加上边距即可。

width:1px;
height:12px;
background-color:#666;
margin:9px 15px 0;

3）用伪元素实现

给伪元素设置宽度和高度，并用定位的方式将其定位到右端

/* 给前3个li加右边灰色边框线*/
ul li:nth-child(-n+3)::after {content:'';position:absolute;width:1px;height:134px;top:10px;right:0;
}

2 LOGO SEO 优化

为了优化网页的SEO，书写LOGO时，要遵循以下规则：

logo 里面先放一个h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要；
h1 里面再放一个链接，可以返回首页的，把Logo 背景图片给链接即可；
为了搜索引擎收录网站，在链接里面要放文字（网站名称），但是文字不要显示出来；
方法1：text-indent 移到盒子外面，即：text-indent:-9999px，然后overflow:hidden;
方法2：直接设置font-size:0;
最后给链接设置title属性，让鼠标放到logo上时可以看到提示文字。

<div class="logo"><h1><a href="index.html" title="品优购商场">品优购商城</a></h1>
</div>.logo {position: absolute;width: 171px;height: 61px;
}.logo a {/*将a转换成块级盒子，可以设置宽度和高度*/display: block;width: 171px;height: 61px;/*将logo背景图片给a*/background: url(../images/logo.png) no-repeat;font-size: 0;
}

3 购物车小圆点

一般用绝对定位，子绝父绝也是可以的。通常不会设置宽度，因为数量会变化，所以设置为宽度随着内容变化。通常用 i 。

<i class="count">8</i>.count {position: absolute;top: -8px;/* 通常设置左对齐，这样数字多了会往右边走*/left: 105px;/* 小红点是随着数量变化的，所以不要给宽度，让盒子内容自己撑开 */height: 14px;line-height: 14px;/* 好看些 */padding: 0 5px;border-radius: 7px 7px 7px 0;background-color: #e60012;color: #fff;
}

4 轮播图

轮播图一般是多个图片，点击箭头会向左或向右更换图片，所以轮播图应该用 ul>li 来做。具体实现需要借助JavaScript。

5 边框

普通寻常边框：solid 实线
点线边框：dotted 点线
虚线边框： dashed 虚线边框

6 注册页

注册页的一条条输入框，可以用ul>li来做，给整个盒子设置宽度，然后设置margin：0 auto；就可以统一设置为水平居中。
所有的表单域要用form包起来。
密码强度弱中强，可以用em来设置，设置三个类型，后期可以设置隐藏。

7 其他细节

文字里开头字母粗体：可以用strong标签，直接变成粗体。
盒子里的图标icon，可以用 <i> ，将其设置为行内块元素，设置水平居中就可以让其居中显示。
一般的盒子分为 hd 和 bd 两部分。
盒子里放图片的时候，为了避免美工人员上传的图片大小不一致，所以需要将盒子里的图片设置固定的宽度和高度。
tab栏设置，应该包括‘tab_list’和‘tab_content’两部分，点击不同的tab，页面展示不同的内容。
鼠标经过时，盒子有表框的效果，应该是盒子一开始就有边框，经过后边框由透明色变成了指定颜色，这样才不会出现盒子内容跳动的问题。

8 Web 服务器

将自己做的网页上传到远程服务器。免费的远程服务器：http://free.3v.do/

步骤：

在http://free.3v.do/ 注册账号。
记录主机名、用户名、密码和域名。
利用cutftp软件上传网站到远程服务器。目前这个软件已经不好使了，之后重新了解这方面的知识。
在浏览器中输入域名，即可访问上传的网站。

前端学习-品优购实践相关推荐

Web前端开发——品优购项目(上)
品优购项目介绍项目名称:品优购项目描述:品优购是一个电商网站,我们要完成 PC 端首页.列表页.注册页面的制作主页列表页注册页品优购项目的学习目的电商类网站比较综合,里面需要大量的布局技 ...
黑马程序员前端实战项目---PC端品优购（下）
目标能够写出列表页能够写出注册页能够把品优购网站部署到本地服务器能够把品优购网站上传到远程服务器教程推荐:Web前端零基础入门HTML5+CSS3+前端项目品优购项目首页制作 main ...
PC端品优购网页制作（common.css）
制作网页前的基础学习品优购项目规划 1.1网站制作流程客户沟通制定方案签订合同预付定金不能退初稿审核网页美工会制作原型图和PSD效果图前台页面设计后台工程开发测试验收上线培训后期 ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
纯HTML、CSS实现搭建品优购商城的静态网站这布局还好吗？超适合前端入门者
这个静态网站非常适合前端入门者,我们很多时候学习的都是理论知识,我们应该多动手,把理论转化为实践,前端知识多,多动手才能加深印象. 网站地址:在PC端,点击这里,查看完整静态网站. 下面我们先来看看静 ...
前端基础第一天项目品优购
品优购项目-上目标能够遵循品优购代码规范能够在品优购首页中引入 favicon 图标能够说出三大标签 SEO 优化能够在品优购首页中使用字体图标能够说出 LOGO 需要哪些 SEO 优化 ...
品优购项目学习---基本概述(简略)
做项目期间看不懂的可以查阅标记有注的这些部分的内容一定会有你的需要的答案哦如果没有那小卓这边建议可以直接私信小卓小卓一定尽力提供最优解释哈等第二遍做的时候进行梳理注: CS ...
「学习笔记」品优购项目-上（页面公共部分）
「学习笔记」品优购项目-上品优购项目-上目标品优购项目规划网站制作流程品优购项目介绍品优购项目的学习目的开发工具以及技术栈开发工具技术栈品优购项目搭建工作创建的文件夹如下(称为项 ...
前端与移动开发----购物商城案例（品优购PC项目上）
品优购项目-上目标能够遵循品优购代码规范能够在品优购首页中引入 favicon 图标能够说出三大标签 SEO 优化能够在品优购首页中使用字体图标能够说出 LOGO 需要哪些 SEO 优化 ...

前端学习-品优购实践