跟着pink老师前端入门教程-day14+15

2.6 main 主体模块制作

HTML：

   <div class="w"><div class="main"><!-- 焦点图模块 --><div class="focus"><ul><li><img src="./images/banner_bg.png" alt=""></li></ul></div><!-- 新闻快报模块 --><div class="newdflash"><!-- 新闻模块 --><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><em><a>减</a></em><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="./images/ad.jpg" alt=""></div></div></div></div>

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;
}.main {width: 980px;height: 455px;margin-left: 220px;/* background-color: darkblue; */
}.focus {width: 721px;height: 455px;float: left;background-color: red;margin-right: 8px;
}.newsflash {float: right;width: 250px;height: 455px;background-color: firebrick;}/* 新闻快报模块 */
.news {height: 165px;border: 1px solid #e4e4e4;margin-left: 5px;/* background-color: firebrick; */
}.news-hd {height: 33px;border-bottom: 1px dotted #e4e4e4;line-height: 33px;padding: 0 15px;
}.news-hd h5 {float: left;font-size: 14px;
}.news-hd .more {float: right;}.news-hd .more::after {font-family: 'icomoon';content: '\e920';
}.news-bd {padding: 5px 15px 0;
}.news-bd ul li {height: 24px;line-height: 24px;overflow: hidden;white-space: nowrap;/* 超出部分省略号显示 */text-overflow: ellipsis;
}/* 生活服务模块 */
.lifeservice {overflow: hidden;height: 209px;/* background-color: rgb(238, 247, 71); */border: 1px solid #e4e4e4;border-top: 0;
}.lifeservice ul {width: 252px;
}.lifeservice ul li {position: relative;float: left;width: 62px;height: 70px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;
}.lifeservice ul li i {display: inline-block;width: 24px;height: 28px;background: url(../images/icons.png) no-repeat -19px -15px;margin-top: 12px;
}.lifeservice ul li em {position: absolute;top: 0;right: 0;width: 0;height: 0;/* background-color: darkcyan; */border: 10px solid darkcyan;border-top: 18px solid darkcyan;border-bottom-color: transparent;text-align: center;}.lifeservice ul li em a {position: absolute;color: #fff;top: -18px;left: -6px;
}/* 特价商品 */
.bargin {margin-top: 4px;
}

2.7 推荐模块制作  

HTML

    <!-- 推荐模块制作 --><div class="w recom"><div class="recom_hd"><img src="../shopping/images/clock.png" alt=""><p>今日推荐</p></div><div class="recom_db"><ul><li><img src="./images/recommend01.png" alt=""></li><li><img src="./images/recommend01.png" alt=""></li><li><img src="./images/recommend01.png" alt=""></li><li><img src="./images/recommend01.png" alt=""></li></ul></div></div>

CSS

/* 推荐模块制作 */
.recom {height: 163px;margin-top: 12px;background-color: #ebebeb;
}.recom_hd {float: left;width: 206px;height: 163px;background-color: #5c5251;text-align: center;}.recom_hd img {padding-top: 30px;
}.recom_hd p {font-size: 18px;color: #ffffff;margin-top: 10px;
}.recom_db {float: left;
}.recom_db ul li {position: relative;float: left;
}.recom_db ul li img {width: 248px;height: 163px;
}/* :nth-child(-n+3) 从第三个往前面选 */
.recom_db ul li:nth-child(-n+3):after {content: "";position: absolute;right: 0;top: 10px;width: 1px;height: 145px;background-color: #ddd;
}

2.8 楼层区 floor 制作

家用电器的导航栏

HTML

        <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><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>

CSS

.box_hd {height: 30px;padding-bottom: 2px solid #c81623;
}.box_hd h3 {float: left;font-size: 18px;color: #c81623;font-weight: 400;
}.tab_list {float: right;line-height: 38px;
}.tab_list ul li {float: left;
}.tab_list ul li a {margin: 0 15px;
}.floor .a {margin-top: 30px;
}

Tab栏原理-布局需求

要求选项卡个数要内容个数一致。（需要两个盒子：tab_list、tab_content）

当点击选项1，就把内容1显示出来，其余隐藏

