小兔鲜儿静态代码

最新推荐文章于 2024-02-12 14:39:20 发布

小宁老师

最新推荐文章于 2024-02-12 14:39:20 发布

阅读量627

点赞数 2

文章标签： servlet

本文链接：https://blog.csdn.net/weixin_56699543/article/details/126145360

版权

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

</ul>

</nav>

</div>

<nav>

<ul>

</li>

</ul>

</nav>

</div>

</header>

<nav >

<ul >

<li class="li-block">居家茶咖酒具水具杯壶</li>

<li class="li-block">美食网易黑猪水产海鲜</li>

<li class="li-block">服饰室外拖鞋春夏潮鞋</li>

<li class="li-block">个护家庭清洁浴室用品</li>

<li class="li-block">严选卫浴用品高级珠宝</li>

<li class="li-block">数码影音娱乐乐器</li>

<li class="li-block">运动登机箱托运箱</li>

<li class="li-block">杂项乐器杂项</li>

<li class="li-block">品牌品牌推荐</li>

</ul>

</nav>

</div>

</div>

</section>

<p class="fl">新鲜出炉品质靠谱</p>

</div>

<p>新鲜五花肉</p>

</li>

<p>新鲜五花肉</p>

</li>

<p>新鲜猪脚肉</p>

</li>

<p>潮流男款鞋</p>

</li>

</ul>

<p class="fl">人气爆款不容错过</p>

</div>

<p>它们最实惠</p>

</li>

<p>它们最欢迎</p>

</li>

<p>使用场景下精心挑选</p>

</li>

<p>更多超值优惠卷</p>

</li>

</ul>

<p class="fl">国际经典品质保证</p>

</div>

<p></p>

</li>

<p></p>

</li>

<p></p>

</li>

<p></p>

</li>

</ul>

</div>

</article>

</ul>

</div>

</div>

</div>

<p class="pre-line">网易味央黑猪300g*1袋</p>

<p class="font-gray ellipsis">安心黑猪甄选好礼值得拥有</p>

</li>

<p class="pre-line">超细纤维擦车厨房多用清洁抹布</p>

<p class="font-gray ellipsis">超细纤维，清洁加倍不伤身</p>

</li>

<p class="pre-line">新增iPhone13型号，编织纹手机号</p>

<p class="font-gray ellipsis">会呼吸的手机壳，iPhone系列亮相</p>

</li>

<p class="pre-line">巴马香猪脚肉</p>

<p class="font-gray ellipsis">安心黑猪甄选好礼值得拥有</p>

</li>

</ul>

</nav>

<ul>

<p class="pre-line">巴马小猪肉</p>

<p class="font-gray ellipsis">安心小猪甄选好礼值得拥有</p>

</li>

<p class="pre-line">巴马小猪肉</p>

<p class="font-gray ellipsis">安心小猪甄选好礼值得拥有</p>

</li>

<p class="pre-line">木天蓼逗猫棍</p>

</li>

<p class="font-gray ellipsis">超细纤维，清洁加倍不伤身</p>

</li>

</ul>

</nav>

</div>

</ul>

</div>

<ul>

<p class="pre-line">下饭神器酸豆角50克*10袋</p>

<p class="font-gray ellipsis">180天土窖腌制，酸爽翠嫩</p>

</li>

</li>

<p class="pre-line">三分钟即享简餐，日式即食咖啡150克</p>

</li>

<p class="pre-line">百年名庄出品，法国南布干红750豪升</p>

</li>

</ul>

</nav>

<ul>

<p class="pre-line">三腌三榨地道江南小菜，榨菜丝60克*10袋子</p>

</li>

<p class="pre-line">多米尼加陈年朗姆酒700毫升</p>

</li>

<p class="pre-line">名庄金奖加身，西班牙珍藏干红750毫升</p>

</li>

<p class="pre-line">富到流油的高邮咸鸭蛋75克*10枚</p>

</li>

</ul>

</nav>

</div>

<li class="nav-ul-li fr">女式运动鞋</li>

<li class="nav-ul-li fr">【年末狂欢季节】</li>

</ul>

</div>

<ul>

<p class="pre-line">软弹/保暖两款可选，女式舒软轻弹健步鞋</p>

<p class="pre-line ellipsis">清爽透气，享受每一步的轻盈</p>

</li>

<p class="pre-line">女式半透明夜光飞织运动鞋</p>

<p class="pre-line ellipsis">潮流炫酷反光，仿似耀眼星光</p>

