1.知识要理一理。梳理。当天讲了什么内容？当天我学习到了什么内容？看懂。所有的学习型从模仿开始。1.看懂代码，看懂思路，学思路，多问自己问题，为什么要这么写？下一步为什么要这么写？因 果。2.多练多敲。熟能生巧。勤能补拙。
2.只有认真专心对一件事情付出百分之两百的耐心才能看起来毫不费力。昨天看到大神香一直在研究琢磨看代码。所有的收获都是努力应得的。一份耕耘，一份收获。坚定。笃定。相信自己，不卑不亢，不骄不躁，遇见困难，敢于向别人求助。
3.导入的图片是服务器端的图片。
一号店网页：
pagehome.html
- 中秋送礼图鉴
- 营养早餐
- 宠物食品
- 垃圾分类
臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机
￥
718
￥
798
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机
￥
718
￥
798
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机
￥
718
￥
798
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机
￥
718
￥
798
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机
￥
718
￥
798
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机
￥
718
￥
798
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机
￥
718
￥
798
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机
￥
718
￥
798
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机
￥
718
￥
798
可能比你自己更懂你
【品牌特惠】帽子男夏天户外防晒透气凉帽网帽遮阳帽男士太阳帽鸭舌帽棒球帽潮 白色 87款网帽 可调节
homePage.css
* {
margin: 0px auto;
padding: 0px;
}
/*background-color: #F5F5F5;*/
#con {
width: 1366px;
overflow: hidden;
background-color: #F5F5F5;
}
header {
width: 1200px;
height: 100px;
background: lightblue;
}
/*section网页主体中的轮播广告*/
.gg {
width: 1366px;
height: 300px;
background: no-repeat url("//img12.360buyimg.com/img/jfs/t1/77276/15/8655/96360/5d6736baEa757f6f4/f16793fd23b7aaaa.jpg");
background-size: contain;
/*自适应图片大小*/
margin: auto;
/*给父级容器定义相对定位元素*/
position: relative;
}
.gg ul {
list-style: none;
display: flex;
color: #666;
width: 500px;
/*给子元素定位绝对定位元素*/
position: absolute;
bottom: -8px;
left: 390px;
}
.gg li {
width: 100px;
height: 30px;
background: white;
margin: 10px;
text-align: center;
line-height: 30px;
font-size: 12px;
}
.gg li:hover {
cursor: pointer;
background: #666;
color: white;
}
/*.div_mid*/
.div_mid{
width: 1024px;
}
/*超级单品样式*/
section .superSingle{
width: 1070px;
height: 370px;
background: #EE3A42;
margin-top: 10px;
}
section .superSingle ul{
display: flex; /* 将ul父级容器下所有的子元素放置一行显示,子元素的宽度会压缩 */
flex-wrap: wrap; /*会根据定义的子元素宽度自行自动换行 */
}
section .superSingle li{
list-style: none;
width: 210px;
height: 216px;
background: white;
margin-top: 5px;
}
/*去除超级单品的第一个li标签的背景颜色*/
section .superSingle li:first-of-type{
background-color: transparent; /*设置背景颜色为透明色*/
}
section .superSingle .single_top img{
width: 110px;
height: 110px;
margin-left: 50px;
}
section .superSingle li a{
text-decoration: none;
font-size: 12px;
color: #666;
}
section .superSingle .single_bottom .s_title{
/* 多余文本省略... */
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.s_con{
width: 120px;
}
section .superSingle li:hover{
/*变形_缩放*/
transform: scale(1.05);
/*transform: translateX(1px); */ /*变形_平移*/
/*设置过渡效果*/
/*transition: all linear 1s; */
}
/*底部 */
footer{
margin-top: 90px;
}
footer .div_foot_top{
width: 1100px;
}
footer .div_foot_top a{
display: inline-block;
text-decoration: none;
width: 250px;
margin-left: 20px;
}
footer .div_foot_top a .b_span{
/*display: block;*/ /*b标签行内元素更改成块级元素*/
vertical-align: top; /* vertical-align 垂直居中,只对行内元素有效 */
}
footer .div_foot_top a span{
font-size: 14px;
color: #666666;
display: inline-block;
width: 120px;
}
footer .div_foot_top a .b_span b{
font-weight: bold;
font-size: 16px;
color: #333;
display: inline-block;
margin-top: 12px;
}
footer .div_foot_top img{
/*设置过渡效果*/
transition: all linear 1s;
}
footer .div_foot_top img:hover{
/*变形_旋转 */
transform: rotate(360deg);
}
footer .div_foot_mid {
display: flex;
width: 1200px;
/*设置边框头部样式*/
border-top: 1px solid #999;
padding-top: 10px;
margin-top: 10px;
}
footer .div_foot_mid .div_foot_mid_left{
width: 700px;
display: flex; /* 给当前元素的子元素设置和浮动一样的效果,但该元素还在标准文档流中 */
}
footer .div_foot_mid .div_foot_mid_left a{
text-decoration: none;
font-size: 12px;
color: #666;
}
footer .div_foot_mid .div_foot_mid_left a:hover{
color: orangered;
}
footer .div_foot_mid .div_foot_mid_left dt{
height: 32px;
padding: 0 8px;
font-size: 14px;
color: #666;
line-height: 32px;
overflow: hidden;
font-family: "Microsoft YaHei";
color: #666;
font-weight: bold;
}
footer .div_foot_mid .div_foot_mid_left dd{
padding: 0 8px;
}
footer .div_foot_mid .div_foot_mid_right{
width: 300px;
display: flex;
}
footer .div_foot_mid .div_foot_mid_right p{
font-size: 16px;
font-weight: bold;
padding: 5px 0px;
color: #666666;
}
footer .div_foot_bottom{
text-align: center;
}
footer .div_foot_bottom p:nth-of-type(1) a{
text-decoration: none;
color: #666666;
font-size: 12px;
}
/*后代选择器 */
footer .div_foot_bottom p:nth-of-type(1) a:hover{
color: red;
}
footer .div_foot_bottom p:nth-of-type(2){
padding: 10px;
font-size: 14px;
color: #333;
}
/*网页 section*/
section .under_log{
text-align: center;
margin-top: 90px;
}
section .under_log img{
width: 390px;
height: 65px;
}
section .under_log .u_log_font{
width: 155px;
height: 22px;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #999;
letter-spacing: 1px; /*字体间隙*/
}
/*background: pink;
height: 500px;
* */
section .you_like_list{
background: pink;
height: 500px;
width: 1150px;
}
section .you_like_list ul{
display: flex;
}
section .you_like_list li{
list-style: none;
width: 168px;
height: 236px;
background-color: white;
}
section .you_like_list li img{
width: 150px;
height: 136px;
margin: 9px;
}
/*设置交集选择器样式的写法 */
.single_tit.text_limit_limp{
width: 150px;
height: 20px;
margin:2px 9px;
font-size:14px ;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.you_like_list_li_bottom{
/* background: red;*/
height: 78px;
}
.you_like_list.hidden{
width: 168px;
height: 78px;
background: white;
display: none;
}
section .you_like_list li:hover{
border: 1px solid red;
}
section .you_like_list li:hover .hidden{
transform: translateY(-100px);
/*transition: all linear 1s;*/
display: block;
}