蛋糕网页官网

最新推荐文章于 2024-06-13 10:01:09 发布

qq_48956903

最新推荐文章于 2024-06-13 10:01:09 发布

阅读量146

点赞数

文章标签：大数据 vscode

本文链接：https://blog.csdn.net/qq_48956903/article/details/125556529

版权

1.效果图

2、style.css文件：

@charset "utf-8";

/* CSS Document */

*{padding:0;

margin: 0;}

#center{width:1685px;

padding: 0;

margin: 0;}

/*轮播图*/

.imgBox{

/* min-width: 1685px;*/

height: 500px;

float:left;

overflow:hidden;

}

.imgBox img{

min-width: 1685px;

height: 500px;

float:left;

}

.main_enter,box{float: left;

}

.main_enter{margin-right: 120px;}

.main{margin-left: 150px;

padding-bottom: 20px;

overflow:hidden;

}

.box>img{height: 25px;

line-height: 25px;

margin-left:0px;}

input{

width: 280px;

border: 2px solid;

height: 25px;

background-size: 25px;

background-position:5px center;

margin-top: 25px;

float: left;

}

margin-top: 8px;

font-size: 5px;

color: #8A8A8A;}

.box>img{height:25px;

margin-top: 25px;

cursor: pointer;}

.clears{clear:both;

overflow:hidden;/*内容超出隐藏*/

}

text-decoration:none;

}

.nav_ul{backgroud:#000;

min-width:1682px;

height:50px;

position: absolute;

float:left;

}

ul{background-color: #000;

}

.nav_ul>li{list-style: none;

float:left;}

.nav_ul>ul{list-style: none;}

.submenu>li{list-style: none;

font-size:16px;/*通常二级菜单字体要比一级菜单小一些*/

background-color:transparent;

margin-right: 1px;

padding:5px;

display:block;

}

.nav_ul>li>a{color:#FFFFFF;

}

.nav_ul>li>ul>li>a{

list-style: none;

font-size:100%;

color: #fff;

}

.nav>li{display:none;

position: absolute;

}

.nav_ul>li>a{

color:#fff;

margin-top:20px;

display:inline-block;/*设置高度才有效*/

height: 20px;

width: 135px;

text-align:center;

line-height: 20px;

font-size:16px;

margin-left:40px;

}

.nav_ul>li>a:hover{

font-size:120%;

color: #E79A45;

}

.nav>li>a:hover{

/* display: block;*/

color: #E79A45;

}

.nav>li:hover ul{display: block;}

.a{

margin-left: 150px;

}

.nav{list-style: none;

text-align: center;

margin-left: 40px;

margin-top: 5px;

}

.nav>li{padding-top: 10px;}

.nav_ul>li:hover ul{display: block;}

#tab{overflow: hidden;

min-width:400px;

height: 250px;

position: relative;

float:left;

}

#center{

/* margin:20px;*/

margin-left:240px;

/*margin:50px auto 50px 240px;*/

min-width: 1685px;

}

#center>div img{

float: left;

margin-left: 6px;

margin-top: 50px;

margin-bottom: 40px;

}

.table,.table1{text-align: left;

margin:50px auto;

}

.a3{font-size: 5px;}

.a4{color: red;font-size: 20px;}

.a5,.a6,.a8{font-size: 20px;

}

.a5{margin-left: 240px;

margin-top: 50px;}

/*width: 100%;}*/

.table1{margin-top: -1px;}

.a12{min-width: 1685px;}

.a13{min-width: 1685px;}

#sztp{margin-left:240px;

/* margin-right: auto;*/

min-width:1685px;

}

img{margin-left: -5px; /*负像素需要调整测试，并不是只要是负的就会没有空隙*/

}

.box4{position: absolute;

margin-top:350px;

margin-left: 680px;

font-size: 20px;

color: aliceblue;

border:2px solid #FFFFFF;

padding:8px 100px;

}

.box4>a:visited{color: aliceblue;}

.box4>a:hover{color:aliceblue;

text-decoration:underline;

font-size:101%;

}

.a7{margin-left:17px;}

.a8{margin-top: 20px;}

.box3{

margin-left: 260px;

padding-top: -6px;

color: #FFF4F4;

font-size: 5px;}

.ts,.ts1,.ts2{position: relative;

}

.words{font-size: 15px;

position: absolute;

margin-top:655px;

margin-left: 30px;

}

