©2020-2024 ioDraw All rights reserved
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="
viewport" content="width=device-width, initial-scale=1.0" /> <title>骰子布局</title>
<style> body { margin: 10px 0 0 0; display: flex; justify-content: space-around;
} body>div { display: flex; width: 100px; height: 100px; border-radius: 4px;
border: 2px solid red; box-sizing: border-box; } p { width: 15px; height: 15px;
background-color: black; border-radius: 50%; margin: 2px; } .div1 {
justify-content: center; align-items: center; } .div2{ flex-direction: column;
justify-content: space-around; align-items: center; } .div3{ justify-content:
space-around; align-items: center; } .div3>p:nth-child(1){ align-self:
flex-start; } .div3>p:nth-child(3){ align-self: flex-end; } .div4{
justify-content: space-around; } .div4>div{ display: flex; flex-direction:
column; justify-content: space-around; } .div5{ justify-content: space-around; }
.div5>div{ display: flex; flex-direction: column; justify-content: space-around;
} .div6{ flex-direction: column; justify-content: space-around; } .div6>div{
display: flex; justify-content: space-around; } .div7{ flex-direction: column;
justify-content: space-around; } .div7>div{ display: flex; justify-content:
space-around; } .div8{ flex-direction: column; justify-content: space-between; }
.div8>div{ display: flex; justify-content: space-between; } .div9{
flex-direction: column; justify-content: space-around; } .div9>div{ display:
flex; justify-content: space-around; } /*todo:请补全剩余骰子布局代码*/ </style> </head> <
body> <!--骰子1--> <div class="div1"> <p></p> </div> <!--骰子2--> <div class="div2">
<p></p> <p></p> </div> <!--骰子3--> <div class="div3"> <p></p> <p></p> <p></p> </
div> <!--骰子4--> <div class="div4"> <div> <p></p> <p></p> </div> <div> <p></p> <p
></p> </div> </div> <!--骰子5--> <div class="div5"> <div> <p></p> <p></p> </div> <
div> <p></p> </div> <div> <p></p> <p></p> </div> </div> <!--骰子6--> <div class="
div6"> <div> <p></p> <p></p> </div> <div> <p></p> <p></p> </div> <div> <p></p> <
p></p> </div> </div> <!--骰子7--> <div class="div7"> <div> <p></p> <p></p> <p></p>
</div> <div> <p></p> </div> <div> <p></p> <p></p> <p></p> </div> </div>
<!--骰子8--> <div class="div8"> <div> <p></p> <p></p> <p></p> </div> <div> <p></p>
<p></p> </div> <div> <p></p> <p></p> <p></p> </div> </div> <!--骰子9--> <div class
="div9"> <div> <p></p> <p></p> <p></p> </div> <div> <p></p> <p></p> <p></p> </
div> <div> <p></p> <p></p> <p></p> </div> </div> </body> </html>
*{ padding: 0; margin: 0; } a{ text-decoration-line: none; color: black; }
.headerbox{ height: 78px; background-color: white; /* width: 90%; */ } .navbox{
width: 94%; height: 78px; margin: 0 auto; background: url(../images/logo.png)
no-repeat; position:relative; background-position-y: center; } .navbox h1{
display: none; } .navright{ position:absolute; top:20px; right: 0; /* display:
flex; justify-content: flex-end; align-content: center; */ } .navright a{
display: inline-block; width: 120px; height: 32px; text-align: center;
line-height: 32px; } .on{ color: #0099f2; background-color: #f0f9ff; } .banner{
height: 450px; background-color: #008bed; } .container{ width: 92%; height:
448px; margin: 0 auto; position: relative; } .phoneimg{ size: inherit; }
.content{ position:absolute; top:140px; left:70%; } .content h2{ font-size: 40px
; line-height: 40px; color: #fdfdfd; } .info{ font-size: 16px; line-height: 26px
; color: #99d1f8; } .tabtitle{ width: 990px; height: 100px; /* position:
relative; */ margin: 0 auto; /* border: 1px solid #000; */ } .tabtitle h3{
font-size: 24px; color: #000000; float: left; margin-top: 30px; /* display:
block; */ } .tabtitle h4{ float: right; font-size: 24px; color: #cccccc; margin:
30px 30px 30px 0; } body{ background-color: #F9F9F9; } .list{ width:990px;
margin: 0 auto; } .list ul{ display: flex; flex-wrap:wrap; justify-content:
center; align-content:center; align-self: center; /* margin: 0 15px; */ } .list
ul li{ width: 300px; height: 374px; background-color: white; margin: 0 30px
20px 0; list-style-type: none; } .list ul>li img{ width: 260px; height: 260px;
display: block; margin: 20px 20px; } .list ul>li p{ color: #333333; font-size:
14px; display: block; margin: 20px 20px; } .more{ width: 960px; background-color
: #e8eef2; font-size: 20px; line-height: 62px; text-align: center; margin: 10px
auto; /* width: ; */ } .more a{ color: #59ABDF; } .footer{ height: 256px;
background-color: #e5e5e5; margin-top: 30px; } .footerL{ height: 210px; width:
710px; float: left; margin-top: 32px; margin-left: 20px; } .footerL p{
margin-bottom: 15px; font-size: 14px; line-height: 25px; } .footerR{ float:
right; margin: 20px 60px; } .footerR img{ width: 141px; height: 152px; }
function getweather() { //TODO：请补充代码 $.ajax({ method:"get", url:
"js/weather.json", success(data){ console.log(data.result); var result=data.
result; for (let i = 0; i < result.length; i++) { $("img:eq("+i+")").attr("src",
result[i].weather_icon); $(".item-mess:eq("+i+")>div:eq(0)").html(result[i].
weather); $(".item-mess:eq("+i+")>div:eq(1)").html(result[i].temperature); $(
".item-mess:eq("+i+")>div:eq(2)").html(result[i].winp); $(".item-mess:eq("+i+
")>div:eq(3)>span:eq(0)").html(result[i].days); $(".item-mess:eq("+i+
")>div:eq(3)>span:eq(1)").html(result[i].week); } } }) } getweather();
<style> @media only screen and (min-width:900px) and (max-width: 1400px){ nav
.content, main section{ width: 900px; } } @media only screen and (min-width:
650px) and (max-width: 900px){ nav .content,main section{ width: 700px; } main
ul li{ width: 100%; } } @media only screen and (max-width: 650px){ main section{
width: 100%; } main ul li{ width: 100%; } .list{ display: none; } nav .menu{
display: block; position: absolute; right: 10px; top: 10px; } } </style>