品优购项目

最新推荐文章于 2024-05-28 01:06:19 发布

饮尽杯中月

最新推荐文章于 2024-05-28 01:06:19 发布

阅读量1k

点赞数 1

分类专栏：前端 CSS

本文链接：https://blog.csdn.net/qq_35218523/article/details/108950138

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

日常小结

1.font:不需要设置的属性可以省略（去默认值），但是必须保留font-size和font-family属性，否则font属性将不起作用。

2.em是一个相对单位，就是当前元素（font-size）一个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小。

3.ps量高度不要加边框。

量高度
在这里插入图片描述

3.1拼接时精细测量

在这里插入图片描述

4.字不一样多，所以给定宽度不方便，所以只给高度，宽度用padding撑开。

在这里插入图片描述

5.li让文字竖着，所以给li添加浮动。

6.盒子没有宽度的时候，padding不会撑开盒子。

7.相邻li之间的行高测量（即li的高度）：上一行的底沿边到下一行的底沿。

行高测量

7.行高只能让单行文本垂直居中。

**注意：**文字默认左上角对齐
在这里插入图片描述

在这里插入图片描述

使用50px而不是48px是为了有缝隙，这样更美观，其实48px也行。

8.当1，2，3子盒子都需要居中对齐的时候，不需要对每个子盒子都设置，只需要对父盒子设置即可，因为行高可以继承。

9.行内元素只有左右的内外边距，没有上下的。

在这里插入图片描述

10.遇见外边距合并塌陷的问题的时候，考虑使用padding。

11.子盒子可以大于父盒子。

在这里插入图片描述

解决由于最右侧li添加margin-right，而导致li盒子掉到下一层的问题。
解决方法：增大子盒子一个margin-right的宽度即可。
在这里插入图片描述
当最右侧的li盒子因为超过.new-bd盒子导致掉到下一层：
1.将父盒子ul的宽度增大，可以保证四个li在ul中可以装下。
2.在.news-bd里面将超出部分使用overflow:hidden，讲ul超出.news-bd的部分隐藏掉。

12.高度(宽度)剩余法：

在这里插入图片描述
按照优先使用宽度（width）高度（height）其次使用内边距（padding）再次外边距（margin）。
width(height) > padding > margin

13.选择插入图片还是背景图片

页面中大部分使用插入图片，一些不太重要的小图标和超大背景图使用背景图片。
但是在实际开发中，logo全部使用背景图片。

14.使用插件选择组的方法

在这里插入图片描述

15.在使用固定定位和绝对定位时，如果盒子中没有内容，则需要制定宽度，因为绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块，而行内块默认的宽度是内容的宽度。

16.需要透明背景，就只能裁剪为PNG格式（PNG24更清晰，PNG8颜色不丰富，可能有锯齿状）。

17.作为背景的图片，在CSS中需要设置盒子大小，即宽高。

18.使用的定位的盒子，就转化为行内块，需要高度，此时也会继承父盒子的行高。

19.应该左侧对齐，文字才能往右走显示。

.count {
   position: absolute;
   top: -5px;
   /*应该是左侧对齐 文字才能往右走显示*/
   left: 100px;
   background-color: #e60012;
   height: 14px;
   padding: 0 3px;
   line-height: 14px;
   color: #fff;
   /*border-radius: 左上角 右上角  右下角  左下角;*/
   border-radius: 7px 7px 7px 0;
}

在这里插入图片描述

20.有宽度时，如果使用padding-left或者right，则需要对weigth做计算。有高度时，如果使用padding-top或者bottom，则需要对height做计算。

21. font-family: 'icomoon’仅对图标产生效果，所以不用担心对a里面的汉字或者英文产生效果。

在这里插入图片描述

22.text-align:center;

里面的文字内容、行内块、行内元素都可以居中对齐。

23.不给宽度的盒子，如何居中对齐：

底部通栏盒子page不给宽度的原因：底部的盒子不能给宽度，因为里面序号盒子的显示个数不确定。
对其方法:保证.page里里面装的行内元素或行内块元素（千万不能使用div等块级元素，因为使用块级元素后，还需要浮动后设置margin的值，margin值不确定，所以不是最优解），再使用text-align:center即可。
在这里插入图片描述