.words>a:visited{color: #E1914A;}

.words1>a:visited{color:#E03033;}

.words2>a:visited{color:#22CADF;}

.words1{font-size: 15px;

position: absolute;

margin-top:655px;

margin-left: 430px;

}

.words2{font-size: 15px;

position: absolute;

margin-top:655px;

margin-left: 830px;}

.words4{position: absolute;

margin-top:210px;

margin-left: 60px;

font-size: 15px;

color: aliceblue;

border:1px solid #000000;

padding:8px 35px;

}

.words4>a:link{color: #000;}

.words4>a:hover{color:#000;

text-decoration:underline;

}

.words,.words1,.words2>a:link,a:visited{

text-decoration:underline;}

.words>a:hover{font-size:105%;}

.words1>a:hover{font-size:105%;}

.words2>a:hover{font-size:105%;}

.hear{background: url(images/10.jpg);

min-width: 1685px;

height: 200px;

text-align: center;}

.hear_img>img{height: 40px;

margin-left: 40px;

margin-top: 50px;}

.heard1,.heard2,.heard3,.heard4,.heard5{float: left;

margin-top: 30px;}

.heard1>a:link,a:visited{color:#8D8D8D;}

.heard2>a:link,a:visited{color:#8D8D8D;}

.heard3>a:link,a:visited{color:#8D8D8D;}

.heard4>a:link,a:visited{color:#8D8D8D;}

.heard5>a:link,a:visited{color:#8D8D8D;}

.heard1>a:hover{text-decoration: underline;color: #fff;}

.heard2>a:hover{text-decoration: underline;color: #fff;}

.heard3>a:hover{text-decoration: underline;color: #fff;}

.heard4>a:hover{text-decoration: underline;color: #fff;}

.heard5>a:hover{text-decoration: underline;color: #fff;}

.heard1{margin-left: 240px;}

.heard2,.heard3{margin-left: 50px;}

.heard4,.heard5{margin-left: 150px;}

.heard_text1,.heard_text2,.heard_text3{float: left;

margin-top: 65px;}

.heard_text1>a:link,a:visited{color:#8D8D8D;}

.heard_text2>a:link,a:visited{color:#8D8D8D;}

.heard_text3>a:link,a:visited{color:#8D8D8D;}

.heard_text1>a:hover{text-decoration: underline;color: #fff;}

.heard_text2>a:hover{text-decoration: underline;color: #fff;}

.heard_text3>a:hover{text-decoration: underline;color: #fff;}

.heard_text1,.heard_text2,.heard_text3{margin-left: 50px;}

.heard_text1{position: absolute;}

.heard_text1{margin-left: 240px;

}

.heard_text2{position: absolute;}

.heard_text2{margin-left: 320px;

}

.heard_text3{position: absolute;}

.heard_text3{margin-left: 440px;

}

3、index.html文件：

<!doctype html>

<html>

<head>

</head>

<body>

<div >

</div>

<p >奶油面包马卡龙芝士蛋糕咖啡</p>

</div>

<!--

-->

</div>

<div>

</li>

</li>

</li>

</ul>

</div>

<div class="box4"><a href="https://www.omick.cn/zhuanye/hb/">点击看更多></a></div>

</div>

</div>

<tr>

<td colspan="3" class="a5">今日限时购</td>

</tr>

<tr>

<td>曲奇饼干什锦巧克力味饼干弄弄牛<br>油香味<p>

风靡日本，精美高贵时尚</p><p class="a4">¥44.9</p></td>

<td>现烤云南经典玫瑰花饼甜<br>而不腻鲜花饼<p>无任何添加剂，纯手工制作</p><p class="a4">¥50.8</p></td>

</tr>

<tr>

<td>正宗法式马卡龙甜点糕点西式点<br>心休闲零食品<p>新鲜正宗，品质保证</p><p class="a4">¥35.9</p></td>

<td>蛋糕冰淇淋 100%天然乳脂健康兼<br>美味漂亮的童趣图案<p>冰淇淋蛋糕销售冠军</p><p class="a4">¥278.00</p></td>

</tr>

</table>

</div>

<hr size="3px" color="

#000000" noshade="true" width="1185px">

</div>

</div>

<div class="a5">咖啡饮品

<div><hr size="2px" color="

#000000" noshade="true" width="1185px"></div>

</div>

<tr>

<td>韩国原装进口乐天芒果汁饮料一箱<br>180ml×15灌<p>

夏季饮品</p><p class="a4">¥47.5</p></td>

<td>美国原装进口地扪西梅汁纯果<br>汁不加防腐剂<p>果蔬汁，纯果汁不加水</p><p class="a4">¥39.00</p></td>

</tr>

<tr>

<td>明星产品速溶黑咖啡无糖纯咖啡粉<br>无奶顺滑<p>2*100g零添加</p><p class="a4">¥99.9</p></td>

<td>统一assam阿萨姆小奶茶 360ml/瓶<br>椰奶型小椰<p>丝柔顺滑，回到奶茶小时候</p><p class="a4">¥6.9</p></td>

</tr>

</table>

</div>

</div>

</div>

</div>

<!--

<div class="box3">首页官网推荐咖啡？饮品<br>糕点点心手工烘焙会员登录</div>

</div>

-->

</body>

//轮播图

//1.运动函数

var index=0;

function ChangeImg(){

index++;

var a=document.getElementsByClassName("img-slide");

if(index>=a.length) index=0;

for(var i=0;i<a.length;i++){

a[i].style.display='none';

}

a[index].style.display='block';

}

setInterval(ChangeImg,2000);

</script>

</html>

qq_48956903

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
蛋糕网页官网

蛋糕官网的简单排版。
复制链接

扫一扫

蛋糕网页官网

“相关推荐”对你有帮助么？