</li>

<p class="pre-line">女式布洛克雕花切尔西靴</p>

<p class="pre-line ellipsis">英伦布洛克雕花，经典不老</p>

</li>

<p class="pre-line">女式羊毛内里懒人家居豆豆鞋</p>

<p class="pre-line ellipsis">温暖羊毛内里，秋冬不臃肿</p>

</li>

</ul>

</nav>

<p class="pre-line">女式英伦牛皮防水耐磨工装靴</p>

<p class="pre-line ellipsis">多重防水工艺，舒适干爽出行</p>

</li>

</ul>

</nav>

</div>

</ul>

</div>

<nav>

<ul>

<p class="pre-line">温暖拥抱新生，婴儿社邦棉爬服0-3岁</p>

<p class="pre-line ellipsis">杜邦科技棉填充，保暖贴心</p>

</li>

<p class="pre-line">恣意一夏，防撞鞋头网眼凉鞋22-26码</p>

<p class="pre-line ellipsis">轻量随心动，不到1只鸡蛋重量</p>

</li>

<p class="pre-line">百万级爆款，毛毛虫儿童运动鞋23-35码</p>

<p class="pre-line ellipsis">Q萌毛毛虫造型，个性时尚</p>

</li>

</ul>

</nav>

</div>

</section>

</footer>

</body>

</html>

Css部分

body{

margin: 0;

}

.header-top-div{

height: 52px;

width: 1270px;

background:rgb(59, 57, 57);

margin: 0 auto;

}

.header-top-div>nav>ul>li>a{

color: aliceblue;

}

.header-bottom-div>div>nav>ul>li>a{

color: black;

}

.clearfix{

content: "";

display: table;

clear: both;

}

text-decoration: none;

}

.header-metu-div{

height: 52px;

}

.header-bottom-div{

height: 80px;

text-align: center;

}

.bottom-div{

font-size: 0;

height: 52px;

width: 1270px;

display: inline-block;

position: relative;

}

.bottom-div>nav{

font-size: 20px;

}

.nav-ul-li{

display: block;

padding-right: 10px;

}

.nav-ul-li>a{

display: block;

}

.nav-ul-li>a:hover+.bottom-container{

color: red;

display: block;

position:absolute;

}

.bottom-container{

width:200px;

height: 200px;

background-color: red;

display: none;

}

.bottom-container:hover{

display: block;

position: absolute;

}

.fr{

float: right;

}

.fl{

float: left;

}

.ma1{

padding:0 20px 0;

}

.section-div{

height: 500px;

width: 1270px;

background-color: aqua;

margin: 0 auto;

font-size: 0;

}

.list-div{

background-image: url(./static/img/img4.jpg) ;

background-repeat:no-repeat;

background-size: cover;

}

.list-div>nav>ul{

height: 500px;

width: 20%;

background-color: rgb(81, 85, 81);

}

.li-block{

display: block;

padding: 15px 20px;

font-size: 16px;

color: aliceblue;

}

.item-div{

width: 1270px;

height: 1300px;

margin: 0 auto;

font-size: 0;

}

.item-div::after,.item-div::before{

content: "";

display: table;

}

.item-titl{

font-size: 16px;

height: 80px;

}

.item-ul-li{

font-size: 16px;

display: inline-block;

text-align: center;

padding: 3px;

}

.item-ul{

padding: 0;

}

.item-ul-li>img{

width: 310px;

}

.chearfix::after,.chearfix::before{

content: "";

display: table;

clear: both;

}

.container{

width: 1270px;

display: block;

margin: 0 auto;

}

.titl{

height: 80px;

}

.tag{

color: white;

position: absolute;

top: 50%;

width: 190px;

}

.tag-box-fl{

background-color: black;

line-height: 67px;

width: 77px;

}

.tag-box-fr{

background-color: gray;

line-height: 67px;

width: 113px;

}

.box{

position: relative;

height: 720px;

}

.box>img{

height: 720px;

width: 300px;

}

.box-nav>ul{

padding-left:40px ;

}

.box-ul-li{

padding: 10px;

width: 160px;

display: inline-block;

}

/* .box-ul-li:not(:first-child){

padding-left: 65px;

}

.box-ul-li>img{

height: 160px;

}

.font-red{

color: red;

}

.pre-line{

height: 36px;

text-overflow: ellipsis;

}

.font-gray{

color: gray;

text-overflow: ellipsis;

}

.ellipsis{

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

} */

小宁老师

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