<div class="page">
        <span class="page_num">
            <a href="#" class="pn_prev">&lt;&lt;上一页</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#" class="pn_next">&gt;&gt;下一页</a>
        </span>
    </div>

.page {
    margin: 40px 0;
    
    text-align: center;
}

.page_num a {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #cccccc;
}
.page_num .pn_prev,
.page_num .pn_next {
    width: 83px;
}

24.合理使用父级，会使得代码更加简洁。

25.注册界面设置布局小技巧

25.1 1号盒子设置居中对齐，然后2号盒子设置如图大小，且将其设置为文字吧右对齐即可。

25.2 每行都是使用li来布局

在这里插入图片描述

26.出现行内块，如果有图片和文字，经常需要使用vertical-align。

27.遇见这种左边小图标，右边文字的格式

一般需要左边小盒子使用inline-block和vertical-align
在这里插入图片描述

28.登录和注册同时出现

考虑将其放置一个盒子里面（li）
在这里插入图片描述

<ul>
	<li>品优购欢迎您！ </li>
	<li> 
		<a href="#">请登录</a>
		<a href="#" class="style-red">免费注册</a>
	</li>
</ul>

29.自定义重复出现的颜色

在这里插入图片描述

.style-red {
	color: #c81623;
}

<ul>
	<li>品优购欢迎您！ </li>
	<li> 
		<a href="#">请登录</a>
		<a href="#" class="style-red">免费注册</a>
	</li>
</ul>

30.icon图标垂直居中后，偏下

在这里插入图片描述

原因：其实盒子2在盒子1里面已经垂直居中了，但是由于向下三角箭头处于盒子2里面偏下的地方，然后前面的文字要底部对齐，所以导致文字和图标都偏下。

拓展：
行高：
在这里插入图片描述

<div class="father">
        <div class="son">
            123
        </div>
</div>

.father {
            width: 100px;
            height: 100px;
            background-color: pink;
            line-height: 100px;
        }
        .son {
            width: 50px;
            background-color: skyblue;
        }

在这里插入图片描述
注意注意：
1.当子盒子没给高度时，子盒子继承了父盒子的行高，而当一个盒子只有行高没有高的时候，高默认就该继承的行高。
2.某盒子未设置高，设置了行高，就相当于设置了高。
3.font-size是字体的大小，不是height。

.father {
            width: 100px;
            height: 100px;
            background-color: pink;
            line-height: 50px;
        }
.son {
       width: 50px;
       background-color: skyblue;
     }

处理方法：让盒子2向上走，不能使用magin-top，因为此处使用i标签，是行内元素没有上下外边距，所以使用行高<高，就让盒子2向上走。

31.顶部导航栏的侧边小竖线处理方案：

31.1 直接键盘输入|。

31.2 设置外边框。

31.3 （京东做法）盒子1和盒子2均用li标签，其中盒子2给一个1px的宽度，然后给一个高度，再给一个背景色模拟出来。

在这里插入图片描述

32. 切透明背景选择什么图片格式

PNG

33. 搜索框规范

1.最外面.search大盒子可以不用给大小，使用里面的input和button来撑开即可。
2.input取消轮廓线更好看。outline:none;
在这里插入图片描述

34.logo优化:

1.logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
2.h1里面在放一个连接，可以返回首页的，给连接一个大小和 logo 的背景图片
3.连接里面要放文字（网站名称），为了搜索引擎收录我们。但是文字不要显示出来
4.要用 text-indent 移到盒子外面（text-indent: -9999px) 然后overflow:hidden 淘宝的做法
5.直接给font-size: 0; 就看不到文字了，京东的做法。
6.最后给连接一个 title 这样鼠标放到logo 上，就可以看到提示文字了

        <div class="logo">
            <h1>
                <a href="index.html" title="品优购">品优购</a>    
            </h1>
        </div>

.header .logo a {
    /* a为行内元素没有大小 */
    display: block;
    overflow: hidden;
    width: 178px;
    height: 57px; 
    background: url(../img/logo.png);
    text-indent: -99px;
}

