品优购页面制作过程与方法（笔记）（二）

一、对于单独段落文字垂直居中方法采取如下设置（盒子独占一行文字位置可通过line-height去随意更值）

二、在无序列表当中遇到ul盒子容纳不下li盒子导致部分空间另起一行，实际上与li盒子的边框有关我们可以采取将ul元素的宽度调大去适应li元素，适时更改li元素的宽度以适应用户需求

三、猜你喜欢部分源码

HTML ：

        <div class="likehd">猜你喜欢</div><div class="like"><ul class="likearea"><li><img src="data:images/like3.png" alt=""><div><i>捷波朗 <br>（jabra）BOOSI劲步</i><br><span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span></div></li><li><img src="data:images/like3.png" alt=""><div><i>捷波朗 <br>（jabra）BOOSI劲步</i><br><span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span></div></li><li><img src="data:images/like3.png" alt=""><div><i>捷波朗 <br>（jabra）BOOSI劲步</i><br><span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span></div></li><li><img src="data:images/like3.png" alt=""><div><i>捷波朗 <br>（jabra）BOOSI劲步</i><br><span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span></div></li><li><img src="data:images/like3.png" alt=""><div><i>捷波朗 <br>（jabra）BOOSI劲步</i><br><span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span></div></li><li><img src="data:images/like3.png" alt=""><div><i>捷波朗 <br>（jabra）BOOSI劲步</i><br><span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span></div></li></ul></div>

css：

.likehd {height: 60px;line-height: 70px;font-size: 18px;
}.like {height: 232px;/* background-color: pink; */border: 1px solid #e4e4e4;
}.likearea {width: 1300px;height: 232px;
}.like .likearea li {float: left;/* text-align: center; */width: 200px;height: 232px;border-right: 1px solid #e4e4e4;/* background-color: skyblue; */
}.like .likearea li img {word-wrap: 200px;height: 160px;
}.like .likearea li div {width: 125px;height: 60px;margin: 0 auto;/* background-color: blue; */
}.like .likearea li:last-child i {font-size: 12px;color: #666666;
}.spanone {font-size: 14px;
}.spantwo {font-size: 18px;
}

品优购页面制作过程与方法（笔记）（二）相关推荐

品优购页面制作过程与方法（笔记）
一.搜索导航模块区 1.对类名的定义名称说明快捷导航栏 shortcut 头部 header 标志 logo 购物车 shopcar 搜索 search 热点词 hotwords 导航 nav ...
三、品优购首页制作_快捷导航区域
代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git 一.品优购首页制作网站的首页一般都是使用index命名,比如in ...
HTML5 和 CSS3 的新特性--品优购首页制作
网站的首页一般都是使用 index 命名,比如 index.html 或者 index.php . 我们开始制作首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面. 以下是我们 ...
PC端品优购网页制作（common.css）
制作网页前的基础学习品优购项目规划 1.1网站制作流程客户沟通制定方案签订合同预付定金不能退初稿审核网页美工会制作原型图和PSD效果图前台页面设计后台工程开发测试验收上线培训后期 ...
品优购网页制作（HTML和css内容）
品优购前期准备书写对应页面首页列表页注册页后话前期准备 1.准备一个大的文件夹,里面包括若干小的文件夹. 2.小的文件夹分为: css-----存储初始化样式以及各个页面的样式 imag ...
【HTML+CSS】01.品优购首页制作——快捷导航shortcut制作
1.常用模块类名命名 2.快捷导航shortcut制作 (1)快捷导航整体上在common.css中: /* 左浮动 */ .fl{float: left; } /* 右浮动 */ .fr{floa ...
八、品优购首页制作_主体区域（下）
一.楼层区floor制作注意这个floor,不要给高度,内容有多少,算多少. 第一楼是家用电器模块:里面包含两个盒子 1号盒子box_hd,给一个高度,有个下边框,里面分为左右2个盒子. 2号盒子b ...
b站pink老师前端课程、品优购项目（跟着练的笔记+代码）
02.网站制作流程 1. 03.品优购项目规划 04.项目搭建 05.样式的模块化开发 06.favicon图标制作 favicon.ico一般用于作为略缩图的网站标志,它显示在浏览器的地址栏或者标签 ...
微信小程序--优购页面制作
优购–项目这个项目学习源自:黑马程序员微信小程序开发前端教程_零基础玩转微信小程序-哔哩哔哩想要更深入的了解此项目,就去黑马程序员学习该项目.该项目个人觉得对于初学者来说是有很大的帮助的.做好该项 ...

品优购页面制作过程与方法（笔记）（二）

品优购页面制作过程与方法（笔记）（二）相关推荐

最新文章

热门文章