第二次作业练习

最新推荐文章于 2024-07-19 18:46:52 发布

maqi1107

最新推荐文章于 2024-07-19 18:46:52 发布

阅读量412

点赞数 5

文章标签： css html5

本文链接：https://blog.csdn.net/maqi1107/article/details/138227118

版权

小米布局练习：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<a href="#">小米澎湃OS</a>

<a href="#">小爱开放平台</a>

<a href="#">下载app</a>

<a href="#">Select Location</a>

</div>

</div>

<ul>

<li><a href="">xiaomi手机</a></li>

<li><a href="">redmi手机</a></li>

</ul>

</div>

<span>

</svg>

</span>

</form>

</div>

<div class="left1"><a href="#">笔记本平板</a></div>

<div class="left1"><a href="#">智能路由器</a></div>

</ul>

</div>

</div>

</body>

</html>

CSS：

.header{

width: 1226px;

height: 140px;

background-color: #f13105;

}

.top{

width: 1226px;

height: 40px;

background-color: #cddb0b;

}

.nav{

width: 767px;

height: 40px;

background-color: #da822a;

float: left;

}

.info{

width: 142px;

height: 40px;

background-color: #1ed75c;

float: right;

}

.cart{

width: 120px;

height: 40px;

background-color: #1263e4;

float: right;

}

.header1{

width: 1226px;

height: 100px;

background-color: #794475;

}

.logo{

width: 56px;

height: 56px;

background-color: #ec5407;

float: left;

position: relative;

top: 25%;

left: 1%;

}

.headerNav{

width: 850px;

height: 100px;

background-color: #0ad195;

float: right;

}

.search{

width: 296px;

height: 50px;

background-color: #980b9d;

float: right;

position: relative;

top:25%

}

padding: 0;

margin: 0 auto;

}

.home{

width: 1226px;

height: 644px;

background-color: #139b85;

}

.dig{

width: 1226px;

height: 460px;

background-color: #1da644;

position: relative;

}

.category{

width: 234px;

height: 460px;

background-color: #d6c7c79c;

float: left;

}

ul{

width: 234px;

height: 460px;

background-color: #d6c7c79c;

}

ul li{

width: 234px;

height: 42px;

background-color: #fff;

position: relative;

top: 15px;

list-style: none;

}

.left{

width: 41px;

height: 69px;

background-color: #4e07f1;

display: inline-block;

position: absolute;

top:40%;

}

.right{

width: 41px;

height: 69px;

background-color: #4e07f1;

display: inline-block;

position: absolute;

top:40%;

right: 240px;

}

.small{

width: 1226px;

height: 170px;

background-color: #100101;

float: left;

display: flex;

justify-content: space-between;

}

.a{

width: 300px;

height: 170px;

background-color: #976c97;

display: inline-block;

}

时间倒计时：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div>

<span id="d"></span>天

<span id="h"></span>小时

<span id="m"></span>分钟

<span id="s"></span>秒

</div>

let New_Date = new Date('2024-07-03T00:00:00');

function updateCountdown(){

let New_Date = new Date();

let father = New_Date - New_Date;

let days = Math.floor(F / (1000*60*60*24));

let hours = Math.floor((F % (1000*60*60*24))/(1000*60*60));

let minutes = Math.floor((F%(1000*60*60))/(1000*60));

let seconds = Math.floor((F%(1000*60))/1000);

document.getElementById('d').textContent = days;

document.getElementById('h').textContent = hours;

document.getElementById('m').textContent = minutes;

document.getElementById('s').textContent = seconds;

}

updateCountdown();

</script>

</body>

</html>

maqi1107

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
第二次作业练习

<a href="#">手机</a></div><div class="left1"><a href="#">笔记本平板</a></div><div class="left1"><a href="#">智能路由器</a></div><div class="left1"><a href="#">电视</a></div><div class="left1"><a href="#">家电</a><a href="">电视</a>
复制链接

扫一扫