35.小的背景图为链接的方法：

设置a为块级元素或者行内块（为了设置大小，因为背景图有大小），然后设置background为背景图。
在这里插入图片描述

        <div class="logo">
            <h1>
                <a href="index.html" title="品优购">品优购</a>    
            </h1>
        </div>

.header .logo a {
    /* a为行内元素没有大小 */
    display: block;
    overflow: hidden;
    width: 178px;
    height: 57px; 
    background: url(../img/logo.png);
    text-indent: -99px;
}

36.绝对定位：

子随父相：

方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
- 如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。

结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

.father 
{
	width: 350px;
	height: 350px;
	background-color: pink;
	margin: 100px;
	/*标准流的子盒子总是以父级为准移动位置*/
	/*如果 父级 没有定位 绝对定位子盒子 以我们文档为准浏览器移动位置*/
	/*如果 父级 有定位 绝对定位子盒子 以父级为准移动位置*/   
	/*position: relative;*/
}

需要注意：就算父亲不是相对定位，也是以父级为准移动位置
如果父级没有定位绝对定位子盒子以我们文档为准浏览器移动位置
如果父级有定位绝对定位子盒子以父级为准移动位置

37.父盒子和子盒子的大小

父盒子为块级元素，有宽高：
1. 子盒子为块级元素，未设置宽高：
1.1 若其中有文字，则宽为父盒子的宽，高度为文字的高
但是若
1.2 若没有文字，则子盒子设置高的话，就可以看到宽为父盒子的宽，若不子盒子设置高设置，则看不见子盒子
**注意：**子盒子块级元素是继承父级盒子的宽，不继承高
2. 子盒子为行内块元素，未设置宽高：
2.1 若其中有文字，则子盒子大小为文字的大小
2.2 若没有文字，则子盒子不存在
注意： 默认子盒子块级元素的宽是父盒子的宽，高是内部内容的高

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	宽度是容器的100%（不包括高度）	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

38.(.dd、.dt和dd、dt的区别)nav导航栏的制作

1…dd、.dt

<div class="dropdown">
	<div class="dt"></div>
	<div class="dd">
		<ul>
			<li></li>
		</ul>
	</div>
</div>

在这里插入图片描述
**注意：**是class="dt"和“dd”的div盒子,而不是dt和dd标签。

2.dd、dt
可以设计为大盒子划分6个的dl

<dl class=" mod_help_item">
                    <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>

39.fireworks使用注意事项：

注意处理精灵图前，锁定位图

40.处理在精灵图里面相同大小的图片：

简化CSS代码的方式
在这里插入图片描述

<li>
	<i class="mod-service-icon mod_service_zheng"></i>
	<div class="mod_service_tit">
		<h5>正品保障</h5>
		<p>正品保障，提供发票</p>
	</div>
</li>
<li>
	<i class="mod-service-icon mod_service_kuai"></i>
	<div class="mod_service_tit">
		<h5>正品保障</h5>
		<p>正品保障，提供发票</p>
	</div>
</li>

.mod-service-icon {
	/*浮动的盒子 可以直接给大小的 不需要转换*/
	float: left;
	width: 50px;
	height: 50px;
	margin-left: 35px;
	background: url(../img/icons.png) no-repeat;
}
.mod_service_zheng {
	background-position: -253px -3px;	
}
.mod_service_kuai {
	background-position: -255px -54px;
}

41.PS垂直划分

在这里插入图片描述

42.text-algin：center;和margin：0 auto;居中对齐区别:

margin：0 auto;块级盒子居中对齐
text-algin：center;文本或者行内元素，行内块元素居中对齐

  <div class="mod_copyright_links">
         <a href="index.html">关于我们</a>
         <a href="index.html">联系我们 </a>
         <a href="index.html">联系客服 </a>
         <a href="index.html">商家入驻 </a>
         <a href="index.html">营销中心 </a>
         <a href="index.html">手机品优购 </a>
         <a href="index.html">友情链接</a>
         <a href="index.html">销售联盟</a>
         <a href="index.html">品优购社区 </a>
         <a href="index.html>品优购公益 </a>
         <a href="index.html">English Site</a>
         <a href="index.html>Contact U</a>
 </div>

