习题任务-02
收获:
1.格式布局(标题栏:nav标签 插图:figure标签 文章:article 块元素标签:div)
2.新的标签(lamble标签:显示关联 textarea标签:长文本输入)
3.学到的知识
(1.)浮动
(2.)定位:相对定位 绝对定位 固定定位
(3.)居中的设置
(4.)margin塌陷及去除塌陷的方法
(5.)表格去边框 border-collapse: collapse;
(6.)按钮标签变圆角:border: none;
border-radius: 10px;
4.主要在于思考的过程,代码如下:
02-reset.css
/* 将标签默认的间距设为0 */
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,select,form{
margin: 0;padding: 0;
}
/* 让h标签继承body内设置的字体大小 */
h1,h2,h3,h4,h5,h6{
font-size: 100%;
}
/* 去掉默认的项目图标 */
ul{
list-style: none;
}
em{
font-style: normal;
}
/* 去掉a标签的下划线*/
a{
text-decoration: none;
}
/* 去掉IE下图片做链接时产生的边框 */
img{
border: none;
}
/* 清除margin塌陷和清除浮动 */
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom: 1;
}
.fl{
float: left;
}
.fr{
float: right;
}
02-main.css
body{
margin: 0 30px;
background-color: #eee;
position: relative;
}
/*nav标签设置:顶部标题栏设置*/
nav{
position: fixed;
width: 100%;
height: 64px;
background-color: #444;
}
nav h1{
font: 30px/64px 'Microsoft Yahei';
color: #fff;
margin-left: 15px;
line-height: 64px;
font-style: italic;
}
nav ul{
position: absolute;
top: 0;
right: 20px;
width: 400px;
}
nav ul li a{
float: left;
color: #fff;
font: 15px/64px 'Microsoft Yahei';
margin-right: 15px;
font-style: italic;
}
/*第一部分设置*/
article,aside{
margin: 84px 20px 20px;
width: 93%;
padding: 26px;
background-color: #fff;
}
article h2{
font:bold 23px/40px 'Microsoft Yahei';
margin: 15px 0 10px 0;
}
article h3{
font:bold 19px/40px 'Microsoft Yahei';
color: #666;
margin: 10px 0;
}
article h5{
font:bold 14px/30px 'Microsoft Yahei';
color: #666;
margin: 10px 0;
}
article p{
text-indent: 32px;
}
/*第二部分设置*/
.part2,.part3,.part4,.part5{
margin-top: 20px
}
/*第三部分设置*/
.part3 figure{
border: 1px solid #000;
width: 550px;
height: 250px;
margin-bottom: 20px;
text-align: center;
}
/*第四部分设置*/
.part4 p{
text-indent: 0px;
font:bold 14px/30px 'Microsoft Yahei';
}
.part4 table{
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
#excel{
background-color: #333;
}
#excel td{
color: #fff;
}
#sum{
background-color: #ccc;
width: 100%
}
/*第五部分设置*/
.part5 h2{
border-left: 3px solid #ccc;
font:bold 18px/40px 'Microsoft Yahei';
margin: 15px 0 10px 0px;
padding-left: 20px;
}
aside .email,.play{
float: left;
margin-left: 0px;
font:bold 15px/30px 'Microsoft Yahei';
}
aside span{
float: left;
margin-bottom: 10px;
text-align: right;
width: 250px;
}
.email p{
font:bold 14px/30px 'Microsoft Yahei';
color: #999;
margin-bottom: 16px;
margin-left: 113px;
}
aside div{
margin: 10px;
width: 100%;
}
.submit{
float: left;
width: 95%;
height: 40px;
color: #fff;
background-color: #0936b0;
border: none;
border-radius: 10px;
font:16px/40px 'Microsoft Yahei';
margin:20px auto;
}02-基本页面css,html
任务二:零基础HTML编码及css编码(一)
头号玩家
头号玩家简介
头号玩家导演
HungryPlayer 2018/4/10
这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了
这里有一个链接连接到http://www.baidu.com 这是一个很长很长的段落,这是一个很长很长的段落,这里有个粗体字 这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落.
这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了这里有个粗体字 这是一个很长很长的段落,这是一个很长很长的段落,
这里有一个新的链接点一下试试 这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落.
头号玩家演员
男主演
HungryPlayer 2018/4/10
这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这里有一个链接连接到http://www.baidu.com 这是一个很长很长的段落,这是一个很长很长的段落,这里有个粗体字 这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落.
头号玩家插图
头号玩家
头号玩家
头号玩家
头号玩家
头号玩家
头号玩家观影统计
豆瓣评分
HungryPlayer 2018/4/10
排名1
排名2
排名3
下面是一个表格,统计观影感受的表格
表头
表头
表头
表内容单元格
表内容单元格
操作
表内容单元格
表内容单元格
操作
表内容单元格
表内容单元格
操作
表内容单元格
表内容单元格
操作
总计
1000
