11月7日作业:
1. 将php中文网移动端剩余部分的内容写完
实例
/*页面初始化样式*/
body,
footer {
min-width: 768px;
max-width: 320px;
margin: 0 auto;
background: #edeff0;
/*设置滚动条左边滚动初始化*/
overflow-y: initial;
/*防止以后使用定位属性&＃xff0c;将该元素设置为父级元素*/
position: relative;
color: gray;
/*隐藏手机端的水平滚动条*/
overflow-x: hidden;
/*点击链接时出现高亮&＃xff0c;设置设置为透明&＃xff0c;主要针对苹果手机*/
--webkit-tap-highlight-color: transparent;
}
img {
/*设置图片为自适应显示*/
width: 100%;
}
ul,
li {
margin: 0px;
padding: 0px;
}
li {
/*\去除列表前的小黑点*/
list-style: none;
}
a {
/*去掉下划线*/
text-decoration: none;
color: gray;
}
/*导航样式*/
/*头部样式*/
header {
/*固定定位*/
position: fixed;
top: 0px;
/*固定定位元素必须设置宽度与高度*/
width: 100%;
height: 42px;
background-color: #444444;
color: white;
/*设置最小尺寸*/
min-width: 320px;
max-width: 768px;
/*转为Flex容器,设置元素排列*/
display: flex;
/*元素主轴分散,两端对齐*/
justify-content: space-between;
/*元素交叉轴居中对齐*/
align-items: center;
}
/*第一张,最后一设置通用样式*/
header > img:first-of-type,
header > img:last-of-type {
width: 26px;
height: 26px;
margin: 5px;
}
/*设置中间LOGO样式*/
header > img {
width: 94px;
}
/*设置头像为正圆*/
header > img:first-of-type {
border-radius: 50%;
}
/*************** 轮播图设置 ***************/
.banner {
display: flex;
height: 200px;
}
/*************** 导航区 ***************/
nav {
background: #fff;
/*设置导航块为弹性盒子*/
display: flex;
/*主轴为垂直方向&＃xff0c;且不换行*/
flex-flow: column nowrap;
}
/*设置图片大小*/
nav img {
width: 45px;
height: 49px;
}
nav > ul {
/*设置每个ul为弹性盒子*/
display: flex;
/*每个菜单项水平且不换行,可以不写&＃xff0c;也是默认值*/
flex-flow: row nowrap;
}
/*每一菜单项均分全部空间*/
nav ul li {
flex: 1;
}
/*图片与文本应该做为一个组件,统一设置*/
nav ul li a {
/*设置每个a标签为弹性盒子*/
display: flex;
/*设置图片垂直排列*/
flex-flow: column wrap;
/*交叉轴上居中显示*/
align-items: center;
/*外边距可以使菜单项之间不太拥挤*/
margin: 10px;
}
/*************** 主体内容区 ***************/
/* 推荐课程区*/
main {
height: 100%;
display: flex;
flex-flow: column nowrap;
}
/*课程水平排列*/
main > .recommend > section:first-of-type {
display: flex;
/*可省了&＃xff0c;因为是默认值*/
flex-flow: row nowrap;
}
/*每个课程图片平分全部空间*/
main > .recommend > section:first-of-type > a {
margin: 5px;
flex: 1;
}
/*设置图片高度*/
main > .recommend > section:first-of-type > a > img {
height: 90px;
}
/*课程垂直排列*/
main > .recommend > section:last-of-type {
display: flex;
flex-flow: column nowrap;
}
/*设置垂直排列课程背景颜色*/
main > .recommend > section:last-of-type > div {
background: #fff;
margin: 5px;
/*设置为弹性盒子*/
display: flex;
/*默认值*/
flex-flow: row nowrap;
}
/*设置垂直排列图片高度*/
main > .recommend > section:last-of-type > div img {
width: 350px;
height: 90px;
}
main > .recommend > section:last-of-type > div > span {
/*background: red;*/
display: flex;
flex-flow: column nowrap;
margin-top: 5px;
padding-left: 10px;
}
main > .recommend > section:last-of-type > div > span i {
font-style: normal;
background: #333333;
color: white;
border-radius: 6px;
padding: 0 5px;
font-style: smaller;
}
/*页脚*/
footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 42px;
height: 50px;
display: flex;
flex-flow: row nowrap;
padding-top: 10px;
border-top: 1px solid #cccccc;
}
footer > a > img {
width: 16px;
height: 16px;
}
footer a {
display: flex;
/*设置图片垂直排列*/
flex-flow: column wrap;
/*交叉轴上居中显示*/
align-items: center;
flex: 1;
}
footer a:first-of-type > img,
footer a:first-of-type > span {
color: red;
}
/*最近更新*/
main > .recent-updates > section > div img {
width: 350px;
height: 90px;
}
main > .recent-updates {
display: flex;
flex-flow: column nowrap;
}
main > .recent-updates > section > div {
/*border:1px solid red;*/
background: #fff;
margin: 10px;
display: flex;
/*交叉轴上空间在元素二侧平均分配,元素间隙比它到边框间隙大一倍*/
align-content: space-around;
}
main > .recent-updates > section > div > span {
display: flex;
flex-flow: column nowrap;
align-content: flex-end;
margin-top: 5px;
padding-left: 10px;
}
main > .recent-updates > section > div > span > span:first-of-type {
margin-top: 5px;
font-size: x-small;
}
main > .recent-updates > section > div > span > span:nth-of-type(2) {
/*border: 1px solid red;*/
margin-top: 5px;
font-size: x-small;
display: flex;
/*主轴上首元素贴起始线,尾元素贴终止线,剩余元素均分空间*/
justify-content: space-between;
}
main > .recent-updates > section > div > span > span > i {
/*font-size: small;*/
background: #333333;
color: white;
border-radius: 6px;
padding: 0 5px;
}
/*最新文章*/
main > .previous-posts {
display: flex;
/*垂直排列且不换行*/
flex-flow: column nowrap;
}
main > .previous-posts > section > div img {
width: 218px;
height: 65px;
}
main > .previous-posts > section > div {
background: #fff;
padding: 10px;
margin: 10px;
display: flex;
/*主轴上首元素贴起始线,尾元素贴终止线,剩余元素均分空间*/
justify-content: space-between;
}
main > .previous-posts > section > div > span {
/*border:1px solid red;*/
display: flex;
flex-flow: column nowrap;
/*主轴上空间在元素二侧平均分配,元素间隙比它到边框间隙大一倍*/
/*justify-content: space-around;*/
}
main > .previous-posts > section > div > span > a:first-of-type {
font-weight: bold;
}
main > .previous-posts > section > div > span > a:last-of-type {
font-size: x-small;
}
main > .previous-posts > section > div:last-of-type {
/*border:1px solid red;*/
color: gray;
justify-content: center;
}
/*最新博文*/
main > .latest-blog {
display: flex;
/*垂直排列且不换行*/
flex-flow: column nowrap;
}
main > .latest-blog > section > div {
/*border:1px solid red;*/
background: #fff;
padding: 10px;
margin: 10px;
}
main > .latest-blog > section > div > span {
display: flex;
justify-content: space-between;
}
main > .latest-blog > section > div > span > a:first-of-type {
/*border:1px solid red;*/
/*字体加粗*/
font-weight: bold;
/*字体大小*/
font-size: small;
}
main > .latest-blog > section > div > span > a:last-of-type {
/*border:1px solid red;*/
/*字体加粗*/
/*font-weight: bold;*/
/*字体大小*/
font-size: xx-small;
}
main > .latest-blog > section > div:last-of-type {
/*border:1px solid red;*/
display: flex;
color: gray;
justify-content: center;
}
/* 最新问答 */
main > .latest-question {
display: flex;
/*垂直排列且不换行*/
flex-flow: column nowrap;
}
main > .latest-question > section > div {
/*border:1px solid red;*/
background: #fff;
padding: 10px;
margin: 10px;
}
main > .latest-question > section > div > span {
display: flex;
justify-content: space-between;
}
main > .latest-question > section > div > span > a:first-of-type {
/*border:1px solid red;*/
/*字体加粗*/
font-weight: bold;
/*字体大小*/
font-size: small;
}
main > .latest-question > section > div > span > a:last-of-type {
/*border:1px solid red;*/
/*字体加粗*/
/*font-weight: bold;*/
/*字体大小*/
font-size: xx-small;
}
main > .latest-question > section > div:last-of-type {
/*border:1px solid red;*/
display: flex;
color: gray;
justify-content: center;
margin-bottom: 70px
}
HTML代码
实例
HTML/CSS
Javascript
服务端
数据库
推荐课程
最近更新
2019python自学视频
本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你
中级49738次播放
PHP开发免费公益直播课
主讲&＃xff1a;php中文网-朱老师( Peter Zhu) 时间&＃xff1a;2019.10.17 晚 20:00-22:00 主
中级49738次播放
从零开始到WEB响应式布局
重点介绍了HTML、CSS、web布局前端核心技术&＃xff0c;通过视频讲解&＃xff0c;了解可
初级49738次播放
最新文章
PHP如何去除数组中的空值&＃xff1f;(图文&＃43;视频)
发布时间&＃xff1a;2019-10-09
PHP如何去除数组中的空值&＃xff1f;(图文&＃43;视频)
发布时间&＃xff1a;2019-10-09
PHP如何去除数组中的空值&＃xff1f;(图文&＃43;视频)
发布时间&＃xff1a;2019-10-09
最新博文
移动端 、手机端、去掉横向滚动条 亲测生效&＃xff01;&＃xff01;&＃xff01;
发布时间&＃xff1a;2019-10-09
PHP学习第一天:软件安装篇
发布时间&＃xff1a;2019-10-09
Linux系统CentOS报错&＃xff1a;could not resolve host:mirrorlist.centos.org问题
发布时间&＃xff1a;2019-10-09
最新问答
固定定位后会突破原来的定位父级&＃xff1f;
发布时间&＃xff1a;2019-10-09
密码规则错误
发布时间&＃xff1a;2019-10-09
php可以定位客户端嘛
发布时间&＃xff1a;2019-10-09
首页
视频
社区
我的
效果&＃xff1a;
2. 将中间导航菜单区的代码手抄至少一遍, 并给每一行代码加上注释
手抄&＃xff1a;
3. 作业总结
通过该项目实战&＃xff0c;让我对flex各种属性的使用能更加得心应手。
还有一些不足的地方&＃xff0c;css的一些属性记不住&＃xff0c;今后我会多写&＃xff0c;多看&＃xff0c;多记的。
京公网安备 11010802041100号