在这里插入图片描述
该情况推荐方法二：（更简单）
虽然父盒子是版心有宽度，但是使用margin居中对齐需要设置该盒子的宽度，因为是使得该盒子居中对齐
方法一：

.mod_copyright_links {
    width: 980px;
    height: 100px;
    margin: 0 auto;
    /* text-align: center; */
}

方法二：

.mod_copyright_links {
    text-align: center;
}

43. lifeservice 生活服务模块

lifeservice 盒子宽度为 250 但是装不开里面的 4个小 li
可以让 lifeservice 里面的 ul 宽度为 252 就可以装的下 4个小li，具体看问题11
lifeservice 盒子 overflow 隐藏多余的部分就可以了。
注意:每个li盒子由i标签和p标签组成

.lifeservice li {
	/*li让盒子竖着排列*/
	float: left;
	width: 62px;
	height: 70px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.lifeservice li a {
	/* 因为a需要大小 */
	display: block;
	/* overflow: hidden; 解决i 引起的 外边距塌陷合并的问题*/
	overflow: hidden;
	/* 宽度默认为父盒子的100% */
	height: 100%;
}

.lifeservice li p {
    text-align: center;
}
.lifeservice_icons
{
	/* 转为块级元素 */
    display: block;
    width: 24px;
    height: 24px;
    background: url(../img/icons.png) no-repeat;
    /* 注意父盒子要解决塌陷的问题 */
    margin: 10px auto;
}

44.图标加文字的盒子

在这里插入图片描述

无背景图标+h3

<div class="recom_hd fl">
            <img src="img/clock.png" alt="">
            <h3>今日推荐</h3>
</div>

45.

<ul>
	<li class="current"><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>

.current a{
    color: #c81623;
}

在这里插入图片描述

.current {
    color: #c81623;
}

在这里插入图片描述

46.关于border:transparent

.sk_goods {
    float: left;
    width: 286px;
    height: 458px;
    margin-right: 12px;
    background-color: #fff;
    border: 1px solid transparent;
}
.sk_goods:hover {
    border: 1px solid #e12228;
}

在这里插入图片描述

.sk_goods {
    float: left;
    width: 286px;
    height: 458px;
    margin-right: 12px;
    background-color: #fff;
    /* border: 1px solid transparent; */
}
.sk_goods:hover {
    border: 1px solid #e12228;
}

在这里插入图片描述

"47.定位的盒子的居中对齐

使用top buttom left right处理。

48.预览商品列表

在这里插入图片描述
方法一：
三个盒子使用浮动。
方法二（推荐）：
中间的盒子给宽度高度，然后使用margin,进行居中对齐，最后左右盒子使用定位即可，定位盒子的居中对齐见问题47。

49.产品详细信息区域制作

在这里插入图片描述
三个大盒子里的格式类似，所以可以类似处理。
因为每个盒子的格式差不多，所以处理有技巧:

<div class="summary">
	<dl class="summary_price">
		<dt>价格</dt>
		<dd></dd>
	</dl>
	<dl class="summary_promotion">
		<dt>促销</dt>
		<dd></dd>
	</dl>
	<dl class="summary_support">
		<dt>支持</dt>
		<dd></dd>
	</dl>
</div>

1.避免重复处理每个dl盒子里面的dd和dt,可以使用直接设置summary的dd和dt,这样可以简化代码。

.summary dl {
	/*避免重复清除浮动*/
	overflow: hidden;
}
.summary dt,
.summary dd {
	/*避免重复设置浮动*/
	float: left;
}
.summary dt {
	width: 60px;
	padding-left: 10px;
	line-height: 36px;
}

2.设置dt时候发现，上下左侧文字和右侧是对齐的，此时不能使用居中对齐。
在这里插入图片描述
处理方法：
设置如图的盒子（高度剩余法），然后设置padding-left挤开左侧即可。

3.因为5299价格值设置以后，会撑开盒子，而里面的文字”价格”，会跟随撑大的盒子左上角对齐，所以会出现这种情况。
在这里插入图片描述

处理方法：
使得dt的行高=高，实现垂直居中。
易错点（求dt的高）：
方法一：
如图此处的dl.sumarry_price的高是56，然后求dt的高，56px（带了绿色的高度）-padding(上下)=36px（蓝色区域）
方法二（推荐）:
选择computed进行查看
在这里插入图片描述
4. .remark盒子如果使用右浮动，会产生如图效果，因为其右浮动是相对于dd盒子的，所以无法到达.summary_price的右侧。

处理方法：
使用定位，然后相对定位给.summary_price即可。
5.选择数量的盒子的技巧：

.choose_amount盒子，不给边框，给一个背景色测试就行，这个背景色的大小包括了边框的大小，但是该边框实际最后由里面的input和a设置的。
左侧的input盒子的右边框其实在右侧“+”盒子左边框得下边。
原因是：右侧“+”盒子使用了绝对定位，脱离标准流，这样也避免了边框重叠造成的问题。

<div class="choose_btns">
	<div class="choose_amount">
		<input type="text" value="1">
		<a href="javascript:;" class="add">+</a>
		<a href="javascript:;" class="reduce">-</a>
	</div>
	<a href="#" class="addcar">加入购物车</a>
</div>

.choose_btns {
	margin-top: 20px;
}
.choose_amount {
	position: relative;
	float: left;
	width: 50px;
	height: 46px;
	background-color: pink;
}
.choose_amount input {
	width: 33px;
	height: 44px;
	border: 1px solid #ccc;
	text-align: center;
}
.add,
.reduce {
	position: absolute;
	right: 0;
	width: 15px;
	height: 22px;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
	text-align: center;
	line-height: 22px;
}
.add {
	top: 0;
	
}
.reduce {
	bottom: 0;
	/*禁止鼠标样式*/
	cursor: not-allowed;   /* pointer  小手  move  移动  */
}

在这里插入图片描述

50.注册界面，input前面文字右对齐

在这里插入图片描述
可以给每一个label盒子相同的宽度和高度（记得转化为行内块，否则盒子看不见），然后使得label内的文字右对齐。

<li>
    <label for="tel">手机号：</label>
    <input type="text" class="inp" id="tel">
    <span class="error"><i class="error_icon"></i>
    手机号码格式不正确，请重新输入</span>
</li>

.reg_form label {
    display: inline-block;
    width: 100px;
    height: 34px;
    text-align: right;
}

51.Tab切换

原理：

当点击hd里面的大家电时，bd里面的大家电显示，小家电隐藏
当点击hd里面的小家电时，bd里面的小家电显示，大家电隐藏
在这里插入图片描述

情景一：

在这里插入图片描述

代码结构：

hd里面结构ul>li>a
bd里面ul(不同class)*n
hd里面的li和bd里面的ul一一对应
在这里插入图片描述

<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>
<div class="box-bd">
		<ul class="tab-con">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul> 
		<!-- <ul class="tab-con">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul> -->
</div>

代码实现

<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>
<div class="box-bd">
		<ul class="tab-con">
			<li class="w209">
				<ul class="tab-con-list">
					<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>
				<img src="upload/floor-1-1.png" alt="">
			</li>
			<li class="w329">
				<img src="upload/pic1.jpg" alt="">
			</li>
			<li class="w219">
				<div class="tab-con-item">
					<a href="#">
						<img src="upload/floor-1-2.png" alt="">
					</a>
				</div>
				<div class="tab-con-item">
					<a href="#">
						<img src="upload/floor-1-3.png" alt="">
					</a>
				</div>
			</li>
			<li class="w220">
				<div class="tab-con-item">
					<a href="#">
						<img src="upload/floor-1-4.png" alt="">
					</a>
				</div>
			</li>
			<li class="w220">
				<div class="tab-con-item">
					<a href="#">
						<img src="upload/floor-1-5.png" alt="">
					</a>
				</div>
				<div class="tab-con-item">
					<a href="#">
						<img src="upload/floor-1-6.png" alt="">
					</a>
				</div>
			</li>
		</ul>
		<!-- <ul class="tab-con">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul> -->
			</div>

情景二：

在这里插入图片描述
detail_tab_con里面五个div盒子依次对应detail_tab_list里面五个li

<div class="detail_tab_list">
					<ul>
						<li class="current">商品介绍</li>
						<li>规格与包装</li>
						<li>售后保障</li>
						<li>商品评价（50000）</li>
						<li>手机社区</li>
					</ul>
</div>
<div class="detail_tab_con">
					<div class="item">
						<ul class="item_info">
							<li>分辨率：1920*1080(FHD)</li>
							<li>后置摄像头：1200万像素</li>
							<li>前置摄像头：500万像素</li>
							<li>核      数：其他</li>
							<li>频      率：以官网信息为准</li>
							<li>品牌： Apple ♥关注</li>
							<li>商品名称：APPLEiPhone 6s Plus</li>
							<li>商品编号：1861098</li>
							<li>商品毛重：0.51kg</li>
							<li>商品产地：中国大陆</li>
							<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
							<li>系统：苹果（IOS）</li>
							<li>像素：1000-1600万</li>
							<li>机身内存：64GB</li>
						</ul>
						<p> 
							<a href="#" class="more">查看更多参数</a>
						</p>
						<img src="upload/detail_img1.jpg" alt="">
						<img src="upload/detail_img2.jpg" alt="">
						<img src="upload/detail_img3.jpg" alt="">
					</div>
					<!-- 
					<div class="item">规格与包装</div>
					<div class="item">售后保障</div> 
					-->
</div>

52.命名技巧：

tab切换

在这里插入图片描述

1.tab-list 2.tab-con 3.tab-con-list 4.tab-con-item

仅宽度不同的多个盒子在一个div中

可考虑 w329,w219,w220
在这里插入图片描述

53.侧边栏

1.li里面不需要包含a

<div class="fixedtool">
	<ul>
		<li class="current">家用电器</li>
		<li>手机通讯</li>
		<li>家用电器</li>
		<li>家用电器</li>
		<li>家用电器</li>
		<li>家用电器</li>
	</ul>
</div>

2.保证浏览器缩放时候，侧边栏保持和版心距离不变

2.1 使用固定定位,然后相对于屏幕的。
2.2 left:50%：侧边栏就一直在通栏中间了，然后返回margin-left:-(版心宽度/2 + 侧边栏宽度+合适间距调整)

.fixedtool {
	position: fixed;
	top: 100px;
	left: 50%;
	margin-left: -676px;
	width: 66px;
	background-color: #fff;
}

在这里插入图片描述

54.

在这里插入图片描述
以为大盒子已经使用了padding，所以“立即抢购”的盒子使用定位是最优解。

55.在多个li盒子等间距排列中，最右边盒子多使用margin-right，导致最右侧盒子掉下

1.直接将最右侧盒子都设置特定的class名，然后将它.class名盒子的margin-right=0。

2.将ul扩大，然后使用overflow砍去多余部分。（推荐）

3.nth-child(每行盒子个数*n)(推荐)

4.box-sizing: border-box;(推荐)（CSS3特性，padding和border不会成达盒子）

56.

方法一：1，2，3盒子均浮动
在这里插入图片描述
方法二：3盒子为块级盒子的居中对齐，使用margin:0 auto;然后左右盒子使用定位，其不受到标准流的限制，所以更合适。（推荐）

盒子模型

原理图
在这里插入图片描述

原始设置padding以及margin:

在这里插入图片描述

在这里插入图片描述
在a链接元素里面padding-left: 20px:

在a链接元素里面margin-left: 20px:

在li元素里面padding-left: 20px：

不要在li里面margin-left: 20px：

饮尽杯中月

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
品优购项目

1.font:不需要设置的属性可以省略（去默认值），但是必须保留font-size和font-family属性，否则font属性将不起作用。2.em是一个相对单位，就是当前元素（font-size）一个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小。...
复制链接

扫一扫