web实训第二天——骰子布局与小程序开发
建立touzi.html与touzi.css
.html代码
<!DOCTYPE html>
<html>
<head>
<style>
div{ float:left}
</style>
<title>骰子布局</title>
<link rel="stylesheet" type="text/css" href="touzi.css">
</head>
<body bgcolor="#2b2b2b" >
<div class="a-a box1" >
<span class="item"></span>
</div>
<div class="a-a box2">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<div class="a-a box3">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="a-a box4">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<div class="a-a box5">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<div class="a-a box6">
<div class="column">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<div class="a-a box7">
<div class="column">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</body>
</html>
.css代码
.item {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #333;
margin: 4px;
box-shadow: inset 0 3px #111,inset 0 -3px #555;
}
.a-a{
width: 104px;
height: 104px;
margin: 16px;
padding: 4px;
background-color: #e7e7e7;
border-radius: 10%;
object-fit: contain;
box-shadow:
inset 0 5px white,
inset 0 -5px #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
display: flex;
justify-content: space-between;
}
.box2 .item:nth-child(2) {
align-self: flex-end;
}
.box3 {
display: flex;
}
.box3 .item:nth-child(2) {
align-self: center;
}
.box3 .item:nth-child(3) {
align-self: flex-end;
}
.box4{
display: flex;
justify-content: space-between;
}
.box4 .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box5 {
display: flex;
}
.box5 .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box5 .column:nth-child(2) {
align-self: center;
}
.box6 {
display: flex;
justify-content: space-between;
}
.box6 .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box7 {
display: flex;
justify-content: space-between;
}
.box7 .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box7 .column:nth-child(2) {
align-self: center;
}
小程序
app.json
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/aa/aa",
"pages/taibai/taibai",
"pages/mine/mine"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ddd",
"navigationBarTitleText": "一剑天涯",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true,
"backgroundColor": "#000000"
},
"tabBar": {
"color": "#000000",
"selectedColor": "#6A5ACD",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "image/timg2.png",
"selectedIconPath": "image/timg.jpg"
},
{
"pagePath": "pages/aa/aa",
"text": "分类",
"iconPath": "image/aa.jpg",
"selectedIconPath": "image/aa2.jpg"
},
{
"pagePath": "pages/aa/aa",
"text": "购物车",
"iconPath": "image/buy1.png",
"selectedIconPath": "image/buy.jpg"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "image/my1.jpg",
"selectedIconPath": "image/my2.png"
}
]
},
"sitemapLocation": "sitemap.json"
}
新建image文件夹，放入图片
在pages内建立相关文件夹