html ul li 左右两排_HTML,CSS篇：真·伪京东购物车

最新推荐文章于 2022-12-30 11:25:20 发布
最新推荐文章于 2022-12-30 11:25:20 发布
阅读量121 收藏
点赞数
文章标签： html ul li 左右两排

87dcecac-fc18-eb11-8da9-e4434bdf6706.png

本文只是个简单的小栗子，适合前端小白去熟悉，HTML，CSS。

HTML部分

<!DOCTYPE html>

有两个CSS文件

1.CSS常规设置

body,div,ul,h3,li{margin: 0px;padding: 0px;}
body{text-align: center;font-size: 10;}
a{text-decoration: none;}
li{list-style: none;}

2.CSS主体部分

.first_one {
	
	width: 1000px;
	height: 30px;
	background-color: ghostwhite;
	margin: 0 auto;
	
	/*border:1px solid green;*/
	
}
.first_one li{
	float: left;
	
}
.first_one a,.first_two a,.first_two span{
	line-height: 30px;
	color: grey;
font-size: 12px;
margin-left: 10px;
}
.first{
	
	width: 100%;
	height: 30px;
	background-color: ghostwhite;
}
.first_two{
	float: right;
	
}
a:hover{color: red;
text-decoration: underline;}


/*第二部分*/

.two{
	height: 60px;
	margin-left: 320px;
	margin-top: 30px;
	
}
.two img{
	float: left;
	
	
	
}
.two_one{
	float: right;
	margin-top: 25px;
	
	margin-right: 324px;
}
.two_text{
	width: 265px;
	height: 21px;
	border: 3px solid red;
	position: relative;
	left: 5px;
	top: -1px;
}
.two_bu{
	width: 51px;
	height: 29px;
	background-color: red;
	border: 0px;
	color: white;
}
/*第三段*/
.three{
	margin-left: 320px;
	margin-right: 324px;
	height: 30px;
}
.three_one h3{
	font-size: 23px;
	clear: both;
	float: left;
color: red;
}
.three_two{
	line-height: 30px;
	float: right;
	color: gainsboro;
	margin-top: 10px;
}
/*第四部分*/
.four{
	background-color: gainsboro;
	width: 1000px;
	height: 40px;
	margin-left: 320px;
	float: left;
}
.four li{
	float: left;
	font-size: 12px;
	color: gray;
	line-height: 40px;
	
}
.four li:nth-child(1){width: 90px;border-top: 3px solid red;}
.four li:nth-child(2){margin-left: 80px;}
.four li:nth-child(3){margin-left: 400px;}
.four li:nth-child(4){margin-left: 70px;}
.four li:nth-child(5){margin-left: 110px;}
.four li:nth-child(6){margin-left: 50px;}
/*第五部分*/
.five{
	clear: both;
	
	width: 1000px;
	height: 150px;
	margin-left: 320px;
	margin-top: 80px;
	border: 1px solid gray;
	background-color: #FFF4E8;	
	
	
	}
.five_one li{
	margin-top: 30px;
	float: left;
	font-size: 12px;
	color: black;
}
.five li:nth-child(1){width: 30px;}
.five li:nth-child(2){margin-left: 20px;}
.five li:nth-child(3){margin-left: 30px;}
.five li:nth-child(4){margin-left: 50px;}
.five li:nth-child(5){margin-left: 80px;}
.five li:nth-child(6){margin-left: 30px;}
.five li:nth-child(7){margin-left: 50px;}
.five li:nth-child(8){margin-left: 30px;}
.five input{width: 30px;position: relative;left:5px;text-align: center;}
.five_bu{position: relative;left:10px;}
.five a{color: black;}

.six{clear: both;
	
	width: 1000px;
	height: 150px;
	margin-left: 320px;
	margin-top: 30px;
	border: 1px solid gray;
	background-color: #FFF4E8;	
	
}
.six_one li{
	margin-top: 30px;
	float: left;
	font-size: 12px;
	color: black;
}
.six li:nth-child(1){width: 30px;}
.six li:nth-child(2){margin-left: 20px;}
.six li:nth-child(3){margin-left: 80px;}
.six li:nth-child(4){margin-left: 140px;}
.six li:nth-child(5){margin-left: 100px;}
.six li:nth-child(6){margin-left: 30px;}
.six li:nth-child(7){margin-left: 50px;}
.six li:nth-child(8){margin-left: 40px;}
.six input{width: 30px;position: relative;left:5px;text-align: center;}
.six_bu{position: relative;left:10px;}
.six a{color: black;}

/*第六半径*/
.seven{clear: both;
	
	width: 1000px;
	height: 60px;
	margin-left: 320px;
	margin-top: 30px;
	border: 1px solid gray;
	background-color: white;}