根据 tab 切换的原理， tab_content 里面包含 内容部分。 这个内容可以通过ul布局
效果图
HTML 
            <div class="box_bd"><div class="tab_content"><!-- 内容1 --><div class="tab_list_content"><div class="col_210"><ul><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</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_327"><a href="#"><img src="./upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="#"><img src="./upload/floor-1-2.png" alt="" class="border_bottom"><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="#"><img src="./upload/floor-1-5.png" alt="" class="border_bottom"><img src="./upload//floor-1-6.png" alt=""></a></div></div></div></div>

CSS

.box_bd {height: 360px;
}/* 子代选择器 */
.tab_list_content>div {float: left;height: 361px;
}.col_210 {width: 210px;background-color: #f9f9f9;text-align: center;
}.col_210 ul {padding-left: 12px;
}.col_210 ul li {float: left;margin-right: 10px;width: 85px;height: 34px;border-bottom: 1px solid #ccc;text-align: center;line-height: 33px;
}.col_327 {width: 327px;
}.col_221 {width: 221px;border-right: 1px solid #ccc;
}.col_219 {width: 219px;
}.border_bottom {/* 一般情况下，a如果包含有宽度的盒子，都要转换为块级元素 */display: block;border-bottom: 1px solid #ccc;
}

三、品优购列表页制作

3.1 品优购列表页制作准备工作

1. 列表页面是新的页面，我们需要新建页面文件 list.html 。

2. 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来。

3. 头部和底部的样式也需要，因此 list.html 中还需要引入 common.css 。

4. 需要新的 list.css 样式文件，这是列表页专门的样式文件。

3.2 列表页 header 和 nav 修改

直接导入秒杀图片，再进行定位即可（后续会发全部代码）

效果图

HTML

    <!-- nav 导航制作 --><div 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="#" class="style_red">女鞋</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>

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;
}.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;
}.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;
}.sk_con ul li a {display: block;line-height: 50px;padding: 0 20px;font-size: 14px;font-weight: 400;color: #000;
}/* 给最后一个li里面的a添加 */
.sk_con ul li:last-child a::after {font-family: 'icomoon';content: '\e91e';
}

3.3 列表页主体 sk _container

HTML

    <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></ul></div></div>

css

 /* 列表页主体 sk _container  */
