Html-移动端与响应式

flex: 2;

}

.newinformation {

flex: 5;

background-color: rgb(226, 243, 71);

}

二、苹果官网首页练习

模板：苹果官网

<meta

name=“viewport”

content=“width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”

/>

Mac

ipad

iphone

watch

music

TV

SUPPORT

---

MAC

IPAD

IPHOME

WATCH

TV

MUSIC

SUPORT

让节日，快乐每一个人。

选购好礼

.banner {

display: flex;

width: 100%;

height: 569px;

background-color: #edeffe;

flex-direction: column;

justify-content: center;

align-items: center;

}

.copywarp {

flex: 2;

display: flex;

flex-direction: column;

justify-content: flex-start;

align-items: center;

text-align: center;

}

.copywarp .redapple {

margin: 20px 0;

width: 54px;

height: 67px;

background-image: url(“…/imag/applered.png”);

background-position: center;

background-repeat: no-repeat;

}

.copywarp h2 {

width: 500px;

position: inherit;

font-size: 43px;

line-height: 1.08349;

color: #1d1d1f;

padding-left: 20px;

margin-bottom: 20px;

}

.copywarp .rightlogo a {

text-decoration: none;

color: #06c;

}

.copywarp .rightlogo a:hover {

text-decoration: underline;

}

.rightlogo {

position: relative;

}

.copywarp .rightlogo::before {

position: absolute;

left: 65px;

top: 3px;

content: " ";

display: block;

width: 15px;

height: 15px;

background-image: url(“…/imag/xiangyou1.png”);

background-position: center center;

background-size: 100% auto;

background-repeat: no-repeat;

}

.picture {

width: 80%;

height: 90%;

height: 281px;

flex: 3;

display: flex;

flex-direction: row;

justify-content: space-around;

margin: 0px;

}

.picture .img_1 {

flex: 1;

}

.picture .img_2 {

flex: 1;

}

.picture .img_3 {

flex: 1;

}

• {

margin: 0;

padding: 0;

}

.nav {

width: 100%;

height: 44px;

background-color: rgba(0, 0, 0, 0.8);

display: flex;

justify-content: center;

align-items: center;

font-family: “宋体”;

font-size: 12px;

}

.nav a {

color: #fff;

/* 设置a标签下划线为none */

text-decoration: none;

width: 102px;

text-align: center;

}

.nav > .logo {

height: 44px;

width: 44px;

background-image: url(“…/imag/logo.png”);

background-repeat: no-repeat;

background-position: center;

}

.nav > .search {

width: 44px;

height: 44px;

background-image: url(“…/imag/search.png”);

background-repeat: no-repeat;

background-position: center;

}

.nav > .buy {

width: 44px;

height: 44px;

background-image: url(“…/imag/buy.png”);

background-repeat: no-repeat;

background-position: center;

}

label {

width: 44px;

height: 44px;

}

.togglebtn {

width: 44px;

display: none;

position: relative;

flex-direction: column;

justify-content: center;

align-items: center;

}

.togglebtn > .line {

width: 18px;

height: 1px;

background-color: #fff;

display: none;

transition: all 0.5s;

transform-origin: left center;

}

.togglebtn .line:nth-child(1) {

position: absolute;

top: 15px;

}

.togglebtn .line:nth-child(2) {

position: absolute;

top: 27px;

}

/*

设定屏幕小于768像素时的像素

*/

.navpage {

width: 100vw;

overflow: hidden;

display: flex;

height: 0vh;

transition: all 0.8s;

position: fixed;

left: 0;

top: 0;

background-color: #000;

}

.navpage .navmain {

width: 100%;

}

@media only screen and (max-width: 768px) {

.togglebtn {

display: flex;

position: relative;

z-index: 100;

}

.nav > .logo {

position: relative;

z-index: 100;

}

.togglebtn > .line {

display: block;

}

.nav > .text {

display: none;

}

.nav {

justify-content: space-between;

}

.nav > a {

width: 50px;

}

.nav .togglebtn {

order: 1;

}

.nav .logo {

order: 2;

}

.nav .buy {

order: 3;

}

#choose:checked ~ .togglebtn .line:nth-child(1) {

transform: rotate(44deg);

}

