【前端基础】Day 9 PC端品优购项目
目录
1. 品优购项目规划
1.1 网站制作流程
1.2 品优购项目整体介绍
1.3 学习目的
1.4 开发工具以及技术栈
1.5 项目搭建工作
1.6 网站favicon图标
1.7 网站TDK三大标签SEO优化
2. 品优购首页制作
2.1 常见模块类命名
2.2 快捷导航shortcut制作
2.3 header制作
2.6 main主题模块制作
2.7 推荐模块制作
2.8 楼层区 floor
index.html
base.css
common.css
3. 列表页制作
3.1 准备工作
编辑 3.3 列表页主体 sk_container
list.html
list.css
4. 品优购注册页制作
register.html
register.css
5. Web服务器
6. 总结
1. 品优购项目规划
1.1 网站制作流程
1.2 品优购项目整体介绍
1.3 学习目的
1.4 开发工具以及技术栈
1.5 项目搭建工作
images文件夹中放不经常更换的、修饰类的图片，比如背景图片、精灵图；upload放和产品相关的图片。
1.6 网站favicon图标
<link rel="shortcut icon" href="favicon.ico">1.7 网站TDK三大标签SEO优化
1. title网站标题
2. description网站说明
content里面的内容由专门制作SEO的人填写。
3. keywords关键字
越重要的放越前
2. 品优购首页制作
2.1 常见模块类命名
2.2 快捷导航shortcut制作
2.3 header制作
logo seo优化
2.4 nav导航制作
2.5 footer底部制作
2.6 main主题模块制作
2.7 推荐模块制作
2.8 楼层区 floor
index.html
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><!-- 网站说明 --><meta name="description"content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验！" /><!-- 关键字 --><meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑，MP3，CD，VCD" /><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico"><!-- 引入CSS初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共的样式文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入index.css文件 --><link rel="stylesheet" href="css/index.css">
</head><body><!-- 快捷导航模块 start --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！ </li><li><a href="#">请登录</a> <a href="#" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客户服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块 end --><!-- header 头部模块制作 start --><div class="header w"><!-- logo模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- search搜索模块 --><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><!-- hotwords 模块制作 --><div class="hotwords"><a href="#" class="style_red">优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">每满99减30</a><a href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a></div><!-- 购物车模块 --><div class="shopcar">我的购物车<i class="count">8</i></div></div><!-- header 头部模块制作 end --><!-- nav模块制作 start --><nav class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分类</div><div class="dd"><ul><li><a href="#">家用电器</a></li><li><a href="#">手机、数码、通信</a></li><li><a href="#">电脑、办公</a></li><li><a href="#">家居、家具、家装、厨具</a></li><li><a href="#">男装、女装、童装、内衣</a></li><li><a href="#">个护化妆、清洁用品、宠物</a></li><li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li><li><a href="#">运动户外、钟表</a></li><li><a href="#">汽车、汽车用品</a></li><li><a href="#">母婴、玩具乐器</a></li><li><a href="#">食品、酒类、生鲜、特产</a></li><li><a href="#">医药保健</a></li><li><a href="#">图书、音像、电子书</a></li><li><a href="#">彩票、旅游、充值、票务</a></li><li><a href="#">理财、众筹、白条、保险</a></li></ul></div></div><div class="navitems"><ul><li><a href="#">服装城</a></li><li><a href="#">服装城</a></li><li><a href="#">服装城</a></li><li><a href="#">服装城</a></li><li><a href="#">服装城</a></li><li><a href="#">服装城</a></li><li><a href="#">服装城</a></li><li><a href="#">服装城</a></li></ul></div></div></nav><!-- nav模块制作 end --><!-- 首页专有的模块 main start --><div class="w"><div class="main"><div class="focus"><ul><li><img src="upload/focus1.png" alt=""></li></ul></div><div class="newsflash"><div class="news"><div class="news_hd"><h5>品优购快报</h5><a href="#" class="more">更多</a></div><div class="news_bd"><ul><li><a href="#"><strong>[特惠]</strong> 备战开学季 全民半价购数码</a></li><li><a href="#"><strong>[特惠]</strong> 备战开学季 全民半价购数码</a></li><li><a href="#"><strong>[特惠]</strong> 备战开学季 全民半价购数码</a></li><li><a href="#"><strong>[特惠]</strong> 备战开学季 全民半价购数码</a></li><li><a href="#"><strong>[特惠]</strong> 备战开学季 全民半价购数码</a></li></ul></div></div><div class="lifeservice"><ul><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li></ul></div><div class="bargin"><img src="upload/bargain.png" alt=""></div></div></div></div><!-- 首页专有的模块 main end --><!-- 推荐模块 start --><div class="w recom"><div class="recom_hd"><img src="images/clock.png" alt=""><h3>今日推荐</h3></div><div class="recom_bd"><ul><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li></ul></div></div><!-- 推荐模块 end --><!-- 楼层区制作 start --><div class="floor"><!-- 1楼家用电器楼层 --><div class="w jiadian"><div class="box_hd"><h3>家用电器</h3><div class="tab_list"><ul><li><a href="#" class="style_red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活用品</a></li></ul></div></div><div class="box_bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li></ul><a href="#"><img src="upload/floor-1-1.png" alt=""></a></div><div class="col_329"><a href="#"><img src="upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div><div class="col_219"><a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></div></div></div></div><div class="w shouji"><div class="box_hd"><h3>家用电器</h3><div class="tab_list"><ul><li><a href="#" class="style_red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活用品</a></li></ul></div></div><div class="box_bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li></ul><a href="#"><img src="upload/floor-1-1.png" alt=""></a></div><div class="col_329"><a href="#"><img src="upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div><div class="col_219"><a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></div></div></div></div></div><!-- 楼层区制作 end --><!-- 底部模块的制作 start --><div class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li></ul></div><div class="mod_help"><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="images/wx_cz.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 |品优购社区 | 品优购公益 |</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 <br>京ICP备08001421</div></div></div></div><!-- 底部模块的制作 end --></body></html>base.css
/* 14-京东css初始化 */
/* 把所有标签的内外边距清零 */
* {margin: 0;padding: 0;/* css3盒子模型，padding和border不会将盒子撑大 */box-sizing: border-box;
}/* em 和 i 斜体的文字不倾斜 */
em,
i {font-style: normal
}/* 去掉li的小圆点 */
li {list-style: none
}img {/* border: 0;照顾低版本浏览器，如果图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底部有空白缝隙的问题 */vertical-align: middle
}button {/* 当鼠标经过按钮时鼠标变成小手 */cursor: pointer
}a {color: #666;text-decoration: none
}a:hover {color: #ff0f23
}button,
input {font-family: PingFang SC, Source Han Sans CN, Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;/* 默认有灰色边框需要手动去掉*/border: 0;outline: none;
}body {/* CSS3 抗锯齿行，让文字显示得更清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;/* \5B8B\4F53 就是宋体的意思，这样浏览器兼容性比较好 */font: 12px/1.5 PingFang SC, Source Han Sans CN, Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}.hide,
.none {display: none
}/* 清除浮动 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}common.css
/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?tomleg');src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?tomleg') format('truetype'),url('../fonts/icomoon.woff?tomleg') format('woff'),url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}/* 版心宽度 */
.w {width: 1200px;margin: 0 auto;
}.fl {float: left;
}.fr {float: right;
}.style_red {color: #c81623;
}/* 快捷导航模块 */
.shortcut {height: 31px;/* 垂直居中 */line-height: 31px;background-color: #f1f1f1;
}.shortcut li {float: left;
}/* 选择所有序号为偶数的li */
.shortcut .fr ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0;
}/* 向下的小三角 arrow箭头 icon小图标*/
.arrow-icon::after {font-family: 'icomoon';content: '\e91e';margin-left: 6px;
}/* header头部制作 */
.header {position: relative;height: 105px;
}.logo {position: absolute;top: 25px;width: 171px;height: 61px;
}.logo a {display: block;width: 171px;height: 61px;background: url(../images/logo.png) no-repeat;/* font-size: 0; 京东的做法 *//* 淘宝的做法 让文字隐藏 */text-indent: -9999px;overflow: hidden;
}.search {position: absolute;left: 346px;top: 25px;width: 538px;height: 36px;border: 2px solid #b1191a;
}.search input {float: left;width: 454px;height: 32px;padding-left: 10px;
}.search button {float: left;width: 80px;height: 32px;background-color: #b1191a;font-size: 16px;color: #fff;
}.hotwords {position: absolute;top: 66px;left: 346px;
}.hotwords a {margin: 0 10px;
}.shopcar {position: absolute;right: 60px;top: 25px;width: 140px;height: 35px;line-height: 35px;text-align: center;border: 1px solid #dfdfdf;background-color: #f7f7f7;
}.shopcar::before {font-family: 'icomoon';content: '\e93a';margin-right: 5px;color: #e60012;
}.shopcar::after {font-family: 'icomoon';content: '\e920';margin-left: 5px;
}.count {position: absolute;top: -5px;left: 105px;height: 14px;line-height: 14px;color: #fff;background-color: #e60012;padding: 0 5px;border-radius: 7px 7px 7px 0;
}/* nav模块制作 */
.nav {height: 47px;border-bottom: 2px solid #b1191a;
}.nav .dropdown {float: left;width: 210px;height: 45px;background-color: #b1191a;
}.nav .navitems {float: left;
}.dropdown .dt {width: 100%;height: 100%;line-height: 45px;color: #fff;text-align: center;font-size: 16px;
}.dropdown .dd {/* display: none; */width: 210px;height: 465px;background-color: #c81623;margin-top: 2px;
}.dropdown .dd ul li {position: relative;height: 31px;line-height: 31px;margin-left: 2px;padding-left: 10px;
}.dropdown .dd ul li a {font-size: 14px;color: #fff;
}.dropdown .dd ul li:hover {background-color: #fff;
}.dropdown .dd ul li:hover a {color: #c81623;
}.dropdown .dd ul li::after {position: absolute;top: 1px;right: 10px;color: #fff;font-family: 'icomoon';content: '\e920';font-size: 14px;
}.navitems ul li {float: left;
}.navitems ul li a {display: block;height: 45px;line-height: 45px;font-size: 16px;padding: 0 25px;
}/* 底部模块的制作 */
.footer {height: 415px;background-color: #f5f5f5;padding-top: 30px;
}.mod_service {height: 80px;border-bottom: 1px solid #ccc;
}.mod_service ul li {float: left;width: 300px;height: 50px;padding-left: 35px;
}.mod_service ul li h5 {float: left;width: 50px;height: 50px;background: url(../images/icons.png) no-repeat -252px -2px;margin-right: 8px;
}.service_txt h4 {font-size: 14px;
}.service_txt p {font-size: 12px;
}.mod_help {height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;
}.mod_help dl {float: left;width: 200px;
}.mod_help dl:last-child {width: 90px;text-align: center;
}.mod_help dl dt {font-size: 16px;margin-bottom: 10px;
}.mod_copyright {text-align: center;padding-top: 20px;
}.links {margin-bottom: 15px;
}.links a {margin: 0 3px;
}.copyright {line-height: 20px;
}3. 列表页制作
3.1 准备工作
引入需要的link；
快捷导航栏、header、nav、footer 模块大体相同，复制过来即可，些许不同再修改。
3.2 列表页 header 和 nav 修改
3.3 列表页主体 sk_container
list.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表页-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><!-- 网站说明 --><meta name="description"content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验！" /><!-- 关键字 --><meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑，MP3，CD，VCD" /><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico"><!-- 引入CSS初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共的样式文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入列表页的css文件 --><link rel="stylesheet" href="css/list.css">
</head><body><!-- 快捷导航模块 start --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！ </li><li><a href="#">请登录</a> <a href="#" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客户服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块 end --><!-- header 头部模块制作 start --><div class="header w"><!-- logo模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- 列表页的秒杀模块 --><div class="sk"><img src="images/sk.png" alt=""></div><!-- search搜索模块 --><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><!-- hotwords 模块制作 --><div class="hotwords"><a href="#" class="style_red">优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">每满99减30</a><a href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a></div><!-- 购物车模块 --><div class="shopcar">我的购物车<i class="count">8</i></div></div><!-- header 头部模块制作 end --><!-- nav模块制作 start --><nav class="nav"><div class="w"><div class="sk_list"><ul><li><a href="#">品优秒杀</a></li><li><a href="#">品优秒杀</a></li><li><a href="#">品优秒杀</a></li></ul></div><div class="sk_con"><ul><li><a href="#">女装</a></li><li><a href="#">女装</a></li><li><a href="#">女装</a></li><li><a href="#">女装</a></li><li><a href="#">女装</a></li><li><a href="#">女装</a></li><li><a href="#">女装</a></li><li><a href="#">女装</a></li><li><a href="#">更多分类</a></li></ul></div></div></nav><!-- nav模块制作 end --><!-- 列表页主体部分 --><div class="w sk_container"><div class="sk_hd"><img src="upload/bg_03.png" alt=""></div><div class="sk_bd"><ul class="clearfix"><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li></ul></div></div><!-- 底部模块的制作 start --><div class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li></ul></div><div class="mod_help"><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="images/wx_cz.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 |品优购社区 | 品优购公益 |</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 <br>京ICP备08001421</div></div></div></div><!-- 底部模块的制作 end -->
</body></html>list.css
/* 列表页专有的 */
.nav {/* .sk_con ul li a 行高超过了nav盒子，影响下面主体部分的排列 */overflow: hidden;
}.sk {position: absolute;left: 190px;top: 40px;border-left: 1px solid #c81523;padding: 3px 0 0 14px;
}.sk_list {float: left;
}.sk_list ul li {float: left;line-height: 47px;
}.sk_list ul li a {/* display: block;line-height: 47px; */padding: 0 30px;font-size: 16px;font-weight: 700;color: #000;
}.sk_con {float: left;
}.sk_con ul li {float: left;/* line-height: 49px; */
}.sk_con ul li a {display: block;line-height: 49px;padding: 0 20px;font-size: 14px;
}.sk_con ul li:last-child a::after {font-family: 'icomoon';content: '\e91e';
}.sk_bd ul li {float: left;overflow: hidden;margin-right: 13px;width: 290px;height: 460px;/* 不然会抖动 */border: 1px solid transparent;
}.sk_bd ul li:nth-child(4n) {margin-right: 0;
}.sk_bd ul li:hover {border: 1px solid #c81523;
}4. 品优购注册页制作
准备一个父盒子，再用ul>li ;
右对齐可通过盒子加宽度，再 text-align: right;
register.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人注册</title><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico"><!-- 引入CSS初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入注册页面的css --><link rel="stylesheet" href="css/register.css">
</head><body><div class="w"><header><div class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></div></header><div class="registerarea"><h3>注册新用户<div class="login">我有账号，去<a href="#">登录</a></div></h3><div class="reg_form"><form action=""><ul><li><label for="">手机号 ：</label><input type="number" class="inp"><span class="error"> <i class="error_icon"></i> 手机号码格式不正确</span></li><li><label for="">短信验证码 ：</label><input type="number" class="inp"><span class="success"> <i class="success_icon"></i> 短信验证码输入正确</span></li><li><label for="">登录密码 ：</label><input type="password" class="inp"><span class="error"> <i class="error_icon"></i> 密码不少于6位数，请重新输入</span></li><li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em></li><li><label for="">确认密码 ：</label><input type="password" class="inp"><span class="error"> <i class="error_icon"></i> 手机号码格式不正确</span></li><li class="agree"><input type="checkbox" name="" id="">同意协议并注册 <a href="#">《知晓用户协议》</a></li><li><input type="submit" value="提交注册" class="btn"></li></ul></form></div></div><!-- 底部模块的制作 start --><footer><div class="mod_copyright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 |品优购社区 | 品优购公益 |</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 <br>京ICP备08001421</div></div></footer><!-- 底部模块的制作 end --></div>
</body></html>register.css
.w {width: 1200px;margin: 0 auto;
}header {height: 84px;border-bottom: 2px solid #c81523;
}.logo {padding-top: 18px;
}.registerarea {height: 522px;border: 1px solid #ccc;margin-top: 20px;
}.registerarea h3 {height: 42px;line-height: 42px;border-bottom: 1px solid #ccc;background-color: #ececec;padding: 0 10px;font-size: 18px;font-weight: 400;}.login {float: right;font-size: 14px;
}.login a {color: #c81523;
}.reg_form {width: 600px;margin: 50px auto 0;
}.reg_form ul li {margin-bottom: 20px;
}.reg_form ul li label {display: inline-block;width: 88px;text-align: right;
}.reg_form ul li .inp {width: 242px;height: 37px;border: 1px solid #ccc;}.error {color: #c81523;
}.error_icon,
.success_icon {display: inline-block;vertical-align: middle;width: 20px;height: 20px;background: url(../images/error.png) no-repeat;margin-top: -2px;
}.success {color: green;
}.success_icon {background: url(../images/success.png) no-repeat;
}.safe {padding-left: 165px;
}.safe em {padding: 0 12px;color: #fff;
}.safe .ruo {background-color: #de1111;
}.safe .zhong {background-color: #40b83f;
}.safe .qiang {background-color: #f79100;
}.agree {padding-left: 90px;
}.agree input {vertical-align: middle;
}.agree a {color: #1ba1e6;
}.btn {width: 200px;height: 34px;background-color: #c81623;font-size: 14px;color: #fff;margin: 30px 0 0 70px;
}.mod_copyright {text-align: center;padding-top: 20px;
}.links {margin-bottom: 15px;
}.links a {margin: 0 3px;
}.copyright {line-height: 20px;
}5. Web服务器
6. 总结
1. 对父盒子设置行高等于盒子高度，能使子盒子垂直方向居中，如果子盒子是由文字撑开的，那么可实现文字居中对齐；如果给子盒子设置了大小，那么想使子盒子居中对齐可以通过设置margin。
2.行的元素可以指定左右的margin值，margin：0 10px；
3.li里面放了链接a，想要给padding值实现不同字数盒子间间距相同，给a设置padding更好一些，这样使得链接的范围更大，不局限于文字占的空间。
4.轮播图父盒子里有多张图，最好通过ul里的li包含图
5.text-align: center; 可以使里面的文字、行内元素或行内块元素水平居中显示
6.一般情况下，a如果包含有宽度的盒子，a需要转化为块级元素
7.注意外边距塌陷问题，可以用padding避免
相关文章：
【前端基础】Day 9 PC端品优购项目
目录 1. 品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 学习目的 1.4 开发工具以及技术栈 1.5 项目搭建工作 1.6 网站favicon图标 1.7 网站TDK三大标签SEO优化 2. 品优购首页制作 2.1 常见模块类命名 2.2 快捷导航shortcut制作 2.3 header制作 2.4…...
FFMPEG利用H264+AAC合成TS文件
本次的DEMO是利用FFMPEG框架把H264文件和AAC文件合并成一个TS文件。这个DEMO很重要，因为在后面的推流项目中用到了这方面的技术。所以，大家最好把这个项目好好了解。 下面这个是流程图 从这个图我们能看出来，在main函数中我们主要做了这几步&…...
Linux搭建个人大模型RAG-(ollama+deepseek+anythingLLM)
本文是远程安装ollama deepseek，本地笔记本电脑安装anythingLLM，并上传本地文件作为知识库。 1.安装ollama 安装可以非常简单，一行命令完事。（有没有GPU，都没有关系，自动下载合适的版本） cd 到…...
Docker 学习（二）——基于Registry、Harbor搭建私有仓库
Docker仓库是集中存储和管理Docker镜像的平台，支持镜像的上传、下载、版本管理等功能。 一、Docker仓库分类 1.公有仓库 Docker Hub：官方默认公共仓库，提供超过10万镜像，支持用户上传和管理镜像。 第三方平台：如阿里…...
PHP之变量
在你有别的编程语言的基础下，你想学习PHP，可能要了解的一些关于变量的信息。 PHP中的变量不用指定数据类型，同时必须用$开头。 全局变量 可以在除函数外任意地方访问，如果需要在函数中访问要先获取 $x 111; function tt() {gl…...
centos和ubuntu下安装redis
1，判断环境是否有gcc gcc --version 如果未安装则执行 yum install -y gcc tcl 2，安装包下载,编译安装 cd /usr/local mkdir redis wget https://download.redis.io/releases/redis-4.0.11.tar.gz tar -xvf redis-4.0.11.tar.gz cd redis-4.0.11 编译 m…...
韩国互联网巨头 NAVER 如何借助 StarRocks 实现实时数据洞察
作者： Youngjin Kim Team Leader, NAVER Moweon Lee Data Engineer, NAVER 导读：开源无国界，在“StarRocks 全球用户精选案例”专栏中，我们将介绍韩国互联网巨头 NAVER 的 StarRocks 实践案例。 NAVER 成立于 1999 年࿰…...
K8s 1.27.1 实战系列（二）安装集群并初始化
一、安装 kubeadm、kubelet 和 kubectl（所有节点） 1、配置k8s的yum源地址 cat <<EOF | sudo tee /etc/yum.repos.d/kubernetes.repo [kubernetes] name=Kubernetes baseurl=http://mirrors.aliyun.com/kubernetes/yum/repos/kubernetes-el7-x86_64 enabled=1 gpgchec…...
生命周期总结（uni-app、vue2、vue3生命周期讲解）
一、vue2生命周期 Vue2 的生命周期钩子函数分为 4 个阶段：创建、挂载、更新、销毁。 1. 创建阶段 beforeCreate：实例初始化之后，数据观测和事件配置之前。 created：实例创建完成，数据观测和事件配置已完成，…...
十一、Redis Sentinel（哨兵）—— 高可用架构与配置指南
Redis Sentinel（哨兵）—— 高可用架构与配置指南 在分布式应用中，Redis 主从复制（Master-Slave）虽然能提供读写分离的能力，但它 无法自动故障转移（failover）。如果主节点（Master）发生故障，系统管理员需要手动将某个从节点（Slave）提升为主节点，并重新配置所有从节…...
java8中young gc的垃圾回收器选型，您了解嘛
在 Java 8 的 Young GC（新生代垃圾回收）场景中，对于 ToC的场景，即需要尽可能减少垃圾回收停顿时间以满足业务响应要求的场景，以下几种收集器各有特点，通常 Parnew和 G1 young表现较为出色，下面详…...
C语言学习笔记-初阶（30）深入理解指针2
1. 数组名的理解 在上一个章节我们在使用指针访问数组的内容时，有这样的代码： int arr[10] {1,2,3,4,5,6,7,8,9,10}; int *p &arr[0]; 这里我们使用 &arr[0] 的方式拿到了数组第⼀个元素的地址，但是其实数组名本来就是地址&…...
【Wireshark 02】抓包过滤方法
一、官方教程 Wireshark 官网文档 ： Wireshark User’s Guide 二、显示过滤器 2.1、 “数据包列表”窗格的弹出过滤菜单 例如，源ip地址作为过滤选项，右击源ip->prepare as filter-> 选中 点击选中完，显示过滤器&#…...
MySQL基础四（JDBC）
JDBC(重点) 数据库驱动 程序会通过数据库驱动，和数据库打交道。 sun公司为了简化开发人员对数据库的统一操作，提供了一个Java操作数据库的规范。这个规范由具体的厂商去完成。对应开发人员来说，只需要掌握JDBC接口。 熟悉java.sql与javax.s…...
基于CURL命令封装的JAVA通用HTTP工具
文章目录 一、简要概述二、封装过程1. 引入依赖2. 定义脚本执行类 三、单元测试四、其他资源 一、简要概述 在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具，可以说是一款很强大的http命令行工具。它支持文件的上传和下载，是综合传输工具&…...
cenos7网络安全检查
很多网络爱好者都知道，在Windows 2000和Windows 9x的命令提示符下可使用Windows系统自带的多种命令行网络故障检测工具，比如说我们最常用的ping。但大家在具体应用时，可能对这些命令行工具的具体含义，以及命令行后面可以使用的种…...
FastGPT 引申：混合检索完整实例
文章目录 FastGPT 引申：混合检索完整实例1. 各检索方式的初始结果2. RRF合并过程3. 合并后的结果4. Rerank重排序后5. 最终RRF合并6. 内容总结 FastGPT 引申：混合检索完整实例 下边通过一个简单的例子说明不同检索方式的分值变化过程，假设我…...
一、Prometheus架构
Prometheus 云原生十二要素是一套最佳实践和规范，旨在帮助开发人员更好地构建云原生应用 这十二个要素分别是： 单一职责独立部署无状态声明式API服务发现容错处理自适应算法自动化运维响应式编程通信协议服务注册与发现数据持久化一、Prometheus 是什么 Prometheus 是一个…...
蓝桥杯C组真题——巧克力
题目如下 思路 代码及解析如下 谢谢观看...
【大模型】大模型分类
大模型（Large Models）通常指参数量巨大、计算能力强大的机器学习模型，尤其在自然语言处理（NLP）、计算机视觉（CV）等领域表现突出。以下是大模型的常见分类方式： 1. 按应用领域分类 …...
WebUSB的常用API及案例
WebUSB API 允许网页与 USB 设备进行交互，但出于安全考虑，浏览器要求在调用 requestDevice 方法（用于请求用户选择一个 USB 设备并授予网页访问权限）时，必须是在处理用户手势（例如点击按钮）的过…...
在线研讨会 | 加速游戏和AI应用，全面认识Imagination DXTP GPU
近日，Imagination宣布推出 Imagination DXTP GPU IP，该产品重新定义了智能手机和其他功耗受限设备的图形和计算加速。它专为高效的效率而设计，能够提供运行AI、游戏和用户界面体验所需的性能，确保这些体验可以全天候流畅且持续地运…...
The Rust Programming Language 学习 (三)
所有权 所有权（系统）是 Rust 最为与众不同的特性，它让 Rust 无需垃圾回收器（garbage collector）即可保证内存安全。因此，理解 Rust 中所有权的运作方式非常重要。 这里是非常重非常重的一个知识点,这里一…...
【一个月备战蓝桥算法】递归与递推
字典序 在刷题和计算机科学领域，字典序（Lexicographical order）也称为词典序、字典顺序、字母序，是一种对序列元素进行排序的方式，它模仿了字典中单词的排序规则。下面从不同的数据类型来详细解释字典序： …...
【零基础到精通Java合集】第二十九集：SQL常用优化手段
课程标题：SQL常用优化手段——15分钟快速提升数据库性能 目标：掌握10+核心SQL优化技巧，解决慢查询、高负载等生产问题 0-1分钟：优化核心原则——减少数据扫描量 本质逻辑：通过索引、分页、过滤条件等手段，最小化磁盘I/O和内存计算。 反例：SELECT * FROM orders（全表扫…...
ArcGIS操作：07 绘制矢量shp面
1、点击目录 2、右侧显示目录 3、选择要存储的文件夹，新建shp 4、定义名称、要素类型、坐标系 5、点击开始编辑 6、点击创建要素 7、右侧选择图层、创建面 8、开始绘制，双击任意位置结束绘制...
如何远程访问svn中的URL
简介： 主要opencascade相关知识学习 格言： 万丈高楼平地起 要远程访问 SVN（Subversion）仓库中的 URL，通常需要以下步骤和注意事项： 1. 确认远程 SVN 服务器的访问协议 SVN 支持多种协议访问远程仓库&…...
归并排序：分治哲学的完美演绎与时空平衡的艺术
引言：跨越世纪的算法明珠 在计算机科学的璀璨星河中，归并排序犹如一颗恒久闪耀的明星。1945年，现代计算机之父冯诺伊曼在EDVAC计算机的研发过程中首次系统性地提出了这一算法，其精妙的分治思想不仅奠定了现代排序算法的理论基础&…...
【电控笔记z69】电机选型-机械特性
转矩特性 启动转矩 定义：指电机在启动瞬间所能提供的转矩。对于一些需要快速启动负载的设备，如起重机起升机构、电动汽车起步等，较大的启动转矩至关重要。影响因素：电机的类型、绕组参数、电源电压等都会影响启动转矩。例如，直流电机通过调节电枢电压和励磁电流可以在较大…...
Axure原型模板与元件库APP交互设计素材（附资料）
为了高效地进行APP和小程序的设计与开发，原型设计工具Axure凭借其强大的功能和灵活性，成为了众多产品经理和设计师的首选。本文将详细介绍Axure原型模板APP常用界面组件元件库、交互设计素材，以及多套涵盖电商、社区服务、娱乐休闲、农业农村…...