.seven li{
	float: left;
	margin-top: 20px;
	float: left;
	font-size: 12px;
	color: gray;
}
.seven li:nth-child(1){width: 10px;}
.seven li:nth-child(2){margin-left: 20px;}
.seven li:nth-child(3){margin-left: 20px;}
.seven li:nth-child(4){margin-left: 20px;}
.seven li:nth-child(5){margin-left: 60px;}
.seven li:nth-child(6){margin-left: 320px;position: relative;top:-10px;font-size: 14px;}
.seven li:nth-child(7){margin-left: 20px;position: relative;top:-10px;font-size: 14px;}
.seven li:nth-child(9){margin-left: 50px;position: relative;top:20px;right:140px;font-size: 14px;}
.seven li:nth-child(8){position: relative;top:-10px;font-size: 14px;}
/*第八部分*/
/*.eirht{
	
}*/
.eirht input{
	width: 114px;
	height: 61px;
	background-color: red;
	
	position: relative;
	top: -20px;
	left: 2px;
	clear: both;
	border: 1px solid red;
	float: right;
	font-size: 16px;
	color:white;
	text-align: center;
}

效果图是这样的

88dcecac-fc18-eb11-8da9-e4434bdf6706.png

关于页面功能的增加请等下次更新。

weixin_39890452
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ul li排版 左右对齐
weixin_34112900的博客
10-11 4055
定义两个ul的class， 一个向左浮动， 一个向右浮动 #navtop{ width:100%; height:46px; background-color:#ecf0f1; text-align:center; overflow:hidden;}.navtop-skin li { float:left; margin:0px; ...
html ul li 左右两排_写HTML上，笔记
weixin_39595487的博客
11-28 778
HTML标签是没有块级元素和内链元素的区别的，在CSS里面才有。HTML无法控制一个元素是内链原素还是块级原素，HTML不管样式，只管内容，定义这是什么东西。html就是告诉浏览器我这一段文字是什么意义。nav标签，navigation导航栏<img> 标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。 <img> ...
html5用ul li调成上下左右两行两列
zhang135687的博客
03-21 7711
建两个ul，定两个class名，分别写不同的float，一个向左浮动一个不浮动，就ok了！！！小白的开端~~
li 标签左右显示[图]
zhu_yanjie的专栏
04-14 2092
看到下面的效果吧我们今天要要做的就是利用css的 ul li标签做出这种左右排列的效果哦, 根据上面的效果我们分析一下,li 点我们要把它改成图片, ul li{ list-style-image:url(num/8.gif); } 下面我们最重要的就是左右分开并在同行的情况怎么实现了. 2008.09.12 fdsafdafd    2008.09.12 li标签列表左右
html ul li 左右两排_后台信息管理HTML静态网页模版
weixin_39711721的博客
11-29 255
今天把压箱底的精品拿出来分享，值得大伙收藏。1套后台信息管理HTML静态网页模版分享！！！本资源整理自互联网，仅供学习交流使用，请勿商用，坚持每日分享一套Java学习资源干货，一起提高，一起进步！！！后台信息管理HTML静态网页模版：微信扫码关注【java小白逆袭之路】公众号(回复html01 获取)资源截图：局部代码：htmlPUBLIC"-//W3C//DTDXHTML...
html ul li 左右两排_用HTML+CSS3写一个会旋转的魔方
weixin_39547392的博客
11-19 153
```<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv=...
HTML+CSS+JS手机端购物车demo
10-18
例如，你可能会看到`<div>`元素用于创建不同的区域，`<ul>`和`<li>`用于展示商品列表，`<button>`用于添加或移除商品到购物车。 CSS（层叠样式表）则是用于美化和布局这些HTML元素。在本项目中，开发者可能使用了...
Health_Food_site:使用html，css和js创建
03-10
例如，`<head>`标签包含元信息，`<body>`标签包含了网页可见内容，如`<h1>`用于大标题，`<p>`用于段落，`<a>`用于链接，`<img>`用于图片展示，`<ul>`和`<li>`则用于无序列表等。HTML5新增了许多元素，如`<header>`、...
HTML+JS+CSS移动端购物车选购界面
01-11
例如，你可以使用`<ul>`和`<li>`来创建商品列表，`<img>`展示商品图片，`<input type="number">`来设置数量选择器，以及`<button>`来定义操作按钮。 接着，JavaScript是赋予网页动态功能的关键，它能够处理用户交互...
html+css几行代码解决京东购物界面.zip
07-10
每个部分可能由不同的HTML元素组成，如`<div>`用于分组内容，`<a>`用于链接，`<img>`展示商品图片，`<ul>`和`<li>`组合展示商品列表，以及`<form>`用于实现搜索和提交订单等功能。 CSS则是给HTML穿上华丽外衣的关键...
Carrito-de-Compras:购物车使用JavaScript-HTML-CSS
05-27
例如，我们可以创建`<div>`元素来分隔不同的部分，`<ul>`和`<li>`来展示商品列表，`<form>`来处理用户输入，以及`<button>`来触发JavaScript事件。 **CSS（层叠样式表）**： CSS则负责控制页面的外观和布局。它使...
在ul中使li水平布局的两种方法
09-25
li水平布局在实际中使用的比较广泛，实现方法也有很多，下面为大家介绍下比较实现的几种方法，有此需求的朋友可以参考下，希望对大家有所帮助
css选择器
qq_39542702的博客
07-21 187
css样式表基础 基本语法： 选择器（即修饰对象）{ 对象的属性1：属性值1； 对象的属性2：属性值2； } css选择器： 1.标签选择器 标签名{} 2.Id选择器：同一个页面不能出现相同的ID #id名{} 3.类选择器：给当前页面某一类标签添加样式，可以存在多个相同名称的类 4.特殊选择择器 交集： 并集： 后代：用空格表示 子代：用>表示
在html中使li左右排列
weixin_35752645的博客
12-30 1513
在 HTML 中使用 li 左右排列，你需要使用 CSS 来设置。 首先，你需要在 HTML 中给你的列表元素(ul 或 ol)设置一个类名或 id，然后在 CSS 中使用这个类名或 id 来选择该列表元素。 例如，假设你的列表元素是一个 ul，并且你给它设置了一个类名为 "my-list"，那么你可以在 CSS 中使用以下代码来设置 li 元素的排列方式： .my-list li { dis...
css中用li做图片多行，两侧图片各靠div左右边，中间等距
qq_38106898的博客
04-12 568
<!DOCTYPE html> <html> <head></head> <body> <htmllang="en"> <metacharset="utf-8"> <title>Title</title> <style> *{margin: 0;padding: 0;} .ru{ width: 100%; hei
js-5秒之后跳转页面
qq_41670147的博客
12-03 1644
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
html li 填充,html – ul列中的2列li,不会填充100％的ul宽度
weixin_33564753的博客
06-21 451
由于您正在处理内联块元素,因此需要将父元素的font-size设置为0,以便删除空格间隙.(重置比子元素的font-size).现在,有三种方法可以做到：解决方案1盒大小：边框;*{margin:0;padding:0;}.latest-posts .latest-posts-widget ul {border: #000 solid 1px;font-size:0;}.latest-posts ...
html怎么实现列表两排,css – 如何在两行中显示列表？
weixin_36310976的博客
06-11 985
这是一个使用jQuery的简单方法.我知道有人提到需要一种CSS方式,但是如果有人想提到这个问题,这只是为了将来的参考.获取LI项目的数量并将其除以行数,并将该值设置为column-count属性.jQuery的$(document).ready(function() {var numitems = $("#myList li").length;$("ul#myList").css("colum...
HTML实现两行两列单元表
代码人生的博客
04-23 6351
这里是小编学习HTML时候老师布置的一个作业： 我们接下来看一下对应实现的源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页设计</title> </head> <body> <table width="400px" align="center"border="2" cellpad
html➕css仿小米商城购物车
最新发布
06-22
创建一个HTML和CSS的简单购物车模拟器，你可以使用基本的HTML结构来构建页面布局，结合CSS来美化外观，使其类似小米商城的购物车。以下是一个基础示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米商城购物车模拟</title> <style> body { font-family: Arial, sans-serif; } .cart { background-color: #f7f7f7; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .cart-header { display: flex; justify-content: space-between; align-items: center; } .cart-header h2 { margin: 0; } .cart-items { list-style-type: none; padding: 0; } .item { display: flex; margin-bottom: 15px; } .item img { width: 50px; height: 50px; margin-right: 10px; } .item-name, .item-price { font-weight: bold; } .cart-footer { text-align: right; } </style> </head> <body> <div class="cart"> <div class="cart-header"> <h2>我的购物车</h2> <a href="#" class="cart-empty">清空购物车</a> </div> <ul class="cart-items"> <!-- 添加商品项 --> <li class="item"> <img src="product1.jpg" alt="产品1"> <span class="item-name">产品1</span> <span class="item-price">￥199.00</span> <button class="remove-item">移除</button> </li> <!-- 添加更多商品项 --> </ul> <div class="cart-footer"> <p>总计：￥<span id="total-price">0.00</span></p> </div> </div> <script> // 假设这里有一个数组存储购物车商品数据，需要添加计算总价格的逻辑 const cartItems = [ { name: '产品1', price: 199 }, { name: '产品2', price: 299 }, // ... ]; // 在此处编写代码，动态渲染商品并计算总价 function renderCart() { let totalPrice = 0; cartItems.forEach(item => { totalPrice += item.price; const li = document.createElement('li'); li.classList.add('item'); li.innerHTML = ` <img src="${item.image}" alt="${item.name}"> <span class="item-name">${item.name}</span> <span class="item-price">￥${item.price}</span> <button class="remove-item">移除</button> `; li.querySelector('.remove-item').addEventListener('click', () => { // 移除商品逻辑 }); document.querySelector('.cart-items').appendChild(li); }); document.getElementById('total-price').textContent = totalPrice; } renderCart(); </script> </body> </html> ```

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值