文章目录
题1：实现淘宝主页的工具盒框架结构
1 . 使用div盒子模型中的border,margin,padding和position属性,实现淘宝主页的工具盒框架结构
实心框都是图片对象；边线框为文本对象；
解
效果图（iPone 6/7/8 Plus 屏幕尺寸下）
存在的问题
1.适应屏幕变化能力差
大部分元素的大小是写死的
2.图标边缘不对齐
浏览器直接预览会有比较明显的观感
出现过的问题
在调整下方服务的组合元素位置时，使用display: inline-block;后，显示的位置有点奇怪（如图），当时只对橙色区及外部框的大小重新设置，其余样式同同组样式。
没有参悟出原因。之后通过相对定位调整位置。
index.html
类名命名 参照 CSS | 命名规范小记
题中说明了实心框都是图片对象，在这使用了<div>代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EX04</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="g-index">
<div class="g-hd">
<div class="m-nav">
<div class="u-title z-active">公告</div>
<div class="u-title">规则</div>
<div class="u-title">论坛</div>
<div class="u-title">安全</div>
<div class="u-title">公益</div>
</div>
</div>
<div class="g-bd">
<div class="m-info">
<p class="u-text"></p>
<p class="u-text"></p>
</div>
<div class="m-login">
<div class="u-pic"></div>
<div class="u-input">
<p class="u-text"></p>
<p class="u-text"></p>
</div>
<div>
<div class="u-btn">登录</div>
<div class="u-btn">免费注册</div>
<div class="u-btn right">免费开店</div>
</div>
</div>
<div class="m-info">
<p class="u-text"></p>
</div>
<div class="m-service">
<div class="u-func first">
<div class="u-pic first"></div>
<br /><br />充话费
</div>
<div class="u-serline">
<div>
<div class="u-func">
<div class="u-pic"></div>
游戏
</div>
<div class="u-func">
<div class="u-pic"></div>
旅行
</div>
<div class="u-func">
<div class="u-pic"></div>
保险
</div>
</div>
<div>
<div class="u-func">
<div class="u-pic"></div>
彩票
</div>
<div class="u-func">
<div class="u-pic"></div>
电影
</div>
<div class="u-func">
<div class="u-pic"></div>
点外卖
</div>
</div>
</div>
<div class="u-serline endline">
<div class="u-func">
<div class="u-pic"></div>
理财
</div>
<div class="u-func">
<div class="u-pic"></div>
找服务
</div>
<div class="u-func">
<div class="u-pic"></div>
音乐
</div>
<div class="u-func">
<div class="u-pic"></div>
水电煤
</div>
<div class="u-func">
<div class="u-pic"></div>
火车票
</div>
</div>
</div>
</div>
</div>
</body>
</html>
index.css
.g-index {
border: 2px solid #eee;
}
.m-nav {
background: #f7f7f7;
}
.u-title {
display: inline-block;
border-bottom: 2px solid #eee;
padding:10px 42px 10px 42px;
font-size: 50px;
color: #3c3c3c;
}
.u-title.z-active {
background: #fff;
border-bottom: 2px solid #fff;
border-right: 2px solid #eee;
padding:10px 42px 10px 42px;
font-weight: bolder;
color: #111;
}
.m-info {
border-bottom: 2px solid #eee;
padding: 30px 42px 30px 42px;
width: 882px;
}
.m-info .u-text {
height: 50px;
border: 1px solid #000;
}
.u-pic {
background: #ff4400;
}
.m-login {
border-bottom: 2px solid #eee;
padding: 30px 42px 30px 42px;
}
.m-login .u-pic {
display: inline-block;
height: 200px;
width: 200px;
}
.m-login .u-input {
display: inline-block;
margin-left: 38px;
margin-bottom: 20px;
}
.m-login .u-text {
height: 50px;
width: 631px;
border: 1px solid #000;
}
.m-login .u-btn {
display:inline-block;
padding: 20px 0;
margin-top: 20px;
margin-right: 17px;
width: 276px;
text-align: center;
background: #ff4400;
color: #fff;
font-size: 45px;
}
.m-login .u-btn.right {
margin-right: 0px;
}
.m-service .u-func {
display: inline-block;
border: 2px solid #eee;
padding: 27px;
color: #999;
font-size: 40px;
text-align: center;
}
.m-service .u-pic {
background-color: #ff4400;
height: 130px;
width: 130px;
margin-bottom: 10px;
}
.m-service .u-serline {
display: inline-block;
}
.m-service .u-func.first {
position: relative;
top: -28px;
height: 446px;
width: 321px;
}
.m-service .u-pic.first {
position: relative;
top: 85px;
left: 70px;
height: 250px;
width: 160px;
}
.m-service .u-serline.endline {
position: relative;
top: -28px;
}
题2：绘制图形（左上方三角形）
2 . 编写下面图形
解
参考文章：常见的CSS图形绘制合集 （码）
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EX04</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="back"></div>
<div class="triangleL"></div>
<div class="triangleS"></div>
</body>
</html>
index.css
.back {
height: 200px;
width: 200px;
background: #eee;
}
.triangleL {
position: relative;
top: -200px;
width: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
.triangleS {
position: relative;
top:-300px;
width: 0;
border-top: 50px solid #fff;
border-right: 50px solid transparent;
}