【前端基础】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…...
【django初学者项目】
下面为你详细介绍如何创建一个简单有趣的 Django 项目——博客系统。这个项目允许用户创建、查看、编辑和删除博客文章。 步骤 1：环境准备 首先，确保你已经安装了 Python 和 pip。然后，创建一个虚拟环境并激活它，接着安装 Django…...
自学微信小程序的第十三天
DAY13 1、使用map组件在页面中创建地图后，若想在JS文件中对地图进行控制，需要通过地图API来完成。先通过wx.createMapContext()方法创建MapContext（Map上下文）实例，然后通过该实例的相关方法来操作map组件。 const m…...
gitbash忽略未追踪文件的解决方式
文章目录 问题描述，如下图解决方式 问题描述，如下图 因为这些事项目本地运行或者IDE环境配置时产生的文件或目录，手动删除后还来出现，怎么实现忽略不显示呢？ 解决方式 查看项目的根目录下是否存在.gitignore文件&…...
React生态、Vue生态与跨框架前端解决方案
React生态系统 1 基础框架 React.js 是一个用于构建UI的JavaScript库。 2 应用框架 Next.js 是基于React.js的完整应用框架。主要负责应用如何工作： 应用架构：路由系统、页面结构渲染策略：服务端渲染(SSR)、静态生成(SSG)、客户端渲染性…...
GPPT: Graph Pre-training and Prompt Tuning to Generalize Graph Neural Networks
GPPT: Graph Pre-training and Prompt Tuning to Generalize Graph Neural Networks KDD22 推荐指数：#paper/⭐⭐# 动机 本文探讨了图神经网络（GNN）在迁移学习中“预训练-微调”框架的局限性及改进方向。现有方法通过预训练（…...
【Elasticsearch】Elasticsearch 的`path.settings`是用于配置 Elasticsearch 数据和日志存储路径的重要设置
Elasticsearch 的path.settings是用于配置 Elasticsearch 数据和日志存储路径的重要设置，这些路径在elasticsearch.yml配置文件中定义。以下是关于 Elasticsearch 的路径设置（path.data和path.logs）以及快照存储库配置的详细说明：…...
使用vue3+element plus 的table自制的穿梭框（支持多列数据）
目录 一、效果图 二、介绍 三、代码区 一、效果图 话不多说，先上图 二、介绍 项目需要：通过穿梭框选择人员信息，可以根据部门、岗位进行筛选，需要显示多列（不光显示姓名，还包括人员的一些基础信息&…...
学习笔记：IC存储总结（ROM，RAM, EEPROM, Flash, SRAM, DRAM, DDL）
一，概述 半导体存储器是一种可以存储大量二值信息的半导体器件。在电子计算机及一些其他的数字系统的工作过程中，需要对大量的数据进行储存。由于数据处理的数据量和运算速度的要求，因此把存储量和存取速度作为衡量存储器的重要指标。 在电子…...
本地部署pangolin获取谱系，从而达到预测新冠的流行趋势
步骤 1：安装Docker 注：此步骤忽略，可通过Docker官网对于文档进行安装,地址如下 Docker: Accelerated Container Application Developmenthttps://www.docker.com/ 步骤 2：拉取Pangolin镜像 docker pull staphb/pangolin:latest 步…...
【Python】文件File处理详细解释，附示例（文件操作、模式、编码、指针、调试、大文件处理、文件管理等）
文件 File 处理方法 1. 前言2. 文件基础操作2.1 文件打开与关闭2.2 with 语句(上下文管理器)3. 文件模式详解3.1 基础模式3.2 扩展模式4. 文件读写操作4.1 读取内容4.2 写入内容5. 文件指针和随机访问5.1 seek(offset.whence)5.2 二进制模式下的指针操作6. 文件编码处理6.1 指定…...
Windows 10/11 系统下 Git 的详细安装步骤和基础设置指南
以下是 Windows 10/11 系统下 Git 的详细安装步骤和基础设置指南： Windows 10/11 系统下 Git 的详细安装步骤和基础设置指南 一、详细安装步骤1. 下载 Git 安装包2. 运行安装程序1. 双击安装包，按以下选项配置：2. 点击 Install 完成安装。 二…...
RabbitMQ的四种交换机
RabbitMQ交换机 什么是RabbitMQ RabbitMQ 是一个开源的消息代理和队列服务器，用于在分布式系统中存储和转发消息。它基于 AMQP（高级消息队列协议）实现，支持多种消息传递模式，广泛应用于异步通信、应用解耦、负载均衡…...
探秘基带算法：从原理到5G时代的通信变革【一】引言
文章目录 一、引言1.1 研究背景与意义1.2 研究目的与方法1.3 研究内容与创新点 本博客为系列博客，主要讲解各基带算法的原理与应用，包括：viterbi解码、Turbo编解码、Polar编解码、CORDIC算法、CRC校验、FFT/DFT、QAMtiaozhi/解调、QPSK调制/解…...
ES中数据刷新策略refresh
在 Elasticsearch 中，插入数据时的 refresh 参数控制文档在写入后何时对搜索可见，其行为直接影响数据可见性和系统性能。以下是 refresh 参数的三个可选值（true、false、wait_for）的详细说明及适用场景： 1. refreshtr…...
【向量数据库Weaviate】 和Elasticsearch的区别
Weaviate 和 Elasticsearch 是两种不同类型的数据库，设计目标和应用场景有显著差异。以下是它们的核心区别和适用场景的详细对比： 1. 设计目标与核心能力 维度WeaviateElasticsearch核心能力向量数据库 图数据库（语义搜索优先）全…...
【Wireshark 02】抓包过滤方法
一、官方教程 Wireshark 官网文档 ： Wireshark User’s Guide 二、显示过滤器 2.1、 “数据包列表”窗格的弹出过滤菜单 例如，源ip地址作为过滤选项，右击源ip->prepare as filter-> 选中 点击选中完，显示过滤器&#…...
【零基础到精通Java合集】第十五集：Map集合框架与泛型
课程标题：Map集合框架与泛型（15分钟） 目标：掌握泛型在Map中的键值类型约束，理解类型安全的键值操作，熟练使用泛型Map解决实际问题 0-1分钟：泛型Map的意义引入 以“字典翻译”类比泛型Map：明确键和值的类型（如英文→中文）。说明泛型Map的作用——确保键值对的类型一…...
三参数水质在线分析仪：从源头保障饮用水安全
【TH-ZS03】饮用水安全是人类健康的重要保障，其质量直接关系到人们的生命健康。随着工业化、城市化的快速发展，水体污染问题日益严峻，饮用水安全面临着前所未有的挑战。为了从源头保障饮用水安全，科学、高效的水质监测手段必不可少…...
Java8-Stream流介绍和使用案例
Java 8 引入了 Stream API，它提供了一种高效且声明式的方式来处理集合数据。Stream 的核心思想是将数据的操作分为中间操作（Intermediate Operations）和终端操作（Terminal Operations），并通过流水线&#x…...
FieldFox 手持射频与微波分析仪
FieldFox 手持射频与微波分析仪 简述 Keysight FieldFox 便携式分析仪可以在非常恶劣的工作环境中，轻松完成从日常维护到深入故障诊断的各项工作。 选择最适合您需求且有强大软件支持的 Keysight FieldFox 配置。 主要特性 特点： FieldFox 分析仪可…...
JQuery学习笔记，点击按钮加载更多的图片
利用点击按钮模拟某京，某宝，滚动页面加载图片的效果，代码： <!DOCTYPE html> <html><head><meta charset"utf-8"><title>Ajax请求</title></head><body><button id…...
swift4-汇编分析枚举内存布局
一、枚举的内存原理 1.1 常规case enum TestEnum { case test1, test2, test3 } var t TestEnum.test1 t .test2 t .test3枚举是常规的case的情况-是采取一个字节来存枚举变量通过拿到枚举的内存地址，看地址里面存的枚举值情况窥探枚举内存存储情况 var t Te…...
Vue 3 整合 WangEditor 富文本编辑器：从基础到高级实践
本文将详细介绍如何在 Vue 3 项目中集成 WangEditor 富文本编辑器，实现图文混排、自定义扩展等高阶功能。 一、为什么选择 WangEditor？ 作为国内流行的开源富文本编辑器，WangEditor 具有以下优势： 轻量高效：压缩后仅…...
)
Docker安装嵌入框架Text Embeddings Inference (TEI)
Docker安装Text Embeddings Inference (TEI) 1 简单介绍 文本嵌入推理（TEI，Text Embeddings Inference ）是HuggingFace研发的一个用于部署和服务开源文本嵌入和序列分类模型的工具包。TEI兼容OpenAI的嵌入模型的规范。 # 官网地址 https:/…...
【HeadFirst系列之HeadFirst设计模式】第14天之与设计模式相处：真实世界中的设计模式
与设计模式相处：真实世界中的设计模式 设计模式是软件开发中的经典解决方案，它们帮助我们解决常见的设计问题，并提高代码的可维护性和可扩展性。在《Head First设计模式》一书中，作者通过生动的案例和通俗的语言，深入…...
java后端开发day27--常用API（二）正则表达式爬虫
（以下内容全部来自上述课程） 1.正则表达式（regex） 可以校验字符串是否满足一定的规则，并用来校验数据格式的合法性。 1.作用 校验字符串是否满足规则在一段文本中查找满足要求的内容 2.内容定义 ps：一…...
【UCB CS 61B SP24】Lecture 22 23: Tree and Graph Traversals, DFS, BFS 学习笔记
本文讲解了二叉树的四种遍历方式，以及如何通过前/后序遍历与中序遍历重建出二叉树，接着介绍了新的非线性数据结构：图，详细讲解了图的存储方式与遍历方式，最后使用 Java 基于邻接表的存储方式实现了图与 DFS、BFS 两种遍…...
Redis100道高频面试题
一、Redis基础 Redis是什么？主要应用场景有哪些？ Redis 是一个开源的、基于内存的数据结构存储系统，支持多种数据结构（如字符串、哈希、列表、集合等），可以用作数据库、缓存和消息中间件。 主要应用场景&…...
Mac OS Homebrew更换国内镜像源（中科大；阿里；清华）
omebrew官方的源一般下载包之类的会很慢，所以通常我们都是用国内的镜像源来代替，这样会提高我们的效率。Homebrew主要有四个部分组成: brew、homebrew-core 、homebrew-bottles、homebrew-cask。 代码语言：javascript 代码运行次数…...
excel vlookup的精确查询、模糊查询、反向查询、多列查询
目录 入门 精确查询 模糊查询 反向查询 (搭配 if 函数) 多列查询 (搭配 match 函数) 入门 精确查询 需求: 查找 学生编号是008 所在的班级 操作: 在I2单元格输入公式如下,VLOOKUP(H2,B1:E12,4,FALSE), 得出结果 看一下vlookup 公式每一个参数应该怎么写? 语法: vlookup…...
linux的文件系统及文件类型
目录 一、Linux支持的文件系统 二、linux的文件类型 2.1、普通文件 2.2、目录文件 2.3、链接文件 2.4、字符设备文件: 2.5、块设备文件 2.6、套接字文件 2.7、管道文件 三、linux的文件属性 3.1、关于权限部分 四、Linux的文件结构 五、用户主目录 5.1、工作目录…...
MySQL 安装配置（完整教程）
文章目录 一、MySQL 简介二、下载 MySQL三、安装 MySQL四、配置环境变量五、配置 MySQL 5.1 初始化 MySQL5.2 启动 MySQL 服务 六、修改 MySQL 密码七、卸载 MySQL八、结语 一、MySQL 简介 MySQL 是一款广泛使用的开源关系型数据库管理系统（RDBMS）&am…...
C# Unity 唐老狮 No.4 模拟面试题
本文章不作任何商业用途 仅作学习与交流 安利唐老狮与其他老师合作的网站,内有大量免费资源和优质付费资源,我入门就是看唐老师的课程 打好坚实的基础非常非常重要: 全部 - 游习堂 - 唐老狮创立的游戏开发在线学习平台 - Powered By EduSoho 如果你发现了文章内特殊的字体格式,…...
)
给没有登录认证的web应用添加登录认证(openresty lua实现)
这阵子不是deepseek火么？我也折腾了下本地部署，ollama、vllm、llama.cpp都弄了下，webui也用了几个，发现nextjs-ollama-llm-ui小巧方便，挺适合个人使用的。如果放在网上供多人使用的话，得接入登录认证才好&a…...
R语言绘图：韦恩图
韦恩分析 韦恩分析（Venn Analysis）常用于可视化不同数据集之间的交集和并集。维恩图（Venn diagram），也叫文氏图、温氏图、韦恩图、范氏图，用于显示元素集合重叠区域的关系型图表，通过图形与图形…...
STM32——串口通信 UART
一、基础配置 Universal Asynchronous Receiver Transmitter 异步，串行，全双工 TTL电平 ：高电平1 低电平0 帧格式： 起始位1bit 数据位8bit 校验位1bit 终止位1bit NVIC Settings一栏使能接受中断。 之前有设置LCD，…...
【大模型基础_毛玉仁】1.3 基于Transformer 的语言模型
【大模型基础_毛玉仁】1.3 基于Transformer 的语言模型 1.3 基于Transformer 的语言模型1.3.1 Transformer1）注意力层（AttentionLayer）2）全连接前馈层（Fully-connected Feedforwad Layer）3）层正…...
靶场（二）---靶场心得小白分享
开始： 看一下本地IP 21有未授权访问的话，就从21先看起 PORT STATE SERVICE VERSION 20/tcp closed ftp-data 21/tcp open ftp vsftpd 2.0.8 or later | ftp-anon: Anonymous FTP login allowed (FTP code 230) |_Cant get dire…...
大学至今的反思与总结
现在是2025年的3月5日，我大三下学期。 自大学伊始，我便以考研作为自己的目标，有时还会做自己考研上岸头部985,211，offer如潮水般涌来的美梦。 但是我却忽略了一点，即便我早早下定了决心去考研，但并没有早…...
【大模型】Llama 3.2 大语言模型初探：模型权重下载
文章目录 一、简介二、权重下载2.1 方法一：Meta 官网申请下载2.2 方法二：使用 hugging face 下载 一、简介 Llama（Large Language Model Meta AI）是 Meta（原 Facebook）开发的一系列开源大型语言模型。它的目…...
unity学习63，第2个小游戏：用fungus做一个简单对话游戏
目录 1 目标用fungus做一个简单的剧情对话游戏 1.1 先创建一个新的3D项目 1.2 fungus是什么 1.2.1 怎么获得 1.2 在AssetStore里搜索fungus (插件类)--千万别买收费的错的！ 1.3 fungus的官网 1.3.1 官网给的3个下载链接，unity的果然已经失效了 …...
笔记：代码随想录算法训练营day36:LeetCode1049. 最后一块石头的重量 II、494. 目标和、474.一和零
学习资料：代码随想录 1049.最后一块石头的重量II 力扣题目链接 思路：如何讲该问题转化为背包问题：还是对半分去碰，对半分去碰碰剩下的就是最小的。然后背包容量就是一半儿，物品重量等于物品价值等于stones[i] 和上…...
Elasticsearch：解锁深度匹配，运用Elasticsearch DSL构建闪电般的高效模糊搜索体验
目录 Elasticsearch查询分类 叶子查询 全文检索查询 match查询 multi_match查询 精确查询 term查询 range查询 复杂查询 bool查询简单应用 bool查询实现排序和分页 bool查询实现高亮 场景分析 问题思考 解决方案 search_after方案(推荐) point in time方案 方案…...
Android实现漂亮的波纹动画
Android实现漂亮的波纹动画 本文章讲述如何使用二维画布canvas和camera、矩阵实现二、三维波纹动画效果（波纹大小变化、画笔透明度变化、画笔粗细变化） 一、UI界面 界面主要分为三部分 第一部分：输入框，根据输入x轴、Y轴、Z轴倾…...
qt实践教学（编写一个代码生成工具）持续更新至完成———
前言： 我的想法是搭建一个和STM32cubemux类似的图形化代码生成工具，可以把我平时用到的代码整合一下全部放入这个软件中，做一个我自己专门的代码生成工具，我初步的想法是在下拉选框中拉取需要配置的功能，然后就弹出对…...
【数据结构】什么是栈||栈的经典应用||分治递归||斐波那契问题和归并算法||递归实现||顺序栈和链栈的区分
文章目录 🥧栈的初步理解：🥧易错：如何判断栈满🥧栈满理解🥧栈的基本运算📚栈操作的伪代码逻辑（顺序和链栈）📕顺序栈运算实现：顺序栈的表示&#x…...
4.0 vueRouter.导航守卫.ElementPuls知识点)
vue3(笔记)4.0 vueRouter.导航守卫.ElementPuls知识点
---vueRouter 创建路由: 完整写法(懒加载): 默认写法与vue2一致: 导入 然后 写成component: LoginPage import { createRouter, createWebHistory } from vue-routerconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL), routes: [{path:/lo…...
[数字图像处理]实验三：直方图增强
目录 一、实验目的 二、实验原理 三、实验内容（附代码） 四、实验结果及分析 五、实验小结 一、实验目的 1.了解图像增强的意义和目的 2.掌握各种图像增强的基本原理和方法 3.使用MATLAB实现图像增强 二、实验原理 图像增强方法从增强的作用域…...
图像分类项目1：基于卷积神经网络的动物图像分类
1、选题背景及动机 在现代社会中，图像分类是计算机视觉领域的一个重要任务。动物图像分类具有广泛的应用，例如生态学研究、动物保护、农业监测等。通过对动物图像进行自动分类，可以帮助人们更好地了解动物种类、数量和分布情况，从…...