/* li本身就有1像素的边框 */
.sk_bd ul li {float: left;overflow: hidden;margin-left: 6px;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.1 注册页类名命名

注册页面： register.html

注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

4.2 注册页布局

4.3 registerarea 布局

完整注册页代码

五、Web服务器

5.1 Web服务器的含义

服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服务器等。

Web 服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web 客户端 提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。

以下服务器主要指的是Web服务器。

根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。

5.2 远程服务器

本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。

远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何 人都可以利用域名访问我们的网站了。

比如域名： www.mi.com 可以访问小米网站

总结：

1. 服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器

2. 服务器可以分为本地服务器和远程服务器

3. 远程服务器是别的公司提供了一台计算机。

4. 我们可以把网站上传到远程服务器里面， 别人就可以通过域名访问我们的网站了。

5.3 将自己的网站上传到远程服务器

注意：一般稳定的服务器都是需要收费的。 比如：阿里云

这里给大家推荐一个免费的远程服务器（免费空间） http://free.3v.do/

1. 去免费空间网站注册账号。

2. 记录下主机名、用户名、密码、域名。

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

4. 在浏览器中输入域名，即可访问我们的品优购网站了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/442821.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

springboot中获取配置文件中属性值的几种方式

springboot中获取配置文件中属性值的几种方式

目录 第一章、使用Value注解第二章、使用PropertySource注解第三章、使用Configurationproperties注解第四章、使用Java Properties类第五章、使用Environment接口 友情提醒: 先看文章目录&#xff0c;大致了解文章知识点结构&#xff0c;点击文章目录可直接跳转到文章指定位置…
阅读更多...
SpringBoot+Vue的商城系统

SpringBoot+Vue的商城系统

技术选型 开发工具&#xff1a;IntelliJ IDEA2020.3 运行环境&#xff1a;jdk8mysqlmavennodejs 服务端&#xff1a;SpringBootmybatis-plus 前端&#xff1a;VueaxiosElement-UIvuex 成果展示
阅读更多...
Node.js Express 框架 2024版 笔记

Node.js Express 框架 2024版 笔记

1.0 操作命令 Node.js express 框架 https://www.expressjs.com.cn/ npm install -g express-generator expressexpress --pug --git // --pug 添加对 pug 模板引擎的支持 // --git 添加 .gitignore 代码仓库排除 //无法直接安装新版pug模板 npm i npm …
阅读更多...
【Nuxt3】layouts的使用

【Nuxt3】layouts的使用

简言 Nuxt 提供了一个布局框架&#xff0c;用于将常见的 UI 模式提取为可重用的布局。 为了获得最佳性能&#xff0c;在使用时&#xff0c;放置在此目录中的组件将通过异步导入自动加载。 layouts layouts文件夹存放的是ui布局文件&#xff0c;就是实现一个页面整体架构规则的…
阅读更多...
云原生之steam游戏幻兽帕鲁私服部署

云原生之steam游戏幻兽帕鲁私服部署

文章目录 服务端部署docker部署docker-compose部署 客户端安装及破解开始游戏 最近幻兽帕鲁这款游戏比较火&#xff0c;小编专门学习了下私服部署方法。由于这款游戏存在内存泄漏问题&#xff0c;运行一段时间就需重启&#xff0c;小编考虑将游戏部署到云原生中&#xff0c;通过…
阅读更多...
qemu 抓取linux kernel vmcore

qemu 抓取linux kernel vmcore

一、背景 在qemu调试linux kernel时 有时我们会遇到dump 情况&#xff0c;这时可以通过gdb 方式连接分析dump&#xff0c; 但实际中我们用得更多的是离线dump 分析&#xff0c;分析的文件通常是vmcore&#xff08;linux kernel panic 生成的coredump文件&#xff09;或者ramdu…
阅读更多...
记录 arm 开发板上 nginx 配置 http 服务注意事项

记录 arm 开发板上 nginx 配置 http 服务注意事项

1. 自定义项目&#xff0c;需要在 conf.d 目录中增加一个 .conf 配置文件&#xff1a; server {listen 9200; # 端口号server_name localhost; # 服务名称location / {root /home/imx6q/media; # 项目根目录&#xff08;需要修改 n…
阅读更多...
JavaScript高级：js中面向对象编程

JavaScript高级：js中面向对象编程

目录 1 引言 1.1 两者的区别 1.2 优缺点 2 封装性 3 原型 3.1 原型对象 3.2 构造函数和原型中的this如何指向 3.2.1 构造函数 3.2.2 原型对象 4 数组扩展案例--> 求和 和 最大值 5 原型对象中的constructor属性 6 对象原型 7 对象原型中的constructor属性 8 上…
阅读更多...
深入了解5G终端射频标准中的频谱发射与互调特性

深入了解5G终端射频标准中的频谱发射与互调特性

前面的频谱发射我们已经学习了占用带宽、带外发射和杂散发射&#xff0c;今天是频谱发射的最后一部分内容&#xff1a;互调。在很多的标准规范中&#xff0c;都有互调测试的相关内容&#xff0c;但测试条件、测试要求和测试方法都不尽相同。我们可以不必纠结互调是否有某种固定…
阅读更多...
欢迎报名！数境·第七届工业互联网数据创新应用大赛震撼来袭！

欢迎报名！数境·第七届工业互联网数据创新应用大赛震撼来袭！

欢迎报名&#xff01; 由深圳市宝安区人民政府和中国信息通信研究院共同主办的数境第七届工业互联网数据创新应用大赛正式开赛啦~~~ 中国信通院“数境”品牌赛事起始于2017年工业大数据创新大赛&#xff0c;伴随着我国制造业高端化、智能化、绿色化发展不断成长&#xff0c;至…
阅读更多...
【图文详解】阿里腾讯华为云服务器被攻击后更换服务器IP操作步骤合集

【图文详解】阿里腾讯华为云服务器被攻击后更换服务器IP操作步骤合集

阿里云 固定公网IP地址更换 情况一&#xff1a;实例创建时间不足6小时 前提条件在尝试更换固定公网IP地址之前&#xff0c;必须确保ECS实例满足以下所有条件&#xff1a; 实例创建时间不超过6小时。已成功分配一个固定公网IP地址。如果在实例创建时未分配固定公网IP地址&am…
阅读更多...
如何快速记忆小鹤双拼键位图？

如何快速记忆小鹤双拼键位图？

记忆方法&#xff1a;韵母表 图形 最常用字 韵母表&#xff1a;双拼的基础 图形&#xff1a;帮助新手快速联想回忆 最常用字&#xff1a;快速打字基础 一、单韵母&#xff08;紫色方块&#xff09; 一一对应如下表&#xff1a; 单韵母aoeiu、AOEIV 二、复韵母—箭矢型&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023