#choose:checked ~ .togglebtn .line:nth-child(2) {

transform: rotate(-43deg);

}

#choose:checked ~ .navpage {

display: flex;

/*

vw:viewport width 视窗的宽度 ==100vw =100%视窗的高度

vh：viewport height:100vh == 100% viewport height

*/

width: 100vw;

height: 100vh;

color: #fff;

position: fixed;

left: 0;

top: 0;

background-color: #000;

flex-direction: column;

padding-top: 44px;

}

.searchInput {

margin: 0px 28px;

display: flex;

justify-content: flex-start;

align-items: center;

height: 44px;

border-radius: 4px;

color: #ccc;

background-color: rgba(45, 45, 45, 0.98);

}

.searchInput .icon {

width: 32px;

height: 36px;

background-image: url(“…/imag/search.png”);

background-repeat: no-repeat;

background-position: center;

/* 设置图片背景时，一定要考虑 图片的url 位置 尺寸 重复*/

}

.searchInput input {

flex: 1;

margin: 0 10px;

height: 100%;

background: transparent;

border: none;

outline: none;

color: #fff;

}

hr {

border-color: #333;

margin-top: 15px;

}

.navList {

margin: 0 28px;

display: flex;

flex-direction: column;

justify-content: center;

}

.navList a {

width: 100%;

height: 44px;

color: #fff;

text-align: left;

line-height: 44px;

border-bottom: 1px solid #333;

}

.navList a:last-child {

border-bottom: none;

}

}

练习完结版

<meta

name=“viewport”

content=“width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”

/>

Mac

ipad

iphone

watch

music

TV

SUPPORT

---

MAC

IPAD

IPHOME

WATCH

TV

MUSIC

SUPORT

让节日，快乐每一个人。

让节日，

快乐每一个人。

选购好礼

新款

更大屏幕腕上见

进一步了解

购买

更大屏幕腕上见

进一步了解

购买

iphonestyle

• {

margin: 0;

padding: 0;

}

.nav {

width: 100%;

height: 44px;

background-color: rgba(0, 0, 0, 0.8);

display: flex;

justify-content: center;

align-items: center;

font-family: “宋体”;

font-size: 12px;

}

.nav a {

color:rgba(255,255,255,0.82);

/* 设置a标签下划线为none */

text-decoration: none;

width: 102px;

text-align: center;

}

.nav a:hover{

color: #fff;

}

.nav > .logo {

height: 44px;

width: 44px;

background-image: url(“…/imag/logo.png”);

background-repeat: no-repeat;

background-position: center;

}

.nav > .search {

width: 44px;

height: 44px;

background-image: url(“…/imag/search.png”);

background-repeat: no-repeat;

background-position: center;

}

.nav > .buy {

width: 44px;

height: 44px;

background-image: url(“…/imag/buy.png”);

background-repeat: no-repeat;

background-position: center;

}

label {

width: 44px;

height: 44px;

}

.togglebtn {

width: 44px;

display: none;

position: relative;

flex-direction: column;

justify-content: center;

align-items: center;

}

.togglebtn > .line {

width: 18px;

height: 1px;

background-color: #fff;

display: none;

transition: all 0.5s;

transform-origin: left center;

}

.togglebtn .line:nth-child(1) {

position: absolute;

top: 15px;

}

.togglebtn .line:nth-child(2) {

position: absolute;

top: 27px;

}

/*

设定屏幕小于768像素时的像素

*/

.navpage {

z-index: 10;

width: 100vw;

overflow: hidden;

display: flex;

height: 0vh;

transition: all 0.8s;

position: fixed;

left: 0;

top: 0;

background-color: #000;

}

.navpage .navmain {

width: 100%;

}

@media only screen and (max-width: 700px) {

.togglebtn {

display: flex;

position: relative;

z-index: 100;

}

.nav > .logo {

position: relative;

z-index: 100;

}

.togglebtn > .line {

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。